import type { JobApplication } from '@/types/entities';
import React, { useState } from 'react';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Mail, Phone, Send, CheckCircle2 } from 'lucide-react';
import { useTranslation } from 'react-i18next';

interface MessageCandidateModalProps {
  open: boolean;
  onClose?: () => void;
  /* `Partial`: `TalentPool` opens this with a target built from a profile —
     name, email and phone — rather than a stored application. */
  application: Partial<JobApplication>;
}

export default function MessageCandidateModal({ open, onClose, application }: MessageCandidateModalProps) {
  const { t } = useTranslation();
  const [channel, setChannel] = useState('message');
  const [message, setMessage] = useState('');
  const [sent, setSent] = useState(false);

  const handleSend = () => {
    setSent(true);
    setTimeout(() => {
      setSent(false);
      setMessage('');
      onClose();
    }, 1500);
  };

  return (
    <Dialog open={open} onOpenChange={(v) => !v && onClose()}>
      <DialogContent className="max-w-md">
        <DialogHeader>
          <DialogTitle>{t('messageCandidateModal.message')} {application?.applicant_name}</DialogTitle>
        </DialogHeader>

        {sent ? (
          <div className="py-8 text-center">
            <div className="w-12 h-12 rounded-full bg-[#D1FAE5] flex items-center justify-center mx-auto mb-3">
              <CheckCircle2 className="w-6 h-6 text-[#059669]" />
            </div>
            <p className="text-[14px] font-medium text-[#111827]">{t('messageCandidateModal.messageSent')}</p>
          </div>
        ) : (
          <div className="space-y-4">
            <div className="grid grid-cols-2 gap-2">
              <button
                onClick={() => setChannel('message')}
                className={`flex items-center justify-center gap-2 py-2.5 rounded-lg border text-[13px] font-medium transition-all ${
                  channel === 'message' ? 'border-[#0838E0] bg-[#EEF3FE] text-[#0838E0]' : 'border-[#E5E7EB] text-[#6B7280]'
                }`}
              >
                <Mail className="w-4 h-4" /> {t('messageCandidateModal.message')}
              </button>
              <button
                onClick={() => setChannel('call')}
                className={`flex items-center justify-center gap-2 py-2.5 rounded-lg border text-[13px] font-medium transition-all ${
                  channel === 'call' ? 'border-[#0838E0] bg-[#EEF3FE] text-[#0838E0]' : 'border-[#E5E7EB] text-[#6B7280]'
                }`}
              >
                <Phone className="w-4 h-4" /> {t('messageCandidateModal.call')}
              </button>
            </div>

            {channel === 'call' ? (
              <div className="py-6 text-center text-[13px] text-[#6B7280]">
                <Phone className="w-8 h-8 text-[#0838E0] mx-auto mb-2" />
                {t('messageCandidateModal.calling')} {application?.phone || 'candidate'}...
              </div>
            ) : (
              <textarea
                value={message}
                onChange={(e) => setMessage(e.target.value)}
                placeholder={`Hi ${application?.applicant_name?.split(' ')[0]}, ...`}
                className="w-full min-h-[100px] p-3 text-[14px] rounded-lg border border-[#E5E7EB] focus:border-[#0838E0] focus:outline-none resize-none"
              />
            )}

            <DialogFooter>
              <Button variant="outline" onClick={onClose}>{t('messageCandidateModal.cancel')}</Button>
              <Button onClick={handleSend} disabled={channel === 'message' && !message.trim()} className="bg-[#0838E0] hover:bg-[#062BAF]">
                <Send className="w-4 h-4 mr-2" /> {t('messageCandidateModal.send')}
              </Button>
            </DialogFooter>
          </div>
        )}
      </DialogContent>
    </Dialog>
  );
}