"use client";

import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import Image from "next/image";
import { CheckCircle2 } from "lucide-react";

type AgentDetailProps = {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  data: {
    name: string;
    position: string;
    phone: string;
    status: "Aktif" | "Nonaktif";
    roles: string[];
    imageUrl: string;
  } | null;
};

export default function AgentDetailDialog({
  open,
  onOpenChange,
  data,
}: AgentDetailProps) {
  if (!data) return null;

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="p-0 max-w-lg overflow-hidden rounded-2xl">
        {/* HEADER */}
        <div className="bg-gradient-to-r from-[#0f6c75] to-[#145f66] text-white px-6 py-5 relative">
          {/* CLOSE BUTTON */}
          {/* <button
            onClick={() => onOpenChange(false)}
            className="absolute top-4 right-5 text-white/80 hover:text-white text-xl"
          >
            ✕
          </button> */}

          <DialogHeader>
            <DialogTitle className="text-white text-xl font-semibold">
              Detail Agen
            </DialogTitle>
          </DialogHeader>

          {/* STATUS BADGE */}
          <div className="mt-2 bg-white/20 text-white px-3 py-1 rounded-full text-xs inline-flex items-center gap-2">
            <span
              className={`w-2 h-2 rounded-full ${
                data.status === "Aktif" ? "bg-lime-300" : "bg-red-300"
              }`}
            ></span>
            {data.status}
          </div>
        </div>

        {/* BODY */}
        <div className="p-6 text-center">
          {/* FOTO PROFIL */}
          <div className="flex justify-center">
            <Image
              src={data.imageUrl}
              alt={data.name}
              width={160}
              height={160}
              className="rounded-lg object-cover"
            />
          </div>

          {/* NAMA */}
          <h2 className="text-xl font-semibold mt-5">{data.name}</h2>

          {/* JABATAN */}
          <p className="text-gray-600">{data.position}</p>

          {/* NOMOR TELEPON */}
          <p className="text-gray-700 mt-2 font-medium">{data.phone}</p>

          {/* JENIS AGEN */}
          <div className="text-left mt-5">
            <p className="font-semibold mb-2">Jenis Agen</p>

            <div className="flex flex-wrap gap-4">
              {data.roles.map((role) => (
                <div
                  key={role}
                  className="flex items-center gap-2 bg-green-100 text-green-700 px-3 py-1 rounded-full font-medium"
                >
                  <CheckCircle2 size={16} className="text-green-700" />
                  {role}
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* FOOTER */}
        <div className="bg-[#E3EFF4] text-center py-3">
          <button
            onClick={() => onOpenChange(false)}
            className="text-[#0F6C75] font-medium hover:underline"
          >
            Tutup
          </button>
        </div>
      </DialogContent>
    </Dialog>
  );
}