// components/layout.jsx — DashboardHeader, TabNav.
// Depends on: React (global), StatusBadge

const MAIN_TABS = [
  { id: "home", label: "Home" },
  { id: "overview", label: "Overview" },
  { id: "projects", label: "Projects" },
  { id: "tasks", label: "Tasks" },
  { id: "voice", label: "Voice" },
  { id: "accounts", label: "Accounts" },
  { id: "models", label: "Models" },
  { id: "vms", label: "VMs" },
  { id: "tools", label: "Tools" },
  { id: "environments", label: "Środowiska" },
  { id: "users", label: "Users" },
  { id: "setup", label: "Setup" },
  { id: "integrations", label: "Integrations" },
  { id: "diagnostics", label: "Diagnostics" },
  { id: "system", label: "System" },
];

const ALL_TAB_IDS = MAIN_TABS.map(t => t.id);

function DashboardHeader({ connected, lastRefresh, health, onRefresh, theme, onToggleTheme }) {
  const isDark = theme === "dark";
  const headerClass = isDark ? "bg-slate-900 border-slate-700" : "bg-white border-gray-200";
  const titleClass = isDark ? "text-slate-100" : "text-gray-900";
  const subtitleClass = isDark ? "text-slate-400" : "text-gray-500";
  const themeLabel = isDark ? "dark" : "white";
  const toggleClass = isDark
    ? "border-slate-700 bg-slate-800 text-slate-100 hover:bg-slate-700"
    : "border-gray-200 bg-gray-100 text-gray-700 hover:bg-gray-200";
  const refreshClass = isDark
    ? "bg-slate-800 text-slate-100 hover:bg-slate-700"
    : "bg-gray-100 text-gray-700 hover:bg-gray-200";
  return (
    <header className={`border-b px-6 py-3 transition-colors ${headerClass}`}>
      <div className="flex items-center justify-between max-w-7xl mx-auto">
        <div className="flex items-center gap-3">
          <div className="w-8 h-8 bg-gradient-to-br from-blue-600 to-indigo-700 rounded-lg flex items-center justify-center">
            <span className="text-white text-xs font-bold">AI</span>
          </div>
          <div>
            <h1 className={`text-lg font-semibold ${titleClass}`}>Proxym Dashboard</h1>
            <p className={`text-xs ${subtitleClass}`}>Intelligent AI Proxy</p>
          </div>
        </div>
        <div className="flex items-center gap-3">
          <button
            type="button"
            onClick={onToggleTheme}
            className={`px-3 py-1.5 rounded-lg border text-xs font-medium transition-colors ${toggleClass}`}
            title="Przełącz wygląd white/dark"
            aria-pressed={isDark}
          >
            <span className="mr-1">{isDark ? "🌙" : "☀️"}</span>
            Wygląd: {themeLabel}
          </button>
          <span className={`text-[10px] ${isDark ? "text-slate-500" : "text-gray-400"}`} title="Press ? for all shortcuts">⌨ h/p/t/k/q</span>
          <StatusBadge ok={connected} label={connected ? "Connected" : "Disconnected"} />
          <span className={`text-xs ${isDark ? "text-slate-400" : "text-gray-400"}`}>{lastRefresh?.toLocaleTimeString()}</span>
          <button
            type="button"
            onClick={onRefresh}
            className={`px-2 py-1 rounded text-xs transition-colors ${refreshClass}`}
          >
            Refresh
          </button>
        </div>
      </div>
    </header>
  );
}

function TabNav({ tab, onTabChange, theme }) {
  const isDark = theme === "dark";
  const navClass = isDark ? "bg-slate-900 border-slate-700" : "bg-white border-gray-200";
  const activeTabClass = isDark ? "border-sky-400 text-sky-300" : "border-blue-600 text-blue-600";
  const inactiveTabClass = isDark ? "border-transparent text-slate-400 hover:text-slate-200" : "border-transparent text-gray-500 hover:text-gray-700";
  return (
    <nav className={`border-b px-6 transition-colors ${navClass}`}>
      <div className="flex flex-wrap gap-1 max-w-7xl mx-auto items-center py-1">
        {MAIN_TABS.map(t => (
          <button key={t.id} onClick={() => { onTabChange(t.id); }}
            className={`px-4 py-2.5 text-sm font-medium border-b-2 transition-colors ${
              tab === t.id
                ? activeTabClass
                : inactiveTabClass
            }`}>{t.label}</button>
        ))}
      </div>
    </nav>
  );
}
