"use client";

import { useState, useEffect, useRef } from "react";
import { AddToBrain } from "@/components/AddToBrain";
import type { IngestionJob } from "@/lib/types";
import { formatDate } from "@/lib/format";

const statusColor: Record<string, string> = {
  complete: "text-success",
  dry_run_complete: "text-violet",
  executing: "text-violet",
  extracting: "text-warning",
  pending: "text-warning",
  failed: "text-danger",
};

export default function AddToBrainPage() {
  const [jobs, setJobs] = useState<IngestionJob[]>([]);
  const [loading, setLoading] = useState(true);
  const [reloadTick, setReloadTick] = useState(0);

  // Codex-P1-3: Keep setLoading(true) OUT of useEffect. The effect only
  // transitions loading to false on completion; event handlers (reload)
  // set it to true synchronously.
  // IN-06: fetchIngestionJobs signature drift — tolerate both shapes here
  // (array vs { jobs: [...] }) so the client doesn't crash if the server
  // contract changes.
  useEffect(() => {
    const controller = new AbortController();
    let cancelled = false;

    (async () => {
      try {
        const res = await fetch("/api/ingest", { signal: controller.signal });
        if (!res.ok) throw new Error("Failed to load jobs");
        const data = await res.json();
        const normalized: IngestionJob[] = Array.isArray(data)
          ? data
          : Array.isArray(data?.jobs)
            ? data.jobs
            : [];
        if (!cancelled) setJobs(normalized);
      } catch {
        // silently ignore — job list is secondary
      } finally {
        if (!cancelled) setLoading(false);
      }
    })();

    return () => {
      cancelled = true;
      controller.abort();
    };
  }, [reloadTick]);

  const loadJobs = useRef(() => {
    setLoading(true);
    setReloadTick((t) => t + 1);
  }).current;

  return (
    <div className="space-y-8">
      <div>
        <h1 className="text-2xl font-semibold mb-1">Add to Brain</h1>
        <p className="text-text-secondary text-sm">
          Paste a thought, notes, or source text. Open Brain will decide
          whether to save one thought or extract several.
        </p>
      </div>

      {/* Unified input */}
      <div className="bg-bg-surface border border-border rounded-lg p-5">
        <AddToBrain
          rows={6}
          showModeControl={true}
          showJobDetail={true}
          onSuccess={() => loadJobs()}
        />
      </div>

      {/* Job history */}
      <div>
        <h2 className="text-lg font-medium mb-3">Recent Activity</h2>
        {loading ? (
          <div className="flex items-center gap-2 text-text-muted text-sm">
            <div className="w-4 h-4 border-2 border-violet/30 border-t-violet rounded-full animate-spin" />
            Loading...
          </div>
        ) : jobs.length === 0 ? (
          <p className="text-text-muted text-sm">
            No ingestion jobs yet. Add longer content to see extraction results
            here.
          </p>
        ) : (
          <div className="grid gap-3">
            {jobs.map((job) => (
              <div
                key={job.id}
                className="bg-bg-surface border border-border rounded-lg p-4"
              >
                <div className="flex items-center justify-between mb-2">
                  <div className="flex items-center gap-3">
                    <span className="text-sm font-medium text-text-primary">
                      {job.source_label || `Job #${job.id}`}
                    </span>
                    <span
                      className={`text-xs font-medium ${statusColor[job.status] || "text-text-muted"}`}
                    >
                      {job.status.replace(/_/g, " ")}
                    </span>
                  </div>
                  <span className="text-xs text-text-muted">
                    {formatDate(job.created_at)}
                  </span>
                </div>
                <div className="flex gap-4 text-xs text-text-muted">
                  <span>
                    Extracted:{" "}
                    <span className="text-text-secondary">
                      {job.extracted_count}
                    </span>
                  </span>
                  <span>
                    Added:{" "}
                    <span className="text-success">{job.added_count}</span>
                  </span>
                  <span>
                    Skipped:{" "}
                    <span className="text-text-secondary">
                      {job.skipped_count}
                    </span>
                  </span>
                  {job.revised_count > 0 && (
                    <span>
                      Revised:{" "}
                      <span className="text-info">{job.revised_count}</span>
                    </span>
                  )}
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}