import React from "react";
import {
  Activity,
  AlertTriangle,
  CheckCircle2,
  Cpu,
  Database,
  GitBranch,
  LineChart,
  MessageSquare,
  Settings,
  ShieldCheck,
  User,
  Vote,
  Wallet,
  Zap,
  Bot,
  Boxes,
  BookOpen,
  FileText,
  Network,
  Video,
  Palette,
  Bell,
  Store,
  Plug,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Badge } from "@/components/ui/badge";
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
import { Progress } from "@/components/ui/progress";

// ---------- Utility types ----------
type ModuleKey =
  | "home"
  | "messenger"
  | "projects"
  | "memory"
  | "parser"
  | "graph"
  | "meetings"
  | "agents"
  | "training"
  | "dao"
  | "treasury"
  | "integrations"
  | "market"
  | "analytics"
  | "notifications"
  | "admin"
  | "creative"
  | "security"
  | "profile";

const MODULES: Array<{
  key: ModuleKey;
  label: string;
  icon: React.ElementType;
}> = [
  { key: "home", label: "Головна / Оркестратор", icon: Cpu },
  { key: "messenger", label: "Чати та канали", icon: MessageSquare },
  { key: "projects", label: "Проєкти", icon: Boxes },
  { key: "memory", label: "База знань", icon: BookOpen },
  { key: "parser", label: "Парсер документів", icon: FileText },
  { key: "graph", label: "Граф знань", icon: Network },
  { key: "meetings", label: "Зустрічі", icon: Video },
  { key: "agents", label: "Агенти", icon: Bot },
  { key: "training", label: "Навчальний кабінет", icon: GitBranch },
  { key: "dao", label: "Голосування / DAO", icon: Vote },
  { key: "treasury", label: "Фінанси / Казна", icon: Wallet },
  { key: "integrations", label: "Інтеграції", icon: Plug },
  { key: "market", label: "Маркетплейс", icon: Store },
  { key: "analytics", label: "Аналітика", icon: LineChart },
  { key: "notifications", label: "Сповіщення", icon: Bell },
  { key: "admin", label: "Адмін-панель", icon: Settings },
  { key: "creative", label: "Креативна студія", icon: Palette },
  { key: "security", label: "Безпека / Аудит", icon: ShieldCheck },
  { key: "profile", label: "Профіль", icon: User },
];

// ---------- Reusable UI blocks ----------
function Sidebar({ active, onSelect }: { active: ModuleKey; onSelect: (k: ModuleKey) => void }) {
  return (
    <aside className="h-full w-72 border-r bg-white/60 backdrop-blur-sm">
      <div className="p-4 border-b flex items-center gap-2">
        <Cpu className="h-5 w-5" />
        <span className="font-semibold">MicroDAO</span>
        <Badge variant="secondary" className="ml-auto">orchestrator</Badge>
      </div>
      <nav className="p-2 space-y-1 overflow-y-auto h-[calc(100%-3.5rem)]">
        {MODULES.map((m) => (
          <button
            key={m.key}
            onClick={() => onSelect(m.key)}
            className={`w-full flex items-center gap-3 rounded-xl px-3 py-2 hover:bg-slate-100 transition ${
              active === m.key ? "bg-slate-900 text-white hover:bg-slate-900" : ""
            }`}
            aria-current={active === m.key}
          >
            <m.icon className="h-4 w-4" />
            <span className="text-sm text-left truncate">{m.label}</span>
            {m.key === "notifications" && (
              <Badge className={`ml-auto ${active === m.key ? "bg-white text-slate-900" : ""}`}>3</Badge>
            )}
          </button>
        ))}
      </nav>
    </aside>
  );
}

