"use client";

import { use, useEffect, useState } from "react";
import Link from "next/link";
import { useSearchParams } from "next/navigation";
import { formatPrice } from "@/types/product";

interface OrderItem {
  id: number;
  name: string;
  size: string | null;
  price: number;
  quantity: number;
  category: string;
}

interface OrderDetail {
  id: number;
  orderNumber: string;
  status: string;
  totalAmount: number;
  customerName: string;
  phone: string;
  deliveryMethod: string;
  city: string | null;
  address: string | null;
  comment: string | null;
  createdAt: string;
}

export default function OrderDetailPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = use(params);
  const searchParams = useSearchParams();
  const success = searchParams.get("success") === "1";

  const [order, setOrder] = useState<OrderDetail | null>(null);
  const [items, setItems] = useState<OrderItem[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch(`/api/orders/${id}`)
      .then((r) => r.json())
      .then((data) => {
        setOrder(data.order ?? null);
        setItems(data.items ?? []);
      })
      .finally(() => setLoading(false));
  }, [id]);

  if (loading) {
    return <p className="p-6 text-center text-sm text-[var(--tg-hint)]">Загрузка...</p>;
  }

  if (!order) {
    return (
      <div className="p-6 text-center">
        <p className="text-sm text-[var(--tg-hint)]">Заказ не найден</p>
        <Link href="/orders" className="mt-3 inline-block text-sm text-[var(--tg-accent)]">
          ← К списку заказов
        </Link>
      </div>
    );
  }

  return (
    <div className="px-4 py-4">
      {success && (
        <div className="mb-4 rounded-2xl border border-emerald-500/30 bg-emerald-500/10 p-4 text-center">
          <p className="text-2xl">✅</p>
          <p className="mt-1 text-sm font-semibold text-emerald-400">Заказ успешно оформлен!</p>
          <p className="text-xs text-[var(--tg-hint)]">Мы свяжемся с вами для подтверждения</p>
        </div>
      )}

      <h1 className="text-xl font-bold">{order.orderNumber}</h1>
      <p className="mt-1 text-xs text-[var(--tg-hint)]">
        {new Date(order.createdAt).toLocaleString("ru-RU")}
      </p>

      <div className="mt-4 rounded-2xl border border-white/10 bg-[var(--tg-surface)] p-4">
        <h2 className="mb-2 text-sm font-bold">Товары</h2>
        <div className="flex flex-col divide-y divide-white/5">
          {items.map((item) => (
            <div key={item.id} className="flex items-center justify-between py-2">
              <div>
                <p className="text-sm">{item.name}</p>
                <p className="text-xs text-[var(--tg-hint)]">
                  {item.size} × {item.quantity}
                </p>
              </div>
              <p className="text-sm font-semibold">{formatPrice(item.price * item.quantity)}</p>
            </div>
          ))}
        </div>
        <div className="mt-2 flex items-center justify-between border-t border-white/10 pt-2">
          <span className="text-sm text-[var(--tg-hint)]">Итого</span>
          <span className="text-lg font-extrabold">{formatPrice(order.totalAmount)}</span>
        </div>
      </div>

      <div className="mt-4 rounded-2xl border border-white/10 bg-[var(--tg-surface)] p-4 text-sm">
        <h2 className="mb-2 text-sm font-bold">Получатель</h2>
        <p>{order.customerName}</p>
        <p className="text-[var(--tg-hint)]">{order.phone}</p>
        <p className="mt-2 text-[var(--tg-hint)]">
          {order.deliveryMethod === "delivery"
            ? `Доставка: ${order.city ?? ""}, ${order.address ?? ""}`
            : "Самовывоз"}
        </p>
        {order.comment && <p className="mt-2 text-[var(--tg-hint)]">Комментарий: {order.comment}</p>}
      </div>

      <Link
        href="/orders"
        className="mt-5 block rounded-xl border border-white/15 py-3 text-center text-sm font-semibold"
      >
        ← К списку заказов
      </Link>
    </div>
  );
}