"use client";

import dynamic from "next/dynamic";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { toast } from "sonner";
import { ClockIcon, MailIcon, MapPinIcon, PhoneIcon } from "lucide-react";

import { Button } from "@/components/ui/button";
import { FormField } from "@/components/ui/form-field";
import { Input } from "@/components/ui/input";
import { PhoneInput } from "@/components/ui/phone-input";
import { Skeleton } from "@/components/ui/skeleton";
import { Textarea } from "@/components/ui/textarea";
import { Typography } from "@/components/ui/typography";
import { useTranslation } from "@/hooks/useTranslation";
import {
  contactSchema,
  type ContactFormValues,
} from "@/lib/validations/contact.schema";

import { Section } from "./Section";
import { SectionHeading } from "./SectionHeading";
import { SECTION_IDS } from "./lib/content";

// Leaflet touches `window` at import time — load the map only in the browser.
const ContactMap = dynamic(
  () => import("./ContactMap").then((mod) => mod.ContactMap),
  {
    ssr: false,
    loading: () => (
      <Skeleton className="h-[320px] w-full rounded-[20px] sm:h-[380px]" />
    ),
  },
);

const INFO = [
  { icon: MapPinIcon, labelKey: "addressLabel", valueKey: "addressValue" },
  { icon: MailIcon, labelKey: "emailLabel", valueKey: "emailValue" },
  { icon: PhoneIcon, labelKey: "phoneLabel", valueKey: "phoneValue" },
  { icon: ClockIcon, labelKey: "hoursLabel", valueKey: "hoursValue" },
] as const;

/** Contact: info panel + validated message form, with an OSM map strip. */
export function ContactSection() {
  const { t } = useTranslation();

  const form = useForm<ContactFormValues>({
    resolver: zodResolver(contactSchema),
    defaultValues: {
      fullName: "",
      email: "",
      phone: "",
      subject: "",
      message: "",
    },
  });

  function onSubmit() {
    // No contact endpoint exists yet (backend is reference-only). Acknowledge
    // optimistically and reset. TODO: POST to a contact API once one is exposed.
    toast.success(t("home.contact.form.success"));
    form.reset();
  }

  return (
    <Section id={SECTION_IDS.contact} className="bg-background">
      <div className="flex flex-col gap-10">
        <SectionHeading
          eyebrow={t("home.contact.eyebrow")}
          title={t("home.contact.title")}
          subtitle={t("home.contact.subtitle")}
        />

        <div className="grid gap-6 lg:grid-cols-5">
          {/* Info panel */}
          <div className="flex flex-col gap-6 rounded-[20px] bg-gradient-to-br from-primary-blue to-primary-sky-blue p-6 text-white lg:col-span-2 lg:p-8">
            <Typography as="h3" variant="h2" color="inherit">
              {t("home.contact.infoTitle")}
            </Typography>
            <div className="flex flex-col gap-5">
              {INFO.map(({ icon: Icon, labelKey, valueKey }) => (
                <div key={labelKey} className="flex items-start gap-3">
                  <span className="flex size-10 shrink-0 items-center justify-center rounded-xl bg-white/15">
                    <Icon className="size-5" />
                  </span>
                  <div className="flex min-w-0 flex-col gap-0.5">
                    <Typography
                      as="span"
                      variant="caption"
                      color="inherit"
                      className="text-white/70"
                    >
                      {t(`home.contact.${labelKey}`)}
                    </Typography>
                    <Typography
                      as="span"
                      variant="body"
                      color="inherit"
                      className="font-medium"
                    >
                      {t(`home.contact.${valueKey}`)}
                    </Typography>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* Form */}
          <div className="rounded-[20px] border border-border bg-white p-6 shadow-xs lg:col-span-3 lg:p-8">
            <form
              className="flex flex-col gap-5"
              onSubmit={form.handleSubmit(onSubmit)}
              noValidate
            >
              <div className="grid gap-5 sm:grid-cols-2">
                <FormField
                  control={form.control}
                  name="fullName"
                  label={t("home.contact.form.fullName")}
                  render={({ field, hasError, id }) => (
                    <Input
                      id={id}
                      placeholder={t("home.contact.form.fullNamePlaceholder")}
                      aria-invalid={hasError}
                      {...field}
                    />
                  )}
                />
                <FormField
                  control={form.control}
                  name="email"
                  label={t("home.contact.form.email")}
                  render={({ field, hasError, id }) => (
                    <Input
                      id={id}
                      type="email"
                      dir="ltr"
                      placeholder={t("home.contact.form.emailPlaceholder")}
                      aria-invalid={hasError}
                      {...field}
                    />
                  )}
                />
                <FormField
                  control={form.control}
                  name="phone"
                  label={t("home.contact.form.phone")}
                  render={({ field, hasError, id }) => (
                    <PhoneInput
                      id={id}
                      value={field.value}
                      onChange={field.onChange}
                      onBlur={field.onBlur}
                      name={field.name}
                      aria-invalid={hasError}
                    />
                  )}
                />
                <FormField
                  control={form.control}
                  name="subject"
                  label={t("home.contact.form.subject")}
                  render={({ field, hasError, id }) => (
                    <Input
                      id={id}
                      placeholder={t("home.contact.form.subjectPlaceholder")}
                      aria-invalid={hasError}
                      {...field}
                    />
                  )}
                />
              </div>

              <FormField
                control={form.control}
                name="message"
                label={t("home.contact.form.message")}
                render={({ field, hasError, id }) => (
                  <Textarea
                    id={id}
                    rows={5}
                    placeholder={t("home.contact.form.messagePlaceholder")}
                    aria-invalid={hasError}
                    {...field}
                  />
                )}
              />

              <Button type="submit" className="w-full sm:w-auto sm:self-start">
                {t("home.contact.form.submit")}
              </Button>
            </form>
          </div>
        </div>

        <ContactMap />
      </div>
    </Section>
  );
}