// Panel 3 cho 3-panel layout — gom WorkflowSummaryCard (timeline policy) +
// approval history (ai/khi/quyết định gì) vào 1 stack.
import { ArrowRight, Clock } from 'lucide-react'
import { PhaseBadge } from '@/components/PhaseBadge'
import { WorkflowSummaryCard } from '@/components/WorkflowSummaryCard'
import type { ContractDetail } from '@/types/contracts'

const fmt = (s: string) => new Date(s).toLocaleString('vi-VN')

export function WorkflowHistoryPanel({ contract: c }: { contract: ContractDetail }) {
  return (
    <div className="space-y-4">
      {c.workflow && <WorkflowSummaryCard workflow={c.workflow} currentPhase={c.phase} />}

      <section className="rounded-xl border border-slate-200 bg-white p-5 shadow-sm">
        <h2 className="mb-3 flex items-center gap-2 text-sm font-semibold text-slate-700">
          <Clock className="h-4 w-4" />
          Lịch sử duyệt ({c.approvals.length})
        </h2>
        <ol className="space-y-3">
          {c.approvals.length === 0 && <li className="text-sm text-slate-400">Chưa có lịch sử.</li>}
          {c.approvals.map(a => (
            <li key={a.id} className="flex gap-3">
              <div className="mt-1 h-2 w-2 rounded-full bg-brand-500" />
              <div className="flex-1 space-y-0.5 text-sm">
                <div className="flex items-center gap-1">
                  <PhaseBadge phase={a.fromPhase} className="text-[10px]" />
                  <ArrowRight className="h-3 w-3 text-slate-400" />
                  <PhaseBadge phase={a.toPhase} className="text-[10px]" />
                </div>
                <div className="text-slate-700">{a.approverName ?? 'Hệ thống'}</div>
                <div className="text-xs text-slate-500">{fmt(a.approvedAt)}</div>
                {a.comment && (
                  <div className="mt-1 rounded bg-slate-50 px-2 py-1 text-xs text-slate-600">
                    {a.comment}
                  </div>
                )}
              </div>
            </li>
          ))}
        </ol>
      </section>
    </div>
  )
}