import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
import { ChevronDown, Clock, Globe, Mail, MapPin, MessageCircle, PhoneCallIcon, SwitchCamera, Users } from 'lucide-react';

const AdditionalDetails = ({ contact, updateContactInfo }: { contact: ContactSidebarContact; updateContactInfo: any }) => {
    return (
        <div className="rounded-xl border border-muted bg-background p-4 shadow-sm">
            {/* Additional Informations */}

            <div className="pb-3">
                <h3 className="text-lg font-semibold text-primary">Additional Informations</h3>
            </div>
            <div className="space-y-1 border-t border-gray-200 text-[14px] font-medium">
                <div className="flex items-start justify-between border-b border-gray-100 py-2.5">
                    <div className="flex items-center gap-2 text-primary">
                        <div className="rounded-full bg-muted p-2">
                            <MapPin className="h-3 w-3" />
                        </div>
                        <span className="tracking-wide">Address: {contact?.address}</span>
                    </div>
                </div>
                {/* Country*/}
                <div className="flex items-start justify-between border-b border-gray-100 py-2.5">
                    <div className="flex items-center gap-2">
                        <div className="rounded-full bg-muted p-2">
                            <Globe className="h-4 w-4" />
                        </div>
                        <span className="tracking-wide">Country</span>
                    </div>

                    <DropdownMenu>
                        <DropdownMenuTrigger asChild className="rounded-md bg-muted px-2 py-1">
                            <button className="flex items-center gap-1 text-xs font-medium text-slate-900 capitalize hover:text-blue-600 sm:text-[14px]">
                                {contact.details?.source ?? 'Usa*'}
                                <ChevronDown className="h-4 w-4 text-brand-900" />
                            </button>
                        </DropdownMenuTrigger>
                        <DropdownMenuContent align="start">
                            <DropdownMenuItem onClick={() => updateContactInfo('source', 'facebook')}>Admin</DropdownMenuItem>
                            <DropdownMenuItem onClick={() => updateContactInfo('source', 'marketing')}>Manager</DropdownMenuItem>
                            <DropdownMenuItem onClick={() => updateContactInfo('source', 'website')}>Councelor</DropdownMenuItem>
                        </DropdownMenuContent>
                    </DropdownMenu>
                </div>
                {/* Branch*/}
                <div className="flex items-start justify-between border-b border-gray-100 py-2.5">
                    <div className="flex items-center gap-2">
                        <div className="rounded-full bg-muted p-2">
                            <SwitchCamera className="h-4 w-4" />
                        </div>
                        <span className="tracking-wide">Branch</span>
                    </div>

                    <DropdownMenu>
                        <DropdownMenuTrigger asChild className="rounded-md bg-muted px-2 py-1">
                            <button className="flex items-center gap-1 text-xs font-medium text-slate-900 capitalize hover:text-blue-600 sm:text-[14px]">
                                {contact.details?.source ?? 'Branch*'}
                                <ChevronDown className="h-4 w-4 text-brand-900" />
                            </button>
                        </DropdownMenuTrigger>
                        <DropdownMenuContent align="start">
                            <DropdownMenuItem onClick={() => updateContactInfo('source', 'facebook')}>Admin</DropdownMenuItem>
                            <DropdownMenuItem onClick={() => updateContactInfo('source', 'marketing')}>Manager</DropdownMenuItem>
                            <DropdownMenuItem onClick={() => updateContactInfo('source', 'website')}>Councelor</DropdownMenuItem>
                        </DropdownMenuContent>
                    </DropdownMenu>
                </div>
                {/* Contact Group*/}
                <div className="flex items-start justify-between border-b border-gray-100 py-2.5">
                    <div className="flex items-center gap-2">
                        <div className="rounded-full bg-muted p-2">
                            <Users className="h-4 w-4" />
                        </div>
                        <span className="tracking-wide">Contact Group</span>
                    </div>

                    <DropdownMenu>
                        <DropdownMenuTrigger asChild className="rounded-md bg-muted px-2 py-1">
                            <button className="flex items-center gap-1 text-xs font-medium text-slate-900 capitalize hover:text-blue-600 sm:text-[14px]">
                                {contact.details?.source ?? 'Lead*'}
                                <ChevronDown className="h-4 w-4" />
                            </button>
                        </DropdownMenuTrigger>
                        <DropdownMenuContent align="start">
                            <DropdownMenuItem onClick={() => updateContactInfo('source', 'facebook')}>Admin</DropdownMenuItem>
                            <DropdownMenuItem onClick={() => updateContactInfo('source', 'marketing')}>Manager</DropdownMenuItem>
                            <DropdownMenuItem onClick={() => updateContactInfo('source', 'website')}>Councelor</DropdownMenuItem>
                        </DropdownMenuContent>
                    </DropdownMenu>
                </div>
                {/* Additional Phone */}
                <div className="flex items-center justify-between border-b border-gray-100 py-2.5">
                    <div className="flex items-center gap-2 text-primary">
                        <div className="rounded-full bg-muted p-2">
                            <PhoneCallIcon className="h-3 w-3" />
                        </div>
                        <span className="tracking-wide">Additional Phone</span>
                    </div>
                    <div className="pl-5 text-sm">{contact?.additional_phone || 'N/A'}</div>
                </div>
                {/* Additional Email */}
                <div className="flex items-center justify-between border-b border-gray-100 py-2.5">
                    <div className="flex items-center gap-2 text-primary">
                        <div className="rounded-full bg-muted p-2">
                            <Mail className="h-3 w-3" />
                        </div>
                        <span className="tracking-wide">Additional Email</span>
                    </div>
                    <div className="pl-5 text-sm">{contact?.additional_email || 'N/A'}</div>
                </div>
                {/* Prefferable Contact Time */}
                <div className="flex items-center justify-between border-b border-gray-100 py-2.5">
                    <div className="flex items-center gap-2 text-primary">
                        <div className="rounded-full bg-muted p-2">
                            <Clock className="h-3 w-3" />
                        </div>
                        <span className="tracking-wide">Preferable Contact Time</span>
                    </div>
                    <div className="pl-5 text-sm">{contact?.preferable_contact_time || 'N/A'}</div>
                </div>
                {/* Preferable Contact Channel*/}
                <div className="flex items-start justify-between border-b border-gray-100 py-2.5">
                    <div className="flex items-center gap-2">
                        <div className="rounded-full bg-muted p-2">
                            <MessageCircle className="h-4 w-4" />
                        </div>
                        <span className="tracking-wide">Preferable Contact Channel</span>
                    </div>

                    <DropdownMenu>
                        <DropdownMenuTrigger asChild className="rounded-md bg-muted px-2 py-1">
                            <button className="flex items-center gap-1 text-xs font-medium text-slate-900 capitalize hover:text-blue-600 sm:text-[14px]">
                                {contact?.Preferable_contact_channel ?? 'LinkedIn*'}
                                <ChevronDown className="h-4 w-4" />
                            </button>
                        </DropdownMenuTrigger>
                        <DropdownMenuContent align="start">
                            <DropdownMenuItem onClick={() => updateContactInfo('source', 'facebook')}>Admin</DropdownMenuItem>
                            <DropdownMenuItem onClick={() => updateContactInfo('source', 'marketing')}>Manager</DropdownMenuItem>
                            <DropdownMenuItem onClick={() => updateContactInfo('source', 'website')}>Councelor</DropdownMenuItem>
                        </DropdownMenuContent>
                    </DropdownMenu>
                </div>
            </div>
        </div>
    );
};

export default AdditionalDetails;