"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { useCart } from "@/context/CartContext";
import { useTelegram } from "@/components/TelegramProvider";
import { formatPrice } from "@/types/product";

export default function CartPage() {
  const { items, setQuantity, removeItem, totalAmount, clear } = useCart();
  const { webApp, user, initData, haptic } = useTelegram();
  const router = useRouter();

  const [customerName, setCustomerName] = useState("");
  const [phone, setPhone] = useState("");
  const [deliveryMethod, setDeliveryMethod] = useState<"pickup" | "delivery">("pickup");
  const [city, setCity] = useState("");
  const [address, setAddress] = useState("");
  const [comment, setComment] = useState("");
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    if (user?.first_name) {
      setCustomerName(`${user.first_name} ${user.last_name ?? ""}`.trim());
    }
  }, [user]);

  useEffect(() => {
    if (!webApp) return;
    webApp.MainButton.hide();
  }, [webApp]);

  const canSubmit = items.length > 0 && customerName.trim() && phone.trim() && !submitting;

  async function submitOrder() {
    if (!canSubmit) return;
    setSubmitting(true);
    setError(null);
    try {
      const res = await fetch("/api/orders", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          initData,
          telegramUserId: user?.id?.toString(),
          telegramUsername: user?.username,
          customerName,
          phone,
          deliveryMethod,
          city,
          address,
          comment,
          items: items.map((i) => ({ productId: i.productId, quantity: i.quantity })),
        }),
      });
      const data = await res.json();
      if (!res.ok) {
        throw new Error(data.error || "Не удалось оформить заказ");
      }
      haptic("medium");
      clear();
      router.push(`/orders/${data.order.id}?success=1`);
    } catch (err) {
      setError(err instanceof Error ? err.message : "Ошибка оформления заказа");
    } finally {
      setSubmitting(false);
    }
  }

  if (items.length === 0) {
    return (
      <div className="flex min-h-[60vh] flex-col items-center justify-center px-6 text-center">
        <p className="text-5xl">🛒</p>
        <p className="mt-4 text-base font-semibold">Корзина пуста</p>
        <p className="mt-1 text-sm text-[var(--tg-hint)]">
          Добавьте шины или диски из каталога
        </p>
        <Link
          href="/"
          className="mt-5 rounded-xl bg-[var(--tg-accent)] px-5 py-2.5 text-sm font-semibold text-white"
        >
          Перейти в каталог
        </Link>
      </div>
    );
  }

  return (
    <div className="px-4 py-4">
      <h1 className="mb-4 text-xl font-bold">Корзина</h1>

      <div className="flex flex-col gap-3">
        {items.map((item) => (
          <div
            key={item.productId}
            className="flex gap-3 rounded-2xl border border-white/10 bg-[var(--tg-surface)] p-3"
          >
            <div className="flex h-16 w-16 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-[#1b2745] to-[#101a30] text-2xl">
              {item.category === "tire" ? "🛞" : "⚙️"}
            </div>
            <div className="flex flex-1 flex-col">
              <p className="text-sm font-semibold leading-tight">{item.name}</p>
              <p className="text-xs text-[var(--tg-hint)]">{item.size}</p>
              <div className="mt-auto flex items-center justify-between">
                <div className="flex items-center gap-2 rounded-lg border border-white/15 px-1.5 py-0.5">
                  <button
                    onClick={() => setQuantity(item.productId, item.quantity - 1)}
                    className="h-6 w-6 text-sm text-[var(--tg-hint)]"
                  >
                    −
                  </button>
                  <span className="w-5 text-center text-sm font-semibold">{item.quantity}</span>
                  <button
                    onClick={() => setQuantity(item.productId, item.quantity + 1)}
                    className="h-6 w-6 text-sm text-[var(--tg-hint)]"
                  >
                    +
                  </button>
                </div>
                <p className="text-sm font-bold">{formatPrice(item.price * item.quantity)}</p>
              </div>
            </div>
            <button
              onClick={() => removeItem(item.productId)}
              className="self-start text-sm text-[var(--tg-hint)]"
              aria-label="Удалить"
            >
              ✕
            </button>
          </div>
        ))}
      </div>

      <div className="mt-5 rounded-2xl border border-white/10 bg-[var(--tg-surface)] p-4">
        <h2 className="mb-3 text-sm font-bold">Оформление заказа</h2>

        <div className="flex flex-col gap-3">
          <Field label="Имя">
            <input
              value={customerName}
              onChange={(e) => setCustomerName(e.target.value)}
              className="input"
              placeholder="Ваше имя"
            />
          </Field>
          <Field label="Телефон">
            <input
              value={phone}
              onChange={(e) => setPhone(e.target.value)}
              className="input"
              placeholder="+7 900 000-00-00"
              inputMode="tel"
            />
          </Field>

          <div className="flex gap-2">
            {(["pickup", "delivery"] as const).map((m) => (
              <button
                key={m}
                onClick={() => setDeliveryMethod(m)}
                className={`flex-1 rounded-xl py-2 text-xs font-semibold ${
                  deliveryMethod === m
                    ? "bg-[var(--tg-accent)] text-white"
                    : "bg-white/5 text-[var(--tg-hint)]"
                }`}
              >
                {m === "pickup" ? "Самовывоз" : "Доставка"}
              </button>
            ))}
          </div>

          {deliveryMethod === "delivery" && (
            <>
              <Field label="Город">
                <input value={city} onChange={(e) => setCity(e.target.value)} className="input" />
              </Field>
              <Field label="Адрес">
                <input
                  value={address}
                  onChange={(e) => setAddress(e.target.value)}
                  className="input"
                />
              </Field>
            </>
          )}

          <Field label="Комментарий к заказу">
            <textarea
              value={comment}
              onChange={(e) => setComment(e.target.value)}
              className="input min-h-[70px] resize-none"
              placeholder="Необязательно"
            />
          </Field>
        </div>

        <div className="mt-4 flex items-center justify-between border-t border-white/10 pt-3">
          <span className="text-sm text-[var(--tg-hint)]">Итого</span>
          <span className="text-lg font-extrabold">{formatPrice(totalAmount)}</span>
        </div>

        {error && <p className="mt-2 text-xs text-rose-400">{error}</p>}

        <button
          onClick={submitOrder}
          disabled={!canSubmit}
          className="mt-4 w-full rounded-xl bg-[var(--tg-accent)] py-3.5 text-sm font-bold text-white disabled:opacity-40"
        >
          {submitting ? "Отправка..." : "Оформить заказ"}
        </button>
      </div>

      <style jsx global>{`
        .input {
          width: 100%;
          border-radius: 0.75rem;
          border: 1px solid rgba(255, 255, 255, 0.12);
          background: rgba(255, 255, 255, 0.05);
          padding: 0.6rem 0.75rem;
          font-size: 0.875rem;
          color: var(--tg-text);
        }
        .input:focus {
          outline: none;
          border-color: var(--tg-accent);
        }
      `}</style>
    </div>
  );
}

function Field({ label, children }: { label: string; children: React.ReactNode }) {
  return (
    <label className="block">
      <span className="mb-1 block text-xs font-medium text-[var(--tg-hint)]">{label}</span>
      {children}
    </label>
  );
}