"use client";

import { useEffect, useRef, useState } from "react";

import { api, ImportResult, ImportRow, Source } from "@/lib/api";

export default function ImportPage() {

  const [sources, setSources] = useState<Source[]>([]);

  const [sourceId, setSourceId] = useState<string>("");

  const [imports, setImports] = useState<ImportRow[]>([]);

  const [result, setResult] = useState<ImportResult | null>(null);

  const [err, setErr] = useState<string | null>(null);

  const [dragging, setDragging] = useState(false);

  const [busy, setBusy] = useState(false);

  const fileRef = useRef<HTMLInputElement>(null);

  function load() {

    api.imports().then(setImports).catch((e) =>

      setErr(e.status === 401 ? "Sign in to import data." : String(e)));

    api.sources().then(setSources).catch(() => {});

  }

  useEffect(load, []);

  async function upload(file: File) {

    setErr(null); setResult(null); setBusy(true);

    try {

      setResult(await api.uploadImport(file, sourceId || undefined));

      load();

    } catch (e: any) {

      setErr(e.status === 401 ? "Sign in (analyst role) to import." :

             e.status === 403 ? "Your role cannot ingest data." : "Upload failed.");

    } finally { setBusy(false); }

  }

  async function newSource() {

    const name = prompt("Source name (e.g. 'Downtown Flock Network')");

    if (!name) return;

    try { const s = await api.createSource(name); setSources((p) => [...p, s]); setSourceId(s.id); }

    catch { setErr("Could not create source (needs ingest permission)."); }

  }

  return (

    <div>

      <h1>ALPR Import</h1>

      <p className="muted">Upload Flock-style CSV or JSON exports. Columns are auto-mapped;

        rows are normalized, deduplicated, and evaluated against active watchlists on ingest.</p>

      <div className="row" style={{ margin: "12px 0" }}>

        <select value={sourceId} onChange={(e) => setSourceId(e.target.value)}>

          <option value="">(no source)</option>

          {sources.map((s) => <option key={s.id} value={s.id}>{s.name}</option>)}

        </select>

        <button onClick={newSource}>+ New source</button>

      </div>

      <div

        className="card"

        onDragOver={(e) => { e.preventDefault(); setDragging(true); }}

        onDragLeave={() => setDragging(false)}

        onDrop={(e) => { e.preventDefault(); setDragging(false); if (e.dataTransfer.files[0]) upload(e.dataTransfer.files[0]); }}

        style={{ textAlign: "center", padding: 40, borderStyle: "dashed",

                 borderColor: dragging ? "var(--accent)" : "var(--border)", cursor: "pointer" }}

        onClick={() => fileRef.current?.click()}

      >

        <input ref={fileRef} type="file" accept=".csv,.json" hidden

               onChange={(e) => e.target.files?.[0] && upload(e.target.files[0])} />

        <div style={{ fontSize: 16 }}>{busy ? "Uploading…" : "Drop a .csv / .json export here, or click to browse"}</div>

        <div className="muted" style={{ marginTop: 6 }}>Re-uploading an identical file is deduplicated automatically.</div>

      </div>

      {err && <div className="badge danger" style={{ marginTop: 12 }}>{err}</div>}

      {result && (

        <div className="card" style={{ marginTop: 12, borderColor: "var(--ok)" }}>

          {result.deduplicated

            ? <div>Already imported - <strong>{result.row_count ?? "existing"}</strong> rows (no double-count).</div>

            : <div className="row" style={{ gap: 18 }}>

                <span>inserted <strong>{result.inserted}</strong></span>

                <span>duplicates <strong>{result.duplicates}</strong></span>

                <span>skipped <strong>{result.skipped}</strong></span>

                <span>watchlist hits <strong className="badge danger">{result.watchlist_hits}</strong></span>

              </div>}

          {!!result.errors?.length && <div className="muted" style={{ marginTop: 8 }}>{result.errors.length} row warning(s).</div>}

        </div>

      )}

      <h2>Recent imports</h2>

      <div className="card">

        <table>

          <thead><tr><th>File</th><th>Status</th><th>Rows</th><th>When</th></tr></thead>

          <tbody>

            {imports.map((i) => (

              <tr key={i.id}>

                <td>{i.filename}</td>

                <td><span className={"badge " + (i.status === "done" ? "ok" : "")}>{i.status}</span></td>

                <td>{i.row_count}</td>

                <td className="muted">{new Date(i.created_at).toLocaleString()}</td>

              </tr>

            ))}

            {!imports.length && !err && <tr><td colSpan={4} className="muted">No imports yet.</td></tr>}

          </tbody>

        </table>

      </div>

    </div>

  );

}