"use client";

import React from "react";
import type { Citation } from "@duoc-thu/shared-types";
import { CitationCard } from "@duoc-thu/ui";
import { BookOpen, X, ShieldCheck, Layers, FileSearch } from "lucide-react";
import { cn } from "@duoc-thu/ui";

interface EvidencePanelProps {
  citations: Citation[];
  activeCitationIndex: number | null;
  onSelectCitation: (citation: Citation, index: number) => void;
  onClose?: () => void;
  className?: string;
}

export function EvidencePanel({
  citations,
  activeCitationIndex,
  onSelectCitation,
  onClose,
  className,
}: EvidencePanelProps) {
  return (
    <aside
      className={cn(
        "flex flex-col border-l border-border-subtle bg-surface w-80 lg:w-96 shrink-0 h-full overflow-hidden transition-all z-20",
        className
      )}
    >
      {/* Evidence Header */}
      <header className="p-4 border-b border-border-subtle flex items-center justify-between gap-2 bg-surface-elevated/80 backdrop-blur-md">
        <div className="flex items-center gap-2">
          <div className="flex h-8 w-8 items-center justify-center rounded-xl bg-accent-soft text-accent-primary">
            <FileSearch className="h-4 w-4" />
          </div>
          <div>
            <h3 className="m-0 text-xs font-bold text-txt-primary flex items-center gap-1.5">
              <span>Bằng Chứng Dược Thư</span>
              <span className="rounded-full bg-accent-primary px-2 py-0.5 text-[0.65rem] font-extrabold text-txt-inverse">
                {citations.length}
              </span>
            </h3>
            <p className="m-0 text-[0.68rem] text-txt-muted">
              Căn cứ chính thức Dược thư QGVN 2018
            </p>
          </div>
        </div>

        {onClose && (
          <button
            onClick={onClose}
            aria-label="Đóng thanh bằng chứng"
            className="p-1.5 rounded-xl text-txt-muted hover:bg-surface-hover hover:text-txt-primary transition-colors"
          >
            <X className="h-4 w-4" />
          </button>
        )}
      </header>

      {/* Citations List */}
      <div className="flex-1 overflow-y-auto p-4 space-y-3">
        {citations.length === 0 ? (
          <div className="flex flex-col items-center justify-center h-64 text-center p-6 text-txt-muted space-y-3">
            <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-surface-elevated border border-border-subtle text-txt-muted">
              <BookOpen className="h-6 w-6" />
            </div>
            <div>
              <p className="text-xs font-semibold text-txt-primary">Chưa có trích dẫn nguồn</p>
              <p className="text-[0.72rem] text-txt-muted mt-1 leading-relaxed">
                Khi đặt câu hỏi tra cứu, các trích dẫn chuyên luận kèm số trang in Dược thư 2018 sẽ hiển thị tại đây.
              </p>
            </div>
          </div>
        ) : (
          citations.map((citation, idx) => {
            const citationIndex = idx + 1;
            const isActive = activeCitationIndex === citationIndex;
            return (
              <CitationCard
                key={idx}
                citation={citation}
                index={citationIndex}
                isActive={isActive}
                onSelect={() => onSelectCitation(citation, citationIndex)}
              />
            );
          })
        )}
      </div>

      {/* Footnote Metadata */}
      <footer className="p-3 border-t border-border-subtle bg-surface-elevated/40 text-[0.68rem] text-txt-muted flex items-center justify-between">
        <div className="flex items-center gap-1.5">
          <ShieldCheck className="h-3.5 w-3.5 text-status-success" />
          <span>Xác thực bởi Entailment Engine</span>
        </div>
        <span className="font-semibold text-txt-secondary">DTQGVN 2018</span>
      </footer>
    </aside>
  );
}