"use client";

// The dashboard's four-square tools launcher. Same six tools as the old shell's
// SecondaryNav, but instead of navigating to old routes it opens them as
// in-dashboard panels (ToolPanel) via onOpen — so you never leave the new
// interface.

import { useState } from "react";
import { Blocks, CreditCard, LayoutGrid, Share2, ShieldCheck, Users, Zap } from "lucide-react";

import type { ToolKey } from "./ToolPanel";

const ITEMS: { key: ToolKey; label: string; icon: typeof Zap }[] = [
  { key: "skills", label: "Skills", icon: Zap },
  { key: "apps", label: "Apps", icon: Blocks },
  { key: "topologies", label: "Topologies", icon: Share2 },
  { key: "approvals", label: "Approvals", icon: ShieldCheck },
  { key: "team", label: "Team", icon: Users },
  { key: "credits", label: "Credits", icon: CreditCard },
];

export function ToolsLauncher({ onOpen }: { onOpen: (t: ToolKey) => void }) {
  const [open, setOpen] = useState(false);
  return (
    <div style={{ position: "relative", display: "flex", justifyContent: "center" }}>
      <button
        type="button" title="Tools" aria-label="Tools" aria-expanded={open}
        onClick={() => setOpen((v) => !v)}
        style={{ width: 36, height: 36, borderRadius: 9, border: "1px solid rgba(255,255,255,.08)", background: open ? "rgba(255,255,255,.06)" : "transparent", display: "flex", alignItems: "center", justifyContent: "center", color: open ? "#f3f3f5" : "#6a6a72", cursor: "pointer" }}
      >
        <LayoutGrid size={18} />
      </button>
      {open ? (
        <>
          <button type="button" aria-label="Close" onClick={() => setOpen(false)} style={{ position: "fixed", inset: 0, zIndex: 40, background: "transparent", border: 0 }} />
          <nav style={{ position: "absolute", bottom: 0, left: "100%", marginLeft: 8, zIndex: 50, width: 178, display: "flex", flexDirection: "column", gap: 2, borderRadius: 14, background: "#141417", border: "1px solid rgba(255,255,255,.1)", padding: 8, boxShadow: "0 18px 50px rgba(0,0,0,.55)" }}>
            {ITEMS.map((it) => (
              <button
                key={it.key} type="button"
                onClick={() => { onOpen(it.key); setOpen(false); }}
                style={{ display: "flex", alignItems: "center", gap: 10, padding: "8px 10px", borderRadius: 9, border: 0, background: "transparent", color: "#cfcfd5", fontSize: 13, fontWeight: 500, cursor: "pointer", textAlign: "left" }}
                onMouseEnter={(e) => (e.currentTarget.style.background = "rgba(255,255,255,.05)")}
                onMouseLeave={(e) => (e.currentTarget.style.background = "transparent")}
              >
                <it.icon size={16} style={{ color: "#8a8a92" }} /> {it.label}
              </button>
            ))}
          </nav>
        </>
      ) : null}
    </div>
  );
}