frontend/components/ClassifyPanel.tsx

"use client";

import { useState } from "react";
import { Loader2, RefreshCw, Tag } from "lucide-react";

import { api } from "@/lib/api";
import { toast } from "@/lib/toast";
import type { DocumentDetail } from "@/lib/types";

export default function ClassifyPanel({
  detail,
  provider,
  onRefresh,
}: {
  detail: DocumentDetail;
  provider: string | null;
  onRefresh: () => void;
}) {
  const [busy, setBusy] = useState(false);
  const c = detail.classification;

  const reClassify = async () => {
    setBusy(true);
    try {
      await api.reClassify(detail.id, provider ?? undefined);
      toast.success("Re-classified");
      onRefresh();
    } catch (e: any) {
      toast.error("Classification failed", e?.message ?? String(e));
    } finally {
      setBusy(false);
    }
  };

  return (
    <div className="h-full overflow-y-auto p-5">
      <div className="mb-4 flex items-center justify-between">
        <h3 className="text-sm font-semibold text-white">Classification</h3>
        <button
          onClick={reClassify}
          disabled={busy}
          className="flex items-center gap-1.5 rounded-lg border border-white/[0.08] bg-surface-850 px-2.5 py-1.5 text-xs text-white/70 transition hover:border-brand-500/40 hover:text-white disabled:opacity-50"
        >
          {busy ? <Loader2 size={12} className="animate-spin" /> : <RefreshCw size={12} />}
          Re-classify
        </button>
      </div>

      {!c ? (
        <div className="card rounded-2xl p-6">
          <div className="flex items-center gap-4">
            <div className="skeleton h-12 w-12 rounded-xl" />
            <div className="flex-1 space-y-2">
              <div className="skeleton h-5 w-40 rounded" />
              <div className="skeleton h-3 w-24 rounded" />
            </div>
          </div>
        </div>
      ) : (
        <>
          <div className="card relative overflow-hidden rounded-2xl p-6">
            <div className="absolute -right-10 -top-10 h-40 w-40 rounded-full bg-brand-500/10 blur-2xl" />
            <div className="relative flex items-center gap-4">
              <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-brand-500/25 to-brand-700/10 ring-1 ring-brand-500/30">
                <Tag className="text-brand-200" size={22} />
              </div>
              <div>
                <p className="text-[11px] uppercase tracking-wider text-white/40">
                  Detected type
                </p>
                <p className="text-2xl font-semibold capitalize text-white">
                  {c.doc_type.replace(/_/g, " ")}
                </p>
              </div>
              <div className="ml-auto text-right">
                <p className="text-[11px] uppercase tracking-wider text-white/40">
                  Confidence
                </p>
                <p className="bg-gradient-to-r from-emerald-400 to-accent-400 bg-clip-text text-2xl font-semibold tabular-nums text-transparent">
                  {Math.round(c.confidence * 100)}%
                </p>
              </div>
            </div>
            {c.rationale && (
              <p className="relative mt-4 border-t border-white/[0.06] pt-3 text-xs leading-relaxed text-white/55">
                {c.rationale}
              </p>
            )}
          </div>

          {c.candidates?.length > 0 && (
            <div className="mt-5">
              <p className="mb-2.5 text-[11px] font-semibold uppercase tracking-wider text-white/40">
                Other candidates
              </p>
              <div className="space-y-2.5">
                {c.candidates.map((cand, i) => (
                  <div key={i} className="flex items-center gap-3">
                    <span className="w-28 truncate text-xs capitalize text-white/65">
                      {String(cand.type).replace(/_/g, " ")}
                    </span>
                    <div className="h-2 flex-1 overflow-hidden rounded-full bg-white/[0.06]">
                      <div
                        className="h-full rounded-full bg-gradient-to-r from-brand-500/70 to-brand-400/70 transition-all"
                        style={{ width: `${(cand.confidence ?? 0) * 100}%` }}
                      />
                    </div>
                    <span className="w-10 text-right text-[10px] tabular-nums text-white/40">
                      {Math.round((cand.confidence ?? 0) * 100)}%
                    </span>
                  </div>
                ))}
              </div>
            </div>
          )}
        </>
      )}
    </div>
  );
}