'use client';

import { motion } from 'framer-motion';

interface GenerateReportModalProps {
  candidateName: string;
  isRegenerate: boolean;
  busy: boolean;
  onConfirm: () => void;
  onCancel: () => void;
}

export default function GenerateReportModal({
  candidateName, isRegenerate, busy, onConfirm, onCancel,
}: GenerateReportModalProps) {
  return (
    <div className="fixed inset-0 z-[110] flex items-center justify-center bg-slate-950/60 backdrop-blur-sm p-4" onClick={busy ? undefined : onCancel}>
      <motion.div
        initial={{ opacity: 0, scale: 0.95 }}
        animate={{ opacity: 1, scale: 1 }}
        transition={{ duration: 0.2 }}
        onClick={(e) => e.stopPropagation()}
        className="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-none shadow-2xl w-full max-w-md p-6"
      >
        <div className="flex items-start gap-4">
          <div className="w-11 h-11 rounded-none bg-indigo-50 dark:bg-indigo-950/50 flex items-center justify-center shrink-0">
            <i className={`fa-solid ${isRegenerate ? 'fa-rotate' : 'fa-wand-magic-sparkles'} text-indigo-600 dark:text-indigo-400`} />
          </div>
          <div>
            <h3 className="text-base font-bold text-slate-900 dark:text-white">
              {isRegenerate ? 'Regenerate report?' : 'Generate report?'}
            </h3>
            <p className="text-xs text-slate-500 dark:text-slate-400 mt-1.5 leading-relaxed">
              {isRegenerate ? (
                <>A new report version will be generated for <b className="text-slate-700 dark:text-slate-200">{candidateName}</b> from
                their current profile, pipeline stage and scores. Existing versions are kept for history.</>
              ) : (
                <>A PDF evaluation report will be generated for <b className="text-slate-700 dark:text-slate-200">{candidateName}</b>,
                including their profile, AI summary, scores, classification and hiring recommendation.</>
              )}
            </p>
          </div>
        </div>

        <div className="flex justify-end gap-3 mt-6">
          <button
            onClick={onCancel}
            disabled={busy}
            className="px-4 py-2 rounded-none text-sm font-semibold text-slate-500 hover:text-slate-900 dark:text-slate-400 dark:hover:text-white transition cursor-pointer disabled:opacity-50"
          >
            Cancel
          </button>
          <button
            onClick={onConfirm}
            disabled={busy}
            className="bg-[#405189] hover:bg-[#364574] text-white px-4 py-2 rounded-none text-sm font-medium transition cursor-pointer disabled:opacity-60"
          >
            {busy ? (
              <><i className="fa-solid fa-spinner fa-spin mr-2" />Generating...</>
            ) : (
              <><i className={`fa-solid ${isRegenerate ? 'fa-rotate' : 'fa-wand-magic-sparkles'} mr-2`} />
                {isRegenerate ? 'Regenerate' : 'Generate'}</>
            )}
          </button>
        </div>
      </motion.div>
    </div>
  );
}