function Topbar({ netOnline, orchOk }: { netOnline: boolean; orchOk: boolean }) {
  return (
    <div className="h-14 border-b flex items-center gap-3 px-4 bg-white/70 backdrop-blur">
      <Input placeholder="Пошук по всіх модулях" className="max-w-md" />
      <Tabs defaultValue="dao" className="ml-2">
        <TabsList>
          <TabsTrigger value="private">Private</TabsTrigger>
          <TabsTrigger value="dao">DAO</TabsTrigger>
          <TabsTrigger value="public">Public</TabsTrigger>
        </TabsList>
      </Tabs>
      <div className="ml-auto flex items-center gap-2">
        <Badge variant="outline" className="flex items-center gap-1">
          <Zap className={`h-4 w-4 ${netOnline ? 'text-emerald-600' : 'text-amber-600'}`}/>
          {netOnline ? 'Online' : 'Offline'}
        </Badge>
        <Badge variant="outline" className="flex items-center gap-1">
          <Database className={`h-4 w-4 ${orchOk ? 'text-emerald-600' : 'text-amber-600'}`}/>
          Orchestrator {orchOk ? 'ok' : 'unreachable'}
        </Badge>
        <Button variant="secondary" size="sm" className="gap-2"><Settings className="h-4 w-4"/>Налаштування</Button>
      </div>
    </div>
  );
}

function HealthGrid() {
  const items = [
    { title: "Messenger", ok: true },
    { title: "Parser", ok: false },
    { title: "KB Core", ok: true },
    { title: "RAG", ok: true },
    { title: "Wallet", ok: true },
    { title: "DAO", ok: true },
  ];
  return (
    <div className="grid grid-cols-2 lg:grid-cols-3 gap-3">
      {items.map((x) => (
        <Card key={x.title} className="rounded-2xl">
          <CardHeader className="py-3">
            <CardTitle className="text-sm font-medium flex items-center gap-2">
              {x.ok ? (
                <CheckCircle2 className="h-4 w-4 text-emerald-600" />
              ) : (
                <AlertTriangle className="h-4 w-4 text-amber-600" />
              )}
              {x.title}
            </CardTitle>
          </CardHeader>
          <CardContent className="py-2">
            <div className="text-xs text-slate-500">{x.ok ? "Працює стабільно" : "Черга задач > p95"}</div>
          </CardContent>
        </Card>
      ))}
    </div>
  );
}

