import { Avatar, AvatarFallback, AvatarImage } from '@admin/components/ui/avatar';
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@admin/components/ui/dropdown-menu';
import useAddOn from '@/hooks/use-addons';
import { router } from '@inertiajs/react';
import {
    Building2,
    CalendarClock,
    Check,
    ChevronDown,
    ClipboardList,
    Copy,
    Globe,
    Mail,
    MapPin,
    NotebookPen,
    PenBoxIcon,
    Phone,
    PhoneCall,
    Users,
} from 'lucide-react';
import { useState } from 'react';
import { toast } from 'sonner';
import EmailAddOnSidebar from '../addOns/addon-sidebars/emails/emails-sidebar';
import NoteAddOnSidebar from '../addOns/addon-sidebars/notes/notes-sidebar';
import ReminderAddOnSidebar from '../addOns/addon-sidebars/reminders/reminders-sidebar';
import { TaskAddOnSidebar } from '../addOns/addon-sidebars/tasks/tasks-sidebar';

interface ContactDetails {
    source?: string;
    contact_group?: string;
    industry?: string;
    address?: string;
    city?: string;
    state?: string;
    country?: string;
    zip_code?: string;
    company?: string;
    designation?: string;
    website?: string;
    tax_id?: string;
    company_size?: string;
    founded_year?: string;
    department?: string;
    linkedin?: string;
    birthday?: string;
    notes?: string;
}

interface ContactSidebarContact {
    id: number;
    uid: string;
    name: string;
    email: string;
    phone: string;
    type: number;
    type_label?: string;
    category: number;
    status: number;
    avatar?: string;
    details?: ContactDetails;
    company_details?: {
        logo?: string;
        website?: string;
        industry?: string;
        company_size?: string;
    };
    individual_details?: {
        profile_photo?: string;
        occupation?: string;
    };
    manager?: {
        id: number;
        uid: string;
        name: string;
        email: string;
        avatar?: string;
    };
    assigned_users?: Array<{
        id: number;
        uid: string;
        name: string;
        email: string;
        avatar?: string;
        type?: string;
        role?: string;
    }>;
    created_at?: string;
}

interface ContactOption {
    id: number;
    name: string;
}

interface ContactSidebarProps {
    contact: ContactSidebarContact;
    availableContacts?: ContactOption[];
    contactAbleType?: string;
    refetchData?: () => void;
}

