import { useState } from "react";
import { ArrowRight, Check, Phone } from "lucide-react";
import { PHONE_DISPLAY, PHONE_TEL } from "@/routes/__root";

const GRADES = [
  "Nursery",
  "LKG",
  "UKG",
  "Grade 1",
  "Grade 2",
  "Grade 3",
  "Grade 4",
  "Grade 5",
  "Grade 6",
  "Grade 7",
  "Grade 8",
  "Grade 9",
];

const fieldClass =
  "w-full border border-[var(--grey-300)] bg-white px-3.5 py-3 text-sm text-[var(--ws-ink)] outline-none transition-colors placeholder:text-[var(--grey-500)] focus:border-[var(--ws-ink)]";

function Sent({ label }: { label: string }) {
  return (
    <div className="flex flex-col items-start gap-3 border border-[var(--sage-400)] bg-[var(--sage-200)]/50 px-5 py-6">
      <span className="inline-flex h-9 w-9 items-center justify-center rounded-full bg-[var(--sage-700)] text-white">
        <Check size={18} strokeWidth={2} />
      </span>
      <p className="text-lg">{label}</p>
      <p className="text-sm text-[var(--grey-700)]">
        Our admissions team will reach out shortly. If you would rather speak now, call{" "}
        <a href={`tel:${PHONE_TEL}`} className="underline">
          {PHONE_DISPLAY}
        </a>
        .
      </p>
    </div>
  );
}

export function VisitForm() {
  const [sent, setSent] = useState(false);
  if (sent) return <Sent label="Thank you — your visit request is in." />;

  return (
    <form
      onSubmit={(e) => {
        e.preventDefault();
        setSent(true);
      }}
      className="space-y-3"
    >
      <div className="grid gap-3 sm:grid-cols-2">
        <input required name="parent" placeholder="Parent name" className={fieldClass} />
        <input
          required
          name="mobile"
          type="tel"
          inputMode="tel"
          pattern="[0-9+ ]{10,15}"
          placeholder="Mobile number"
          className={fieldClass}
        />
        <input required name="child" placeholder="Child's name" className={fieldClass} />
        <select required name="grade" defaultValue="" className={fieldClass}>
          <option value="" disabled>
            Grade applying for
          </option>
          {GRADES.map((g) => (
            <option key={g} value={g}>
              {g}
            </option>
          ))}
        </select>
      </div>
      <input
        required
        name="email"
        type="email"
        placeholder="Email address"
        className={fieldClass}
      />
      <div className="grid gap-3 sm:gap-px sm:bg-[var(--grey-300)]">
        <button
          type="submit"
          className="group inline-flex w-full items-center justify-center gap-2 bg-[var(--coral-600)] px-6 py-4 font-mono text-[12px] uppercase tracking-[0.18em] text-white transition-colors hover:bg-[var(--ws-ink)]"
        >
          Request a Campus Visit
          <ArrowRight size={16} strokeWidth={2} className="transition-transform group-hover:translate-x-1" />
        </button>
        <a
          href={`tel:${PHONE_TEL}`}
          className="[clip-path:polygon(10px_0,100%_0,100%_calc(100%-10px),calc(100%-10px)_100%,0_100%,0_10px)] inline-flex w-full items-center justify-center gap-2 border-2 border-[var(--ws-ink)] bg-white px-6 py-3.5 font-mono text-[12px] uppercase tracking-[0.18em] text-[var(--ws-ink)] transition-colors hover:bg-[var(--ws-ink)] hover:text-white sm:border-0 sm:bg-[var(--ws-paper)] sm:py-4 sm:[clip-path:none]"
        >
          <Phone size={15} strokeWidth={1.8} />
          Call Admissions: {PHONE_DISPLAY}
        </a>
      </div>

    </form>
  );
}


export function CallbackForm() {
  const [sent, setSent] = useState(false);
  if (sent) return <Sent label="Thank you — we'll call you back." />;

  return (
    <form
      onSubmit={(e) => {
        e.preventDefault();
        setSent(true);
      }}
      className="space-y-3"
    >
      <div className="grid gap-3 sm:grid-cols-3">
        <input required name="parent" placeholder="Parent name" className={fieldClass} />
        <input
          required
          name="mobile"
          type="tel"
          inputMode="tel"
          pattern="[0-9+ ]{10,15}"
          placeholder="Mobile number"
          className={fieldClass}
        />
        <select required name="grade" defaultValue="" className={fieldClass}>
          <option value="" disabled>
            Grade looking for
          </option>
          {GRADES.map((g) => (
            <option key={g} value={g}>
              {g}
            </option>
          ))}
        </select>
      </div>
      <button
        type="submit"
        className="inline-flex w-full items-center justify-center gap-2 bg-[var(--ws-ink)] px-6 py-4 font-mono text-[12px] uppercase tracking-[0.18em] text-white transition-colors hover:bg-[var(--coral-600)]"
      >
        Request a Call Back
        <ArrowRight size={16} strokeWidth={2} />
      </button>
      <p className="text-center text-sm text-[var(--grey-700)]">
        Prefer to speak now?{" "}
        <a href={`tel:${PHONE_TEL}`} className="inline-flex items-center gap-1 underline">
          <Phone size={13} strokeWidth={1.8} /> Call {PHONE_DISPLAY}
        </a>
      </p>
    </form>
  );
}