"use client";

import { useEffect, useState } from "react";
import { createClient } from "@/lib/supabase/client";

interface DocRow {
  id: string;
  title: string;
  insurer: string | null;
  product_line: string | null;
  created_at: string;
}

export default function DocumentsClient() {
  const [docs, setDocs] = useState<DocRow[]>([]);
  const [insurer, setInsurer] = useState("");
  const [productLine, setProductLine] = useState("");
  const [status, setStatus] = useState("");
  const [loading, setLoading] = useState(false);

  async function load() {
    const supabase = createClient();
    const { data } = await supabase
      .from("documents")
      .select("id, title, insurer, product_line, created_at")
      .order("created_at", { ascending: false });
    setDocs(data || []);
  }

  useEffect(() => {
    load();
  }, []);

  async function handleUpload(e: React.ChangeEvent<HTMLInputElement>) {
    const file = e.target.files?.[0];
    if (!file) return;
    setLoading(true);
    setStatus("Wgrywam i dzielę dokument na fragmenty...");

    const formData = new FormData();
    formData.append("file", file);
    formData.append("insurer", insurer);
    formData.append("productLine", productLine);

    try {
      const res = await fetch("/api/ingest", { method: "POST", body: formData });
      const data = await res.json();
      if (!res.ok) {
        setStatus(`Błąd: ${data.error || "nieznany"}`);
        return;
      }
      setStatus(`Dodano dokument (${data.chunkCount} fragmentów).`);
      load();
    } catch (err) {
      setStatus(`Błąd połączenia: ${err}`);
    } finally {
      setLoading(false);
      e.target.value = "";
    }
  }

  return (
    <div className="max-w-2xl mx-auto px-6 py-8">
      <h1 className="text-lg font-semibold text-slate-900">Baza OWU</h1>
      <p className="text-sm text-slate-500 mt-1">
        Wgraj dokument OWU (PDF lub TXT) — zostanie automatycznie podzielony na fragmenty wg
        paragrafów i trafi do wspólnej bazy wyszukiwania czatu AI.
      </p>

      <div className="mt-4 grid grid-cols-2 gap-3">
        <input
          value={insurer}
          onChange={(e) => setInsurer(e.target.value)}
          placeholder="Towarzystwo (np. PZU)"
          className="rounded-lg border border-slate-300 px-3 py-2 text-sm"
        />
        <input
          value={productLine}
          onChange={(e) => setProductLine(e.target.value)}
          placeholder="Linia produktowa (np. komunikacyjne)"
          className="rounded-lg border border-slate-300 px-3 py-2 text-sm"
        />
      </div>
      <div className="mt-3">
        <input type="file" accept=".pdf,.txt" onChange={handleUpload} disabled={loading} className="text-sm" />
      </div>
      {status && <div className="mt-2 text-sm text-slate-600">{status}</div>}

      <div className="mt-6 overflow-hidden rounded-xl border border-slate-200 bg-white">
        <table className="w-full text-sm">
          <thead className="bg-slate-50 text-slate-500 text-xs uppercase">
            <tr>
              <th className="text-left px-4 py-2 font-medium">Dokument</th>
              <th className="text-left px-4 py-2 font-medium">Towarzystwo</th>
              <th className="text-left px-4 py-2 font-medium">Linia</th>
              <th className="text-left px-4 py-2 font-medium">Dodano</th>
            </tr>
          </thead>
          <tbody>
            {docs.length === 0 ? (
              <tr>
                <td colSpan={4} className="px-4 py-6 text-center text-slate-400">
                  Baza jest pusta — wgraj pierwszy dokument OWU powyżej.
                </td>
              </tr>
            ) : (
              docs.map((d) => (
                <tr key={d.id} className="border-t border-slate-100">
                  <td className="px-4 py-2">{d.title}</td>
                  <td className="px-4 py-2">{d.insurer || "—"}</td>
                  <td className="px-4 py-2">{d.product_line || "—"}</td>
                  <td className="px-4 py-2 text-slate-400">
                    {new Date(d.created_at).toLocaleDateString("pl-PL")}
                  </td>
                </tr>
              ))
            )}
          </tbody>
        </table>
      </div>
    </div>
  );
}