"use client";

import { useState } from "react";
import { offices } from "@/lib/site-config";
import { Button } from "@/components/ui/button";

type Mode = "contact" | "appointment";

export function ContactForm({ mode }: { mode: Mode }) {
  const [status, setStatus] = useState<"idle" | "submitted">("idle");

  function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    const form = event.currentTarget;
    if (!form.checkValidity()) {
      form.reportValidity();
      return;
    }
    setStatus("submitted");
  }

  const heading =
    mode === "appointment"
      ? "Request an appointment"
      : "Send us a message";

  return (
    <form
      onSubmit={handleSubmit}
      className="space-y-4 rounded-2xl border border-slate-200 bg-white p-5 shadow-sm"
      noValidate
    >
      <h2 className="text-lg font-semibold text-slate-900">{heading}</h2>
      <p className="text-xs text-slate-600">
        Fill out the form and a member of our team will follow up within one
        business day.
      </p>
      <div className="grid gap-3 sm:grid-cols-2">
        <div className="space-y-1">
          <label
            htmlFor={`${mode}-name`}
            className="text-xs font-medium text-slate-800"
          >
            Full name
          </label>
          <input
            id={`${mode}-name`}
            name="name"
            required
            className="h-10 w-full rounded-md border border-emerald-100 bg-white px-3 text-sm text-slate-900 outline-none ring-0 placeholder:text-slate-400 focus:border-emerald-500 focus:ring-2 focus:ring-emerald-200"
          />
        </div>
        <div className="space-y-1">
          <label
            htmlFor={`${mode}-email`}
            className="text-xs font-medium text-slate-800"
          >
            Email
          </label>
          <input
            id={`${mode}-email`}
            name="email"
            type="email"
            required
            className="h-10 w-full rounded-md border border-emerald-100 bg-white px-3 text-sm text-slate-900 outline-none ring-0 placeholder:text-slate-400 focus:border-emerald-500 focus:ring-2 focus:ring-emerald-200"
          />
        </div>
      </div>
      <div className="grid gap-3 sm:grid-cols-2">
        <div className="space-y-1">
          <label
            htmlFor={`${mode}-phone`}
            className="text-xs font-medium text-slate-800"
          >
            Phone
          </label>
          <input
            id={`${mode}-phone`}
            name="phone"
            type="tel"
            required
            className="h-10 w-full rounded-md border border-emerald-100 bg-white px-3 text-sm text-slate-900 outline-none ring-0 placeholder:text-slate-400 focus:border-emerald-500 focus:ring-2 focus:ring-emerald-200"
          />
        </div>
        <div className="space-y-1">
          <label
            htmlFor={`${mode}-office`}
            className="text-xs font-medium text-slate-800"
          >
            Preferred office
          </label>
          <select
            id={`${mode}-office`}
            name="office"
            className="h-10 w-full rounded-md border border-emerald-100 bg-white px-3 text-sm text-slate-900 outline-none ring-0 focus:border-emerald-500 focus:ring-2 focus:ring-emerald-200"
            defaultValue={offices[0]?.id}
          >
            {offices.map((office) => (
              <option key={office.id} value={office.id}>
                {office.label}
              </option>
            ))}
          </select>
        </div>
      </div>
      {mode === "appointment" && (
        <div className="grid gap-3 sm:grid-cols-2">
          <div className="space-y-1">
            <label
              htmlFor="appointment-service"
              className="text-xs font-medium text-slate-800"
            >
              Service type
            </label>
            <select
              id="appointment-service"
              name="service"
            className="h-10 w-full rounded-md border border-emerald-100 bg-white px-3 text-sm text-slate-900 outline-none ring-0 focus:border-emerald-500 focus:ring-2 focus:ring-emerald-200"
              defaultValue="tax"
            >
              <option value="tax">Tax preparation</option>
              <option value="insurance">Insurance services</option>
              <option value="bookkeeping">Bookkeeping</option>
            </select>
          </div>
          <div className="space-y-1">
            <label
              htmlFor="appointment-preference"
              className="text-xs font-medium text-slate-800"
            >
              Preferred time
            </label>
            <input
              id="appointment-preference"
              name="preferredTime"
              placeholder="Weekday evenings, weekends, etc."
              className="h-10 w-full rounded-md border border-emerald-100 bg-white px-3 text-sm text-slate-900 outline-none ring-0 placeholder:text-slate-400 focus:border-emerald-500 focus:ring-2 focus:ring-emerald-200"
            />
          </div>
        </div>
      )}
      <div className="space-y-1">
        <label
          htmlFor={`${mode}-message`}
          className="text-xs font-medium text-slate-800"
        >
          How can we help?
        </label>
        <textarea
          id={`${mode}-message`}
          name="message"
          rows={4}
          className="w-full rounded-md border border-emerald-100 bg-white px-3 py-2 text-sm text-slate-900 outline-none ring-0 placeholder:text-slate-400 focus:border-emerald-500 focus:ring-2 focus:ring-emerald-200"
          placeholder="Share any details that will help us prepare for your call or appointment."
        />
      </div>
      <Button
        type="submit"
        className="w-full h-11 rounded-full bg-emerald-500 text-sm font-semibold text-emerald-950 hover:bg-emerald-400"
      >
        {mode === "appointment" ? "Submit appointment request" : "Send message"}
      </Button>
      {status === "submitted" && (
        <p className="text-xs text-emerald-700">
          Thank you. Your information has been received. We will contact you
          soon.
        </p>
      )}
    </form>
  );
}

