import React, { useState } from 'react';
import { useCollege } from '../context/CollegeContext';
import {
  X,
  Printer,
  CheckCircle2,
  AlertCircle,
  FileCheck,
  Building,
  Upload,
  Calendar,
  CreditCard,
  Phone,
  Mail,
  ShieldCheck,
  Download,
} from 'lucide-react';
import confetti from 'canvas-confetti';

interface RegistrationFormModalProps {
  isOpen: boolean;
  onClose: () => void;
}

export const RegistrationFormModal: React.FC<RegistrationFormModalProps> = ({
  isOpen,
  onClose,
}) => {
  const { courses, submitApplication } = useCollege();

  // Form fields mirroring STC/APPLFORM/01/2025
  const [formData, setFormData] = useState({
    // Section A: Personal Details
    surname: '',
    firstNames: '',
    dob: '',
    nationality: 'Malawian',
    districtOfOrigin: '',
    traditionalAuthority: '',
    village: '',
    ownPhone: '',
    gender: 'MALE' as 'MALE' | 'FEMALE',

    // Section A: Contact Details
    guardianName: '',
    guardianPhone: '',
    guardianEmail: '',
    residentialAddress: '',
    postalAddress: '',

    // Section B: Academic Record
    school1: '',
    school2: '',
    englishGrade: '2 (Distinction)',
    mathGrade: '3 (Credit)',
    otherSubject1: 'Physical Science',
    otherGrade1: '3 (Credit)',
    otherSubject2: 'Biology',
    otherGrade2: '4 (Credit)',
    highestQualification: 'MSCE (Malawi School Certificate of Education)',

    // Section C: Course Being Applied For
    firstChoiceCourseCode: courses[0]?.code || 'ICAM1001',
    secondChoiceCourseCode: courses[5]?.code || 'CG1004',
    studyMode: 'Day-Release' as 'Day-Release' | 'Weekend',
    boardingRequested: false,

    // Section D: Other Information
    hasDisability: false,
    disabilityExplanation: '',

    // Payment proof (Bank Deposit)
    depositSlipRef: '',
    depositSlipDate: new Date().toISOString().split('T')[0],
    bankName: 'National Bank of Malawi - Customs Road',
    depositAmount: 10000,
    agreedToTerms: true,
  });

  const [submittedApp, setSubmittedApp] = useState<any | null>(null);
  const [errorMsg, setErrorMsg] = useState('');

  if (!isOpen) return null;

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!formData.surname || !formData.firstNames || !formData.ownPhone || !formData.guardianName) {
      setErrorMsg('Please complete all required personal, guardian, and academic fields.');
      return;
    }
    if (!formData.depositSlipRef) {
      setErrorMsg('Please enter the National Bank deposit slip reference number for the MK10,000 application fee.');
      return;
    }

    setErrorMsg('');

    const msceGrades = [
      { subject: 'English', grade: formData.englishGrade },
      { subject: 'Mathematics', grade: formData.mathGrade },
      { subject: formData.otherSubject1, grade: formData.otherGrade1 },
      { subject: formData.otherSubject2, grade: formData.otherGrade2 },
    ].filter(g => g.subject && g.grade);

    const previousSchools = [formData.school1, formData.school2].filter(Boolean);

    const result = submitApplication({
      surname: formData.surname,
      firstNames: formData.firstNames,
      dob: formData.dob || '2004-06-15',
      nationality: formData.nationality,
      districtOfOrigin: formData.districtOfOrigin || 'Blantyre',
      traditionalAuthority: formData.traditionalAuthority || 'Kapeni',
      village: formData.village || 'Soche',
      ownPhone: formData.ownPhone,
      gender: formData.gender,
      guardianName: formData.guardianName,
      guardianPhone: formData.guardianPhone,
      guardianEmail: formData.guardianEmail || undefined,
      residentialAddress: formData.residentialAddress || 'Limbe, Blantyre',
      postalAddress: formData.postalAddress || 'P.O. Box 515, Limbe',
      previousSchools: previousSchools.length ? previousSchools : ['Chichiri Secondary School'],
      msceGrades,
      highestQualification: formData.highestQualification,
      firstChoiceCourseCode: formData.firstChoiceCourseCode,
      secondChoiceCourseCode: formData.secondChoiceCourseCode,
      studyMode: formData.studyMode,
      boardingRequested: formData.boardingRequested,
      hasDisability: formData.hasDisability,
      disabilityExplanation: formData.disabilityExplanation,
      registrationFeePaid: true,
      registrationFeeAmount: 10000,
      depositSlipRef: formData.depositSlipRef,
      depositSlipDate: formData.depositSlipDate,
      bankName: formData.bankName,
      accountsOfficerStamp: 'OFFICIAL INTAKE RECEIPT - PENDING STAMP',
    });

    setSubmittedApp(result);
    try {
      confetti({
        particleCount: 80,
        spread: 70,
        origin: { y: 0.6 },
      });
    } catch (err) {
      // ignore
    }
  };

  const selectedFirstCourse = courses.find(c => c.code === formData.firstChoiceCourseCode);
  const selectedSecondCourse = courses.find(c => c.code === formData.secondChoiceCourseCode);

  return (
    <div className="fixed inset-0 z-50 bg-black/70 backdrop-blur-sm flex items-center justify-center p-2 sm:p-4 overflow-y-auto">
      <div className="bg-white rounded-2xl shadow-2xl max-w-4xl w-full max-h-[92vh] flex flex-col overflow-hidden border border-slate-200 animate-in fade-in zoom-in-95">
        
        {/* Header Modal Bar */}
        <div className="bg-slate-900 text-white px-6 py-4 flex items-center justify-between border-b border-slate-800 shrink-0">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 rounded-lg bg-emerald-600 border border-emerald-400 flex items-center justify-center font-bold text-white shadow-sm">
              <FileCheck className="w-5 h-5" />
            </div>
            <div>
              <h2 className="text-base font-bold tracking-tight text-white leading-tight">
                SOCHE TECHNICAL COLLEGE
              </h2>
              <p className="text-xs text-emerald-400 font-mono">
                FORM REF: STC/APPLFORM/01/2025 • JULY 2026 INTAKE
              </p>
            </div>
          </div>
          <button
            onClick={onClose}
            aria-label="Close modal"
            className="p-1.5 text-slate-400 hover:text-white hover:bg-slate-800 rounded-lg transition"
          >
            <X className="w-5 h-5" />
          </button>
        </div>

        {/* Content Body */}
        <div className="flex-1 overflow-y-auto p-4 sm:p-6 space-y-6">
          {submittedApp ? (
            /* Confirmation & Printable Form View */
            <div className="space-y-6 animate-in fade-in">
              <div className="bg-emerald-50 border border-emerald-300 rounded-xl p-5 text-emerald-950 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
                <div className="flex items-center gap-3">
                  <CheckCircle2 className="w-8 h-8 text-emerald-600 shrink-0" />
                  <div>
                    <h3 className="font-bold text-lg text-emerald-900">
                      Application Submitted Successfully!
                    </h3>
                    <p className="text-xs text-emerald-800">
                      Reference Number: <strong className="font-mono">{submittedApp.refNumber}</strong> • Status: <span className="bg-amber-100 text-amber-900 px-2 py-0.5 rounded font-semibold text-xs border border-amber-300">Pending Verification</span>
                    </p>
                    <p className="text-xs text-slate-600 mt-1">
                      Our Continuing Education Programmes Office and Accounts Officer will verify your bank deposit slip (Ref: {submittedApp.depositSlipRef}).
                    </p>
                  </div>
                </div>
                <div className="flex items-center gap-2 shrink-0">
                  <button
                    onClick={() => window.print()}
                    className="inline-flex items-center gap-1.5 bg-slate-900 hover:bg-slate-800 text-white text-xs font-semibold px-4 py-2 rounded-lg transition shadow-sm"
                  >
                    <Printer className="w-4 h-4" />
                    Print Form
                  </button>
                </div>
              </div>

              {/* Exact Paper Copy Preview */}
              <div className="border-2 border-slate-300 rounded-xl p-6 bg-slate-50 font-sans shadow-sm text-slate-900 space-y-5 text-xs sm:text-sm">
                
                {/* Official College Header on Paper */}
                <div className="border-b-2 border-slate-800 pb-4 text-center space-y-1">
                  <div className="text-xs font-serif text-slate-500 uppercase tracking-widest">
                    Republic of Malawi
                  </div>
                  <h1 className="text-xl sm:text-2xl font-bold tracking-tight text-slate-900 font-serif">
                    SOCHE TECHNICAL COLLEGE
                  </h1>
                  <p className="text-xs font-semibold text-slate-700 uppercase tracking-wider">
                    CONTINUING EDUCATION PROGRAMMES APPLICATION AND REGISTRATION FORM
                  </p>
                  <p className="text-xs font-bold text-emerald-800">
                    JULY 2026 INTAKE — SEMESTER OPENS ON 13TH JULY, 2026
                  </p>
                  <div className="flex flex-wrap items-center justify-between text-[11px] text-slate-600 pt-2 border-t border-slate-300">
                    <span><strong>Ref No:</strong> {submittedApp.refNumber}</span>
                    <span><strong>Date:</strong> {submittedApp.applicationDate}</span>
                    <span><strong>P/Bag 515:</strong> Limbe, Malawi</span>
                  </div>
                </div>

                {/* Section A: Personal & Contact */}
                <div>
                  <h4 className="font-bold bg-slate-800 text-white px-3 py-1 text-xs tracking-wider uppercase rounded-t">
                    A. PERSONAL & CONTACT DETAILS
                  </h4>
                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 border border-slate-300 p-3 bg-white rounded-b">
                    <div><strong>Surname:</strong> {submittedApp.surname}</div>
                    <div><strong>First Name(s):</strong> {submittedApp.firstNames}</div>
                    <div><strong>Date of Birth:</strong> {submittedApp.dob}</div>
                    <div><strong>Gender:</strong> {submittedApp.gender}</div>
                    <div><strong>Nationality:</strong> {submittedApp.nationality}</div>
                    <div><strong>District of Origin:</strong> {submittedApp.districtOfOrigin}</div>
                    <div><strong>T/A & Village:</strong> {submittedApp.traditionalAuthority}, {submittedApp.village}</div>
                    <div><strong>Applicant Phone:</strong> {submittedApp.ownPhone}</div>
                    <div className="sm:col-span-2 pt-2 border-t border-slate-200">
                      <strong>Guardian's Name & Contact:</strong> {submittedApp.guardianName} ({submittedApp.guardianPhone})
                    </div>
                    <div className="sm:col-span-2">
                      <strong>Residential Address:</strong> {submittedApp.residentialAddress} | <strong>Postal:</strong> {submittedApp.postalAddress}
                    </div>
                  </div>
                </div>

                {/* Section B: Academic Record */}
                <div>
                  <h4 className="font-bold bg-slate-800 text-white px-3 py-1 text-xs tracking-wider uppercase rounded-t">
                    B. ACADEMIC RECORD (MSCE / EQUIVALENT)
                  </h4>
                  <div className="border border-slate-300 p-3 bg-white rounded-b space-y-2">
                    <p><strong>Previous Schools Attended:</strong> {submittedApp.previousSchools?.join(', ') || 'Chichiri Secondary'}</p>
                    <p><strong>Highest Qualification:</strong> {submittedApp.highestQualification}</p>
                    <div className="grid grid-cols-2 sm:grid-cols-4 gap-2 pt-2">
                      {submittedApp.msceGrades?.map((item: any, idx: number) => (
                        <div key={idx} className="bg-slate-100 p-2 rounded border border-slate-200 text-xs">
                          <span className="font-medium text-slate-700 block">{item.subject}:</span>
                          <span className="font-bold text-slate-900">{item.grade}</span>
                        </div>
                      ))}
                    </div>
                  </div>
                </div>

                {/* Section C: Course Choices */}
                <div>
                  <h4 className="font-bold bg-slate-800 text-white px-3 py-1 text-xs tracking-wider uppercase rounded-t">
                    C. COURSE BEING APPLIED FOR
                  </h4>
                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 border border-slate-300 p-3 bg-white rounded-b">
                    <div>
                      <strong>First Choice:</strong> {selectedFirstCourse ? `${selectedFirstCourse.code} - ${selectedFirstCourse.name} (${selectedFirstCourse.examBoard})` : submittedApp.firstChoiceCourseCode}
                    </div>
                    <div>
                      <strong>Second Choice:</strong> {selectedSecondCourse ? `${selectedSecondCourse.code} - ${selectedSecondCourse.name} (${selectedSecondCourse.examBoard})` : submittedApp.secondChoiceCourseCode}
                    </div>
                    <div><strong>Study Mode:</strong> {submittedApp.studyMode}</div>
                    <div><strong>Boarding Requested:</strong> {submittedApp.boardingRequested ? 'YES (MK450,000/term)' : 'NO (Day Scholar)'}</div>
                  </div>
                </div>

                {/* Section D & E: Payment & Official Stamp */}
                <div>
                  <h4 className="font-bold bg-slate-800 text-white px-3 py-1 text-xs tracking-wider uppercase rounded-t">
                    D & E. PAYMENT & OFFICIAL ACCOUNTS RECORD
                  </h4>
                  <div className="border border-slate-300 p-3 bg-white rounded-b space-y-3">
                    <div className="grid grid-cols-1 sm:grid-cols-3 gap-2 text-xs">
                      <div><strong>App Fee Paid:</strong> MK 10,000.00</div>
                      <div><strong>Deposit Slip Ref:</strong> {submittedApp.depositSlipRef}</div>
                      <div><strong>Bank Account:</strong> National Bank (Customs Road) #1003452219</div>
                    </div>

                    <div className="p-3 bg-amber-50 border border-amber-300 rounded flex items-center justify-between">
                      <div>
                        <div className="text-xs font-bold text-amber-900 uppercase">Accounts Officer Verification Stamp</div>
                        <div className="text-xs text-amber-800 font-mono mt-0.5">
                          {submittedApp.accountsOfficerStamp || 'PENDING ACCOUNTS OFFICER SIGNATURE'}
                        </div>
                      </div>
                      <div className="text-right text-xs text-slate-500 font-mono">
                        SOCHE TECHNICAL COLLEGE<br />LIMBE, MALAWI
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div className="flex justify-end gap-3">
                <button
                  type="button"
                  onClick={() => setSubmittedApp(null)}
                  className="px-4 py-2 bg-slate-200 hover:bg-slate-300 text-slate-800 text-xs font-semibold rounded-lg transition"
                >
                  Submit Another Form
                </button>
                <button
                  type="button"
                  onClick={onClose}
                  className="px-5 py-2 bg-emerald-600 hover:bg-emerald-700 text-white text-xs font-semibold rounded-lg transition"
                >
                  Done & Go to Portal
                </button>
              </div>
            </div>
          ) : (
            /* Interactive Admission & Registration Form */
            <form onSubmit={handleSubmit} className="space-y-6 text-slate-800">
              
              {/* Instructions Callout from Page 1 */}
              <div className="bg-amber-50 border-l-4 border-amber-500 p-4 rounded-r-xl text-xs space-y-1.5 text-amber-950">
                <div className="font-bold flex items-center gap-1.5 text-amber-900">
                  <AlertCircle className="w-4 h-4 text-amber-600" />
                  Official Soche Technical College Registration Instructions
                </div>
                <p>
                  • <strong>Entry Requirement:</strong> Pass in English at MSCE; those with credits and above have an added advantage.
                </p>
                <p>
                  • <strong>Application Fee:</strong> MK 10,000.00 must be deposited directly into <strong>National Bank of Malawi, Customs Road Service Centre, Account Name: Soche Technical College, A/C No: 1003452219</strong>.
                </p>
                <p>
                  • <strong>Payment Terms:</strong> Tuition fees payable in full or 70% upon registration with 30% balance payable at month-end.
                </p>
              </div>

              {errorMsg && (
                <div className="p-3 bg-rose-50 border border-rose-300 rounded-lg text-xs font-medium text-rose-800 flex items-center gap-2">
                  <AlertCircle className="w-4 h-4 text-rose-600 shrink-0" />
                  {errorMsg}
                </div>
              )}

              {/* SECTION A: PERSONAL DETAILS */}
              <div className="border border-slate-200 rounded-xl p-4 bg-slate-50/50 space-y-4">
                <div className="flex items-center justify-between border-b border-slate-200 pb-2">
                  <h3 className="font-bold text-slate-900 text-sm flex items-center gap-2">
                    <span className="w-6 h-6 rounded-full bg-emerald-600 text-white text-xs flex items-center justify-center font-bold">A</span>
                    Personal Details
                  </h3>
                  <span className="text-xs text-slate-500">* Required</span>
                </div>

                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 text-xs">
                  <div>
                    <label className="block font-semibold text-slate-700 mb-1">SURNAME *</label>
                    <input
                      type="text"
                      required
                      placeholder="e.g. Phiri"
                      value={formData.surname}
                      onChange={e => setFormData({ ...formData, surname: e.target.value })}
                      className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:outline-none"
                    />
                  </div>

                  <div>
                    <label className="block font-semibold text-slate-700 mb-1">FIRST NAME(S) *</label>
                    <input
                      type="text"
                      required
                      placeholder="e.g. Chimwemwe Joyce"
                      value={formData.firstNames}
                      onChange={e => setFormData({ ...formData, firstNames: e.target.value })}
                      className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:outline-none"
                    />
                  </div>

                  <div>
                    <label className="block font-semibold text-slate-700 mb-1">DATE OF BIRTH</label>
                    <input
                      type="date"
                      value={formData.dob}
                      onChange={e => setFormData({ ...formData, dob: e.target.value })}
                      className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:outline-none"
                    />
                  </div>

                  <div>
                    <label className="block font-semibold text-slate-700 mb-1">GENDER</label>
                    <div className="flex gap-4 pt-1">
                      <label className="flex items-center gap-2 font-medium cursor-pointer">
                        <input
                          type="radio"
                          name="gender"
                          value="MALE"
                          checked={formData.gender === 'MALE'}
                          onChange={() => setFormData({ ...formData, gender: 'MALE' })}
                          className="text-emerald-600 focus:ring-emerald-500"
                        />
                        Male
                      </label>
                      <label className="flex items-center gap-2 font-medium cursor-pointer">
                        <input
                          type="radio"
                          name="gender"
                          value="FEMALE"
                          checked={formData.gender === 'FEMALE'}
                          onChange={() => setFormData({ ...formData, gender: 'FEMALE' })}
                          className="text-emerald-600 focus:ring-emerald-500"
                        />
                        Female
                      </label>
                    </div>
                  </div>

                  <div>
                    <label className="block font-semibold text-slate-700 mb-1">NATIONALITY</label>
                    <input
                      type="text"
                      value={formData.nationality}
                      onChange={e => setFormData({ ...formData, nationality: e.target.value })}
                      className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:outline-none"
                    />
                  </div>

                  <div>
                    <label className="block font-semibold text-slate-700 mb-1">DISTRICT OF ORIGIN</label>
                    <input
                      type="text"
                      placeholder="e.g. Thyolo, Blantyre, Zomba"
                      value={formData.districtOfOrigin}
                      onChange={e => setFormData({ ...formData, districtOfOrigin: e.target.value })}
                      className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:outline-none"
                    />
                  </div>

                  <div>
                    <label className="block font-semibold text-slate-700 mb-1">TRADITIONAL AUTHORITY (T/A)</label>
                    <input
                      type="text"
                      placeholder="e.g. Nchilamwela"
                      value={formData.traditionalAuthority}
                      onChange={e => setFormData({ ...formData, traditionalAuthority: e.target.value })}
                      className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:outline-none"
                    />
                  </div>

                  <div>
                    <label className="block font-semibold text-slate-700 mb-1">VILLAGE</label>
                    <input
                      type="text"
                      placeholder="e.g. Goliati"
                      value={formData.village}
                      onChange={e => setFormData({ ...formData, village: e.target.value })}
                      className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:outline-none"
                    />
                  </div>

                  <div>
                    <label className="block font-semibold text-slate-700 mb-1">OWN PHONE NUMBER *</label>
                    <input
                      type="tel"
                      required
                      placeholder="e.g. +265 884 902 113"
                      value={formData.ownPhone}
                      onChange={e => setFormData({ ...formData, ownPhone: e.target.value })}
                      className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:outline-none font-mono"
                    />
                  </div>
                </div>
              </div>

              {/* CONTACT DETAILS & GUARDIAN */}
              <div className="border border-slate-200 rounded-xl p-4 bg-slate-50/50 space-y-4">
                <div className="border-b border-slate-200 pb-2">
                  <h3 className="font-bold text-slate-900 text-sm flex items-center gap-2">
                    <span className="w-6 h-6 rounded-full bg-emerald-600 text-white text-xs flex items-center justify-center font-bold">A.2</span>
                    Contact & Guardian Details
                  </h3>
                </div>

                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 text-xs">
                  <div>
                    <label className="block font-semibold text-slate-700 mb-1">GUARDIAN'S NAME *</label>
                    <input
                      type="text"
                      required
                      placeholder="e.g. William Phiri"
                      value={formData.guardianName}
                      onChange={e => setFormData({ ...formData, guardianName: e.target.value })}
                      className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:outline-none"
                    />
                  </div>

                  <div>
                    <label className="block font-semibold text-slate-700 mb-1">GUARDIAN'S PHONE NO *</label>
                    <input
                      type="tel"
                      required
                      placeholder="e.g. +265 999 780 431"
                      value={formData.guardianPhone}
                      onChange={e => setFormData({ ...formData, guardianPhone: e.target.value })}
                      className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:outline-none font-mono"
                    />
                  </div>

                  <div>
                    <label className="block font-semibold text-slate-700 mb-1">GUARDIAN'S EMAIL (For automated notifications)</label>
                    <input
                      type="email"
                      placeholder="e.g. phiriwilliam29@gmail.com"
                      value={formData.guardianEmail}
                      onChange={e => setFormData({ ...formData, guardianEmail: e.target.value })}
                      className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:outline-none font-mono"
                    />
                  </div>

                  <div>
                    <label className="block font-semibold text-slate-700 mb-1">RESIDENTIAL ADDRESS</label>
                    <input
                      type="text"
                      placeholder="e.g. Plot 44, Namiwawa, Blantyre"
                      value={formData.residentialAddress}
                      onChange={e => setFormData({ ...formData, residentialAddress: e.target.value })}
                      className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:outline-none"
                    />
                  </div>

                  <div className="sm:col-span-2">
                    <label className="block font-semibold text-slate-700 mb-1">POSTAL ADDRESS</label>
                    <input
                      type="text"
                      placeholder="e.g. P.O. Box 1120, Blantyre, Malawi"
                      value={formData.postalAddress}
                      onChange={e => setFormData({ ...formData, postalAddress: e.target.value })}
                      className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:outline-none"
                    />
                  </div>
                </div>
              </div>

              {/* SECTION B: ACADEMIC RECORD */}
              <div className="border border-slate-200 rounded-xl p-4 bg-slate-50/50 space-y-4">
                <div className="border-b border-slate-200 pb-2">
                  <h3 className="font-bold text-slate-900 text-sm flex items-center gap-2">
                    <span className="w-6 h-6 rounded-full bg-emerald-600 text-white text-xs flex items-center justify-center font-bold">B</span>
                    Academic Record
                  </h3>
                </div>

                <div className="space-y-4 text-xs">
                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div>
                      <label className="block font-semibold text-slate-700 mb-1">PREVIOUS SCHOOL ATTENDED (1)</label>
                      <input
                        type="text"
                        placeholder="e.g. Chichiri Secondary School"
                        value={formData.school1}
                        onChange={e => setFormData({ ...formData, school1: e.target.value })}
                        className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:outline-none"
                      />
                    </div>
                    <div>
                      <label className="block font-semibold text-slate-700 mb-1">HIGHEST QUALIFICATION</label>
                      <input
                        type="text"
                        value={formData.highestQualification}
                        onChange={e => setFormData({ ...formData, highestQualification: e.target.value })}
                        className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:outline-none"
                      />
                    </div>
                  </div>

                  <div>
                    <label className="block font-semibold text-slate-700 mb-2">MSCE SUBJECT GRADES</label>
                    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
                      <div className="bg-white p-3 border border-slate-300 rounded-lg">
                        <span className="font-bold text-slate-800 block mb-1">1. ENGLISH (Required)</span>
                        <select
                          value={formData.englishGrade}
                          onChange={e => setFormData({ ...formData, englishGrade: e.target.value })}
                          className="w-full p-1.5 border border-slate-300 rounded text-xs bg-slate-50"
                        >
                          <option value="1 (Distinction)">1 (Distinction)</option>
                          <option value="2 (Distinction)">2 (Distinction)</option>
                          <option value="3 (Credit)">3 (Credit)</option>
                          <option value="4 (Credit)">4 (Credit)</option>
                          <option value="5 (Credit)">5 (Credit)</option>
                          <option value="6 (Credit)">6 (Credit)</option>
                          <option value="7 (Pass)">7 (Pass)</option>
                          <option value="8 (Pass)">8 (Pass)</option>
                        </select>
                      </div>

                      <div className="bg-white p-3 border border-slate-300 rounded-lg">
                        <span className="font-bold text-slate-800 block mb-1">2. MATHEMATICS</span>
                        <select
                          value={formData.mathGrade}
                          onChange={e => setFormData({ ...formData, mathGrade: e.target.value })}
                          className="w-full p-1.5 border border-slate-300 rounded text-xs bg-slate-50"
                        >
                          <option value="1 (Distinction)">1 (Distinction)</option>
                          <option value="2 (Distinction)">2 (Distinction)</option>
                          <option value="3 (Credit)">3 (Credit)</option>
                          <option value="4 (Credit)">4 (Credit)</option>
                          <option value="5 (Credit)">5 (Credit)</option>
                          <option value="6 (Credit)">6 (Credit)</option>
                          <option value="7 (Pass)">7 (Pass)</option>
                        </select>
                      </div>

                      <div className="bg-white p-3 border border-slate-300 rounded-lg">
                        <span className="font-bold text-slate-800 block mb-1">3. SCIENCE / TECHNICAL</span>
                        <select
                          value={formData.otherGrade1}
                          onChange={e => setFormData({ ...formData, otherGrade1: e.target.value })}
                          className="w-full p-1.5 border border-slate-300 rounded text-xs bg-slate-50"
                        >
                          <option value="1 (Distinction)">1 (Distinction)</option>
                          <option value="2 (Distinction)">2 (Distinction)</option>
                          <option value="3 (Credit)">3 (Credit)</option>
                          <option value="4 (Credit)">4 (Credit)</option>
                          <option value="5 (Credit)">5 (Credit)</option>
                        </select>
                      </div>

                      <div className="bg-white p-3 border border-slate-300 rounded-lg">
                        <span className="font-bold text-slate-800 block mb-1">4. ELECTIVE SUBJECT</span>
                        <select
                          value={formData.otherGrade2}
                          onChange={e => setFormData({ ...formData, otherGrade2: e.target.value })}
                          className="w-full p-1.5 border border-slate-300 rounded text-xs bg-slate-50"
                        >
                          <option value="1 (Distinction)">1 (Distinction)</option>
                          <option value="2 (Distinction)">2 (Distinction)</option>
                          <option value="3 (Credit)">3 (Credit)</option>
                          <option value="4 (Credit)">4 (Credit)</option>
                          <option value="6 (Credit)">6 (Credit)</option>
                        </select>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              {/* SECTION C: COURSE CHOICES */}
              <div className="border border-slate-200 rounded-xl p-4 bg-slate-50/50 space-y-4">
                <div className="border-b border-slate-200 pb-2">
                  <h3 className="font-bold text-slate-900 text-sm flex items-center gap-2">
                    <span className="w-6 h-6 rounded-full bg-emerald-600 text-white text-xs flex items-center justify-center font-bold">C</span>
                    Course Being Applied For
                  </h3>
                </div>

                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 text-xs">
                  <div>
                    <label className="block font-semibold text-slate-700 mb-1">FIRST CHOICE COURSE *</label>
                    <select
                      value={formData.firstChoiceCourseCode}
                      onChange={e => setFormData({ ...formData, firstChoiceCourseCode: e.target.value })}
                      className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg font-medium text-slate-900"
                    >
                      {courses.map(c => (
                        <option key={c.code} value={c.code}>
                          {c.code}: {c.name} ({c.examBoard} - MWK {c.tuitionFee.toLocaleString()} {c.termOrSemester})
                        </option>
                      ))}
                    </select>
                    {selectedFirstCourse && (
                      <p className="mt-1 text-[11px] text-slate-500">
                        Exam Board: <strong>{selectedFirstCourse.examBoard}</strong> | Level: {selectedFirstCourse.level}
                      </p>
                    )}
                  </div>

                  <div>
                    <label className="block font-semibold text-slate-700 mb-1">SECOND CHOICE COURSE</label>
                    <select
                      value={formData.secondChoiceCourseCode}
                      onChange={e => setFormData({ ...formData, secondChoiceCourseCode: e.target.value })}
                      className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg font-medium text-slate-900"
                    >
                      {courses.map(c => (
                        <option key={`2-${c.code}`} value={c.code}>
                          {c.code}: {c.name} ({c.examBoard})
                        </option>
                      ))}
                    </select>
                  </div>

                  <div>
                    <label className="block font-semibold text-slate-700 mb-1">STUDY MODE</label>
                    <div className="flex gap-4 pt-1">
                      <label className="flex items-center gap-2 font-medium cursor-pointer">
                        <input
                          type="radio"
                          name="studyMode"
                          value="Day-Release"
                          checked={formData.studyMode === 'Day-Release'}
                          onChange={() => setFormData({ ...formData, studyMode: 'Day-Release' })}
                          className="text-emerald-600 focus:ring-emerald-500"
                        />
                        Day-Release (Full-time)
                      </label>
                      <label className="flex items-center gap-2 font-medium cursor-pointer">
                        <input
                          type="radio"
                          name="studyMode"
                          value="Weekend"
                          checked={formData.studyMode === 'Weekend'}
                          onChange={() => setFormData({ ...formData, studyMode: 'Weekend' })}
                          className="text-emerald-600 focus:ring-emerald-500"
                        />
                        Weekend Only
                      </label>
                    </div>
                  </div>

                  <div>
                    <label className="block font-semibold text-slate-700 mb-1">BOARDING ACCOMMODATION</label>
                    <label className="flex items-start gap-2 font-medium cursor-pointer text-xs pt-1">
                      <input
                        type="checkbox"
                        checked={formData.boardingRequested}
                        onChange={e => setFormData({ ...formData, boardingRequested: e.target.checked })}
                        className="mt-0.5 text-emerald-600 rounded"
                      />
                      <span>
                        Request Limited Boarding (Additional <strong>MK 450,000.00 / Term</strong> subject to Continuing Education Programmes Office approval)
                      </span>
                    </label>
                  </div>
                </div>
              </div>

              {/* SECTION D: DISABILITY */}
              <div className="border border-slate-200 rounded-xl p-4 bg-slate-50/50 space-y-3">
                <h3 className="font-bold text-slate-900 text-sm flex items-center gap-2">
                  <span className="w-6 h-6 rounded-full bg-emerald-600 text-white text-xs flex items-center justify-center font-bold">D</span>
                  Other Information & Special Needs
                </h3>
                <div className="text-xs space-y-2">
                  <label className="flex items-center gap-2 font-medium cursor-pointer">
                    <input
                      type="checkbox"
                      checked={formData.hasDisability}
                      onChange={e => setFormData({ ...formData, hasDisability: e.target.checked })}
                      className="text-emerald-600 rounded"
                    />
                    Do you have any disability or special learning accommodation requirements?
                  </label>

                  {formData.hasDisability && (
                    <textarea
                      placeholder="If yes, please explain so the college administration can provide adequate support..."
                      value={formData.disabilityExplanation}
                      onChange={e => setFormData({ ...formData, disabilityExplanation: e.target.value })}
                      className="w-full p-2 border border-slate-300 rounded-lg bg-white text-xs"
                      rows={2}
                    />
                  )}
                </div>
              </div>

              {/* SECTION E: PAYMENT OF APPLICATION FEE INTO NATIONAL BANK */}
              <div className="border-2 border-emerald-500/40 rounded-xl p-4 bg-emerald-50/40 space-y-4">
                <div className="border-b border-emerald-200 pb-2 flex items-center justify-between">
                  <h3 className="font-bold text-emerald-950 text-sm flex items-center gap-2">
                    <CreditCard className="w-5 h-5 text-emerald-700" />
                    Application & Registration Fee Bank Deposit (MK 10,000.00)
                  </h3>
                  <span className="text-[11px] font-bold bg-emerald-200 text-emerald-900 px-2 py-0.5 rounded">
                    MALAWI NATIONAL BANK
                  </span>
                </div>

                <div className="bg-white border border-emerald-300 rounded-lg p-3 text-xs space-y-2">
                  <p className="text-slate-700">
                    Application and Registration fee of <strong>MK 10,000.00</strong> must be deposited into the college's official bank account:
                  </p>
                  <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-2 font-mono bg-slate-50 p-2.5 rounded border border-slate-200 text-[11px]">
                    <div>
                      <span className="text-slate-500 block">Bank:</span>
                      <strong>National Bank of Malawi</strong>
                    </div>
                    <div>
                      <span className="text-slate-500 block">Service Centre:</span>
                      <strong>Customs Road</strong>
                    </div>
                    <div>
                      <span className="text-slate-500 block">Account Name:</span>
                      <strong>Soche Technical College</strong>
                    </div>
                    <div>
                      <span className="text-slate-500 block">Account Number:</span>
                      <strong className="text-emerald-700 text-xs">1003452219</strong>
                    </div>
                  </div>
                </div>

                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 text-xs">
                  <div>
                    <label className="block font-semibold text-slate-800 mb-1">
                      BANK DEPOSIT SLIP REFERENCE / TRANS ID *
                    </label>
                    <input
                      type="text"
                      required
                      placeholder="e.g. NB-LIMBE-9948201"
                      value={formData.depositSlipRef}
                      onChange={e => setFormData({ ...formData, depositSlipRef: e.target.value })}
                      className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:outline-none font-mono"
                    />
                  </div>

                  <div>
                    <label className="block font-semibold text-slate-800 mb-1">
                      DATE OF BANK DEPOSIT
                    </label>
                    <input
                      type="date"
                      value={formData.depositSlipDate}
                      onChange={e => setFormData({ ...formData, depositSlipDate: e.target.value })}
                      className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:outline-none"
                    />
                  </div>
                </div>

                {/* Bank Slip Attachment Simulation */}
                <div className="p-3 bg-white border-2 border-dashed border-emerald-300 rounded-lg flex items-center justify-between text-xs">
                  <div className="flex items-center gap-2">
                    <Upload className="w-5 h-5 text-emerald-600 shrink-0" />
                    <div>
                      <span className="font-bold text-slate-800 block">Bank Deposit Slip Attached</span>
                      <span className="text-[11px] text-slate-500">deposit_slip_stc_1003452219.pdf (1.2 MB verified)</span>
                    </div>
                  </div>
                  <span className="px-2.5 py-1 bg-emerald-100 text-emerald-800 font-semibold rounded text-[11px]">
                    Validated
                  </span>
                </div>
              </div>

              {/* Terms confirmation */}
              <div className="text-xs text-slate-600 space-y-1">
                <label className="flex items-start gap-2 cursor-pointer font-medium text-slate-700">
                  <input
                    type="checkbox"
                    required
                    checked={formData.agreedToTerms}
                    onChange={e => setFormData({ ...formData, agreedToTerms: e.target.checked })}
                    className="mt-0.5 text-emerald-600 rounded"
                  />
                  <span>
                    I confirm that the information provided is accurate and authentic according to MSCE standards. I acknowledge that fees once paid are non-refundable and non-transferable as per Soche Technical College July 2026 intake policy.
                  </span>
                </label>
              </div>

              {/* Form Action Buttons */}
              <div className="flex items-center justify-end gap-3 pt-3 border-t border-slate-200">
                <button
                  type="button"
                  onClick={onClose}
                  className="px-4 py-2 text-xs font-semibold text-slate-600 hover:text-slate-800 hover:bg-slate-100 rounded-lg transition"
                >
                  Cancel
                </button>
                <button
                  type="submit"
                  className="px-6 py-2.5 bg-emerald-600 hover:bg-emerald-700 text-white text-xs font-bold rounded-lg transition shadow-md flex items-center gap-2 active:scale-95"
                >
                  <FileCheck className="w-4 h-4" />
                  Submit Official Registration Form
                </button>
              </div>
            </form>
          )}
        </div>
      </div>
    </div>
  );
};