import React, { useState, useEffect } from 'react';
import { createPortal } from 'react-dom';
import { X, UserPlus, Phone, CheckCircle, Calendar, Clock, MapPin, ArrowRight, Shield } from 'lucide-react';
import { useMockStore } from '../../data/mockStore';
import { AgentSelectionModal } from './AgentSelectionModal';
import { toast } from 'sonner';

export const ActionDetailDrawer = ({ isOpen, onClose, viewType, data }) => {
    const { assignAgent, markLeadContacted, sendReminder } = useMockStore();
    const [selectedItem, setSelectedItem] = useState(null);
    const [isAgentModalOpen, setIsAgentModalOpen] = useState(false);
    const [contactPopover, setContactPopover] = useState(null); // ID of item showing contact info

    // Prevent body scroll when open
    useEffect(() => {
        if (isOpen) {
            document.body.style.overflow = 'hidden';
        } else {
            document.body.style.overflow = 'unset';
        }
        return () => { document.body.style.overflow = 'unset'; };
    }, [isOpen]);

    if (!isOpen) return null;

    const getHeader = () => {
        switch (viewType) {
            case 'UNASSIGNED': return { title: 'Unassigned Leads', icon: UserPlus, color: 'text-blue-600', bg: 'bg-blue-100' };
            case 'HOT': return { title: 'Hot Leads - Action Needed', icon: Phone, color: 'text-orange-600', bg: 'bg-orange-100' };
            case 'RESCHEDULE': return { title: 'Reschedule Required', icon: Calendar, color: 'text-rose-600', bg: 'bg-rose-100' };
            case 'SIGNATURE': return { title: 'Pending Signatures', icon: CheckCircle, color: 'text-purple-600', bg: 'bg-purple-100' };
            default: return { title: 'Details', icon: Shield, color: 'text-gray-600', bg: 'bg-gray-100' };
        }
    };

    const header = getHeader();
    const Icon = header.icon;

    // Handlers
    const handleAssignClick = (item) => {
        setSelectedItem(item);
        setIsAgentModalOpen(true);
    };

    const handleAgentSelected = (agentId) => {
        if (selectedItem) {
            // Check if selectedItem is a wrapper or direct property
            const propId = selectedItem.id || selectedItem.propertyData?.propertyId;
            const success = assignAgent(propId, agentId);
            if (success) {
                setIsAgentModalOpen(false);
                setSelectedItem(null);
            }
        }
    };

    const handleMarkContacted = (e, item) => {
        e.stopPropagation();
        const propId = item.id || item.propertyData?.propertyId;
        markLeadContacted(propId);
    };

    const handleSendReminder = (item) => {
        const propId = item.id || item.propertyData?.propertyId;
        sendReminder(propId);
    };

    // Render Lists
    const renderContent = () => {
        if (viewType === 'UNASSIGNED') {
            return data.unassignedLeads.map(item => (
                <div key={item.id} className="p-4 bg-white dark:bg-white/5 border border-zinc-200 dark:border-white/10 rounded-xl mb-3 flex justify-between items-center group hover:shadow-md transition-all">
                    <div>
                        <div className="flex items-center gap-2 mb-1">
                            <span className="px-2 py-0.5 text-[10px] font-bold bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-400 rounded uppercase tracking-wider">
                                Lead
                            </span>
                            <span className="text-sm font-semibold text-zinc-900 dark:text-white">
                                {item.propertyData.propertyAddress.split(',')[0]}
                            </span>
                        </div>
                        <div className="flex items-center gap-4 text-xs text-zinc-500">
                            <span className="flex items-center gap-1"><MapPin size={10} /> Plano, TX</span>
                            <span className="font-medium text-emerald-600 dark:text-emerald-400">Est. ${item.propertyData.currentEstimatedMarketValue.toLocaleString()}</span>
                        </div>
                    </div>
                    <button
                        onClick={() => handleAssignClick(item)}
                        className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-xs font-bold rounded-lg shadow-sm hover:shadow transition-all flex items-center gap-2"
                    >
                        <UserPlus size={14} /> Assign
                    </button>
                </div>
            ));
        }

        if (viewType === 'HOT') {
            return data.hotLeads.map(item => (
                <div key={item.id} className="p-4 bg-white dark:bg-white/5 border border-orange-100 dark:border-orange-500/20 rounded-xl mb-3 relative">
                    <div className="flex justify-between items-start mb-3">
                        <div>
                            <h4 className="text-sm font-bold text-zinc-900 dark:text-white mb-1">
                                {item.propertyData.propertyAddress.split(',')[0]}
                            </h4>
                            <p className="text-xs text-orange-600 dark:text-orange-400 font-medium">
                                Last Contact: {item.lastContactDate ? new Date(item.lastContactDate).toLocaleDateString() : 'Never'}
                            </p>
                        </div>
                        <div className="text-right">
                            <span className="text-xs font-bold text-zinc-500 block">Value</span>
                            <span className="text-sm font-mono text-zinc-900 dark:text-white">${item.propertyData.currentEstimatedMarketValue.toLocaleString()}</span>
                        </div>
                    </div>

                    <div className="flex gap-2 border-t border-zinc-100 dark:border-white/5 pt-3">
                        <div className="relative">
                            <button
                                onClick={() => setContactPopover(contactPopover === item.id ? null : item.id)}
                                className="px-3 py-1.5 bg-zinc-100 dark:bg-white/10 hover:bg-zinc-200 text-zinc-700 dark:text-white text-xs font-semibold rounded-lg transition-colors flex items-center gap-2"
                            >
                                <Phone size={12} /> Contact
                            </button>
                            {/* Simple Popover */}
                            {contactPopover === item.id && (
                                <div className="absolute top-full left-0 mt-2 w-64 bg-white dark:bg-zinc-800 shadow-xl rounded-xl border border-zinc-200 dark:border-zinc-700 p-4 z-50 animate-in fade-in zoom-in-95 duration-200">
                                    <h5 className="text-xs font-bold text-zinc-400 uppercase mb-2">Owner Info</h5>
                                    <div className="space-y-2">
                                        <p className="text-sm font-medium text-zinc-900 dark:text-white">{item.ownerData.fullName}</p>
                                        <a href={`tel:${item.ownerData.primaryPhoneNumber}`} className="block text-sm text-blue-600 hover:underline flex items-center gap-2">
                                            <Phone size={12} /> {item.ownerData.primaryPhoneNumber}
                                        </a>
                                        <a href={`mailto:${item.ownerData.emailAddress}`} className="block text-sm text-zinc-600 hover:text-zinc-900 truncate">
                                            {item.ownerData.emailAddress}
                                        </a>
                                    </div>
                                </div>
                            )}
                        </div>
                        <button
                            onClick={(e) => handleMarkContacted(e, item)}
                            className="flex-1 px-3 py-1.5 bg-orange-50 dark:bg-orange-900/20 hover:bg-orange-100 text-orange-700 dark:text-orange-300 text-xs font-semibold rounded-lg transition-colors flex items-center justify-center gap-2"
                        >
                            <CheckCircle size={12} /> Mark Contacted
                        </button>
                    </div>
                </div>
            ));
        }

        if (viewType === 'RESCHEDULE') {
            return data.rescheduleMeets.map(item => (
                <div key={item.id} className="p-4 bg-white dark:bg-white/5 border border-rose-100 dark:border-rose-500/20 rounded-xl mb-3">
                    <div className="flex justify-between items-start">
                        <div>
                            <h4 className="text-sm font-bold text-zinc-900 dark:text-white">{item.customerName}</h4>
                            <p className="text-xs text-zinc-500 mt-0.5">Original: {new Date(item.date).toLocaleDateString()} at {item.time}</p>
                        </div>
                        <span className={`px-2 py-0.5 text-[10px] font-bold rounded uppercase ${item.status === 'Cancelled' ? 'bg-red-100 text-red-600' : 'bg-yellow-100 text-yellow-600'
                            }`}>
                            {item.status}
                        </span>
                    </div>
                    <div className="mt-3 flex justify-end">
                        <button className="px-3 py-1.5 border border-zinc-200 dark:border-zinc-700 hover:bg-zinc-50 dark:hover:bg-zinc-800 text-zinc-600 dark:text-zinc-300 text-xs font-semibold rounded-lg flex items-center gap-2">
                            <Calendar size={12} /> Open Calendar
                        </button>
                    </div>
                </div>
            ));
        }

        if (viewType === 'SIGNATURE') {
            return data.pendingSignatures.map(item => (
                <div key={item.id} className="p-4 bg-white dark:bg-white/5 border border-purple-100 dark:border-purple-500/20 rounded-xl mb-3">
                    <div className="flex justify-between items-start mb-2">
                        <h4 className="text-sm font-bold text-zinc-900 dark:text-white">{item.ownerData.fullName}</h4>
                        <span className="text-xs font-mono text-purple-600 font-bold">${item.proposalValue?.toLocaleString()}</span>
                    </div>
                    <div className="flex items-center gap-3 text-xs text-zinc-500 mb-4">
                        <span className="flex items-center gap-1"><Clock size={10} /> Sent: {item.proposalSentDate ? new Date(item.proposalSentDate).toLocaleDateString() : 'N/A'}</span>
                        <span className="flex items-center gap-1"><MapPin size={10} /> {item.propertyData.propertyAddress.split(',')[0]}</span>
                    </div>
                    <button
                        onClick={() => handleSendReminder(item)}
                        className="w-full px-3 py-2 bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-700 hover:to-indigo-700 text-white text-xs font-bold rounded-lg shadow-sm flex items-center justify-center gap-2"
                    >
                        <ArrowRight size={12} /> Send Reminder
                    </button>
                </div>
            ));
        }
    };

    return createPortal(
        <>
            {/* Backdrop */}
            <div
                className="fixed inset-0 bg-black/20 backdrop-blur-sm z-[40] transition-opacity"
                onClick={onClose}
            ></div>

            {/* Drawer */}
            <div className={`
                fixed inset-y-0 right-0 w-full sm:w-[450px] 
                bg-white dark:bg-zinc-900 shadow-2xl z-[50] 
                border-l border-zinc-200 dark:border-zinc-800 
                transform transition-transform duration-300 ease-in-out
                flex flex-col
            `}>

                {/* Header */}
                <div className={`p-4 md:p-6 border-b border-zinc-100 dark:border-zinc-800 flex justify-between items-center ${header.bg} dark:bg-opacity-5 flex-shrink-0`}>
                    <div className="flex items-center gap-3">
                        <div className={`p-2 bg-white rounded-lg shadow-sm ${header.color}`}>
                            <Icon size={20} />
                        </div>
                        <h3 className="text-base md:text-lg font-bold text-zinc-900 dark:text-white truncate max-w-[200px] md:max-w-none">
                            {header.title}
                        </h3>
                    </div>
                    <button
                        onClick={onClose}
                        className="text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-200 p-2 md:p-1 hover:bg-black/5 rounded-full transition-colors active:scale-95"
                    >
                        <X size={20} />
                    </button>
                </div>

                {/* Content */}
                <div className="flex-1 overflow-y-auto p-4 md:p-6 bg-zinc-50/50 dark:bg-zinc-950/50 overscroll-contain">
                    {renderContent()}

                    {/* Empty State */}
                    {((viewType === 'UNASSIGNED' && data.unassignedLeads.length === 0) ||
                        (viewType === 'HOT' && data.hotLeads.length === 0) ||
                        (viewType === 'RESCHEDULE' && data.rescheduleMeets.length === 0) ||
                        (viewType === 'SIGNATURE' && data.pendingSignatures.length === 0)) && (
                            <div className="text-center py-12 text-zinc-400">
                                <CheckCircle size={48} className="mx-auto mb-4 opacity-50" />
                                <p className="text-sm">All caught up! No actions required.</p>
                            </div>
                        )}
                </div>
            </div>

            {/* Nested Modal */}
            <AgentSelectionModal
                isOpen={isAgentModalOpen}
                onClose={() => setIsAgentModalOpen(false)}
                onSelect={handleAgentSelected}
            />
        </>,
        document.body
    );
};