"use client";

import { useState } from "react";
import { Route } from "lucide-react";
import { reachGoal } from "@/lib/analytics";

export function DeliveryAddressCheck() {
  const [address, setAddress] = useState("");
  const [result, setResult] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);

  async function check() {
    setLoading(true);
    const response = await fetch("/api/delivery/quote", {
      method: "POST",
      headers: { "content-type": "application/json" },
      body: JSON.stringify({ address })
    });
    const data = (await response.json()) as { normalizedAddress?: string; zone?: { name: string; minOrder: number; freeFrom: number | null } | null; deliveryFee?: number; message?: string };
    if (response.ok) {
      const zone = data.zone;
      setResult(`Зона «${zone?.name ?? "—"}»: доставка ${data.deliveryFee} ₽${zone?.minOrder ? `, минимальный заказ ${zone.minOrder} ₽` : ""}${zone?.freeFrom ? `, бесплатно от ${zone.freeFrom} ₽` : ""}.`);
      reachGoal("delivery_calculated");
    } else {
      setResult(data.message || "Адрес вне зон доставки. Позвоните нам — поможем оформить заказ.");
    }
    setLoading(false);
  }

  return (
    <div className="card grid gap-3 p-5">
      <div className="flex items-center gap-3">
        <Route className="text-kiln-flame" />
        <h2 className="text-2xl">Проверить адрес</h2>
      </div>
      <p className="text-sm text-kiln-milk/68">Зона, минималка и тариф определяются по актуальным данным СБИС.</p>
      <div className="grid gap-2 sm:grid-cols-[1fr_auto]">
        <input className="input" value={address} onChange={(event) => setAddress(event.target.value)} placeholder="Например: СПб, Литейный пр., 10" />
        <button className="button button-primary" onClick={check} disabled={loading || address.length < 5}>
          {loading ? "Считаем..." : "Рассчитать"}
        </button>
      </div>
      {result ? <p className="text-sm text-kiln-milk/80">{result}</p> : null}
    </div>
  );
}