duocthu/apps/web/app/_components/EvidencePanel.tsx

"use client";

import React from "react";
import type { Citation, MonographPickerState } 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;
  monographPicker?: MonographPickerState | null;
  onToggleSection?: (sectionKey: string) => void;
  onClose?: () => void;
  className?: string;
}

export function EvidencePanel({
  citations,
  activeCitationIndex,
  onSelectCitation,
  monographPicker,
  onToggleSection,
  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>{monographPicker ? "Thuộc tính thuốc" : "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">
                {monographPicker ? monographPicker.sections.length : citations.length}
              </span>
            </h3>
            <p className="m-0 text-[0.68rem] text-txt-muted">
              {monographPicker
                ? "Chọn mục cần xem trong chuyên luận"
                : "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">
        {monographPicker ? (
          <>
            <div className="rounded-2xl border border-border-accent bg-accent-soft/40 p-4">
              <p className="m-0 text-sm font-extrabold text-accent-primary">
                {monographPicker.drugName}
              </p>
              <p className="m-0 mt-1 text-[0.7rem] text-txt-muted">
                Chuyên luận · Dược thư Quốc gia Việt Nam 2018
              </p>
            </div>
            <div className="space-y-2">
              {monographPicker.sections.map((section) => {
                const checked = monographPicker.selectedSectionKeys.includes(
                  section.sectionKey
                );
                return (
                  <label
                    key={section.sectionKey}
                    className={cn(
                      "flex cursor-pointer items-center gap-3 rounded-xl border px-3 py-2.5 text-xs transition-colors",
                      checked
                        ? "border-border-accent bg-accent-soft text-accent-primary font-bold"
                        : "border-transparent text-txt-secondary hover:border-border-subtle hover:bg-surface-elevated"
                    )}
                  >
                    <input
                      type="checkbox"
                      checked={checked}
                      onChange={() => onToggleSection?.(section.sectionKey)}
                      className="h-4 w-4 rounded border-border-active accent-[var(--accent-primary)]"
                    />
                    <span>{section.sectionTitle}</span>
                  </label>
                );
              })}
            </div>
            <p className="m-0 rounded-xl bg-surface-elevated p-3 text-[0.7rem] leading-relaxed text-txt-muted">
              Không chọn mục nào rồi nhấn Gửi tra cứu để hiển thị toàn bộ chuyên luận.
            </p>
          </>
        ) : 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>
  );
}