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

const MAIN_TABS = [
  { id: "home", label: "Home" },
  { id: "projects", label: "Projects" },
  { id: "tasks", label: "Tasks" },
  { id: "human", label: "Human Tasks" },
  { id: "voice", label: "Voice" },
  { id: "accounts", label: "Accounts" },
  { id: "models", label: "Models" },
  { id: "vms", label: "VMs" },
  { id: "tickets", label: "Tickets" },
  { id: "tools", label: "Tools" },
  { id: "environments", label: "Środowiska" },
  { id: "users", label: "Users" },
  { id: "setup", label: "Setup" },
  { id: "system", label: "System" },
];

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

function DashboardHeader({ connected, lastRefresh, health, onRefresh }) {
  return (
    <header className="bg-white border-b border-gray-200 px-6 py-3">
      <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 text-gray-900">Proxym Dashboard</h1>
            <p className="text-xs text-gray-500">Intelligent AI Proxy</p>
          </div>
        </div>
        <div className="flex items-center gap-4">
          <StatusBadge ok={connected} label={connected ? "Connected" : "Disconnected"} />
          <span className="text-xs text-gray-400">{lastRefresh?.toLocaleTimeString()}</span>
          <button onClick={onRefresh} className="px-2 py-1 bg-gray-100 rounded text-xs hover:bg-gray-200">Refresh</button>
        </div>
      </div>
    </header>
  );
}

function TabNav({ tab, onTabChange }) {
  return (
    <nav className="bg-white border-b border-gray-200 px-6">
      <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
                ? "border-blue-600 text-blue-600"
                : "border-transparent text-gray-500 hover:text-gray-700"
            }`}>{t.label}</button>
        ))}
      </div>
    </nav>
  );
}