function OrchestratorChat() {
  return (
    <Card className="rounded-2xl h-full flex flex-col">
      <CardHeader className="py-3">
        <CardTitle className="text-sm">Чат з Оркестратором</CardTitle>
      </CardHeader>
      <CardContent className="flex-1 flex flex-col gap-3">
        <div className="flex-1 rounded-xl border bg-slate-50 p-3 text-sm overflow-auto">
          <div className="text-slate-500">Вітаю. Чим допомогти? Наприклад: "Розбери PDF та створй короткий бріф у Проєктах".</div>
        </div>
        <div className="flex items-center gap-2">
          <Textarea placeholder="Запитайте або використайте @agent" className="min-h-[44px]" />
          <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 TasksTable() {
  const rows = [
    { agent: "parser-agent", task: "PDF→USDO", status: "running", eta: "2m" },
    { agent: "project-agent", task: "Бріф + Kanban", status: "queued", eta: "—" },
    { agent: "wallet-agent", task: "Нарахувати винагороду", status: "completed", eta: "0" },
  ];
  const color = (s: string) => (s === "completed" ? "text-emerald-600" : s === "running" ? "text-amber-600" : "text-slate-500");
  return (
    <Card className="rounded-2xl h-full">
      <CardHeader className="py-3"><CardTitle className="text-sm">Поточні задачі агентів</CardTitle></CardHeader>
      <CardContent>
        <div className="overflow-x-auto">
          <table className="w-full text-sm">
            <thead className="text-left text-slate-500">
              <tr>
                <th className="py-2 pr-4">Агент</th>
                <th className="py-2 pr-4">Задача</th>
                <th className="py-2 pr-4">Статус</th>
                <th className="py-2">ETA</th>
              </tr>
            </thead>
            <tbody>
              {rows.map((r, i) => (
                <tr key={i} className="border-t">
                  <td className="py-2 pr-4 font-mono text-xs">{r.agent}</td>
                  <td className="py-2 pr-4">{r.task}</td>
                  <td className={`py-2 pr-4 ${color(r.status)}`}>{r.status}</td>
                  <td className="py-2">{r.eta}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </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>
  );
}

function StartScreen({ onCreateDAO, onJoinDAO, onSolo, agentReady, onInstallAgent, installing, progress, modelProfile, setModelProfile, indexSize, setIndexSize }: { onCreateDAO: () => void; onJoinDAO: () => void; onSolo: () => void; agentReady: boolean; onInstallAgent: () => void; installing: boolean; progress: number; modelProfile: string; setModelProfile: (v: string) => void; indexSize: string; setIndexSize: (v: string) => void; }) {
  return (
    <div className="h-full flex items-center justify-center p-8">
      <div className="max-w-3xl w-full grid grid-cols-1 lg:grid-cols-3 gap-4">
        <Card className="rounded-2xl lg:col-span-2">
          <CardHeader>
            <CardTitle>Ласкаво просимо до MicroDAO</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4 text-sm">
            <p className="text-slate-600">Почніть зі створення спільноти DAO, приєднайтесь за інвайтом або спробуйте Solo-режим з локальним агентом.</p>
            <div className="grid sm:grid-cols-3 gap-2">
              <Button onClick={onCreateDAO} className="rounded-xl">Створити DAO</Button>
              <Button variant="secondary" onClick={onJoinDAO} className="rounded-xl">Приєднатись</Button>
              <Button variant="outline" onClick={onSolo} className="rounded-xl">Solo-режим</Button>
            </div>
            <div className="grid gap-3 md:grid-cols-2">
              <div className="space-y-2">
                <div className="text-xs uppercase text-slate-500">Профіль моделі</div>
                <div className="flex flex-wrap gap-2">
                  {['Lite','Base','Plus','Pro'].map(p => (
                    <Button key={p} variant={modelProfile===p? 'default':'outline'} size="sm" className="rounded-xl" onClick={() => setModelProfile(p)}>{p}</Button>
                  ))}
                </div>
                <div className="text-xs text-slate-500">Автовибір за можливостями пристрою. Можна змінити пізніше.</div>
              </div>
              <div className="space-y-2">
                <div className="text-xs uppercase text-slate-500">Локальний індекс</div>
                <div className="flex flex-wrap gap-2">
                  {['200MB','500MB','1GB','5GB','20GB'].map(s => (
                    <Button key={s} variant={indexSize===s? 'default':'outline'} size="sm" className="rounded-xl" onClick={() => setIndexSize(s)}>{s}</Button>
                  ))}
                  <Button variant="outline" size="sm" className="rounded-xl">Власний шлях…</Button>
                </div>
                <div className="text-xs text-slate-500">int8 квантування заощаджує ×3–4 місця.</div>
              </div>
            </div>
            <div className="text-xs text-slate-500">Можна змінити вибір пізніше у Налаштуваннях.</div>
          </CardContent>
        </Card>
        <Card className="rounded-2xl">
          <CardHeader className="pb-2">
            <CardTitle className="text-sm flex items-center gap-2"><Bot className="h-4 w-4"/>Локальний агент</CardTitle>
          </CardHeader>
          <CardContent className="space-y-2 text-sm">
            {agentReady ? (
              <div className="flex items-center gap-2"><CheckCircle2 className="h-4 w-4 text-emerald-600"/>Готовий до роботи</div>
            ) : (
              <>
                <div className="flex items-center gap-2">
                  {installing ? (
                    <AlertTriangle className="h-4 w-4 text-amber-600" />
                  ) : (
                    <AlertTriangle className="h-4 w-4 text-amber-600" />
                  )}
                  {installing ? 'Встановлення моделі…' : 'Ще не встановлено'}
                </div>
                <Button size="sm" disabled={installing} onClick={onInstallAgent} className="rounded-xl w-full mt-1">
                  {installing ? 'Встановлення…' : 'Встановити агента'}
                </Button>
                {installing && (
                  <div className="space-y-1">
                    <Progress value={progress} />
                    <div className="text-xs text-slate-500">Завантаження моделі: {Math.round(progress)}%</div>
                  </div>
                )}
                <div className="text-xs text-slate-500">Обсяг моделі підбирається автоматично за можливостями пристрою.</div>
              </>
            )}
          </CardContent>
        </Card>
      </div>
    </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 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);
  };

  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>
  );
}
