import { AlertTriangle, CheckCircle2, FileClock, Link2, ShieldCheck } from 'lucide-react';

import { Badge, Card, CardContent, Separator } from '@ump/shared';

import { integrityIssues, type Paper } from '../domain/paperModel';

/**
 * INV-3 / INV-6 surface: the integrity verdict (sourced? complete?), the source list with
 * verified-real flags, and the edit history. Mirrors the spec's "Final Integrity Report" +
 * "ProvenanceTrace" for the no-backend v1.
 */
export function ProvenanceIntegrityPanel({ paper }: { paper: Paper }) {
  const issues = integrityIssues(paper);
  const clean = issues.length === 0;

  return (
    <div className="space-y-4">
      {/* Integrity verdict */}
      <Card>
        <CardContent className="space-y-3 p-4">
          <div className="flex items-center gap-2">
            <ShieldCheck className="h-4 w-4 text-primary" />
            <h3 className="font-serif text-sm font-semibold">Kiểm soát tính toàn vẹn</h3>
          </div>
          {clean ? (
            <div className="flex items-start gap-2 rounded-md bg-emerald-50 p-3 text-sm text-emerald-700">
              <CheckCircle2 className="mt-0.5 h-4 w-4 shrink-0" />
              <span>Đạt — bài báo có nguồn đầy đủ và sẵn sàng để xuất bản.</span>
            </div>
          ) : (
            <ul className="space-y-1.5">
              {issues.map((msg) => (
                <li key={msg} className="flex items-start gap-2 text-sm text-amber-700">
                  <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0" />
                  <span>{msg}</span>
                </li>
              ))}
            </ul>
          )}
        </CardContent>
      </Card>

      {/* Provenance — sources */}
      <Card>
        <CardContent className="space-y-3 p-4">
          <div className="flex items-center gap-2">
            <Link2 className="h-4 w-4 text-primary" />
            <h3 className="font-serif text-sm font-semibold">Truy vết nguồn</h3>
            <Badge variant="secondary" className="ml-auto">
              {paper.sources.length} nguồn
            </Badge>
          </div>
          {paper.sources.length === 0 ? (
            <p className="text-sm text-muted-foreground">Chưa có nguồn nào.</p>
          ) : (
            <ul className="space-y-2">
              {paper.sources.map((s) => (
                <li key={s.id} className="rounded-md border border-border p-2 text-sm">
                  <div className="flex items-center justify-between gap-2">
                    <span className="font-medium text-foreground">{s.title || '(chưa đặt tên)'}</span>
                    {s.verifiedReal ? (
                      <Badge className="bg-emerald-100 text-emerald-700">Đã xác minh</Badge>
                    ) : (
                      <Badge className="bg-amber-100 text-amber-700">Chưa xác minh</Badge>
                    )}
                  </div>
                  {s.authors ? <div className="text-xs text-muted-foreground">{s.authors}</div> : null}
                  {s.doiOrUrl ? (
                    <div className="truncate text-xs text-muted-foreground">{s.doiOrUrl}</div>
                  ) : null}
                </li>
              ))}
            </ul>
          )}
        </CardContent>
      </Card>

      {/* Edit history */}
      <Card>
        <CardContent className="space-y-3 p-4">
          <div className="flex items-center gap-2">
            <FileClock className="h-4 w-4 text-primary" />
            <h3 className="font-serif text-sm font-semibold">Lịch sử chỉnh sửa</h3>
          </div>
          <Separator />
          <ol className="space-y-1.5">
            {paper.editHistory
              .slice()
              .reverse()
              .map((e, i) => (
                <li key={`${e.at}-${i}`} className="flex items-start gap-2 text-xs text-muted-foreground">
                  <span className="tabular-nums">{new Date(e.at).toLocaleString('vi-VN')}</span>
                  <span className="text-foreground">{e.action}</span>
                </li>
              ))}
          </ol>
        </CardContent>
      </Card>
    </div>
  );
}
