"use client";

import { useState } from "react";
import { api } from "@/lib/api";

const CLASS_OPTIONS = ["JSS1", "JSS2", "JSS3", "SSS1", "SSS2", "SSS3"];

const emptyForm = {
  studentName: "",
  gender: "Male",
  dateOfBirth: "",
  previousSchool: "",
  classApplying: "JSS1",
  parentName: "",
  parentPhone: "",
  parentEmail: "",
  address: "",
};

export default function AdmissionsPage() {
  const [form, setForm] = useState(emptyForm);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");
  const [appNo, setAppNo] = useState("");

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    setLoading(true);
    setError("");
    try {
      const res = await api.post<{ applicationNo: string }>("/admissions", form);
      setAppNo(res.data!.applicationNo);
      setForm(emptyForm);
    } catch (err) {
      setError(err instanceof Error ? err.message : "Submission failed");
    } finally {
      setLoading(false);
    }
  }

  if (appNo) {
    return (
      <div className="mx-auto max-w-xl px-4 py-24 text-center">
        <h1 className="text-2xl font-bold text-[var(--brand-blue)]">Application Submitted</h1>
        <p className="mt-3 text-gray-600">
          Your application number is:
        </p>
        <p className="mt-2 text-3xl font-extrabold text-[var(--brand-magenta)]">{appNo}</p>
        <p className="mt-4 text-sm text-gray-500">Please keep this number for reference. We will contact the parent/guardian phone or email provided.</p>
      </div>
    );
  }

  return (
    <div className="mx-auto max-w-3xl px-4 py-14">
      <h1 className="text-3xl font-bold text-[var(--brand-blue)] mb-2">Online Admission Form</h1>
      <p className="text-gray-600 mb-8">Fill in the details below to apply for admission.</p>

      <form onSubmit={handleSubmit} className="grid sm:grid-cols-2 gap-4 bg-white border border-[var(--brand-border)] rounded-2xl p-6 shadow-sm">
        <div className="sm:col-span-2">
          <label className="text-sm font-medium">Student Full Name</label>
          <input required value={form.studentName} onChange={(e) => setForm({ ...form, studentName: e.target.value })}
            className="mt-1 w-full rounded-md border border-[var(--brand-border)] px-3 py-2 text-sm" />
        </div>

        <div>
          <label className="text-sm font-medium">Gender</label>
          <select value={form.gender} onChange={(e) => setForm({ ...form, gender: e.target.value })}
            className="mt-1 w-full rounded-md border border-[var(--brand-border)] px-3 py-2 text-sm">
            <option>Male</option>
            <option>Female</option>
          </select>
        </div>

        <div>
          <label className="text-sm font-medium">Date of Birth</label>
          <input type="date" required value={form.dateOfBirth} onChange={(e) => setForm({ ...form, dateOfBirth: e.target.value })}
            className="mt-1 w-full rounded-md border border-[var(--brand-border)] px-3 py-2 text-sm" />
        </div>

        <div>
          <label className="text-sm font-medium">Class Applying For</label>
          <select value={form.classApplying} onChange={(e) => setForm({ ...form, classApplying: e.target.value })}
            className="mt-1 w-full rounded-md border border-[var(--brand-border)] px-3 py-2 text-sm">
            {CLASS_OPTIONS.map((c) => <option key={c} value={c}>{c}</option>)}
          </select>
        </div>

        <div>
          <label className="text-sm font-medium">Previous School</label>
          <input value={form.previousSchool} onChange={(e) => setForm({ ...form, previousSchool: e.target.value })}
            className="mt-1 w-full rounded-md border border-[var(--brand-border)] px-3 py-2 text-sm" />
        </div>

        <div>
          <label className="text-sm font-medium">Parent/Guardian Name</label>
          <input required value={form.parentName} onChange={(e) => setForm({ ...form, parentName: e.target.value })}
            className="mt-1 w-full rounded-md border border-[var(--brand-border)] px-3 py-2 text-sm" />
        </div>

        <div>
          <label className="text-sm font-medium">Parent/Guardian Phone</label>
          <input required value={form.parentPhone} onChange={(e) => setForm({ ...form, parentPhone: e.target.value })}
            className="mt-1 w-full rounded-md border border-[var(--brand-border)] px-3 py-2 text-sm" />
        </div>

        <div>
          <label className="text-sm font-medium">Parent/Guardian Email</label>
          <input type="email" value={form.parentEmail} onChange={(e) => setForm({ ...form, parentEmail: e.target.value })}
            className="mt-1 w-full rounded-md border border-[var(--brand-border)] px-3 py-2 text-sm" />
        </div>

        <div className="sm:col-span-2">
          <label className="text-sm font-medium">Address</label>
          <textarea value={form.address} onChange={(e) => setForm({ ...form, address: e.target.value })}
            className="mt-1 w-full rounded-md border border-[var(--brand-border)] px-3 py-2 text-sm" rows={3} />
        </div>

        {error && <p className="sm:col-span-2 text-sm text-red-600">{error}</p>}

        <div className="sm:col-span-2">
          <button type="submit" disabled={loading}
            className="w-full rounded-full bg-[var(--brand-magenta)] text-white py-3 font-semibold hover:bg-[var(--brand-blue)] transition-colors disabled:opacity-60">
            {loading ? "Submitting..." : "Submit Application"}
          </button>
        </div>
      </form>
    </div>
  );
}