import {
    Dialog,
    DialogContent,
    DialogHeader,
    DialogTitle,
} from "@/components/ui/dialog";
import { Badge } from "@/components/ui/badge";

type Option = { id: number; name: string };

type Customer = {
    id: number;
    code?: string;
    name: string;
    phone?: string;
    status: string;
    category?: Option;
    team?: Option;
    sales?: Option;
    area?: { id: number; name: string } | null;
};

interface CustomerViewDialogProps {
    open: boolean;
    onOpenChange: (open: boolean) => void;
    customer: Customer | null;
}

export function CustomerViewDialog({
    open,
    onOpenChange,
    customer,
}: CustomerViewDialogProps) {
    if (!customer) return null;

    return (
        <Dialog open={open} onOpenChange={onOpenChange}>
            <DialogContent className="sm:max-w-md rounded-2xl">
                <DialogHeader>
                    <DialogTitle className="text-xl font-bold text-foreground">
                        Detail Customer
                    </DialogTitle>
                </DialogHeader>

                <div className="space-y-3 py-2 text-sm">
                    <div className="flex justify-between border-b pb-2">
                        <span className="text-muted-foreground">Nama:</span>
                        <span className="font-semibold text-foreground">
                            {customer.name}
                        </span>
                    </div>
                    <div className="flex justify-between border-b pb-2">
                        <span className="text-muted-foreground">Kode:</span>
                        <span className="font-semibold text-foreground">
                            {customer.code || "-"}
                        </span>
                    </div>
                    <div className="flex justify-between border-b pb-2">
                        <span className="text-muted-foreground">Telepon:</span>
                        <span className="font-semibold text-foreground">
                            {customer.phone || "-"}
                        </span>
                    </div>
                    <div className="flex justify-between border-b pb-2">
                        <span className="text-muted-foreground">Kategori:</span>
                        <span className="font-semibold text-foreground">
                            {customer.category?.name || "-"}
                        </span>
                    </div>
                    <div className="flex justify-between border-b pb-2">
                        <span className="text-muted-foreground">Area:</span>
                        <span className="font-semibold text-foreground">
                            {customer.area?.name || "-"}
                        </span>
                    </div>
                    <div className="flex justify-between border-b pb-2">
                        <span className="text-muted-foreground">Sales:</span>
                        <span className="font-semibold text-foreground">
                            {customer.sales?.name || "-"}
                        </span>
                    </div>
                    <div className="flex justify-between border-b pb-2">
                        <span className="text-muted-foreground">Status:</span>
                        <Badge
                            variant={
                                customer.status === "active"
                                    ? "default"
                                    : "secondary"
                            }
                        >
                            {customer.status === "active"
                                ? "Aktif"
                                : "Tidak Aktif"}
                        </Badge>
                    </div>
                </div>
            </DialogContent>
        </Dialog>
    );
}