'use client';

import { useEffect, useState } from 'react';
import { ats_status } from '@/lib/ats/status';
import StatusBadge from '@/components/ats/status-badge';

type item = {
  id: number;
  decision: 'shortlist' | 'accept' | 'reject';
  decidedAt: string;
  decidedBy: string;
  comment: string | null;
};

export default function DecisionHistoryDrawer({
  matchCandidateId,
  open,
  onClose
}: {
  matchCandidateId: number | null;
  open: boolean;
  onClose: () => void;
}) {
  const [items, set_items] = useState<item[]>([]);

  useEffect(() => {
    if (!open || !matchCandidateId) return;

    fetch(`/api/recruiter/matches/${matchCandidateId}/history`)
      .then(r => r.json())
      .then(d => set_items(d.history || []));
  }, [open, matchCandidateId]);

  if (!open) return null;

  return (
    <div className="drawer-backdrop" onClick={onClose}>
      <div className="drawer" onClick={e => e.stopPropagation()}>
        <header>
          <h3>historique des décisions</h3>
          <button onClick={onClose}>✕</button>
        </header>

        <ul className="timeline">
          {items.map(i => (
            <li key={i.id}>
              <StatusBadge status={ats_status[i.decision === 'shortlist'
                ? 'shortlisted'
                : i.decision === 'accept'
                ? 'accepted'
                : 'rejected'].label ? (
                i.decision === 'shortlist'
                  ? 'shortlisted'
                  : i.decision === 'accept'
                  ? 'accepted'
                  : 'rejected'
              ) : 'pending'} />
              <div>
                <div>
                  <strong>{i.decidedBy}</strong> ·{' '}
                  {new Date(i.decidedAt).toLocaleString()}
                </div>
                {i.comment && <div className="comment">{i.comment}</div>}
              </div>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}