import React, { useState } from 'react';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Label } from '@/components/ui/label';
import { Input } from '@/components/ui/input';
import { Calendar, Clock, Video, Phone, User } from 'lucide-react';

export default function ScheduleInterviewModal({ open, onClose, application }) {
  const [type, setType] = useState('video');
  const [date, setDate] = useState('');
  const [time, setTime] = useState('');
  const [notes, setNotes] = useState('');
  const [scheduled, setScheduled] = useState(false);

  const handleSchedule = () => {
    setScheduled(true);
    setTimeout(() => {
      setScheduled(false);
      onClose();
    }, 1500);
  };

  return (
    <Dialog open={open} onOpenChange={(v) => !v && onClose()}>
      <DialogContent className="max-w-md">
        <DialogHeader>
          <DialogTitle>Schedule Interview</DialogTitle>
        </DialogHeader>

        {scheduled ? (
          <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">
              <Calendar className="w-6 h-6 text-[#059669]" />
            </div>
            <p className="text-[14px] font-medium text-[#111827]">Interview scheduled!</p>
            <p className="text-[12px] text-[#6B7280]">{application?.applicant_name} will be notified.</p>
          </div>
        ) : (
          <div className="space-y-4">
            <div>
              <Label className="text-[13px] text-[#374151]">Interview Type</Label>
              <div className="grid grid-cols-3 gap-2 mt-1.5">
                {[
                  { value: 'video', label: 'Video', icon: Video },
                  { value: 'phone', label: 'Phone', icon: Phone },
                  { value: 'inperson', label: 'In Person', icon: User },
                ].map((opt) => (
                  <button
                    key={opt.value}
                    onClick={() => setType(opt.value)}
                    className={`flex flex-col items-center gap-1 py-2.5 rounded-lg border text-[12px] font-medium transition-all ${
                      type === opt.value ? 'border-[#0838E0] bg-[#EEF3FE] text-[#0838E0]' : 'border-[#E5E7EB] text-[#6B7280] hover:bg-[#F9FAFB]'
                    }`}
                  >
                    <opt.icon className="w-4 h-4" />
                    {opt.label}
                  </button>
                ))}
              </div>
            </div>

            <div className="grid grid-cols-2 gap-3">
              <div>
                <Label className="text-[13px] text-[#374151]">Date</Label>
                <Input type="date" value={date} onChange={(e) => setDate(e.target.value)} className="mt-1.5" />
              </div>
              <div>
                <Label className="text-[13px] text-[#374151]">Time</Label>
                <Input type="time" value={time} onChange={(e) => setTime(e.target.value)} className="mt-1.5" />
              </div>
            </div>

            <div>
              <Label className="text-[13px] text-[#374151]">Notes (optional)</Label>
              <textarea
                value={notes}
                onChange={(e) => setNotes(e.target.value)}
                placeholder="Add any prep notes..."
                className="w-full mt-1.5 min-h-[60px] p-2.5 text-[13px] rounded-lg border border-[#E5E7EB] focus:border-[#0838E0] focus:outline-none resize-none"
              />
            </div>

            <DialogFooter>
              <Button variant="outline" onClick={onClose}>Cancel</Button>
              <Button onClick={handleSchedule} disabled={!date || !time} className="bg-[#0838E0] hover:bg-[#062BAF]">
                <Clock className="w-4 h-4 mr-2" /> Schedule
              </Button>
            </DialogFooter>
          </div>
        )}
      </DialogContent>
    </Dialog>
  );
}