import { type FormEvent, type ReactNode, useState } from "react";
import { treatments, studio } from "@/data/studio";
import { Button } from "@/components/ui/button";

export function Booking() {
  const [sent, setSent] = useState(false);

  function onSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    setSent(true);
  }

  return (
    <section id="rezervacija" className="bg-canvas py-20 sm:py-28">
      <div className="mx-auto grid max-w-6xl gap-14 px-5 lg:grid-cols-[1fr_1.1fr] lg:gap-20 sm:px-6">
        <div>
          <p className="text-xs font-medium tracking-[0.24em] text-sage uppercase">
            Rezervacija
          </p>
          <h2 className="mt-3 font-display text-4xl tracking-tight text-ink sm:text-5xl">
            Odaberite vrijeme za sebe.
          </h2>
          <p className="mt-5 max-w-md text-base leading-relaxed text-muted">
            Pošaljite željeni termin. Javimo se istog radnog dana da potvrdimo
            sat i tretman. Ako želite brže, nazovite nas.
          </p>
          <div className="mt-10 space-y-5 text-sm">
            <p>
              <span className="block text-xs tracking-[0.18em] text-subtle uppercase">
                Telefon
              </span>
              <a
                href={studio.phoneHref}
                className="mt-1 inline-block font-display text-2xl text-ink"
              >
                {studio.phone}
              </a>
            </p>
            <p>
              <span className="block text-xs tracking-[0.18em] text-subtle uppercase">
                E-pošta
              </span>
              <a
                href={`mailto:${studio.email}`}
                className="mt-1 inline-block text-base text-ink underline-offset-4 hover:underline"
              >
                {studio.email}
              </a>
            </p>
          </div>
        </div>

        <div className="rounded-2xl bg-surface p-6 sm:p-8">
          {sent ? (
            <div className="flex min-h-80 flex-col justify-center">
              <p className="text-xs tracking-[0.2em] text-sage uppercase">
                Poslano
              </p>
              <h3 className="mt-3 font-display text-3xl text-ink">
                Hvala. Javimo se uskoro.
              </h3>
              <p className="mt-4 max-w-sm text-base leading-relaxed text-muted">
                Vaš upit je zaprimljen. Potvrdit ćemo termin i tretman e-poštom
                ili telefonom.
              </p>
              <Button
                type="button"
                variant="outline"
                className="mt-8 w-fit"
                onClick={() => setSent(false)}
              >
                Pošalji novi upit
              </Button>
            </div>
          ) : (
            <form onSubmit={onSubmit} className="grid gap-5">
              <Field label="Ime i prezime" htmlFor="name">
                <input
                  id="name"
                  name="name"
                  required
                  autoComplete="name"
                  className={fieldClass}
                />
              </Field>
              <div className="grid gap-5 sm:grid-cols-2">
                <Field label="E-pošta" htmlFor="email">
                  <input
                    id="email"
                    name="email"
                    type="email"
                    required
                    autoComplete="email"
                    className={fieldClass}
                  />
                </Field>
                <Field label="Telefon" htmlFor="phone">
                  <input
                    id="phone"
                    name="phone"
                    type="tel"
                    required
                    autoComplete="tel"
                    className={fieldClass}
                  />
                </Field>
              </div>
              <Field label="Tretman" htmlFor="treatment">
                <select
                  id="treatment"
                  name="treatment"
                  required
                  defaultValue=""
                  className={fieldClass}
                >
                  <option value="" disabled>
                    Odaberite masažu
                  </option>
                  {treatments.map((treatment) => (
                    <option key={treatment.id} value={treatment.id}>
                      {treatment.title} · {treatment.duration}
                    </option>
                  ))}
                </select>
              </Field>
              <Field label="Željeni dan i sat" htmlFor="when">
                <input id="when" name="when" required className={fieldClass} />
              </Field>
              <Field label="Poruka (nije obavezno)" htmlFor="note">
                <textarea
                  id="note"
                  name="note"
                  rows={4}
                  className={`${fieldClass} min-h-24 resize-y py-3`}
                />
              </Field>
              <Button type="submit" size="lg" className="mt-1 w-full sm:w-auto">
                Pošalji rezervaciju
              </Button>
            </form>
          )}
        </div>
      </div>
    </section>
  );
}

const fieldClass =
  "h-11 w-full rounded-md border border-line bg-cream px-3.5 text-sm text-ink outline-none transition-colors duration-150 placeholder:text-subtle focus:border-sage focus:ring-2 focus:ring-ring/20";

function Field({
  label,
  htmlFor,
  children,
}: {
  label: string;
  htmlFor: string;
  children: ReactNode;
}) {
  return (
    <label htmlFor={htmlFor} className="grid gap-2">
      <span className="text-xs font-medium tracking-wide text-muted">
        {label}
      </span>
      {children}
    </label>
  );
}