"use client";

// ============================================================
// Dashboard shell — premium dark theme. Keeps the sidebar +
// header and swaps the inner content. Profile / Support / Rules
// render real views; other workspace modules show a placeholder.
// ============================================================

import { useEffect, useState } from "react";
import { Sidebar, NAV_ITEMS } from "./sidebar";
import { Topbar } from "./topbar";
import { ToastProvider, PageHead, Btn, Icon } from "./ui";
import { Profile } from "./profile";
import { Support } from "./support";
import { Rules } from "./rules";
import { AiAssistant } from "./ai-assistant";
import { TeamManagement } from "./team-management";
import { Messenger } from "./messenger";
import { Inbox } from "./inbox";
import { Leads } from "./leads";
import { Verify } from "./verify";
import "../../app/dashboard/dashboard.css";

export function Dashboard() {
  const [theme, setTheme] = useState<"dark" | "light">("dark");
  const [active, setActive] = useState("dashboard");

  useEffect(() => {
    // Sync the persisted theme from localStorage (an external system) on mount.
    // eslint-disable-next-line react-hooks/set-state-in-effect
    try { const t = localStorage.getItem("lup_dash_theme"); if (t === "light" || t === "dark") setTheme(t); } catch {}
  }, []);
  function toggle() {
    setTheme((t) => { const n = t === "dark" ? "light" : "dark"; try { localStorage.setItem("lup_dash_theme", n); } catch {} return n; });
  }

  const item = NAV_ITEMS.find((i) => i.key === active);
  const title = item?.label ?? "Dashboard";
  const subtitle = item?.subtitle ?? "Workspace module";

  return (
    <div className="dash-root" data-theme={theme}>
      <Sidebar active={active} onSelect={setActive} />
      <div className="dash-main">
        <Topbar theme={theme} onToggle={toggle} title={title} subtitle={subtitle} />
        <div className="dash-content">
          <ToastProvider>
            {active === "profile" ? <Profile />
              : active === "support" ? <Support />
              : active === "rules" ? <Rules />
              : active === "ai" ? <AiAssistant />
              : active === "messenger" ? <Messenger />
              : active === "inbox" ? <Inbox />
              : active === "leads" ? <Leads />
              : active === "verify" ? <Verify />
              : active === "team" ? <TeamManagement />
              : <ComingSoon title={title} icon={item?.icon ?? "dashboard"} onGo={setActive} />}
          </ToastProvider>
        </div>
      </div>
    </div>
  );
}

// Placeholder for workspace modules that don't have a view yet — keeps the
// full navigation coherent and points users to the live sections.
function ComingSoon({ title, icon, onGo }: { title: string; icon: string; onGo: (k: string) => void }) {
  return (
    <div className="view">
      <PageHead eyebrow="Workspace" title={title} subtitle="This module is part of the LynkedUp Pro workspace." icon={icon} />
      <div className="card coming-soon">
        <span className="coming-soon-ic"><Icon name={icon} size={34} /></span>
        <h3>{title} is coming soon</h3>
        <p>This area is reserved for the {title} module. In the meantime, the account experience is fully built out.</p>
        <div className="coming-soon-actions">
          <Btn icon="user" onClick={() => onGo("profile")}>Open Profile</Btn>
          <Btn variant="outline" icon="chat" onClick={() => onGo("support")}>Support Center</Btn>
          <Btn variant="ghost" icon="check-circle" onClick={() => onGo("rules")}>Rules</Btn>
        </div>
      </div>
    </div>
  );
}