"use client";

import Link from "next/link";
import { useApi } from "@/lib/api";
import { Bar, Panel, Skeleton, Tag } from "@/components/ui";

interface P {
  platform: string;
  learned: boolean;
  adapter: boolean;
  confidence: number;
  page_types: number;
  entity_types: number;
  navigation_actions: number;
  network_schemas: number;
  media_patterns: number;
  sessions: number;
  has_manifest: boolean;
  profiles: { alias: string; has_state: boolean }[];
}

const PHASE: Record<string, string> = { youtube: "Phase 1", reddit: "Phase 1", facebook: "Phase 2 · adapter", instagram: "Phase 2", tiktok: "Phase 3", x: "Phase 3", linkedin: "Phase 4", threads: "Phase 4" };

export default function Platforms() {
  const { data, loading } = useApi<P[]>("/platforms", { refreshMs: 15_000 });
  return (
    <div className="space-y-4">
      <div>
        <h1 className="text-2xl font-semibold tracking-tight">Connectors</h1>
        <p className="text-sm text-fg-2 max-w-2xl">A connector is learned state, not hand-written truth: page types, response schemas, action → observation patterns and media patterns accumulated across sessions, compiled into a manifest once confidence is sufficient.</p>
      </div>
      {loading ? (
        <Skeleton rows={6} />
      ) : (
        <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4">
          {data?.map((p) => (
            <Link key={p.platform} href={`/platforms/${p.platform}`} className="block">
              <Panel className="h-full hover:border-cyan/40 transition">
                <div className="flex items-center gap-2">
                  <span className="text-lg font-semibold capitalize">{p.platform}</span>
                  <span className="ml-auto text-[10px] uppercase tracking-widest text-dim">{PHASE[p.platform]}</span>
                </div>
                <div className="flex gap-1 mt-2 flex-wrap">
                  <Tag color={p.adapter ? "#43e69a" : "#6b7a8c"}>{p.adapter ? "adapter" : "no adapter"}</Tag>
                  <Tag color={p.learned ? "#38e1ff" : "#6b7a8c"}>{p.learned ? "learned" : "unlearned"}</Tag>
                  {p.has_manifest && <Tag color="#9d7bff">compiled</Tag>}
                  {p.profiles.map((pr) => (
                    <Tag key={pr.alias} color={pr.has_state ? "#ffb347" : "#6b7a8c"}>
                      profile {pr.alias}
                    </Tag>
                  ))}
                </div>
                <div className="mt-4">
                  <div className="flex justify-between text-xs text-dim mb-1">
                    <span>connector confidence</span>
                    <span className="mono text-fg">{p.confidence}%</span>
                  </div>
                  <Bar value={p.confidence / 100} color={p.confidence >= 70 ? "#43e69a" : p.confidence >= 40 ? "#38e1ff" : "#ffb347"} />
                </div>
                <dl className="grid grid-cols-2 gap-x-3 gap-y-1 mt-4 text-xs">
                  {[
                    ["page types", p.page_types],
                    ["entity types", p.entity_types],
                    ["navigation actions", p.navigation_actions],
                    ["network schemas", p.network_schemas],
                    ["media patterns", p.media_patterns],
                    ["sessions", p.sessions],
                  ].map(([k, v]) => (
                    <div key={k as string} className="flex justify-between border-b border-line/60 py-1">
                      <dt className="text-dim">{k as string}</dt>
                      <dd className="mono">{v as number}</dd>
                    </div>
                  ))}
                </dl>
              </Panel>
            </Link>
          ))}
        </div>
      )}
    </div>
  );
}