"use client";

import { ChangeEvent, FormEvent, useMemo, useState } from "react";
import {
  ArrowLeft,
  ArrowRight,
  Check,
  CheckCircle2,
  Clock3,
  LoaderCircle,
  LockKeyhole,
  PhoneCall,
} from "lucide-react";
import { getProduct, productCategories, products, type ProductField } from "@/lib/products";
import { ProductIcon } from "./ProductIcon";

type FormValues = Record<string, string>;

const commonFields: ProductField[] = [
  { name: "firstName", label: "Ad", type: "text", placeholder: "Adınız", required: true },
  { name: "lastName", label: "Soyad", type: "text", placeholder: "Soyadınız", required: true },
  { name: "identityNumber", label: "T.C. / Vergi kimlik no", type: "text", placeholder: "11 veya 10 hane", required: true, hint: "Şirket tekliflerinde vergi numaranızı girebilirsiniz." },
  { name: "birthDate", label: "Doğum / kuruluş tarihi", type: "date", required: true },
  { name: "phone", label: "Cep telefonu", type: "tel", placeholder: "05__ ___ __ __", required: true },
  { name: "email", label: "E-posta", type: "email", placeholder: "ornek@eposta.com", required: true },
];

function Field({ field, value, onChange }: { field: ProductField; value: string; onChange: (event: ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => void }) {
  const className = field.span === 2 ? "field-span-2" : "";
  return (
    <label className={className}>
      <span>{field.label}{field.required && <b aria-hidden="true">*</b>}</span>
      {field.type === "select" ? (
        <select name={field.name} value={value} onChange={onChange} required={field.required}>
          <option value="" disabled>Seçiniz</option>
          {field.options?.map((option) => <option key={option.value} value={option.value}>{option.label}</option>)}
        </select>
      ) : field.type === "textarea" ? (
        <textarea name={field.name} value={value} onChange={onChange} required={field.required} placeholder={field.placeholder} rows={4} />
      ) : (
        <input name={field.name} value={value} onChange={onChange} required={field.required} type={field.type} placeholder={field.placeholder} inputMode={field.type === "tel" || field.type === "number" ? "numeric" : undefined} />
      )}
      {field.hint && <small>{field.hint}</small>}
    </label>
  );
}

export function QuoteForm({ initialSlug }: { initialSlug?: string }) {
  const [step, setStep] = useState(initialSlug ? 2 : 1);
  const [selectedSlug, setSelectedSlug] = useState(getProduct(initialSlug).slug);
  const [values, setValues] = useState<FormValues>({});
  const [consent, setConsent] = useState(false);
  const [marketing, setMarketing] = useState(false);
  const [status, setStatus] = useState<"idle" | "loading" | "error" | "success">("idle");
  const [reference, setReference] = useState("");
  const selectedProduct = useMemo(() => getProduct(selectedSlug), [selectedSlug]);

  function updateValue(event: ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) {
    setValues((current) => ({ ...current, [event.target.name]: event.target.value }));
  }

  function chooseProduct(slug: string) {
    setSelectedSlug(slug);
    setValues({});
  }

  async function submit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    if (step === 2) {
      setStep(3);
      window.scrollTo({ top: 0, behavior: "smooth" });
      return;
    }
    if (step !== 3 || !consent) return;

    setStatus("loading");
    try {
      const response = await fetch("/api/teklif", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          productSlug: selectedProduct.slug,
          productName: selectedProduct.name,
          values,
          consent,
          marketing,
        }),
      });
      const data = (await response.json()) as { reference?: string; error?: string };
      if (!response.ok || !data.reference) throw new Error(data.error ?? "Teklif kaydedilemedi");
      setReference(data.reference);
      setStatus("success");
      window.scrollTo({ top: 0, behavior: "smooth" });
    } catch {
      setStatus("error");
    }
  }

  if (status === "success") {
    return (
      <div className="quote-success" role="status">
        <div className="success-icon"><CheckCircle2 size={48} /></div>
        <span className="eyebrow">Talebiniz alındı</span>
        <h1>Teklifiniz için çalışmaya başladık.</h1>
        <p>{selectedProduct.name} talebiniz danışmanımıza iletildi. Sizi mesai saatleri içinde arayacağız.</p>
        <div className="reference-box"><span>Başvuru numaranız</span><strong>{reference}</strong></div>
        <div className="success-actions">
          <a href="tel:+902125554433" className="button"><PhoneCall size={18} /> Bizi Arayın</a>
          <button className="button button-ghost" onClick={() => { setStep(1); setStatus("idle"); setValues({}); setConsent(false); }}>Yeni Teklif Al</button>
        </div>
      </div>
    );
  }

  return (
    <div className="quote-layout">
      <div className="quote-main">
        <div className="quote-heading-row">
          <div>
            <span className="eyebrow">Online teklif merkezi</span>
            <h1>{step === 1 ? "Hangi ürün için teklif istersiniz?" : step === 2 ? `${selectedProduct.shortName} bilgileri` : "Bilgilerinizi kontrol edin"}</h1>
            <p>{step === 1 ? "Ürünü seçin; yalnızca o teklif için gerekli bilgileri soralım." : step === 2 ? "Eksiksiz bilgi, daha doğru ve hızlı teklif demektir." : "Talebi göndermeden önce özet bilgilerinizi inceleyin."}</p>
          </div>
          <div className="step-badge">{step} / 3</div>
        </div>

        <div className="stepper" aria-label={`Teklif formu ${step}. adım`}>
          {["Ürün", "Bilgiler", "Onay"].map((label, index) => (
            <div key={label} className={step >= index + 1 ? "active" : ""}>
              <span>{step > index + 1 ? <Check size={15} /> : index + 1}</span><em>{label}</em>
            </div>
          ))}
        </div>

        {step === 1 && (
          <div className="product-select-area">
            {productCategories.map((category) => (
              <section key={category} className="product-select-section">
                <h2>{category}</h2>
                <div className="quote-product-grid">
                  {products.filter((product) => product.category === category).map((product) => (
                    <button type="button" key={product.slug} onClick={() => chooseProduct(product.slug)} className={selectedSlug === product.slug ? "selected" : ""}>
                      <span className="quote-product-icon" style={{ background: product.accent }}><ProductIcon slug={product.slug} /></span>
                      <span><strong>{product.shortName}</strong><small>{product.eyebrow}</small></span>
                      <span className="radio-dot"><Check size={13} /></span>
                    </button>
                  ))}
                </div>
              </section>
            ))}
            <div className="form-actions form-actions-end"><button className="button button-large" onClick={() => { setStep(2); window.scrollTo({ top: 0, behavior: "smooth" }); }}>Bilgileri Gir <ArrowRight size={18} /></button></div>
          </div>
        )}

        {step > 1 && (
          <form onSubmit={submit} className="quote-form">
            {step === 2 && (
              <>
                <section className="form-section">
                  <div className="form-section-heading"><span>01</span><div><h2>Sigortalı ve iletişim bilgileri</h2><p>Teklifin hazırlanacağı kişi veya işletmenin bilgileri.</p></div></div>
                  <div className="form-grid">
                    {commonFields.map((field) => <Field key={field.name} field={field} value={values[field.name] ?? ""} onChange={updateValue} />)}
                  </div>
                </section>
                {selectedProduct.sections.map((section, index) => (
                  <section className="form-section" key={section.title}>
                    <div className="form-section-heading"><span>{String(index + 2).padStart(2, "0")}</span><div><h2>{section.title}</h2>{section.description && <p>{section.description}</p>}</div></div>
                    <div className="form-grid">
                      {section.fields.map((field) => <Field key={field.name} field={field} value={values[field.name] ?? ""} onChange={updateValue} />)}
                    </div>
                  </section>
                ))}
              </>
            )}

            {step === 3 && (
              <div className="review-card">
                <div className="review-product">
                  <span className="product-icon" style={{ background: selectedProduct.accent }}><ProductIcon slug={selectedProduct.slug} size={26} /></span>
                  <div><small>Seçilen ürün</small><h2>{selectedProduct.name}</h2></div>
                  <button type="button" onClick={() => setStep(1)}>Değiştir</button>
                </div>
                <div className="review-section">
                  <div><span>Sigortalı</span><strong>{values.firstName} {values.lastName}</strong></div>
                  <div><span>Telefon</span><strong>{values.phone}</strong></div>
                  <div><span>E-posta</span><strong>{values.email}</strong></div>
                  <div><span>Kimlik / VKN</span><strong>{values.identityNumber}</strong></div>
                </div>
                <div className="review-note"><LockKeyhole size={19} /><p>Bilgileriniz yalnızca teklif hazırlama ve sizinle iletişim kurma amacıyla güvenli şekilde işlenir.</p></div>
                <div className="consent-stack">
                  <label className="consent"><input type="checkbox" checked={consent} onChange={(event) => setConsent(event.target.checked)} required /><span><a href="/kvkk" target="_blank">KVKK Aydınlatma Metni</a>’ni okudum; teklif talebimin karşılanması için kişisel verilerimin işlenmesini kabul ediyorum.</span></label>
                  <label className="consent"><input type="checkbox" checked={marketing} onChange={(event) => setMarketing(event.target.checked)} /><span>Kampanya ve yenileme hatırlatmaları için benimle iletişime geçilmesini istiyorum. (İsteğe bağlı)</span></label>
                </div>
                {status === "error" && <p className="form-error" role="alert">Talebiniz kaydedilemedi. Lütfen tekrar deneyin veya bizi arayın.</p>}
              </div>
            )}

            <div className="form-actions">
              <button type="button" className="button button-ghost" onClick={() => setStep((current) => Math.max(1, current - 1))}><ArrowLeft size={18} /> Geri</button>
              <button type="submit" disabled={status === "loading"} className="button button-large">{step === 2 ? <>Kontrol Et <ArrowRight size={18} /></> : status === "loading" ? <><LoaderCircle className="spin" size={18} /> Gönderiliyor</> : <>Teklif Talebini Gönder <Check size={18} /></>}</button>
            </div>
          </form>
        )}
      </div>

      <aside className="quote-aside">
        <div className="aside-sticky">
          <div className="aside-product-mark" style={{ background: selectedProduct.accent }}><ProductIcon slug={selectedProduct.slug} size={30} /></div>
          <span className="eyebrow">{selectedProduct.category}</span>
          <h3>{selectedProduct.shortName}</h3>
          <p>{selectedProduct.description}</p>
          <ul>{selectedProduct.highlights.map((item) => <li key={item}><CheckCircle2 size={16} /> {item}</li>)}</ul>
          <div className="aside-divider" />
          <div className="aside-trust"><Clock3 size={18} /><span><strong>Ortalama 15 dakika</strong><small>Mesai saatlerinde ilk dönüş</small></span></div>
          <div className="aside-trust"><LockKeyhole size={18} /><span><strong>Güvenli başvuru</strong><small>Verileriniz özenle korunur</small></span></div>
        </div>
      </aside>
    </div>
  );
}