"use client";

import { useActionState } from "react";
import { submitContact, type ContactFormState } from "@/app/actions";
import { ArrowRight, CheckCircle2, AlertCircle, Phone } from "lucide-react";

const initial: ContactFormState = { ok: false, message: "" };

export function QuickLeadForm({
  title,
  description,
  buttonLabel = "Beni arayın",
}: {
  title: string;
  description?: string;
  buttonLabel?: string;
}) {
  const [state, action, pending] = useActionState(submitContact, initial);

  return (
    <div className="rounded-2xl border border-[var(--border)] bg-white p-6 shadow-sm sm:p-8">
      <div className="flex items-start gap-3">
        <div className="flex size-11 shrink-0 items-center justify-center rounded-xl bg-[var(--sky-50)] text-[var(--sky-600)]">
          <Phone className="size-5" />
        </div>
        <div>
          <h3 className="text-lg font-semibold text-[var(--navy)]">{title}</h3>
          {description && (
            <p className="mt-1 text-sm text-[var(--muted)]">{description}</p>
          )}
        </div>
      </div>

      <form action={action} className="mt-5 space-y-3">
        <input type="hidden" name="source" value="quick-homepage" />
        <div className="grid gap-3 sm:grid-cols-2">
          <input
            name="name"
            type="text"
            required
            placeholder="Adınız Soyadınız"
            className="w-full rounded-xl border border-[var(--border)] bg-white px-4 py-3 text-sm outline-none transition placeholder:text-[var(--muted)]/60 focus:border-[var(--sky)] focus:ring-2 focus:ring-[var(--sky)]/20"
          />
          <input
            name="phone"
            type="tel"
            required
            inputMode="tel"
            placeholder="+90 5xx xxx xx xx"
            className="w-full rounded-xl border border-[var(--border)] bg-white px-4 py-3 text-sm outline-none transition placeholder:text-[var(--muted)]/60 focus:border-[var(--sky)] focus:ring-2 focus:ring-[var(--sky)]/20"
          />
        </div>
        <button
          type="submit"
          disabled={pending}
          className="inline-flex w-full items-center justify-center gap-2 rounded-xl bg-[var(--navy)] px-5 py-3 text-sm font-semibold text-white transition hover:bg-[var(--navy-700)] disabled:opacity-60"
        >
          {pending ? "Gönderiliyor…" : buttonLabel}
          <ArrowRight className="size-4" />
        </button>
        <p className="text-center text-[11px] text-[var(--muted)]">
          Bilgileriniz gizli tutulur. Spam göndermiyoruz.
        </p>

        {state.message && (
          <div
            className={`flex items-start gap-2 rounded-xl border p-3 text-xs ${
              state.ok
                ? "border-green-200 bg-green-50 text-green-800"
                : "border-red-200 bg-red-50 text-red-800"
            }`}
          >
            {state.ok ? (
              <CheckCircle2 className="mt-0.5 size-4 shrink-0" />
            ) : (
              <AlertCircle className="mt-0.5 size-4 shrink-0" />
            )}
            <span>{state.message}</span>
          </div>
        )}
      </form>
    </div>
  );
}