export const ContactSidebar = ({ contact, availableContacts = [], contactAbleType, refetchData }: ContactSidebarProps) => {
    console.log('contactAbleType', contactAbleType);
    const { addOnOpen, addOnClose, activeAddOn } = useAddOn();
    const [contactType, setContactType] = useState(contact.type_label || 'Individual');
    const [contactGroup, setContactGroup] = useState(contact.details?.contact_group || null);
    const [source, setSource] = useState(contact.details?.source || null);
    const [copiedField, setCopiedField] = useState<string | null>(null);

    const sidebars = {
        email: {
            id: 'email',
            content: <EmailAddOnSidebar mode="compose" onClose={addOnClose} />,
        },
        task: {
            id: 'task',
            content: (
                <TaskAddOnSidebar
                    mode="add"
                    onClose={addOnClose}
                    contactAbleType={contactAbleType}
                    contactId={contact.id}
                    refetchTasks={refetchData}
                />
            ),
        },
        note: {
            id: 'note',
            content: (
                <NoteAddOnSidebar
                    mode="add"
                    onClose={addOnClose}
                    contactAbleType={contactAbleType}
                    contactId={contact.id}
                    refetchNotes={refetchData}
                />
            ),
        },
        reminder: {
            id: 'reminder',
            content: (
                <ReminderAddOnSidebar
                    mode="add"
                    onClose={addOnClose}
                    contactAbleType={contactAbleType}
                    contactId={contact.id}
                    refetchReminders={refetchData}
                />
            ),
        },
    };

    const handleSidebarActive = (name: string) => {
        const sidebar = sidebars[name as keyof typeof sidebars];
        if (sidebar) {
            addOnOpen(sidebar);
        } else {
            toast.error('Sidebar not found');
        }
    };

    const handleCopy = (text: string, field: string) => {
        navigator.clipboard
            .writeText(text)
            .then(() => {
                setCopiedField(field);
                setTimeout(() => {
                    setCopiedField(null);
                }, 500);
            })
            .catch(() => {
                toast.error('Failed to copy');
            });
    };

    return (
        <aside className="flex w-full shrink-0 flex-col lg:max-h-[calc(100vh-8rem)] lg:w-96">
            <div className="mb-6 shrink-0 rounded-xl border border-slate-200/80 bg-white p-4 shadow-sm">
                {/* Contact Header */}
                <div className="mb-6 flex items-start gap-4">
                    <Avatar className="h-20 w-20 rounded-2xl ring-2 ring-slate-100">
                        <AvatarImage src={contact.type === 2 ? contact.company_details?.logo : contact.individual_details?.profile_photo} />
                        <AvatarFallback className="bg-gradient-to-br from-blue-500 to-blue-600 text-base font-bold text-white">
                            {contact.name?.charAt(0) || 'C'}
                        </AvatarFallback>
                    </Avatar>

                    <div className="min-w-0 flex-1 space-y-1">
                        <div className="group flex items-center gap-2">
                            <h2 className="truncate text-base font-bold text-slate-900">{contact.name}</h2>
                            {copiedField === 'name' ? (
                                <div className="flex items-center gap-1 text-green-600">
                                    <Check className="h-3.5 w-3.5" />
                                    <span className="text-xs font-medium">Copied</span>
                                </div>
                            ) : (
                                <button
                                    onClick={() => handleCopy(contact.name, 'name')}
                                    className="opacity-0 transition-opacity group-hover:opacity-100"
                                    title="Copy name"
                                >
                                    <Copy className="h-3.5 w-3.5 text-slate-400 hover:text-brand-900" />
                                </button>
                            )}
                        </div>
                        <div className="group flex items-center gap-2">
                            <p className="truncate text-xs font-medium text-slate-500">
                                {contact.details?.designation || 'Marketer'}- {contact?.uid}
                            </p>
                            {copiedField === 'uid' ? (
                                <div className="flex items-center gap-1 text-green-600">
                                    <Check className="h-3 w-3" />
                                    <span className="text-xs font-medium">Copied</span>
                                </div>
                            ) : (
                                <button
                                    onClick={() => handleCopy(contact?.uid, 'uid')}
                                    className="opacity-0 transition-opacity group-hover:opacity-100"
                                    title="Copy UID"
                                >
                                    <Copy className="h-3 w-3 text-slate-400 hover:text-brand-900" />
                                </button>
                            )}
                        </div>
                        <div className="group flex items-center gap-2">
                            <p className="flex items-center gap-2 truncate text-xs text-slate-500">
                                <PhoneCall className="h-4 w-4 text-brand-900" />
                                {contact?.phone}{' '}
                            </p>
                            {copiedField === 'phone' ? (
                                <div className="flex items-center gap-1 text-green-600">
                                    <Check className="h-3 w-3" />
                                    <span className="text-xs font-medium">Copied</span>
                                </div>
                            ) : (
                                <button
                                    onClick={() => handleCopy(contact?.primary_phone, 'phone')}
                                    className="opacity-0 transition-opacity group-hover:opacity-100"
                                    title="Copy phone"
                                >
                                    <Copy className="h-3 w-3 text-slate-400 hover:text-brand-900" />
                                </button>
                            )}
                        </div>
                        <div className="group flex items-center gap-2">
                            <p className="flex items-center gap-2 truncate text-xs text-slate-500">
                                <Mail className="h-4 w-4 text-brand-900" />
                                {contact.primary_email}{' '}
                            </p>
                            {copiedField === 'email' ? (
                                <div className="flex items-center gap-1 text-green-600">
                                    <Check className="h-3 w-3" />
                                    <span className="text-xs font-medium">Copied</span>
                                </div>
                            ) : (
                                <button
                                    onClick={() => handleCopy(contact.primary_email, 'email')}
                                    className="opacity-0 transition-opacity group-hover:opacity-100"
                                    title="Copy email"
                                >
                                    <Copy className="h-3 w-3 text-slate-400 hover:text-brand-900" />
                                </button>
                            )}
                        </div>
                    </div>
                </div>

                {/* Quick Actions */}
                <div className="grid grid-cols-5 gap-2">
                    {activityConfig?.map((action, i) => {
                        const Icon = action.icon;
                        return (
                            <div
                                className=""
                                key={i}
                                onClick={() => {
                                    handleSidebarActive(action.name);
                                }}
                            >
                                <div className="mr-5 flex flex-col items-center justify-center gap-1.5">
                                    <button
                                        className={`flex h-10 w-10 items-center justify-center rounded-full border ${action?.borderColor} bg-white text-slate-700 transition-all duration-200 hover:border-slate-300 hover:bg-slate-50 hover:shadow-md`}
                                    >
                                        <Icon className={`h-4 w-4 ${action?.iconColor}`} />
                                    </button>
                                    <span className={`text-center text-xs ${action} font-medium`}>{action.label}</span>
                                </div>
                            </div>
                        );
                    })}
                </div>
            </div>
            <div className="no-scrollbar flex-1 overflow-x-hidden overflow-y-auto rounded-xl border border-slate-200/80 bg-white p-4 shadow-sm">
                {/* About Contact Header */}
                <div className="flex items-center justify-between pb-3">
                    <h3 className="text-base font-bold text-slate-900">About Contact</h3>
                    <div
                        className="cursor-pointer"
                        onClick={() => {
                            // Navigate to edit page using Inertia router (no page reload)
                            const path = window.location.pathname;
                            if (path.includes('/crm/customers/')) {
                                router.visit(route('crm.customer.edit', contact.uid || contact.id));
                            } else {
                                router.visit(route('contacts.edit', contact.uid || contact.id));
                            }
                        }}
                    >
                        <PenBoxIcon className="h-4 w-4 text-brand-900" />
                    </div>
                </div>

                <div className="space-y-1 border-t border-slate-100">
                    {/* Company Name */}
                    {contact.details?.company && (
                        <div className="border-b border-slate-100 py-3">
                            <div className="mb-1.5 flex items-start gap-2 text-slate-500">
                                <Building2 className="h-4 w-4 text-brand-900" />
                                <span className="text-xs font-semibold tracking-wide uppercase">Company Name</span>
                            </div>
                            <div className="pl-5 text-sm font-medium break-words text-slate-900">{contact.details.company}</div>
                        </div>
                    )}

                    {/* Industry */}
                    {contact.details?.industry && (
                        <div className="border-b border-slate-100 py-3">
                            <div className="mb-1.5 flex items-start gap-2 text-slate-500">
                                <Building2 className="h-4 w-4 text-brand-900" />
                                <span className="text-xs font-semibold tracking-wide uppercase">Industry</span>
                            </div>
                            <div className="pl-5 text-sm font-medium break-words text-slate-900">{contact.details.industry}</div>
                        </div>
                    )}

                    {/* Address */}
                    {(contact.details?.address || contact.details?.city || contact.details?.state) && (
                        <div className="border-b border-slate-100 py-3">
                            <div className="mb-1.5 flex items-start gap-2 text-slate-500">
                                <MapPin className="h-4 w-4 text-brand-900" />
                                <span className="text-xs font-semibold tracking-wide uppercase">Address</span>
                            </div>
                            <div className="pl-5 text-sm font-medium break-words text-slate-900">
                                {[contact.details?.address, contact.details?.city, contact.details?.state, contact.details?.country]
                                    .filter(Boolean)
                                    .join(', ') || 'N/A'}
                            </div>
                        </div>
                    )}

                    {/* {contact.phone && (
                        <div className="border-b border-slate-100 py-3">
                            <div className="mb-1.5 flex items-start gap-2 text-slate-500">
                                <Phone className="h-4 w-4 text-brand-900" />
                                <span className="text-xs font-semibold tracking-wide uppercase">Phone</span>
                            </div>
                            <div className="pl-5 text-sm font-medium text-slate-900">{contact.phone}</div>
                        </div>
                    )} */}

                    {/* {contact.email && (
                        <div className="flex flex-col items-start justify-start border-b border-slate-100 py-3">
                            <div className="mb-1.5 flex items-center gap-2 text-slate-500">
                                <Mail className="h-4 w-4 text-brand-900" />
                                <span className="text-xs font-semibold tracking-wide uppercase">Email</span>
                            </div>
                            <button className="flex items-center gap-1 pl-5 text-sm font-medium text-slate-900 transition-colors hover:text-blue-600">
                                <span className="max-w-full truncate">{contact.email}</span>
                            </button>
                        </div>
                    )} */}

                    {contact.details?.website && (
                        <div className="flex flex-col items-start justify-start border-b border-slate-100 py-3">
                            <div className="mb-1.5 flex items-center gap-2 text-slate-500">
                                <Globe className="h-4 w-4 text-brand-900" />
                                <span className="text-xs font-semibold tracking-wide uppercase">Website</span>
                            </div>
                            <a
                                href={contact.details.website}
                                target="_blank"
                                rel="noopener noreferrer"
                                className="max-w-full truncate pl-5 text-sm font-medium text-slate-900 transition-colors hover:text-blue-600"
                            >
                                {contact.details.website}
                            </a>
                        </div>
                    )}

                    {/* Source - Only show if data exists */}
                    {source && (
                        <div className="flex items-start justify-between border-b border-slate-100 py-3">
                            <div className="flex items-center gap-2 text-slate-600">
                                <Users className="h-4 w-4 text-brand-900" />
                                <span className="text-xs font-semibold tracking-wide uppercase">Source</span>
                            </div>
                            <DropdownMenu>
                                <DropdownMenuTrigger asChild>
                                    <button className="flex items-center gap-1 text-xs font-medium text-slate-900 capitalize hover:text-blue-600 sm:text-[14px]">
                                        {source}
                                        <ChevronDown className="h-4 w-4 text-brand-900" />
                                    </button>
                                </DropdownMenuTrigger>
                                <DropdownMenuContent align="start">
                                    <DropdownMenuItem onClick={() => setSource('facebook')}>Facebook</DropdownMenuItem>
                                    <DropdownMenuItem onClick={() => setSource('marketing')}>Marketing</DropdownMenuItem>
                                    <DropdownMenuItem onClick={() => setSource('website')}>Website</DropdownMenuItem>
                                    <DropdownMenuItem onClick={() => setSource('referral')}>Referral</DropdownMenuItem>
                                    <DropdownMenuItem onClick={() => setSource('direct')}>Direct</DropdownMenuItem>
                                    <DropdownMenuItem onClick={() => setSource('support')}>Support</DropdownMenuItem>
                                </DropdownMenuContent>
                            </DropdownMenu>
                        </div>
                    )}

                    <div className="flex items-start justify-between border-b border-slate-100 py-3">
                        <div className="flex items-center gap-2 text-slate-600">
                            <Users className="h-4 w-4 text-brand-900" />
                            <span className="text-xs font-semibold tracking-wide uppercase">Contact type</span>
                        </div>
                        <p className="capitalize"> {contactType}</p>
                        {/* <DropdownMenu>
                            <DropdownMenuTrigger asChild>
                                <button className="flex items-center gap-1 text-xs font-medium text-slate-900 hover:text-blue-600 sm:text-[14px]">
                                    {contactType}
                                    <ChevronDown className="h-4 w-4 text-brand-900" />
                                </button>
                            </DropdownMenuTrigger>
                            <DropdownMenuContent align="start">
                                <DropdownMenuItem onClick={() => setContactType('Suppliers')}>Suppliers</DropdownMenuItem>
                                <DropdownMenuItem onClick={() => setContactType('Customers')}>Customers</DropdownMenuItem>
                                <DropdownMenuItem onClick={() => setContactType('Partners')}>Partners</DropdownMenuItem>
                                <DropdownMenuItem onClick={() => setContactType('Vendors')}>Vendors</DropdownMenuItem>
                                <DropdownMenuItem onClick={() => setContactType('Leads')}>Leads</DropdownMenuItem>
                            </DropdownMenuContent>
                        </DropdownMenu> */}
                    </div>
                    {/* Contact Group - Only show if data exists */}
                    {contactGroup && (
                        <div className="flex items-start justify-between border-b border-slate-100 py-3">
                            <div className="flex items-center gap-2 text-slate-600">
                                <Users className="h-4 w-4 text-brand-900" />
                                <span className="text-xs font-semibold tracking-wide uppercase">Contact Group</span>
                            </div>
                            <p className="capitalize"> {contactGroup}</p>
                            {/* <DropdownMenu>
                                <DropdownMenuTrigger asChild>
                                    <button className="flex items-center gap-1 text-xs font-medium text-slate-900 capitalize hover:text-blue-600 sm:text-[14px]">
                                        {contactGroup}
                                        <ChevronDown className="h-4 w-4 text-brand-900" />
                                    </button>
                                </DropdownMenuTrigger>
                                <DropdownMenuContent align="start">
                                    <DropdownMenuItem onClick={() => setContactGroup('sales')}>Sales</DropdownMenuItem>
                                    <DropdownMenuItem onClick={() => setContactGroup('marketing')}>Marketing</DropdownMenuItem>
                                    <DropdownMenuItem onClick={() => setContactGroup('support')}>Support</DropdownMenuItem>
                                    <DropdownMenuItem onClick={() => setContactGroup('operations')}>Operations</DropdownMenuItem>
                                    <DropdownMenuItem onClick={() => setContactGroup('finance')}>Finance</DropdownMenuItem>
                                    <DropdownMenuItem onClick={() => setContactGroup('management')}>Management</DropdownMenuItem>
                                    <DropdownMenuItem onClick={() => setContactGroup('technical')}>Technical</DropdownMenuItem>
                                </DropdownMenuContent>
                            </DropdownMenu> */}
                        </div>
                    )}
                    {/* Assigned Users */}
                    {contact.assigned_users && contact.assigned_users.length > 0 && (
                        <div className="flex items-center justify-between border-b border-slate-100 py-3">
                            <div className="flex items-center gap-2 text-slate-600">
                                <Users className="h-4 w-4 text-brand-900" />
                                <span className="text-xs font-semibold tracking-wide uppercase">Assigned Users</span>
                            </div>
                            <div className="flex items-center gap-1">
                                {contact.assigned_users.slice(0, 3).map((user, index) => (
                                    <Avatar key={user.id} className={`h-7 w-7 border-2 border-white ${index > 0 ? '-ml-2' : ''}`} title={user.name}>
                                        <AvatarImage src={user.avatar} />
                                        <AvatarFallback className="bg-blue-500 text-xs text-white">
                                            {user.name.charAt(0).toUpperCase()}
                                        </AvatarFallback>
                                    </Avatar>
                                ))}
                                {contact.assigned_users.length > 3 && (
                                    <div className="-ml-2 flex h-7 w-7 items-center justify-center rounded-full border-2 border-white bg-slate-200 text-xs font-medium text-slate-600">
                                        +{contact.assigned_users.length - 3}
                                    </div>
                                )}
                            </div>
                        </div>
                    )}

                    {/* Contact Manager */}
                    {contact.manager && (
                        <div className="flex items-center justify-between border-b border-slate-100 py-3">
                            <div className="flex items-center gap-2 text-slate-600">
                                <Users className="h-4 w-4 text-brand-900" />
                                <span className="text-xs font-semibold tracking-wide uppercase">Contact Manager</span>
                            </div>
                            <div className="flex items-center gap-1" title={contact.manager.name}>
                                <Avatar className="h-7 w-7 border-2 border-white">
                                    <AvatarImage src={contact.manager.avatar} />
                                    <AvatarFallback className="bg-blue-500 text-xs text-white">
                                        {contact.manager.name.charAt(0).toUpperCase()}
                                    </AvatarFallback>
                                </Avatar>
                            </div>
                        </div>
                    )}
                </div>
            </div>

            {/* Edit Contact Modal - Kept for backward compatibility but not used */}
            {/* You can remove this if you want to completely remove the modal functionality */}
            {/* <EditContactModal
                open={isEditModalOpen}
                onOpenChange={setIsEditModalOpen}
                contact={contact}
                availableContacts={availableContacts}
                onSuccess={(data) => {
                    console.log('Contact updated with data:', data);
                    // Reload to reflect changes
                }}
            /> */}
        </aside>
    );
};

