import React, { useState, useRef, useEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { useNavigate } from 'react-router-dom';
import { useTheme } from '../context/ThemeContext';
import { useAuth } from '../context/AuthContext';
import {
    User, MapPin, Briefcase, Shield, Users,
    ChevronLeft, Zap, FileText, Save,
} from 'lucide-react';
import LeadSectionWrapper from '../components/leads/LeadSectionWrapper';
import LeadJobSection from '../components/leads/LeadJobSection';
import LeadContactSection from '../components/leads/LeadContactSection';
import LeadPropertySection from '../components/leads/LeadPropertySection';
import LeadInsuranceSection from '../components/leads/LeadInsuranceSection';
import LeadAssignmentSection from '../components/leads/LeadAssignmentSection';
import gsap from 'gsap';

// ---------------------------------------------------------------------------
// Section definitions
// ---------------------------------------------------------------------------
const SECTIONS = [
    {
        id: 'contact',
        title: 'Contact',
        icon: User,
        accentColor: '#3B82F6',
        quickCapture: true,
        description: 'Name, phone numbers, and email addresses',
    },
    {
        id: 'property',
        title: 'Property',
        icon: MapPin,
        accentColor: '#10B981',
        quickCapture: true,
        description: 'Property address, type, and site photos',
    },
    {
        id: 'job',
        title: 'Job Details',
        icon: Briefcase,
        accentColor: '#F59E0B',
        quickCapture: true,
        description: 'Lead source, work type, urgency, and notes',
    },
    {
        id: 'insurance',
        title: 'Insurance',
        icon: Shield,
        accentColor: '#8B5CF6',
        quickCapture: false,
        description: 'Carrier, claim number, adjuster, and policy details',
    },
    {
        id: 'assignment',
        title: 'Assignment',
        icon: Users,
        accentColor: '#06B6D4',
        quickCapture: false,
        description: 'Assign a rep, set priority, and schedule follow-up',
    },
];

// ---------------------------------------------------------------------------
// Initial form state
// ---------------------------------------------------------------------------
const INITIAL_FORM = {
    // Job Details
    leadSource: '',
    leadType: '',
    workType: '',
    tradeType: '',
    urgency: 'standard',
    notes: '',
    // Contact
    firstName: '',
    lastName: '',
    phones: [{ id: '1', number: '', type: 'Mobile', isPrimary: true }],
    emails: [],
    // Property
    address: '',
    city: '',
    state: 'TX',
    zip: '',
    propertyType: '',
    propertyPhotos: [],
    // Insurance (Phase 5)
    insuranceCompany: '',
    claimNumber: '',
    claimStatus: '',
    adjusterName: '',
    adjusterPhone: '',
    policyNumber: '',
    // Assignment (Phase 6)
    assignedTo: '',
    priority: 'medium',
    followUpDate: '',
};

// ---------------------------------------------------------------------------
// Component
// ---------------------------------------------------------------------------
export default function CreateLeadPage() {
    const { theme } = useTheme();
    const { user } = useAuth();
    const isDark = theme === 'dark';
    const navigate = useNavigate();

    const [isQuickCapture, setIsQuickCapture] = useState(true);
    const [openSections, setOpenSections] = useState({
        contact: true,
        property: false,
        job: false,
        insurance: false,
        assignment: false,
    });
    const [formData, setFormData] = useState(INITIAL_FORM);

    const progressBarRef = useRef(null);

    // Section completion map
    const sectionCompletion = {
        contact: !!(
            formData.firstName &&
            formData.lastName &&
            formData.phones.some(p => p.number.replace(/\D/g, '').length >= 10)
        ),
        property: !!(formData.address && formData.city),
        job: isQuickCapture
            ? !!formData.leadSource
            : !!(formData.leadSource && formData.leadType && formData.workType),
        insurance: !!(formData.insuranceCompany && formData.claimStatus),
        assignment: !!(formData.assignedTo && formData.followUpDate),
    };

    // Progress = % of visible sections that are complete
    const visibleSectionIds = (isQuickCapture ? SECTIONS.filter(s => s.quickCapture) : SECTIONS).map(s => s.id);
    const completedCount = visibleSectionIds.filter(id => sectionCompletion[id]).length;
    const progress = visibleSectionIds.length > 0
        ? Math.round((completedCount / visibleSectionIds.length) * 100)
        : 0;

    // GSAP animates the progress bar whenever progress changes
    useEffect(() => {
        if (progressBarRef.current) {
            gsap.to(progressBarRef.current, {
                width: `${progress}%`,
                duration: 0.45,
                ease: 'power2.out',
            });
        }
    }, [progress]);

    const updateField = (field, value) => {
        setFormData(prev => ({ ...prev, [field]: value }));
    };

    const toggleSection = (id) => {
        setOpenSections(prev => ({ ...prev, [id]: !prev[id] }));
    };

    const visibleSections = isQuickCapture ? SECTIONS.filter(s => s.quickCapture) : SECTIONS;

    const modeSwitchTo = (quick) => {
        if (quick === isQuickCapture) return;
        setIsQuickCapture(quick);
        if (quick) {
            setOpenSections(prev => ({ ...prev, insurance: false, assignment: false }));
        }
    };

    // Render the content for a given section (placeholder until its phase is built)
    const renderSectionContent = (section) => {
        if (section.id === 'contact') {
            return (
                <LeadContactSection
                    formData={formData}
                    updateField={updateField}
                    isQuickCapture={isQuickCapture}
                />
            );
        }
        if (section.id === 'property') {
            return (
                <LeadPropertySection
                    formData={formData}
                    updateField={updateField}
                    isQuickCapture={isQuickCapture}
                />
            );
        }
        if (section.id === 'job') {
            return (
                <LeadJobSection
                    formData={formData}
                    updateField={updateField}
                    isQuickCapture={isQuickCapture}
                />
            );
        }
        if (section.id === 'insurance') {
            return (
                <LeadInsuranceSection
                    formData={formData}
                    updateField={updateField}
                />
            );
        }
        if (section.id === 'assignment') {
            return (
                <LeadAssignmentSection
                    formData={formData}
                    updateField={updateField}
                    currentUser={user}
                />
            );
        }
        return null;
    };

    return (
        <div className={`min-h-screen transition-colors duration-300
            ${isDark ? 'bg-[#09090b]' : 'bg-zinc-100/80'}
        `}>
            {/* --- Progress bar --- */}
            <div className={`h-[3px] w-full ${isDark ? 'bg-zinc-800' : 'bg-zinc-200'}`}>
                <div
                    ref={progressBarRef}
                    className="h-full bg-blue-500"
                    style={{ width: '0%' }}
                />
            </div>

            {/* ----------------------------------------------------------------
                Page content
            ---------------------------------------------------------------- */}
            <div className="max-w-3xl mx-auto px-4 sm:px-6 py-6 lg:py-10 pb-44 md:pb-10">

                {/* --- Page Header --- */}
                <div className="mb-7">
                    <button
                        type="button"
                        onClick={() => navigate(-1)}
                        className="flex items-center gap-1 text-xs uppercase tracking-widest font-bold text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300 mb-3 transition-colors"
                    >
                        <ChevronLeft size={13} strokeWidth={2.5} />
                        Leads
                    </button>

                    <div className="flex items-start justify-between gap-4">
                        {/* Title */}
                        <div>
                            <h1 className="font-['Barlow_Condensed'] font-black uppercase tracking-widest text-4xl leading-none text-zinc-900 dark:text-white">
                                New Lead
                            </h1>
                            <p className="text-sm text-zinc-500 dark:text-zinc-400 mt-1.5">
                                {isQuickCapture
                                    ? 'Essential fields only — fastest capture at the door.'
                                    : 'Full lead profile with insurance and assignment details.'}
                            </p>
                        </div>

                        {/* Quick / Full Form toggle */}
                        <div className={`flex items-center p-1 rounded-xl gap-0.5 shrink-0
                            ${isDark ? 'bg-zinc-800' : 'bg-zinc-200/80'}
                        `}>
                            <button
                                type="button"
                                onClick={() => modeSwitchTo(true)}
                                className={`flex items-center gap-1.5 px-3 py-2 rounded-lg text-[11px] font-bold uppercase tracking-wider transition-all duration-200
                                    ${isQuickCapture
                                        ? 'bg-white dark:bg-zinc-700 text-zinc-900 dark:text-white shadow-sm'
                                        : 'text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200'
                                    }`}
                            >
                                <Zap size={11} strokeWidth={2.5} />
                                Quick
                            </button>
                            <button
                                type="button"
                                onClick={() => modeSwitchTo(false)}
                                className={`flex items-center gap-1.5 px-3 py-2 rounded-lg text-[11px] font-bold uppercase tracking-wider transition-all duration-200
                                    ${!isQuickCapture
                                        ? 'bg-white dark:bg-zinc-700 text-zinc-900 dark:text-white shadow-sm'
                                        : 'text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200'
                                    }`}
                            >
                                <FileText size={11} strokeWidth={2.5} />
                                Full Form
                            </button>
                        </div>
                    </div>

                    {/* Section indicator pills */}
                    <div className="flex items-center gap-2 mt-4 flex-wrap">
                        {SECTIONS.map(s => (
                            <div
                                key={s.id}
                                className={`flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[10px] font-bold uppercase tracking-wider transition-all duration-300
                                    ${(!s.quickCapture && isQuickCapture)
                                        ? 'opacity-30 bg-zinc-200 dark:bg-zinc-800 text-zinc-400'
                                        : 'opacity-100'
                                    }`}
                                style={(!s.quickCapture && isQuickCapture)
                                    ? {}
                                    : { backgroundColor: s.accentColor + '22', color: s.accentColor }
                                }
                            >
                                <s.icon size={9} strokeWidth={2.5} />
                                {s.title}
                            </div>
                        ))}
                    </div>
                </div>

                {/* --- Sections --- */}
                <div className="space-y-3">
                    <AnimatePresence mode="popLayout">
                        {visibleSections.map(section => (
                            <motion.div
                                key={section.id}
                                initial={{ opacity: 0, y: 22 }}
                                animate={{ opacity: 1, y: 0 }}
                                transition={{ type: 'spring', stiffness: 280, damping: 28 }}
                                layout
                                exit={{
                                    opacity: 0,
                                    scale: 0.97,
                                    y: -6,
                                    transition: { duration: 0.18, ease: 'easeIn' },
                                }}
                            >
                                <LeadSectionWrapper
                                    title={section.title}
                                    icon={section.icon}
                                    accentColor={section.accentColor}
                                    isOpen={openSections[section.id]}
                                    onToggle={() => toggleSection(section.id)}
                                    isComplete={sectionCompletion[section.id]}
                                >
                                    {renderSectionContent(section)}
                                </LeadSectionWrapper>
                            </motion.div>
                        ))}
                    </AnimatePresence>
                </div>
            </div>

            {/* ----------------------------------------------------------------
                Mobile sticky save footer
            ---------------------------------------------------------------- */}
            <div className={`fixed bottom-0 left-0 right-0 md:hidden px-4 py-3
                border-t backdrop-blur-md
                ${isDark
                    ? 'bg-zinc-900/90 border-white/10'
                    : 'bg-white/90 border-zinc-200'
                }
            `}>
                <div className="flex items-center gap-3 max-w-3xl mx-auto">
                    {/* Compact mode toggle */}
                    <div className={`flex items-center p-0.5 rounded-lg gap-0.5 shrink-0
                        ${isDark ? 'bg-zinc-800' : 'bg-zinc-100'}
                    `}>
                        <button
                            type="button"
                            onClick={() => modeSwitchTo(true)}
                            className={`p-2 rounded-md transition-all duration-200
                                ${isQuickCapture
                                    ? 'bg-white dark:bg-zinc-700 shadow-sm text-zinc-900 dark:text-white'
                                    : 'text-zinc-400'
                                }`}
                        >
                            <Zap size={14} />
                        </button>
                        <button
                            type="button"
                            onClick={() => modeSwitchTo(false)}
                            className={`p-2 rounded-md transition-all duration-200
                                ${!isQuickCapture
                                    ? 'bg-white dark:bg-zinc-700 shadow-sm text-zinc-900 dark:text-white'
                                    : 'text-zinc-400'
                                }`}
                        >
                            <FileText size={14} />
                        </button>
                    </div>

                    {/* Save */}
                    <button
                        type="button"
                        className="flex-1 flex items-center justify-center gap-2 py-3 rounded-xl font-bold text-sm uppercase tracking-widest text-white transition-all active:scale-[0.97]"
                        style={{ backgroundColor: '#3B82F6' }}
                    >
                        <Save size={15} />
                        Save Lead
                    </button>
                </div>
            </div>
        </div>
    );
}