import formatPhone from "@/shared/lib/formatPhone";
import { Badge } from "@/shared/ui/badge";
import { Button } from "@/shared/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/shared/ui/card";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/shared/ui/dialog";

import { Pencil, Phone, Shield, Trash2, User } from "lucide-react";
import { useTranslation } from "react-i18next";

interface AgencyUser {
  first_name: string;
  id: number;
  last_name: string;
  phone: string;
  role: string;
}

interface AgencyUsersProps {
  users: AgencyUser[];
  onEdit: (userId: number) => void;
  onDelete: (userId: number) => void;
  isLoading?: boolean;
}

export function AgencyUsersSection({
  users,
  onEdit,
  onDelete,
  isLoading = false,
}: AgencyUsersProps) {
  const { t } = useTranslation();

  const getRoleBadge = (role: string) => {
    const roleColors: Record<string, string> = {
      admin: "bg-purple-500/20 text-purple-300 border-purple-500/40",
      manager: "bg-blue-500/20 text-blue-300 border-blue-500/40",
      user: "bg-gray-500/20 text-gray-300 border-gray-500/40",
      agent: "bg-green-500/20 text-green-300 border-green-500/40",
    };

    return (
      <Badge className={roleColors[role] || roleColors.user}>
        {role.toUpperCase()}
      </Badge>
    );
  };

  if (isLoading) {
    return (
      <Card className="border border-gray-700 shadow-lg bg-gray-800">
        <CardHeader>
          <CardTitle className="text-2xl text-white flex items-center gap-2">
            <User className="w-6 h-6" />
            {t("Agentlik foydalanuvchilari")}
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="text-center text-gray-400 py-8">
            {t("Ma'lumotlar yuklanmoqda...")}
          </div>
        </CardContent>
      </Card>
    );
  }

  if (!users || users.length === 0) {
    return (
      <Card className="border border-gray-700 shadow-lg bg-gray-800">
        <CardHeader>
          <CardTitle className="text-2xl text-white flex items-center gap-2">
            <User className="w-6 h-6" />
            {t("Agentlik foydalanuvchilari")}
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="text-center text-gray-400 py-8">
            {t("Hozircha foydalanuvchilar yo'q")}
          </div>
        </CardContent>
      </Card>
    );
  }

  return (
    <Card className="border border-gray-700 shadow-lg bg-gray-800">
      <CardHeader>
        <CardTitle className="text-2xl text-white flex items-center gap-2">
          <User className="w-6 h-6" />
          {t("Agentlik foydalanuvchilari")}
        </CardTitle>
        <p className="text-gray-400">
          {t("Agentlik bilan bog'langan foydalanuvchilar ro'yxati")}
        </p>
      </CardHeader>
      <CardContent>
        <div className="space-y-3">
          {users.map((user) => (
            <div
              key={user.id}
              className="p-5 border border-gray-700 rounded-xl bg-gray-800 hover:bg-gray-750 transition-all"
            >
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-4 flex-1">
                  <div className="w-12 h-12 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center">
                    <User className="w-6 h-6 text-white" />
                  </div>

                  <div className="flex-1">
                    <div className="flex items-center gap-3 mb-2">
                      <h3 className="text-lg font-semibold text-white">
                        {user.first_name} {user.last_name}
                      </h3>
                      {getRoleBadge(user.role)}
                    </div>

                    <div className="flex flex-wrap items-center gap-4 text-sm">
                      <div className="flex items-center gap-2 text-gray-400">
                        <Phone className="w-4 h-4" />
                        <span>{formatPhone(user.phone)}</span>
                      </div>
                      <div className="flex items-center gap-2 text-gray-400">
                        <Shield className="w-4 h-4" />
                        <span>ID: {user.id}</span>
                      </div>
                    </div>
                  </div>
                </div>

                <div className="flex items-center gap-2">
                  {/* Edit Button */}
                  <Button
                    variant="outline"
                    size="icon"
                    onClick={() => onEdit(user.id)}
                    className="border-gray-600 bg-gray-700 hover:bg-gray-600 text-blue-400 hover:text-blue-300"
                  >
                    <Pencil className="w-4 h-4" />
                  </Button>

                  {/* Delete Alert Dialog */}
                  <Dialog>
                    <DialogTrigger asChild>
                      <Button
                        variant="outline"
                        size="icon"
                        className="border-gray-600 bg-gray-700 hover:bg-red-900/20 hover:border-red-500 text-red-400 hover:text-red-300"
                      >
                        <Trash2 className="w-4 h-4" />
                      </Button>
                    </DialogTrigger>
                    <DialogContent className="bg-gray-800 border-gray-700 text-white">
                      <DialogHeader>
                        <DialogTitle>
                          {t("Foydalanuvchini o'chirish")}
                        </DialogTitle>
                        <DialogDescription className="text-gray-400">
                          {t("Haqiqatan ham")}{" "}
                          <span className="font-semibold text-white">
                            {user.first_name} {user.last_name}
                          </span>{" "}
                          {t(
                            "ni o'chirmoqchimisiz? Bu amalni qaytarib bo'lmaydi.",
                          )}
                        </DialogDescription>
                      </DialogHeader>
                      <DialogFooter>
                        <Button className="border-gray-600 bg-gray-700 hover:bg-gray-600 text-white">
                          {t("Bekor qilish")}
                        </Button>
                        <Button
                          onClick={() => onDelete(user.id)}
                          className="bg-red-600 hover:bg-red-700 text-white"
                        >
                          {t("O'chirish")}
                        </Button>
                      </DialogFooter>
                    </DialogContent>
                  </Dialog>
                </div>
              </div>
            </div>
          ))}
        </div>
      </CardContent>
    </Card>
  );
}