"use client";

import {
  addedPopularTours,
  deleteTours,
  getAllTours,
} from "@/pages/tours/lib/api";
import formatPrice from "@/shared/lib/formatPrice";
import { Button } from "@/shared/ui/button";
import {
  Dialog,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/shared/ui/dialog";
import { Switch } from "@/shared/ui/switch";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/shared/ui/table";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import {
  AlertTriangle,
  ChevronLeft,
  ChevronRight,
  Edit,
  Loader2,
  Plane,
  PlusCircle,
  Trash2,
  X,
} from "lucide-react";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { useNavigate } from "react-router-dom";
import { toast } from "sonner";

type Role =
  | "superuser"
  | "admin"
  | "moderator"
  | "tour_admin"
  | "buxgalter"
  | "operator"
  | "user";

const Tours = ({ user }: { user: Role }) => {
  const { t } = useTranslation();
  const [page, setPage] = useState(1);
  const [deleteId, setDeleteId] = useState<number | null>(null);
  const [showPopularDialog, setShowPopularDialog] = useState(false);
  const navigate = useNavigate();
  const queryClient = useQueryClient();

  const { data, isLoading, isError, refetch } = useQuery({
    queryKey: ["all_tours", page],
    queryFn: () => getAllTours({ page: page, page_size: 10 }),
  });

  const { data: popularTour } = useQuery({
    queryKey: ["popular_tours"],
    queryFn: () =>
      getAllTours({ page: 1, page_size: 10, featured_tickets: true }),
  });

  const { mutate, isPending } = useMutation({
    mutationFn: (id: number) => deleteTours({ id }),
    onSuccess: () => {
      queryClient.refetchQueries({ queryKey: ["all_tours"] });
      setDeleteId(null);
    },
    onError: () => {
      toast.error(t("Xatolik yuz berdi"), {
        richColors: true,
        position: "top-center",
      });
    },
  });

  const { mutate: popular } = useMutation({
    mutationFn: ({ id, value }: { id: number; value: number }) =>
      addedPopularTours({ id, value }),
    onSuccess: () => {
      queryClient.refetchQueries({ queryKey: ["all_tours"] });
      queryClient.refetchQueries({ queryKey: ["popular_tours"] });
    },
    onError: () => {
      if (popularTour?.data.data.results.length === 5) {
        setShowPopularDialog(true);
      } else {
        toast.error(t("Xatolik yuz berdi"), {
          richColors: true,
          position: "top-center",
        });
      }
    },
  });

  const confirmDelete = (id: number) => {
    mutate(id);
  };

  const removeFromPopular = (id: number) => {
    popular({ id, value: 0 });
    setShowPopularDialog(false);
  };

  if (isLoading) {
    return (
      <div className="flex flex-col items-center justify-center min-h-screen bg-slate-900 text-white gap-4 w-full">
        <Loader2 className="w-10 h-10 animate-spin text-cyan-400" />
        <p className="text-slate-400">{t("Ma'lumotlar yuklanmoqda...")}</p>
      </div>
    );
  }

  if (isError) {
    return (
      <div className="flex flex-col items-center justify-center min-h-screen bg-slate-900 w-full text-center text-white gap-4">
        <AlertTriangle className="w-10 h-10 text-red-500" />
        <p className="text-lg">
          {t("Ma'lumotlarni yuklashda xatolik yuz berdi.")}
        </p>
        <Button
          onClick={() => {
            refetch();
          }}
          className="bg-gradient-to-r from-blue-600 to-cyan-600 text-white rounded-lg px-5 py-2 hover:opacity-90"
        >
          {t("Qayta urinish")}
        </Button>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gray-900 text-foreground py-10 px-5 w-full">
      <div className="flex justify-between items-center mb-8">
        <h1 className="text-3xl font-semibold">{t("Turlar ro'yxati")}</h1>
        <Button
          onClick={() => navigate("/tours/create")}
          variant="default"
          disabled={user !== "tour_admin"}
        >
          <PlusCircle className="w-5 h-5 mr-2" /> {t("Yangi tur qo'shish")}
        </Button>
      </div>

      <div className="rounded-xl border overflow-x-auto">
        <Table>
          <TableHeader>
            <TableRow className="bg-muted/50">
              <TableHead className="w-[50px] text-center">#</TableHead>
              <TableHead className="min-w-[150px]">{t("Manzil")}</TableHead>
              <TableHead className="min-w-[120px]">
                {t("Davomiyligi")}
              </TableHead>
              <TableHead className="min-w-[180px]">{t("Mehmonxona")}</TableHead>
              <TableHead className="min-w-[200px]">{t("Narxi")}</TableHead>
              {user && user === "moderator" && (
                <TableHead className="min-w-[120px] text-center">
                  {t("Popular")}
                </TableHead>
              )}
              <TableHead className="min-w-[150px] text-center">
                {t("Операции")}
              </TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {data?.data.data.results.map((tour, idx) => (
              <TableRow key={tour.id}>
                <TableCell className="font-medium text-center">
                  {(page - 1) * 6 + idx + 1}
                </TableCell>
                <TableCell>
                  <div className="flex items-center gap-2 font-semibold">
                    <Plane className="w-4 h-4 text-primary" />
                    {tour.destination}
                  </div>
                </TableCell>
                <TableCell className="text-sm text-primary font-medium">
                  {tour.duration_days} {t("kun")}
                </TableCell>
                <TableCell>
                  <div className="flex flex-col">
                    <span className="font-medium">{tour.hotel_name}</span>
                    <span className="text-xs text-muted-foreground">
                      {tour.hotel_rating} {t("yulduzli mehmonxona")}
                    </span>
                  </div>
                </TableCell>
                <TableCell>
                  <span className="font-bold text-base text-green-600">
                    {formatPrice(tour.price, true)}
                  </span>
                </TableCell>
                {user && user === "moderator" && (
                  <TableCell className="text-center">
                    <Switch
                      checked={tour.featured_tickets}
                      onCheckedChange={() =>
                        popular({
                          id: tour.id,
                          value: tour.featured_tickets ? 0 : 1,
                        })
                      }
                    />
                  </TableCell>
                )}

                <TableCell className="text-center">
                  <div className="flex gap-2 justify-center">
                    <Button
                      variant="outline"
                      size="icon"
                      onClick={() => navigate(`/tours/${tour.id}/edit`)}
                    >
                      <Edit className="w-4 h-4" />
                    </Button>

                    <Button
                      variant="destructive"
                      size="icon"
                      onClick={() => setDeleteId(tour.id)}
                    >
                      <Trash2 className="w-4 h-4" />
                    </Button>

                    <Button
                      variant="default"
                      size="sm"
                      onClick={() => navigate(`/tours/${tour.id}`)}
                    >
                      {t("Batafsil")}
                    </Button>
                  </div>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </div>

      {/* Delete Tour Dialog */}
      <Dialog open={deleteId !== null} onOpenChange={() => setDeleteId(null)}>
        <DialogContent className="sm:max-w-[425px] bg-gray-900">
          <DialogHeader>
            <DialogTitle className="text-xl">
              {t("Turni o'chirishni tasdiqlang")}
            </DialogTitle>
          </DialogHeader>
          <div className="py-4">
            <p className="text-muted-foreground">
              {t(
                "Haqiqatan ham bu turni o'chirib tashlamoqchimisiz? Bu amalni ortga qaytarib bo'lmaydi.",
              )}
            </p>
          </div>
          <DialogFooter className="gap-4 flex">
            <Button variant="outline" onClick={() => setDeleteId(null)}>
              {t("Bekor qilish")}
            </Button>
            <Button
              variant="destructive"
              onClick={() => confirmDelete(deleteId!)}
            >
              {isPending ? (
                <Loader2 className="animate-spin" />
              ) : (
                <>
                  <Trash2 className="w-4 h-4 mr-2" />
                  {t("O'chirish")}
                </>
              )}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* Popular Tours Dialog */}
      <Dialog open={showPopularDialog} onOpenChange={setShowPopularDialog}>
        <DialogContent className="sm:max-w-[600px] bg-gray-900">
          <DialogHeader>
            <DialogTitle className="text-xl">
              {t("Popular turlar (5/5)")}
            </DialogTitle>
          </DialogHeader>
          <div className="py-4">
            <p className="text-muted-foreground mb-4">
              {t(
                "Popular turlar ro'yxati to'lgan. Yangi tur qo'shish uchun biror turni o'chiring.",
              )}
            </p>
            <div className="space-y-2 max-h-[400px] overflow-y-auto">
              {popularTour?.data.data.results.map((tour) => (
                <div
                  key={tour.id}
                  className="flex items-center justify-between p-3 border border-slate-700 rounded-lg hover:bg-slate-800/50 transition-colors"
                >
                  <div className="flex items-center gap-3 flex-1">
                    <Plane className="w-4 h-4 text-primary flex-shrink-0" />
                    <div className="flex-1 min-w-0">
                      <p className="font-semibold truncate">
                        {tour.destination}
                      </p>
                      <p className="text-xs text-muted-foreground">
                        {tour.duration_days} kun • {tour.hotel_name}
                      </p>
                    </div>
                    <span className="text-green-600 font-bold text-sm flex-shrink-0">
                      {formatPrice(tour.price, true)}
                    </span>
                  </div>
                  <Button
                    variant="ghost"
                    size="icon"
                    onClick={() => removeFromPopular(tour.id)}
                    className="ml-2 text-red-500 hover:text-red-600 hover:bg-red-500/10"
                  >
                    <X className="w-4 h-4" />
                  </Button>
                </div>
              ))}
            </div>
          </div>
          <DialogFooter>
            <Button
              variant="outline"
              onClick={() => setShowPopularDialog(false)}
            >
              {t("Yopish")}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      <div className="flex justify-end mt-10 gap-3">
        <button
          disabled={page === 1}
          onClick={() => setPage((p) => Math.max(p - 1, 1))}
          className="p-2 rounded-lg border border-slate-600 text-slate-300 hover:bg-slate-700/50 disabled:opacity-50 disabled:cursor-not-allowed transition-all"
        >
          <ChevronLeft className="w-5 h-5" />
        </button>
        {[...Array(data?.data.data.total_pages)].map((_, i) => (
          <button
            key={i}
            onClick={() => setPage(i + 1)}
            className={`px-4 py-2 rounded-lg border transition-all font-medium ${
              page === i + 1
                ? "bg-gradient-to-r from-blue-600 to-cyan-600 border-blue-500 text-white shadow-lg shadow-cyan-500/50"
                : "border-slate-600 text-slate-300 hover:bg-slate-700/50 hover:border-slate-500"
            }`}
          >
            {i + 1}
          </button>
        ))}
        <button
          disabled={page === data?.data.data.total_pages}
          onClick={() =>
            setPage((p) =>
              Math.min(p + 1, data ? data.data.data.total_pages : 1),
            )
          }
          className="p-2 rounded-lg border border-slate-600 text-slate-300 hover:bg-slate-700/50 disabled:opacity-50 disabled:cursor-not-allowed transition-all"
        >
          <ChevronRight className="w-5 h-5" />
        </button>
      </div>
    </div>
  );
};

export default Tours;