"use client";

import { useParams } from "next/navigation";
import { useEffect, useState } from "react";

import type { Order } from "@/lib/types";

export default function OrderPage() {
  const params = useParams<{ id: string }>();
  const [order, setOrder] = useState<Order | null>(null);
  const [error, setError] = useState("");

  useEffect(() => {
    void (async () => {
      const response = await fetch(`/backend/orders/${params.id}`, { credentials: "include", cache: "no-store" });
      if (!response.ok) {
        setError("Заказ не найден");
        return;
      }
      setOrder(await response.json());
    })();
  }, [params.id]);

  if (error) {
    return <p className="error">{error}</p>;
  }
  if (!order) {
    return <p>Загрузка...</p>;
  }

  return (
    <>
      <h1>Заказ {order.id}</h1>
      <p>Статус: создан, без оплаты.</p>
      <p>
        {order.customer_name}, {order.customer_phone}
      </p>
      {order.items.map((item) => (
        <p key={item.product_id}>
          {item.title} x {item.qty} - {item.price} руб.
        </p>
      ))}
      <p>Итого: {order.total} руб.</p>
    </>
  );
}