import { useState } from "react";
import { Boxes, Search, PlusCircle, Code2 } from "lucide-react";
import Home from "./components/Home";
import ProductView from "./components/ProductView";
import Contribute from "./components/Contribute";
import ApiDocs from "./components/ApiDocs";

type View =
  | { name: "home" }
  | { name: "product"; id: string }
  | { name: "contribute" }
  | { name: "api" };

export default function App() {
  const [view, setView] = useState<View>({ name: "home" });

  return (
    <div className="min-h-full flex flex-col">
      <header className="bg-white border-b">
        <div className="max-w-5xl mx-auto px-4 h-14 flex items-center justify-between">
          <button
            className="flex items-center gap-2 font-semibold text-gray-800"
            onClick={() => setView({ name: "home" })}
          >
            <Boxes className="w-6 h-6 text-emerald-600" />
            天工<span className="text-gray-400 font-normal text-sm">商品档案公共仓</span>
          </button>
          <nav className="flex items-center gap-1 text-sm">
            <button
              className={`px-3 py-1.5 rounded-md flex items-center gap-1.5 ${
                view.name === "home" ? "bg-emerald-50 text-emerald-700" : "text-gray-600 hover:bg-gray-100"
              }`}
              onClick={() => setView({ name: "home" })}
            >
              <Search className="w-4 h-4" /> 检索
            </button>
            <button
              className={`px-3 py-1.5 rounded-md flex items-center gap-1.5 ${
                view.name === "contribute" ? "bg-emerald-50 text-emerald-700" : "text-gray-600 hover:bg-gray-100"
              }`}
              onClick={() => setView({ name: "contribute" })}
            >
              <PlusCircle className="w-4 h-4" /> 贡献档案
            </button>
            <button
              className={`px-3 py-1.5 rounded-md flex items-center gap-1.5 ${
                view.name === "api" ? "bg-emerald-50 text-emerald-700" : "text-gray-600 hover:bg-gray-100"
              }`}
              onClick={() => setView({ name: "api" })}
            >
              <Code2 className="w-4 h-4" /> API
            </button>
          </nav>
        </div>
      </header>

      <main className="flex-1 max-w-5xl w-full mx-auto px-4 py-6">
        {view.name === "home" && (
          <Home
            onOpen={(id) => setView({ name: "product", id })}
            onContribute={() => setView({ name: "contribute" })}
            onApi={() => setView({ name: "api" })}
          />
        )}
        {view.name === "product" && (
          <ProductView id={view.id} onBack={() => setView({ name: "home" })} />
        )}
        {view.name === "contribute" && (
          <Contribute onDone={() => setView({ name: "home" })} />
        )}
        {view.name === "api" && <ApiDocs />}
      </main>

      <footer className="border-t bg-white">
        <div className="max-w-5xl mx-auto px-4 py-4 text-xs text-gray-400 leading-relaxed">
          天工商品档案公共仓 是公益性「商品事实库」，仅收录客观商品信息（条码、品牌、品类、营养、官方建议零售价快照等），不含任何购买/交易功能。
          公众投稿须经人工审核后方可收纳。
          <button onClick={() => setView({ name: "api" })} className="ml-1 text-emerald-600 hover:underline">
            API 调用说明
          </button>
          <div className="mt-2">
            <a
              href="https://beian.miit.gov.cn/"
              target="_blank"
              rel="noreferrer"
              className="hover:text-gray-600"
            >
              鲁ICP备2025185218号-6
            </a>
          </div>
        </div>
      </footer>
    </div>
  );
}