"use client";

import { useState } from "react";
import { Mail, Phone, MessageCircle, CheckCircle2, type LucideIcon } from "lucide-react";
import { Container } from "@/components/common/Container";
import { Card, CardContent } from "@/components/common/Card";
import { Button } from "@/components/common/Button";
import { PageHero } from "@/components/common/PageHero";
import { Reveal } from "@/components/motion/Reveal";
import { useTranslation } from "@/hooks/useTranslation";
import { SITE } from "@/constants/site";

export default function ContactPage() {
  const { t } = useTranslation();
  const [submitted, setSubmitted] = useState(false);
  const [submitting, setSubmitting] = useState(false);
  const [form, setForm] = useState({ name: "", email: "", subject: "", message: "" });

  const supportCards: { icon: LucideIcon; title: string; value: string; href: string }[] = [
    { icon: Mail, title: t("contact.email"), value: SITE.email, href: `mailto:${SITE.email}` },
    {
      icon: Phone,
      title: t("contact.phone"),
      value: SITE.phone,
      href: `tel:${SITE.phone.replace(/[^\d+]/g, "")}`,
    },
    { icon: MessageCircle, title: t("contact.chat"), value: t("contact.chatDesc"), href: "#" },
  ];

  const topics = [
    t("contact.topic1"),
    t("contact.topic2"),
    t("contact.topic3"),
    t("contact.topic4"),
    t("contact.topic5"),
    t("contact.topic6"),
  ];

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    setSubmitting(true);
    // Simulate request
    await new Promise((r) => setTimeout(r, 800));
    setSubmitted(true);
    setSubmitting(false);
    setForm({ name: "", email: "", subject: "", message: "" });
    setTimeout(() => setSubmitted(false), 4500);
  }

  return (
    <>
      <PageHero
        eyebrow={t("nav.contact")}
        title={t("contact.title")}
        subtitle={t("contact.subtitle")}
      />

      {/* Support cards */}
      <section className="section-tight">
        <Container>
          <div className="grid gap-5 sm:gap-6 sm:grid-cols-3">
            {supportCards.map((card, idx) => (
              <Reveal key={card.title} delay={idx * 0.05}>
                <a href={card.href} className="block h-full">
                  <Card interactive className="group relative h-full overflow-hidden">
                    <div
                      aria-hidden
                      className="pointer-events-none absolute -top-10 -right-10 h-44 w-44 rounded-full bg-gradient-to-br from-brand-500/5 to-accent-500/0 blur-xl transition-all duration-500 group-hover:from-brand-500/40 group-hover:to-accent-500/25 group-hover:scale-110"
                    />
                    <CardContent>
                      <div className="grid h-12 w-12 place-items-center rounded-2xl bg-gradient-to-br from-brand-50 to-brand-100 text-brand-600 transition-transform duration-300 group-hover:scale-105 dark:from-brand-500/15 dark:to-brand-500/5 dark:text-brand-300">
                        <card.icon className="h-5 w-5" />
                      </div>
                      <p className="mt-6 text-xs font-bold uppercase tracking-wider text-slate-500 dark:text-slate-400">
                        {card.title}
                      </p>
                      <p className="mt-1 text-base font-bold text-slate-900 dark:text-white">
                        {card.value}
                      </p>
                    </CardContent>
                  </Card>
                </a>
              </Reveal>
            ))}
          </div>
        </Container>
      </section>

      {/* Form + Topics */}
      <section className="pb-12 sm:pb-16 lg:pb-20">
        <Container>
          <div className="grid gap-10 lg:grid-cols-[1.5fr_1fr]">
            {/* Form */}
            <Reveal>
              <Card>
                <CardContent className="p-8 sm:p-10">
                <h2 className="text-display-md text-slate-900 dark:text-white">
                  {t("contact.formTitle")}
                </h2>

                {submitted ? (
                  <div className="mt-6 flex items-center gap-3 rounded-2xl bg-emerald-50 p-5 text-emerald-700 animate-scale-in dark:bg-emerald-500/10 dark:text-emerald-300">
                    <CheckCircle2 className="h-5 w-5 shrink-0" />
                    <p className="text-sm font-semibold">
                      Thanks! We&apos;ve received your message and will get back to you shortly.
                    </p>
                  </div>
                ) : (
                  <form className="mt-6 space-y-5" onSubmit={handleSubmit}>
                    <div className="grid gap-5 sm:grid-cols-2">
                      <Field
                        id="contact-name"
                        label={t("contact.name")}
                        value={form.name}
                        onChange={(v) => setForm({ ...form, name: v })}
                        required
                      />
                      <Field
                        id="contact-email"
                        label={t("contact.yourEmail")}
                        type="email"
                        value={form.email}
                        onChange={(v) => setForm({ ...form, email: v })}
                        required
                      />
                    </div>
                    <Field
                      id="contact-subject"
                      label={t("contact.subject")}
                      value={form.subject}
                      onChange={(v) => setForm({ ...form, subject: v })}
                      required
                    />
                    <div>
                      <label
                        htmlFor="contact-message"
                        className="mb-1.5 block text-sm font-semibold text-slate-700 dark:text-slate-200"
                      >
                        {t("contact.message")}
                      </label>
                      <textarea
                        id="contact-message"
                        rows={5}
                        value={form.message}
                        onChange={(e) => setForm({ ...form, message: e.target.value })}
                        required
                        className="block w-full rounded-2xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 placeholder-slate-400 transition-all duration-200 hover:border-slate-300 focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-500/20 dark:border-slate-700 dark:bg-slate-950 dark:text-white dark:hover:border-slate-600 dark:focus:border-brand-400"
                      />
                    </div>
                    <Button type="submit" size="lg" loading={submitting}>
                      {t("contact.send")}
                    </Button>
                  </form>
                )}
                </CardContent>
              </Card>
            </Reveal>

            {/* Topics */}
            <Reveal delay={0.1}>
              <h3 className="text-xl font-bold tracking-tight text-slate-900 dark:text-white">
                {t("contact.helpTopics")}
              </h3>
              <ul className="mt-6 space-y-3">
                {topics.map((topic) => (
                  <li
                    key={topic}
                    className="group flex items-center gap-3 rounded-2xl border border-slate-200 bg-white p-4 text-sm font-semibold text-slate-700 transition-all duration-200 ease-snappy hover:-translate-y-0.5 hover:border-brand-300 hover:bg-brand-50/40 hover:text-brand-700 hover:shadow-soft dark:border-white/[0.06] dark:bg-white/[0.04] dark:text-slate-200 dark:hover:border-brand-400/40 dark:hover:bg-brand-500/5 dark:hover:text-brand-300"
                  >
                    <span className="h-1.5 w-1.5 rounded-full bg-brand-500 transition-transform duration-200 group-hover:scale-150" />
                    {topic}
                  </li>
                ))}
              </ul>
            </Reveal>
          </div>
        </Container>
      </section>
    </>
  );
}

function Field({
  id,
  label,
  value,
  onChange,
  type = "text",
  required,
}: {
  id: string;
  label: string;
  value: string;
  onChange: (v: string) => void;
  type?: string;
  required?: boolean;
}) {
  return (
    <div>
      <label
        htmlFor={id}
        className="mb-1.5 block text-sm font-semibold text-slate-700 dark:text-slate-200"
      >
        {label}
      </label>
      <input
        id={id}
        type={type}
        required={required}
        value={value}
        onChange={(e) => onChange(e.target.value)}
        className="block w-full rounded-2xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 placeholder-slate-400 transition-all duration-200 hover:border-slate-300 focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-500/20 dark:border-slate-700 dark:bg-slate-950 dark:text-white dark:hover:border-slate-600 dark:focus:border-brand-400"
      />
    </div>
  );
}