"use client";

import formatPhone from "@/shared/lib/formatPhone";
import AddedButton from "@/shared/ui/added-button";
import { Button } from "@/shared/ui/button";
import { DashboardLayout } from "@/widgets/dashboard-layout/ui/DashboardLayout";
import { useQuery } from "@tanstack/react-query";
import { Eye } from "lucide-react";
import { useState } from "react";
import { useNavigate } from "react-router-dom";
import { pharmacy_api } from "../lib/api";

const PharmacyList = () => {
  const { data, isLoading, isError } = useQuery({
    queryKey: ["pharmacy_list"],
    queryFn: () => pharmacy_api.list(),
    select(data) {
      return data.data.data;
    },
  });

  const router = useNavigate();
  const [deleteDialog, setDeleteDialog] = useState(false);

  return (
    <DashboardLayout link="/">
      <div className="flex justify-between items-center">
        <AddedButton onClick={() => router("/pharmacy/added")} />
      </div>

      <div className="space-y-6">
        <h1 className="text-3xl font-bold">Dorixonalar ro‘yxati</h1>

        {isLoading && (
          <div className="flex justify-center items-center py-20">
            <p className="text-gray-500 animate-pulse">Yuklanmoqda...</p>
          </div>
        )}

        {isError && (
          <div className="flex justify-center items-center py-20">
            <p className="text-red-500">
              Ma’lumotlarni yuklashda xatolik yuz berdi
            </p>
          </div>
        )}

        {!isLoading && !isError && data?.length === 0 && (
          <div className="h-[80vh] flex justify-center items-center w-[90%] fixed">
            <p>Dorixona mavjud emas</p>
          </div>
        )}

        {!isLoading && !isError && data && data.length > 0 && (
          <div className="grid grid-cols-1 gap-6">
            {data.map((obj) => (
              <div
                key={obj.id}
                className="border rounded-lg p-5 shadow-sm flex flex-col justify-between"
              >
                <div>
                  <h2 className="text-xl font-semibold">{obj.name}</h2>
                  <p className="text-gray-500">Tuman: {obj.district.name}</p>
                  <p className="text-gray-500">INN: {obj.inn}</p>
                  <p className="text-gray-500">
                    Direktor: {formatPhone(obj.owner_phone)}
                  </p>
                  <p className="text-gray-500">
                    Mas’ul: {formatPhone(obj.responsible_phone)}
                  </p>
                </div>

                <div className="flex gap-2 mt-4 flex-col">
                  <Button
                    variant="outline"
                    size="lg"
                    onClick={() =>
                      router(
                        `/object/location?id=${obj.id}&lat=${obj.latitude}&lon=${obj.longitude}`,
                      )
                    }
                  >
                    <Eye className="size-4" />
                    <p className="text-md">Ko‘rish</p>
                  </Button>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>

      {/* Delete dialog */}
      <div>
        {deleteDialog && (
          <div className="fixed inset-0 bg-black/30 bg-opacity-30 flex items-center justify-center z-50">
            <div className="bg-white p-6 rounded-lg w-80">
              <h2 className="text-lg font-bold mb-4">O‘chirish</h2>
              <p>
                Siz haqiqatdan ham <strong>{}</strong> obyektni
                o‘chirmoqchimisiz?
              </p>
              <div className="flex justify-end gap-2 mt-6">
                <Button
                  variant="outline"
                  size="sm"
                  onClick={() => setDeleteDialog(false)}
                >
                  Bekor qilish
                </Button>
                <Button variant="destructive" size="sm">
                  O‘chirish
                </Button>
              </div>
            </div>
          </div>
        )}
      </div>
    </DashboardLayout>
  );
};

export default PharmacyList;