"use client";
// 回响星核 / Echo Nexus — 技术树
import { useGameStore } from "@/store/gameStore";
import { TECH_TREE, TECH_BRANCH_META, formatNum } from "@/lib/game/config";
import { sfx } from "@/hooks/useAudio";
import { Card } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import {
  Pickaxe,
  ScanLine,
  Rocket,
  BookOpen,
  Check,
  Lock,
} from "lucide-react";
import type { TechBranch } from "@/lib/game/types";

const ICONS: Record<string, React.ComponentType<{ className?: string }>> = {
  Pickaxe,
  ScanLine,
  Rocket,
  BookOpen,
};

const BRANCH_COLOR: Record<string, string> = {
  mining: "#34d399",
  decoding: "#fb7185",
  expedition: "#fbbf24",
  narrative: "#e879f9",
};

export function TechTree() {
  const tech = useGameStore((s) => s.tech);
  const insights = useGameStore((s) => s.insights);
  const buyTech = useGameStore((s) => s.buyTech);

  const branches: TechBranch[] = ["mining", "decoding", "expedition", "narrative"];

  return (
    <div className="flex flex-col gap-3 h-full">
      <div className="flex items-center justify-between">
        <h3 className="text-sm font-semibold">技术树</h3>
        <span className="text-xs text-muted-foreground">
          洞见 <span className="text-amber-300 font-mono">{formatNum(insights)}</span>
        </span>
      </div>

      <div className="flex-1 overflow-y-auto echo-scroll pr-1 space-y-3">
        {branches.map((b) => {
          const meta = TECH_BRANCH_META[b];
          const Icon = ICONS[meta.icon];
          const color = BRANCH_COLOR[b];
          const nodes = TECH_TREE.filter((t) => t.branch === b);
          return (
            <div key={b}>
              <div className="flex items-center gap-2 mb-1.5 px-1">
                <Icon className="h-3.5 w-3.5" />
                <span className="text-xs font-medium" style={{ color }}>
                  {meta.name}
                </span>
                <span className="text-[10px] text-muted-foreground/70">
                  {meta.desc}
                </span>
              </div>
              <div className="grid gap-1.5">
                {nodes.map((node) => {
                  const owned = (tech[node.id] ?? 0) >= 1;
                  const affordable = insights >= node.cost;
                  return (
                    <Card
                      key={node.id}
                      className={`p-2.5 transition-all duration-200 ${
                        owned
                          ? "bg-white/5 border-white/10"
                          : affordable
                          ? "bg-black/30 border-white/15 hover:border-white/30 cursor-pointer"
                          : "bg-black/20 border-white/5 opacity-60"
                      }`}
                      style={
                        owned
                          ? { boxShadow: `inset 0 0 0 1px ${color}44, 0 0 12px ${color}22` }
                          : undefined
                      }
                    >
                      <div className="flex items-center gap-2">
                        <div className="flex-1 min-w-0">
                          <div className="flex items-center gap-1.5">
                            <span
                              className="text-xs font-semibold truncate"
                              style={{ color: owned ? color : undefined }}
                            >
                              {node.name}
                            </span>
                            {owned && (
                              <Check className="h-3 w-3" style={{ color }} />
                            )}
                          </div>
                          <p className="text-[10px] text-muted-foreground/80 truncate">
                            {node.desc}
                          </p>
                        </div>
                        {!owned && (
                          <Button
                            size="sm"
                            variant={affordable ? "default" : "ghost"}
                            disabled={!affordable}
                            onClick={() => {
                              if (buyTech(node.id)) sfx("techBuy");
                            }}
                            className="h-7 px-2 text-[11px] shrink-0"
                            style={
                              affordable
                                ? {
                                    background: `${color}22`,
                                    border: `1px solid ${color}66`,
                                    color,
                                  }
                                : undefined
                            }
                          >
                            <Lock className="h-2.5 w-2.5 mr-1" />
                            {node.cost}
                          </Button>
                        )}
                      </div>
                    </Card>
                  );
                })}
              </div>
            </div>
          );
        })}
      </div>
      <style jsx global>{`
        .echo-scroll::-webkit-scrollbar { width: 5px; }
        .echo-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 3px; }
        .echo-scroll::-webkit-scrollbar-track { background: transparent; }
      `}</style>
    </div>
  );
}