"use client";

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

export function DeliveryAddressCheck({ pickup }: { pickup: { address: string; hours: string; prepMin: number; prepMax: number } }) {
  const [mode, setMode] = useState<"pickup" | "delivery">("pickup");
  const [address, setAddress] = useState("");
  const [result, setResult] = useState<{
    minOrder: number; deliveryFee: number; freeFrom: number | null;
    prepMin: number; prepMax: number; deliveryMin: number; deliveryMax: number;
  } | null>(null);
  const [error, setError] = 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?: { minOrder: number; freeFrom: number | null; deliveryTimeMin: number | null; thresholds: { from: number; price: number }[] } | null; deliveryFee?: number; cookTimeMin?: number | null; assemblyTimeMin?: number | null; highloadCookAddMin?: number | null; highloadAssemblyAddMin?: number | null; highloadDeliveryAddMin?: number | null; message?: string };
    if (response.ok) {
      const zone = data.zone;
      const prepMin = (data.cookTimeMin || 0) + (data.assemblyTimeMin || 0);
      const prepMax = prepMin + (data.highloadCookAddMin || 0) + (data.highloadAssemblyAddMin || 0);
      const deliveryMin = zone?.deliveryTimeMin || 0;
      const deliveryMax = deliveryMin + (data.highloadDeliveryAddMin || 0);
      setResult({ minOrder: zone?.minOrder || 0, deliveryFee: data.deliveryFee || 0, freeFrom: zone?.freeFrom ?? null, prepMin, prepMax, deliveryMin, deliveryMax });
      setError(null);
      reachGoal("delivery_calculated");
    } else {
      setResult(null);
      setError(data.message || "Не удалось рассчитать доставку по этому адресу. Позвоните нам — поможем оформить заказ.");
    }
    setLoading(false);
  }

  return (
    <div className="card grid gap-3 p-5">
      <div className="grid grid-cols-2 gap-2" role="tablist" aria-label="Способ получения">
        <button type="button" role="tab" aria-selected={mode === "pickup"} className={`button ${mode === "pickup" ? "button-primary" : "button-secondary"}`} onClick={() => setMode("pickup")}>Самовывоз</button>
        <button type="button" role="tab" aria-selected={mode === "delivery"} className={`button ${mode === "delivery" ? "button-primary" : "button-secondary"}`} onClick={() => setMode("delivery")}>Поиск по адресу</button>
      </div>
      {mode === "pickup" ? <div className="grid gap-3 pt-2">
        <h2 className="flex items-center gap-3 text-2xl"><MapPin className="text-kiln-flame" /> Самовывоз</h2>
        <p className="text-kiln-milk/80">{pickup.address}</p>
        <p className="text-sm text-kiln-milk/70">Часы выдачи заказов: <strong>{pickup.hours}</strong>.</p>
        <p className="text-sm text-kiln-milk/70">Примерное время приготовления: <strong>{pickup.prepMin ? (pickup.prepMin === pickup.prepMax ? `около ${pickup.prepMin} мин` : `${pickup.prepMin}–${pickup.prepMax} мин`) : "сейчас уточняется"}</strong>.</p>
        <p className="text-sm text-kiln-flame">Готовить заказ начнут только после оплаты.</p>
        <p className="text-xs text-kiln-milk/55">Расчёт примерный; фактическое время может отличаться в зависимости от загрузки ресторана.</p>
      </div> : <div className="grid gap-3 pt-2">
        <h2 className="flex items-center gap-3 text-2xl"><Route className="text-kiln-flame" /> Поиск по адресу</h2>
        <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 ? <div className="grid gap-2 border-t border-white/10 pt-3 text-sm text-kiln-milk/80">
          <p>Минимальная сумма заказа: <strong>{result.minOrder} ₽</strong>.</p>
          <p>Стоимость доставки: <strong>{result.deliveryFee ? `${result.deliveryFee} ₽` : "бесплатно"}</strong>. {result.freeFrom !== null ? <>Бесплатная доставка — от <strong>{result.freeFrom} ₽</strong>.</> : <>Порог бесплатной доставки не установлен.</>}</p>
          <p>Приготовление заказа: <strong>{result.prepMin === result.prepMax ? `около ${result.prepMin} мин` : `${result.prepMin}–${result.prepMax} мин`}</strong>.</p>
          <p>Ориентировочное время получения заказа с доставкой: <strong>{result.deliveryMin === result.deliveryMax ? `около ${result.deliveryMin} мин` : `${result.deliveryMin}–${result.deliveryMax} мин`}</strong>. Этот срок уже включает приготовление и сборку.</p>
          <p className="text-kiln-flame">Готовить заказ начнут только после оплаты.</p>
          <p className="text-kiln-milk/60">Расчёт примерный. При фактическом заказе срок может отличаться в зависимости от обстоятельств и времени, необходимого для поиска курьера.</p>
        </div> : null}
        {error ? <p className="text-sm text-kiln-flame">{error}</p> : null}
      </div>}
    </div>
  );
}