"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import { Play, Square } from "lucide-react";
import { api, useApi } from "@/lib/api";
import { ago, truncate } from "@/lib/format";
import { Empty, Panel, Skeleton, StatusPill, Table, Tag } from "@/components/ui";

interface Job {
  job_id: string;
  session_id: string | null;
  platform: string;
  mode: string;
  goal: string;
  budget: { minutes: number; actions: number; media: number; query?: string | null; headless: boolean; account: string };
  status: string;
  created_at: string;
  finished_at: string | null;
  result: { steps?: number; entities?: number; videos?: number; ended_because?: string } | null;
  actions: number;
  entities: number;
}

const PRESETS = [
  { label: "Topic · AI Québec on YouTube", platform: "youtube", mode: "topic", query: "intelligence artificielle Québec", goal: "Discover public Quebec creators and channels discussing artificial intelligence", minutes: 10, actions: 60, media: 2 },
  { label: "Learn · YouTube runtime", platform: "youtube", mode: "learn", query: "", goal: "", minutes: 15, actions: 80, media: 1 },
  { label: "Observe · YouTube home feed", platform: "youtube", mode: "observe", query: "", goal: "Observe the recommendation feed without navigating", minutes: 5, actions: 30, media: 0 },
  { label: "Research · Reddit r/Quebec AI", platform: "reddit", mode: "research", query: "intelligence artificielle Québec", goal: "Discover public Reddit posts and users discussing AI in Quebec", minutes: 10, actions: 60, media: 1 },
  { label: "Facebook · public page prototype (§52)", platform: "facebook", mode: "research", query: "", goal: "Observe one public Facebook page: its posts, videos, comments and the public pages/profiles they link to", minutes: 8, actions: 40, media: 1 },
  { label: "Observe · Facebook feed", platform: "facebook", mode: "observe", query: "", goal: "Observe the Facebook home feed and its recommendation exposure without navigating", minutes: 5, actions: 30, media: 0 },
];

