"use client";

import { order_api } from "@/features/specification/lib/api";
import { formatPrice } from "@/shared/lib/formatPrice";
import AddedButton from "@/shared/ui/added-button";
import { Button } from "@/shared/ui/button";
import { DashboardLayout } from "@/widgets/dashboard-layout/ui";
import { useQuery } from "@tanstack/react-query";
import { Eye } from "lucide-react";
import { useNavigate } from "react-router-dom";

export function HistoryListPage() {
  const router = useNavigate();

  const { data, isLoading, isError } = useQuery({
    queryKey: ["order_list"],
    queryFn: () => order_api.order_list(),
    select(data) {
      return data.data.data;
    },
  });

  if (isLoading) {
    return (
      <DashboardLayout>
        <div className="min-h-screen flex justify-center items-center">
          <p className="text-gray-500 text-lg">Yuklanmoqda...</p>
        </div>
      </DashboardLayout>
    );
  }

  if (isError) {
    return (
      <DashboardLayout>
        <div className="min-h-screen flex flex-col justify-center items-center">
          <p className="text-red-600 text-lg mb-2">Xatolik yuz berdi</p>
          <Button onClick={() => window.location.reload()}>
            Qayta yuklash
          </Button>
        </div>
      </DashboardLayout>
    );
  }

  return (
    <DashboardLayout>
      <div className="min-h-screen bg-gray-50">
        <div className="max-w-5xl mx-auto">
          <div className="flex justify-between items-center mb-6">
            <div>
              <h1 className="text-3xl font-bold text-gray-900">
                Buyurtmalar Tarixi
              </h1>
              <p className="text-gray-600 mt-1">
                {"Barcha buyurtmalar ro'yxati"}
              </p>
            </div>

            <AddedButton onClick={() => router("/specification/added")} />
          </div>

          <div className="space-y-4">
            {data && data.length > 0 ? (
              data.map((item) => (
                <div
                  key={item.id}
                  className="bg-white border rounded-xl p-5 shadow-sm hover:shadow-md transition"
                >
                  <div className="flex justify-between items-start">
                    <div>
                      <p className="text-lg font-semibold text-gray-900">
                        Buyurtma №{item.id}
                      </p>
                    </div>
                  </div>

                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mt-4">
                    <div>
                      <p className="text-gray-500 text-sm">Mijoz</p>
                      <p className="font-medium">{item.employee_name}</p>
                    </div>

                    <div>
                      <p className="text-gray-500 text-sm">Farmasevtika</p>
                      <p className="font-medium">{item.factory.name}</p>
                    </div>

                    <div>
                      <p className="text-gray-500 text-sm">Hisoblangan narxi</p>
                      <p className="font-medium">
                        {formatPrice(item.total_price)}
                      </p>
                    </div>

                    <div>
                      <p className="text-gray-500 text-sm">
                        {"To'langan foizi"}
                      </p>
                      <p className="font-medium">{item.advance}%</p>
                    </div>

                    <div>
                      <p className="text-gray-500 text-sm">
                        {"To'langan narxi"}
                      </p>
                      <p className="font-medium">
                        {formatPrice(item.paid_price)}
                      </p>
                    </div>
                  </div>

                  {/* KO‘RISH BUTTON */}
                  <div className="flex justify-end mt-4">
                    <Button
                      onClick={() =>
                        router(`/specification/history/${item.id}`)
                      }
                      className="px-4 py-2 w-full h-12 rounded-lg bg-blue-600 text-white text-sm hover:bg-blue-700 transition"
                    >
                      <Eye className="size-5" />
                      Batafsil
                    </Button>
                  </div>
                </div>
              ))
            ) : (
              <div className="fixed h-[70vh] flex justify-center items-center w-full">
                <p className="text-gray-500">{"Hozircha ma'lumot yo‘q."}</p>
              </div>
            )}
          </div>
        </div>
      </div>
    </DashboardLayout>
  );
}