"use client"

import * as React from "react"
import {
    Dialog,
    DialogContent,
    DialogHeader,
    DialogTitle,
} from "@/components/ui/dialog"
import {
    UserCircle2,
    Mail,
    Phone,
    Building2,
    MessageSquare,
    Calendar,
    History,
    User,
} from "lucide-react"
import { UserAvatar } from "@/components/ui/user-avatar"
import { DetailItem } from "./customer-details-shared"
import type { CustomerAccountContactRecord } from "@/api/rtk/customer-contacts-api"
import { format, formatDistanceToNow } from "date-fns"

export interface CustomerContactViewDialogProps {
    open: boolean
    onOpenChange: (open: boolean) => void
    contact: CustomerAccountContactRecord | null
}

const fmtDate = (d: string | Date | null | undefined) => {
    if (!d) return "—"
    return format(new Date(d), "MMM d, yyyy")
}

const fmtFromNow = (d: string | Date | null | undefined) => {
    if (!d) return "—"
    return formatDistanceToNow(new Date(d), { addSuffix: true })
}

export function CustomerContactViewDialog({
    open,
    onOpenChange,
    contact,
}: CustomerContactViewDialogProps) {
    if (!contact) return null

    return (
        <Dialog open={open} onOpenChange={onOpenChange}>
            <DialogContent className="rounded-3xl max-w-md border-white/40 bg-white/95 backdrop-blur-2xl shadow-premium animate-in fade-in zoom-in-95 duration-200">
                <DialogHeader className="pb-2 border-b border-gray-100/50">
                    <DialogTitle className="flex items-center gap-2 text-[18px] font-black text-gray-900 font-['Lexend'] tracking-tight">
                        <UserCircle2 className="w-5 h-5 text-[#6C63FF]" />
                        Contact Details
                    </DialogTitle>
                </DialogHeader>
                <div className="space-y-6 py-4">
                    <div className="flex items-center gap-4">
                        <UserAvatar
                            avatar={contact.avatar}
                            name={contact.name}
                            size="lg"
                            className="rounded-2xl shadow-sm border-2 border-white"
                        />
                        <div className="min-w-0 space-y-1">
                            <h3 className="text-lg font-semibold text-gray-900 font-['Lexend']">
                                {contact.name}
                            </h3>
                            <div className="flex items-center gap-2">
                                {contact.isPrimary && (
                                    <span className="inline-flex text-[10px] font-bold uppercase tracking-wide px-2 py-0.5 rounded-full bg-[#6C63FF]/15 text-[#6C63FF]">
                                        Primary Contact
                                    </span>
                                )}
                                {contact.title && (
                                    <p className="text-[14px] text-gray-500 font-medium truncate">
                                        {contact.title}
                                    </p>
                                )}
                            </div>
                        </div>
                    </div>

                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <DetailItem
                            label="Email Address"
                            value={contact.email ?? undefined}
                            icon={<Mail size={16} />}
                        />
                        <DetailItem
                            label="Phone Number"
                            value={contact.phone ?? undefined}
                            icon={<Phone size={16} />}
                        />
                        <DetailItem
                            label="Department"
                            value={contact.department ?? undefined}
                            icon={<Building2 size={16} />}
                            className="sm:col-span-2"
                        />
                    </div>

                    <div className="bg-gray-50/50 rounded-2xl p-5 border border-gray-100 group transition-all hover:bg-white hover:border-[#6C63FF]/20">
                        <div className="flex items-center gap-2 mb-3 text-[#6C63FF]">
                            <MessageSquare size={16} />
                            <h4 className="font-bold text-[12px] uppercase tracking-wider select-none">Notes</h4>
                        </div>
                        <p className="text-[14px] text-gray-600 leading-relaxed whitespace-pre-wrap italic">
                            {contact.notes || "No notes available for this contact."}
                        </p>
                    </div>

                    <div className="pt-6 border-t border-gray-100 space-y-3">
                        <div className="flex items-center justify-between group">
                            <div className="flex items-center gap-2.5">
                                <Calendar size={14} className="text-gray-400 group-hover:text-[#6C63FF] transition-colors" />
                                <span className="text-[12px] text-gray-500 font-medium font-['Lexend_Deca']">Created</span>
                            </div>
                            <span className="text-[12px] font-semibold text-gray-900 font-['Lexend']">{fmtDate(contact.createdAt)}</span>
                        </div>
                        <div className="flex items-center justify-between group">
                            <div className="flex items-center gap-2.5">
                                <History size={14} className="text-gray-400 group-hover:text-[#6C63FF] transition-colors" />
                                <span className="text-[12px] text-gray-500 font-medium font-['Lexend_Deca']">Last Updated</span>
                            </div>
                            <span className="text-[12px] font-semibold text-gray-900 font-['Lexend']">{fmtFromNow(contact.updatedAt)}</span>
                        </div>
                        {contact.createdBy?.name && (
                            <div className="flex items-center justify-between group">
                                <div className="flex items-center gap-2.5">
                                    <User size={14} className="text-gray-400 group-hover:text-[#6C63FF] transition-colors" />
                                    <span className="text-[12px] text-gray-500 font-medium font-['Lexend_Deca']">Added By</span>
                                </div>
                                <span className="text-[12px] font-semibold text-gray-900 font-['Lexend']">{contact.createdBy.name}</span>
                            </div>
                        )}
                    </div>
                </div>
            </DialogContent>
        </Dialog>
    )
}