'use client';

import { useState } from 'react';
import { WalkathonRegistration } from '@/lib/hbfc-data';
import { X, CheckCircle, Sparkles, Printer, Download, ArrowRight, ShieldCheck, MapPin, Calendar, Heart } from 'lucide-react';

interface WalkathonModalProps {
  isOpen: boolean;
  onClose: () => void;
  onRegister: (data: {
    fullName: string;
    phone: string;
    email: string;
    gender: string;
    age: string;
    organization: string;
    location: string;
    tshirtSize: string;
    emergencyName: string;
    emergencyPhone: string;
  }) => WalkathonRegistration;
}

export function WalkathonModal({ isOpen, onClose, onRegister }: WalkathonModalProps) {
  const [formData, setFormData] = useState({
    fullName: '',
    phone: '',
    email: '',
    gender: 'Male',
    age: '',
    organization: '',
    location: 'Calabar',
    tshirtSize: 'L',
    emergencyName: '',
    emergencyPhone: '',
  });

  const [registeredBib, setRegisteredBib] = useState<WalkathonRegistration | null>(null);
  const [submitting, setSubmitting] = useState(false);
  const [errorMsg, setErrorMsg] = useState('');

  if (!isOpen) return null;

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setErrorMsg('');

    if (!formData.fullName.trim()) {
      setErrorMsg('Please enter your full name.');
      return;
    }
    if (!formData.phone.trim()) {
      setErrorMsg('Please enter your phone number.');
      return;
    }
    if (!formData.email.trim()) {
      setErrorMsg('Please enter your email address.');
      return;
    }
    if (!formData.emergencyName.trim() || !formData.emergencyPhone.trim()) {
      setErrorMsg('Please provide emergency contact name and phone.');
      return;
    }

    setSubmitting(true);
    setTimeout(() => {
      const reg = onRegister(formData);
      setRegisteredBib(reg);
      setSubmitting(false);
    }, 400);
  };

  const handlePrint = () => {
    window.print();
  };

  const resetForm = () => {
    setRegisteredBib(null);
    setFormData({
      fullName: '',
      phone: '',
      email: '',
      gender: 'Male',
      age: '',
      organization: '',
      location: 'Calabar',
      tshirtSize: 'L',
      emergencyName: '',
      emergencyPhone: '',
    });
  };

  return (
    <div
      id="walkathon-registration-modal"
      className="fixed inset-0 z-50 flex items-center justify-center p-3 sm:p-4 bg-black/60 backdrop-blur-sm overflow-y-auto animate-in fade-in"
    >
      <div className="relative w-full max-w-2xl bg-white border border-neutral-200 rounded-3xl overflow-hidden shadow-2xl my-8">
        {/* Modal Header */}
        <div className="bg-neutral-50 p-5 sm:p-6 border-b border-neutral-200 flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div className="w-11 h-11 rounded-xl bg-black border border-amber-400/60 overflow-hidden flex items-center justify-center shadow-xs shrink-0">
              <img
                src="/hbfc-logo.jpg"
                alt="HBFC Official Logo"
                className="w-full h-full object-contain p-0.5"
                referrerPolicy="no-referrer"
              />
            </div>
            <div>
              <h3 className="text-lg sm:text-xl font-black text-neutral-900 uppercase tracking-tight">
                Calabar Walkathon 7.0 Registration
              </h3>
              <p className="text-xs text-amber-700 font-bold tracking-wide">
                September 19, 2026 • 15KM • Calabar, Nigeria
              </p>
            </div>
          </div>

          <button
            id="walkathon-modal-close"
            onClick={() => {
              resetForm();
              onClose();
            }}
            className="p-2 rounded-xl text-neutral-500 hover:text-neutral-900 bg-white border border-neutral-200 hover:bg-neutral-100 transition-colors shadow-xs"
          >
            <X className="w-5 h-5" />
          </button>
        </div>

        {/* Modal Body: Registration Form or Confirmed Digital Bib */}
        <div className="p-5 sm:p-8 max-h-[80vh] overflow-y-auto">
          {!registeredBib ? (
            <form onSubmit={handleSubmit} className="space-y-5">
              {errorMsg && (
                <div className="p-3 rounded-xl bg-rose-50 border border-rose-200 text-rose-700 text-xs font-medium">
                  {errorMsg}
                </div>
              )}

              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                {/* Full Name */}
                <div className="sm:col-span-2">
                  <label className="block text-xs font-bold uppercase tracking-wider text-neutral-700 mb-1.5">
                    Full Name *
                  </label>
                  <input
                    type="text"
                    required
                    value={formData.fullName}
                    onChange={(e) => setFormData({ ...formData, fullName: e.target.value })}
                    placeholder="e.g. Arc. Nsa Eyo"
                    className="w-full px-4 py-2.5 rounded-xl bg-white border border-neutral-300 focus:border-emerald-500 focus:outline-none text-neutral-900 text-sm shadow-xs"
                  />
                </div>

                {/* Phone */}
                <div>
                  <label className="block text-xs font-bold uppercase tracking-wider text-neutral-700 mb-1.5">
                    Phone Number *
                  </label>
                  <input
                    type="tel"
                    required
                    value={formData.phone}
                    onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
                    placeholder="+234 800 000 0000"
                    className="w-full px-4 py-2.5 rounded-xl bg-white border border-neutral-300 focus:border-emerald-500 focus:outline-none text-neutral-900 text-sm shadow-xs"
                  />
                </div>

                {/* Email */}
                <div>
                  <label className="block text-xs font-bold uppercase tracking-wider text-neutral-700 mb-1.5">
                    Email Address *
                  </label>
                  <input
                    type="email"
                    required
                    value={formData.email}
                    onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                    placeholder="you@domain.com"
                    className="w-full px-4 py-2.5 rounded-xl bg-white border border-neutral-300 focus:border-emerald-500 focus:outline-none text-neutral-900 text-sm shadow-xs"
                  />
                </div>

                {/* Gender */}
                <div>
                  <label className="block text-xs font-bold uppercase tracking-wider text-neutral-700 mb-1.5">
                    Gender *
                  </label>
                  <select
                    value={formData.gender}
                    onChange={(e) => setFormData({ ...formData, gender: e.target.value })}
                    className="w-full px-4 py-2.5 rounded-xl bg-white border border-neutral-300 focus:border-emerald-500 focus:outline-none text-neutral-900 text-sm shadow-xs"
                  >
                    <option value="Male">Male</option>
                    <option value="Female">Female</option>
                    <option value="Other">Prefer not to say</option>
                  </select>
                </div>

                {/* Age */}
                <div>
                  <label className="block text-xs font-bold uppercase tracking-wider text-neutral-700 mb-1.5">
                    Age *
                  </label>
                  <input
                    type="number"
                    min="12"
                    max="95"
                    required
                    value={formData.age}
                    onChange={(e) => setFormData({ ...formData, age: e.target.value })}
                    placeholder="e.g. 34"
                    className="w-full px-4 py-2.5 rounded-xl bg-white border border-neutral-300 focus:border-emerald-500 focus:outline-none text-neutral-900 text-sm shadow-xs"
                  />
                </div>

                {/* Organization */}
                <div>
                  <label className="block text-xs font-bold uppercase tracking-wider text-neutral-700 mb-1.5">
                    Organization / Company
                  </label>
                  <input
                    type="text"
                    value={formData.organization}
                    onChange={(e) => setFormData({ ...formData, organization: e.target.value })}
                    placeholder="Company, Ministry or Club"
                    className="w-full px-4 py-2.5 rounded-xl bg-white border border-neutral-300 focus:border-emerald-500 focus:outline-none text-neutral-900 text-sm shadow-xs"
                  />
                </div>

                {/* Location */}
                <div>
                  <label className="block text-xs font-bold uppercase tracking-wider text-neutral-700 mb-1.5">
                    Location / City *
                  </label>
                  <input
                    type="text"
                    required
                    value={formData.location}
                    onChange={(e) => setFormData({ ...formData, location: e.target.value })}
                    placeholder="e.g. Calabar, Uyo, Lagos"
                    className="w-full px-4 py-2.5 rounded-xl bg-white border border-neutral-300 focus:border-emerald-500 focus:outline-none text-neutral-900 text-sm shadow-xs"
                  />
                </div>

                {/* T-shirt Size */}
                <div className="sm:col-span-2">
                  <label className="block text-xs font-bold uppercase tracking-wider text-neutral-700 mb-1.5">
                    T-Shirt Size (HBFC Walkathon Kit) *
                  </label>
                  <div className="grid grid-cols-4 sm:grid-cols-7 gap-2">
                    {['S', 'M', 'L', 'XL', '2XL', '3XL', '4XL'].map((size) => (
                      <button
                        type="button"
                        key={size}
                        onClick={() => setFormData({ ...formData, tshirtSize: size })}
                        className={`py-2 rounded-lg text-xs font-bold transition-all cursor-pointer ${
                          formData.tshirtSize === size
                            ? 'bg-emerald-600 text-white border border-emerald-500 shadow-xs'
                            : 'bg-white text-neutral-700 border border-neutral-300 hover:border-emerald-400'
                        }`}
                      >
                        {size}
                      </button>
                    ))}
                  </div>
                </div>

                {/* Emergency Contact */}
                <div className="sm:col-span-2 pt-2 border-t border-neutral-200">
                  <p className="text-xs font-extrabold uppercase text-amber-700 mb-2 flex items-center gap-1.5">
                    <Heart className="w-3.5 h-3.5 text-rose-500" />
                    Emergency Contact Information
                  </p>
                </div>

                <div>
                  <label className="block text-xs font-bold uppercase tracking-wider text-neutral-700 mb-1.5">
                    Emergency Contact Name *
                  </label>
                  <input
                    type="text"
                    required
                    value={formData.emergencyName}
                    onChange={(e) => setFormData({ ...formData, emergencyName: e.target.value })}
                    placeholder="Next of Kin or Contact"
                    className="w-full px-4 py-2.5 rounded-xl bg-white border border-neutral-300 focus:border-emerald-500 focus:outline-none text-neutral-900 text-sm shadow-xs"
                  />
                </div>

                <div>
                  <label className="block text-xs font-bold uppercase tracking-wider text-neutral-700 mb-1.5">
                    Emergency Contact Phone *
                  </label>
                  <input
                    type="tel"
                    required
                    value={formData.emergencyPhone}
                    onChange={(e) => setFormData({ ...formData, emergencyPhone: e.target.value })}
                    placeholder="+234 800 000 0000"
                    className="w-full px-4 py-2.5 rounded-xl bg-white border border-neutral-300 focus:border-emerald-500 focus:outline-none text-neutral-900 text-sm shadow-xs"
                  />
                </div>
              </div>

              {/* Submit Button */}
              <div className="pt-4 border-t border-neutral-200 flex items-center justify-end gap-3">
                <button
                  type="button"
                  onClick={onClose}
                  className="px-5 py-2.5 rounded-xl text-xs font-bold uppercase tracking-wider text-neutral-600 hover:text-neutral-900"
                >
                  Cancel
                </button>

                <button
                  id="walkathon-submit-btn"
                  type="submit"
                  disabled={submitting}
                  className="px-8 py-3 rounded-xl font-bold text-xs uppercase tracking-wider bg-emerald-600 hover:bg-emerald-700 text-white shadow-md flex items-center gap-2 cursor-pointer disabled:opacity-50"
                >
                  {submitting ? (
                    <span>Generating Official Bib...</span>
                  ) : (
                    <>
                      <span>Complete Registration</span>
                      <ArrowRight className="w-4 h-4 text-amber-300" />
                    </>
                  )}
                </button>
              </div>
            </form>
          ) : (
            /* Digital Bib / Confirmation View */
            <div id="walkathon-bib-container" className="space-y-6">
              <div className="text-center">
                <div className="w-12 h-12 rounded-full bg-emerald-100 text-emerald-700 border border-emerald-200 flex items-center justify-center mx-auto mb-3">
                  <CheckCircle className="w-6 h-6" />
                </div>
                <h4 className="text-xl sm:text-2xl font-black text-neutral-900 uppercase tracking-tight">
                  Registration Confirmed!
                </h4>
                <p className="text-xs sm:text-sm text-neutral-600 mt-1">
                  Your entry for the Calabar Walkathon 7.0 has been officially registered.
                </p>
              </div>

              {/* The Printable Digital Race Bib */}
              <div
                id="digital-race-bib"
                className="p-6 rounded-2xl bg-neutral-50 border-2 border-emerald-600 shadow-lg relative overflow-hidden"
              >
                {/* Gold Top Strip */}
                <div className="absolute top-0 left-0 right-0 h-2 bg-gradient-to-r from-emerald-600 via-amber-400 to-emerald-600" />

                <div className="flex items-center justify-between border-b border-neutral-200 pb-4 mb-4">
                  <div className="flex items-center gap-3">
                    <div className="w-12 h-12 rounded-xl bg-black border border-amber-400/70 overflow-hidden flex items-center justify-center shadow-xs shrink-0">
                      <img
                        src="/hbfc-logo.jpg"
                        alt="HBFC Official Logo"
                        className="w-full h-full object-contain p-0.5"
                        referrerPolicy="no-referrer"
                      />
                    </div>
                    <div>
                      <span className="text-[10px] font-extrabold uppercase tracking-widest text-emerald-800 block">
                        Healthy Billionaires Fitness Club
                      </span>
                      <span className="text-lg font-black text-neutral-900 tracking-wide">
                        CALABAR WALKATHON 7.0
                      </span>
                    </div>
                  </div>
                  <div className="text-right">
                    <span className="px-2.5 py-1 rounded bg-amber-100 border border-amber-300 text-amber-900 text-xs font-black">
                      15 KM
                    </span>
                    <span className="text-[10px] text-neutral-500 block mt-1">Sept 19, 2026</span>
                  </div>
                </div>

                {/* Big Bib Number */}
                <div className="my-4 text-center py-4 bg-white rounded-xl border border-neutral-200 shadow-xs">
                  <span className="text-xs uppercase font-mono tracking-widest text-neutral-500 block mb-1">
                    Official Participant Bib ID
                  </span>
                  <span className="text-3xl sm:text-4xl font-black text-emerald-800 font-mono tracking-wider">
                    {registeredBib.regNumber}
                  </span>
                </div>

                {/* Attendee Details Grid */}
                <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 text-left text-xs mb-4">
                  <div>
                    <span className="text-[10px] uppercase font-bold text-neutral-500 block">Participant</span>
                    <span className="font-bold text-neutral-900 truncate block">{registeredBib.fullName}</span>
                  </div>
                  <div>
                    <span className="text-[10px] uppercase font-bold text-neutral-500 block">T-Shirt Size</span>
                    <span className="font-bold text-emerald-700">{registeredBib.tshirtSize}</span>
                  </div>
                  <div>
                    <span className="text-[10px] uppercase font-bold text-neutral-500 block">Gender / Age</span>
                    <span className="font-bold text-neutral-900">{registeredBib.gender} ({registeredBib.age || '—'})</span>
                  </div>
                  <div>
                    <span className="text-[10px] uppercase font-bold text-neutral-500 block">City</span>
                    <span className="font-bold text-neutral-900">{registeredBib.location}</span>
                  </div>
                </div>

                {/* Emergency Contact on Bib */}
                <div className="p-2.5 rounded-lg bg-white border border-neutral-200 text-[11px] text-neutral-600 flex items-center justify-between">
                  <span>
                    Emergency Contact: <strong className="text-neutral-900">{registeredBib.emergencyName}</strong> ({registeredBib.emergencyPhone})
                  </span>
                  <span className="text-[10px] font-bold uppercase text-emerald-700">Verified</span>
                </div>
              </div>

              {/* Kit Collection Notice */}
              <div className="p-4 rounded-xl bg-neutral-50 border border-neutral-200 text-xs space-y-1 text-neutral-700">
                <p className="font-bold text-neutral-900 flex items-center gap-1.5">
                  <ShieldCheck className="w-4 h-4 text-amber-600" />
                  Kit Collection Notice
                </p>
                <p>
                  Present this digital bib or registration number at the HBFC Secretariat or collection booth at U.J. Esuene Stadium starting September 12, 2026 to pick up your customized kit, jersey, and wristband.
                </p>
              </div>

              {/* Actions */}
              <div className="flex flex-wrap items-center justify-between gap-3 pt-2">
                <button
                  onClick={resetForm}
                  className="px-4 py-2 text-xs font-semibold text-neutral-600 hover:text-neutral-900"
                >
                  Register Another Participant
                </button>

                <div className="flex items-center gap-2">
                  <button
                    onClick={handlePrint}
                    className="px-4 py-2.5 rounded-xl bg-neutral-100 hover:bg-neutral-200 text-neutral-800 text-xs font-bold uppercase tracking-wider flex items-center gap-1.5 transition-colors border border-neutral-200"
                  >
                    <Printer className="w-3.5 h-3.5" />
                    <span>Print Bib</span>
                  </button>

                  <button
                    onClick={onClose}
                    className="px-6 py-2.5 rounded-xl bg-emerald-600 hover:bg-emerald-700 text-white text-xs font-bold uppercase tracking-wider shadow-md transition-colors"
                  >
                    Done
                  </button>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}