<Button className="whitespace-nowrap">Надіслати</Button>
        </div>
      </CardContent>
    </Card>
  );
}

function ActivityFeed() {
  const rows = [
    { t: "ingest.completed", d: "USDO готово", ts: "09:15" },
    { t: "message.created", d: "#general", ts: "09:12" },
    { t: "vote.finalized", d: "Постанова #12", ts: "08:55" },
    { t: "payment.sent", d: "Reward 2.5 μUTIL", ts: "08:40" },
  ];
  return (
    <Card className="rounded-2xl h-full">
      <CardHeader className="py-3"><CardTitle className="text-sm">Стрічка подій</CardTitle></CardHeader>
      <CardContent>
        <ul className="space-y-2 text-sm">
          {rows.map((r, i) => (
            <li key={i} className="flex items-center gap-2">
              <Activity className="h-4 w-4 text-slate-500"/>
              <span className="font-medium">{r.t}</span>
              <span className="text-slate-500">— {r.d}</span>
              <span className="ml-auto text-xs text-slate-400">{r.ts}</span>
            </li>
          ))}
        </ul>
      </CardContent>
    </Card>
  );
}

function AgentGraph() {
  // Minimal static SVG graph placeholder
  return (
    <Card className="rounded-2xl h-full">
      <CardHeader className="py-3"><CardTitle className="text-sm">Граф агентів</CardTitle></CardHeader>
      <CardContent>
        <svg viewBox="0 0 400 220" className="w-full h-48">
          <defs>
            <filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
              <feDropShadow dx="0" dy="1" stdDeviation="2" floodOpacity="0.2" />
            </filter>
          </defs>
          <g filter="url(#shadow)">
            <circle cx="200" cy="110" r="28" className="fill-slate-900" />
            <text x="200" y="115" textAnchor="middle" className="fill-white text-xs">Orch</text>
            {[
              { x: 80, y: 40, t: "Parser" },
              { x: 320, y: 40, t: "KB" },
              { x: 80, y: 180, t: "Wallet" },
              { x: 320, y: 180, t: "DAO" },
            ].map((n, i) => (
              <g key={i}>
                <line x1="200" y1="110" x2={n.x} y2={n.y} stroke="#94a3b8" />
                <circle cx={n.x} cy={n.y} r="22" className="fill-white stroke-slate-300" />
                <text x={n.x} y={n.y + 4} textAnchor="middle" className="fill-slate-700 text-xs">{n.t}</text>
              </g>
            ))}
          </g>
        </svg>
      </CardContent>
    </Card>
  );
}

function HomeOrchestrator() {
  return (
    <div className="p-4 space-y-4">
      <HealthGrid />
      <div className="grid grid-cols-1 xl:grid-cols-2 gap-4">
        <OrchestratorChat />
        <div className="grid grid-rows-2 gap-4">
          <ActivityFeed />
          <TasksTable />
        </div>
      </div>
      <AgentGraph />
    </div>
  );
}

function Placeholder({ title }: { title: string }) {
  return (
    <div className="p-6 text-sm text-slate-600">
      <p className="mb-2">Розділ: <span className="font-medium">{title}</span></p>
      <p>Тут буде детальний екран модуля. Структура готова до підключення реальних даних та маршрутів.</p>
    </div>
  );
}

export default function OrchestratorLayout() {
  const [active, setActive] = React.useState<ModuleKey>("home");
  const [orgId, setOrgId] = React.useState<string | null>(null); // null = ще немає DAO/спільноти
  const [agentReady, setAgentReady] = React.useState<boolean>(false);
  const [installing, setInstalling] = React.useState<boolean>(false);
  const [progress, setProgress] = React.useState<number>(0);
  const [modelProfile, setModelProfile] = React.useState<string>('Base');
  const [indexSize, setIndexSize] = React.useState<string>('500MB');
  const [netOnline, setNetOnline] = React.useState<boolean>(typeof navigator !== 'undefined' ? navigator.onLine : true);
  const [orchOk, setOrchOk] = React.useState<boolean>(true);

React.useEffect(() => {
    const on = () => setNetOnline(true);
    const off = () => setNetOnline(false);
    window.addEventListener('online', on);
    window.addEventListener('offline', off);
    const ping = setInterval(() => {
      // TODO: replace with real /healthz ping
      setOrchOk((v) => (Math.random() > 0.05));
    }, 5000);
    return () => { window.removeEventListener('online', on); window.removeEventListener('offline', off); clearInterval(ping); };
  }, []);

// Симуляція інсталяції агента/моделі
  const handleInstallAgent = () => {
    if (installing || agentReady) return;
    setInstalling(true);
    setProgress(0);
    const timer = setInterval(() => {
      setProgress((p) => {
        const next = Math.min(100, p + Math.random() * 18 + 5);
        if (next >= 100) {
          clearInterval(timer);
          setInstalling(false);
          setAgentReady(true);
        }
        return next;
      });
    }, 400);
  };

// Роутінг після вибору режиму — встановлюємо orgId і відкриваємо домашню
  const goReady = (id: string) => { setOrgId(id); setActive('home'); };

const content = () => {<number>(0);

const content = () => {
    if (!orgId) {
      return (
        <StartScreen
          onCreateDAO={() => goReady('dao-created')}
          onJoinDAO={() => goReady('dao-joined')}
          onSolo={() => goReady('solo-mode')}
          agentReady={agentReady}
          onInstallAgent={handleInstallAgent}
          installing={installing}
          progress={progress}
          modelProfile={modelProfile}
          setModelProfile={setModelProfile}
          indexSize={indexSize}
          setIndexSize={setIndexSize}
          progress={progress}
        />
      );
    }

switch (active) {
      case "home":
        return <HomeOrchestrator />;
      case "messenger":
        return <Placeholder title="Чати та канали" />;
      case "projects":
        return <Placeholder title="Проєкти" />;
      case "memory":
        return <Placeholder title="База знань" />;
      case "parser":
        return <Placeholder title="Парсер документів" />;
      case "graph":
        return <Placeholder title="Граф знань" />;
      case "meetings":
        return <Placeholder title="Зустрічі" />;
      case "agents":
        return <Placeholder title="Агенти" />;
      case "training":
        return <Placeholder title="Навчальний кабінет" />;
      case "dao":
        return <Placeholder title="Голосування / DAO" />;
      case "treasury":
        return <Placeholder title="Фінанси / Казна" />;
      case "integrations":
        return <Placeholder title="Інтеграції" />;
      case "market":
        return <Placeholder title="Маркетплейс" />;
      case "analytics":
        return <Placeholder title="Аналітика" />;
      case "notifications":
        return <Placeholder title="Сповіщення" />;
      case "admin":
        return <Placeholder title="Адмін-панель" />;
      case "creative":
        return <Placeholder title="Креативна студія" />;
      case "security":
        return <Placeholder title="Безпека / Аудит" />;
      case "profile":
        return <Placeholder title="Профіль" />;
    }
  };

return (
    <div className="h-[100vh] w-full grid grid-cols-[18rem_1fr] bg-slate-50 text-slate-900">
      <Sidebar active={active} onSelect={setActive} />
      <main className="flex flex-col">
        <Topbar netOnline={netOnline} orchOk={orchOk} />
        <div className="flex-1 overflow-auto">{content()}</div>
      </main>
    </div>
  );
}