import { PanelFrame } from "./PanelFrame";
import type { HistoryItem } from "../state/types";

interface HistoryPanelProps {
  items: HistoryItem[];
  onRefresh: () => Promise<void> | void;
  onOpenTrace: (traceId: string) => Promise<void> | void;
}

export function HistoryPanel({ items, onRefresh, onOpenTrace }: HistoryPanelProps) {
  return (
    <PanelFrame
      title="История нормализаций"
      subtitle="Короткий вопрос, confidence, route hint и статус валидации."
      actions={
        <button type="button" onClick={() => onRefresh()}>
          Обновить
        </button>
      }
    >
      <div className="history-list">
        {items.length === 0 ? <p className="muted">История пока пустая.</p> : null}
        {items.map((item) => (
          <button key={item.trace_id} type="button" className="history-item" onClick={() => onOpenTrace(item.trace_id)}>
            <div className="history-row">
              <strong>{item.route_hint ?? "route: n/a"}</strong>
              <span>{item.validation_passed ? "schema: ok" : "schema: fail"}</span>
            </div>
            <p>{item.question_short}</p>
            <div className="history-row">
              <span>{item.model}</span>
              <span>{new Date(item.timestamp).toLocaleString("ru-RU")}</span>
            </div>
          </button>
        ))}
      </div>
    </PanelFrame>
  );
}