export default function Missions() {
  const jobs = useApi<Job[]>("/jobs", { refreshMs: 5000 });
  const [form, setForm] = useState({ platform: "youtube", mode: "research", query: "intelligence artificielle Québec", goal: "Discover public Quebec creators discussing AI", minutes: 10, actions: 60, media: 1, headless: true, account: "research-01" });
  const [busy, setBusy] = useState(false);
  const [msg, setMsg] = useState<string | null>(null);
  const [logJob, setLogJob] = useState<string | null>(null);
  const input = "w-full rounded-lg bg-bg-2 border border-line-2 px-3 py-2 text-sm outline-none focus:border-cyan/60";

  async function launch() {
    setBusy(true);
    setMsg(null);
    try {
      const r = await api<{ job_id: string }>("/jobs", { method: "POST", body: JSON.stringify(form) });
      setMsg(`mission ${r.job_id} launched`);
      setLogJob(r.job_id);
      jobs.refresh();
    } catch (e) {
      setMsg((e as Error).message);
    } finally {
      setBusy(false);
    }
  }
  async function stop(id: string) {
    await api(`/jobs/${id}/stop`, { method: "POST", body: "{}" });
    jobs.refresh();
  }

  return (
    <div className="space-y-4">
      <div>
        <h1 className="text-2xl font-semibold tracking-tight">Missions</h1>
        <p className="text-sm text-fg-2 max-w-2xl">A mission opens one browser on the cluster node, gives the agent a goal and a budget, and lets it explore. Read-only: the crawler never likes, follows, comments or subscribes.</p>
      </div>
      <div className="grid grid-cols-1 xl:grid-cols-3 gap-4">
        <Panel title="New mission" className="xl:col-span-1">
          <div className="space-y-3">
            <div className="flex flex-wrap gap-1">
              {PRESETS.map((p) => (
                <button key={p.label} onClick={() => setForm((f) => ({ ...f, ...p }))} className="text-[11px] rounded-md border border-line px-2 py-1 hover:border-cyan/50 text-fg-2 hover:text-fg">
                  {p.label}
                </button>
              ))}
            </div>
            <div className="grid grid-cols-2 gap-2">
              <label className="text-xs text-dim">
                platform
                <select value={form.platform} onChange={(e) => setForm({ ...form, platform: e.target.value })} className={input}>
                  <option value="youtube">youtube</option>
                  <option value="reddit">reddit</option>
                  <option value="facebook">facebook</option>
                </select>
              </label>
              <label className="text-xs text-dim">
                mode
                <select value={form.mode} onChange={(e) => setForm({ ...form, mode: e.target.value })} className={input}>
                  {["research", "topic", "observe", "profile", "learn"].map((m) => (
                    <option key={m}>{m}</option>
                  ))}
                </select>
              </label>
            </div>
            <label className="text-xs text-dim block">
              topic / search query
              <input value={form.query} onChange={(e) => setForm({ ...form, query: e.target.value })} className={input} placeholder="e.g. intelligence artificielle Québec" />
            </label>
            <label className="text-xs text-dim block">
              goal (what the agent optimises for)
              <textarea value={form.goal} onChange={(e) => setForm({ ...form, goal: e.target.value })} rows={2} className={input} />
            </label>
            <div className="grid grid-cols-3 gap-2">
              <label className="text-xs text-dim">
                minutes
                <input type="number" min={1} max={120} value={form.minutes} onChange={(e) => setForm({ ...form, minutes: Number(e.target.value) })} className={`${input} mono`} />
              </label>
              <label className="text-xs text-dim">
                actions
                <input type="number" min={1} max={1000} value={form.actions} onChange={(e) => setForm({ ...form, actions: Number(e.target.value) })} className={`${input} mono`} />
              </label>
              <label className="text-xs text-dim">
                media level
                <select value={form.media} onChange={(e) => setForm({ ...form, media: Number(e.target.value) })} className={input}>
                  <option value={0}>0 · metadata</option>
                  <option value={1}>1 · + thumbnail</option>
                  <option value={2}>2 · + frames</option>
                </select>
              </label>
            </div>
            <div className="grid grid-cols-2 gap-2">
              <label className="text-xs text-dim">
                account profile
                <input value={form.account} onChange={(e) => setForm({ ...form, account: e.target.value })} className={`${input} mono`} />
              </label>
              <label className="text-xs text-dim flex items-end gap-2 pb-2">
                <input type="checkbox" checked={form.headless} onChange={(e) => setForm({ ...form, headless: e.target.checked })} /> headless browser
              </label>
            </div>
            <button disabled={busy} onClick={launch} className="w-full rounded-lg bg-cyan/90 hover:bg-cyan disabled:opacity-50 text-bg font-semibold py-2 flex items-center justify-center gap-2">
              <Play className="h-4 w-4" /> Launch mission
            </button>
            {msg && <div className="text-xs text-fg-2 mono">{msg}</div>}
          </div>
        </Panel>
        <Panel title="Missions" className="xl:col-span-2" pad={false} right={jobs.data ? `${jobs.data.filter((j) => j.status === "running").length} running` : ""}>
          <div className="p-4">
            {jobs.loading ? (
              <Skeleton rows={6} />
            ) : jobs.data?.length ? (
              <Table head={["status", "platform", "goal", "mode", "budget", "steps", "entities", "created", ""]} dense>
                {jobs.data.map((j) => (
                  <tr key={j.job_id}>
                    <td>
                      <StatusPill status={j.status} />
                    </td>
                    <td>
                      <Tag>{j.platform}</Tag>
                    </td>
                    <td className="max-w-[360px]">
                      {j.session_id ? (
                        <Link href={`/sessions/${j.session_id}`} className="hover:text-cyan">
                          {truncate(j.goal, 80)}
                        </Link>
                      ) : (
                        truncate(j.goal, 80)
                      )}
                      {j.budget?.query && <div className="text-[10.5px] text-dim">“{j.budget.query}”</div>}
                    </td>
                    <td className="text-fg-2">{j.mode}</td>
                    <td className="mono text-[11px] text-dim">
                      {j.budget?.minutes}m · {j.budget?.actions}a · L{j.budget?.media}
                    </td>
                    <td className="mono">{j.actions || j.result?.steps || 0}</td>
                    <td className="mono">{j.entities || j.result?.entities || 0}</td>
                    <td className="text-dim whitespace-nowrap">{ago(j.created_at)}</td>
                    <td className="whitespace-nowrap">
                      <button onClick={() => setLogJob(j.job_id)} className="text-[11px] text-dim hover:text-cyan mr-2">
                        log
                      </button>
                      {j.status === "running" && (
                        <button onClick={() => stop(j.job_id)} className="text-[11px] text-red hover:text-red/80 inline-flex items-center gap-1">
                          <Square className="h-3 w-3" /> stop
                        </button>
                      )}
                    </td>
                  </tr>
                ))}
              </Table>
            ) : (
              <Empty>No missions yet — launch one on the left.</Empty>
            )}
          </div>
        </Panel>
      </div>
      {logJob && <JobLog id={logJob} onClose={() => setLogJob(null)} />}
    </div>
  );
}

function JobLog({ id, onClose }: { id: string; onClose: () => void }) {
  const [text, setText] = useState("");
  useEffect(() => {
    let alive = true;
    let timer: ReturnType<typeof setTimeout> | undefined;
    const tick = async () => {
      try {
        const r = await fetch(`/api/jobs/${id}/log?lines=300`, { cache: "no-store" });
        if (alive) setText(await r.text());
      } catch {
        /* ignore */
      }
      if (alive) timer = setTimeout(tick, 3000);
    };
    tick();
    return () => {
      alive = false;
      if (timer) clearTimeout(timer);
    };
  }, [id]);
  return (
    <Panel title={`Worker log · ${id}`} right={<button onClick={onClose} className="hover:text-cyan">close</button>}>
      <pre className="mono text-[11px] leading-5 text-fg-2 whitespace-pre-wrap max-h-[420px] overflow-auto scrollbar-thin">{text || "…"}</pre>
    </Panel>
  );
}