const activityConfig = [
    {
        icon: ClipboardList,
        label: 'Task',
        name: 'task',
        iconBg: 'bg-blue-500',
        iconColor: 'text-blue-500',
        accentColor: 'text-blue-600',
        borderColor: 'border-blue-500',
    },
    {
        icon: NotebookPen,
        label: 'Note',
        name: 'note',
        iconBg: 'bg-yellow-500',
        iconColor: 'text-yellow-500',
        accentColor: 'text-yellow-600',
        borderColor: 'border-yellow-500',
    },
    {
        icon: CalendarClock,
        label: 'Reminder',
        name: 'reminder',
        iconBg: 'bg-orange-500',
        iconColor: 'text-orange-500',
        accentColor: 'text-orange-600',
        borderColor: 'border-orange-500',
    },
    {
        icon: Mail,
        label: 'Email',
        name: 'email',
        iconBg: 'bg-emerald-500',
        iconColor: 'text-emerald-500',
        accentColor: 'text-emerald-600',
        borderColor: 'border-emerald-500',
    },
    {
        icon: Phone,
        label: 'Call',
        name: 'call',
        iconBg: 'bg-cyan-500',
        iconColor: 'text-cyan-500',
        accentColor: 'text-cyan-600',
        borderColor: 'border-cyan-500',
    },
];