import { AnimatePresence, motion } from 'framer-motion';
import { Briefcase, CheckCircle2, Upload, X } from 'lucide-react';
import { type FormEvent, useState } from 'react';
import { Button } from './Button';

interface JobApplyModalProps {
  role: {
    title: string;
    type: string;
    location: string;
  } | null;
  onClose: () => void;
}

export function JobApplyModal({ role, onClose }: JobApplyModalProps) {
  const [submitted, setSubmitted] = useState(false);
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [phone, setPhone] = useState('');
  const [fileName, setFileName] = useState('');

  if (!role) return null;

  function handleSubmit(e: FormEvent) {
    e.preventDefault();
    setSubmitted(true);
  }

  function handleReset() {
    setSubmitted(false);
    setName('');
    setEmail('');
    setPhone('');
    setFileName('');
    onClose();
  }

  function handleFileChange(e: React.ChangeEvent<HTMLInputElement>) {
    if (e.target.files && e.target.files[0]) {
      setFileName(e.target.files[0].name);
    }
  }

  return (
    <AnimatePresence>
      <div
        className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm"
        onClick={onClose}
      >
        <motion.div
          initial={{ opacity: 0, scale: 0.9, y: 15 }}
          animate={{ opacity: 1, scale: 1, y: 0 }}
          exit={{ opacity: 0, scale: 0.9, y: 15 }}
          className="relative w-full max-w-md overflow-hidden rounded-3xl border border-theme bg-[var(--color-surface)] p-6 shadow-2xl"
          onClick={(e) => e.stopPropagation()}
        >
          <button
            type="button"
            onClick={onClose}
            className="absolute right-4 top-4 rounded-lg p-1 text-muted hover:bg-[color-mix(in_srgb,var(--color-primary)_10%,transparent)] hover:text-[var(--color-text)]"
            aria-label="Close"
          >
            <X className="h-5 w-5" />
          </button>

          {submitted ? (
            <div className="py-6 text-center space-y-4">
              <CheckCircle2 className="mx-auto h-12 w-12 text-primary" />
              <h3 className="text-xl font-bold text-[var(--color-text)]">Application Submitted!</h3>
              <p className="text-sm text-muted">
                Thank you <strong className="text-[var(--color-text)]">{name}</strong>. Your application for <strong className="text-primary">{role.title}</strong> has been received by our HR team. We will review your profile and get back to you shortly.
              </p>
              <Button onClick={handleReset} className="w-full">
                Close
              </Button>
            </div>
          ) : (
            <div>
              <div className="flex items-center gap-3 border-b border-theme pb-4">
                <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-primary text-white">
                  <Briefcase className="h-5 w-5" />
                </div>
                <div>
                  <h3 className="font-bold text-lg text-[var(--color-text)]">Quick Job Application</h3>
                  <p className="text-xs text-primary font-semibold">{role.title}</p>
                </div>
              </div>

              <p className="mt-2 text-xs text-muted">
                {role.type} · {role.location}
              </p>

              <form onSubmit={handleSubmit} className="mt-4 space-y-3">
                <div>
                  <label className="block text-xs font-semibold text-[var(--color-text)] mb-1">Full Name *</label>
                  <input
                    type="text"
                    required
                    value={name}
                    onChange={(e) => setName(e.target.value)}
                    placeholder="e.g. Michael Chen"
                    className="w-full rounded-xl border border-theme bg-[var(--color-bg)] px-3.5 py-2 text-xs text-[var(--color-text)] outline-none focus:border-primary"
                  />
                </div>

                <div>
                  <label className="block text-xs font-semibold text-[var(--color-text)] mb-1">Email Address *</label>
                  <input
                    type="email"
                    required
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    placeholder="e.g. michael@example.com"
                    className="w-full rounded-xl border border-theme bg-[var(--color-bg)] px-3.5 py-2 text-xs text-[var(--color-text)] outline-none focus:border-primary"
                  />
                </div>

                <div>
                  <label className="block text-xs font-semibold text-[var(--color-text)] mb-1">Phone Number *</label>
                  <input
                    type="tel"
                    required
                    value={phone}
                    onChange={(e) => setPhone(e.target.value)}
                    placeholder="e.g. 0412 345 678"
                    className="w-full rounded-xl border border-theme bg-[var(--color-bg)] px-3.5 py-2 text-xs text-[var(--color-text)] outline-none focus:border-primary"
                  />
                </div>

                <div>
                  <label className="block text-xs font-semibold text-[var(--color-text)] mb-1">Resume / CV (PDF/Word)</label>
                  <div className="relative flex items-center justify-center rounded-xl border border-dashed border-theme bg-[var(--color-bg)] p-3 text-center cursor-pointer hover:border-primary">
                    <input
                      type="file"
                      accept=".pdf,.doc,.docx"
                      onChange={handleFileChange}
                      className="absolute inset-0 opacity-0 cursor-pointer"
                    />
                    <div className="flex items-center gap-2 text-xs text-muted">
                      <Upload className="h-4 w-4 text-primary" />
                      <span>{fileName || 'Click to attach Resume (Optional)'}</span>
                    </div>
                  </div>
                </div>

                <Button type="submit" className="w-full justify-center mt-2">
                  Submit Application
                </Button>
              </form>
            </div>
          )}
        </motion.div>
      </div>
    </AnimatePresence>
  );
}