import React, { useState, useEffect, useRef } from 'react';

// Load necessary CDN libraries if they aren't already present
const loadScript = (src) => new Promise((resolve, reject) => {
    const s = document.createElement('script');
    s.src = src;
    s.async = true;
    s.onload = resolve;
    s.onerror = () => reject(new Error(`Failed to load ${src}`));
    document.head.appendChild(s);
});

// A hook to handle loading external scripts
const useExternalScripts = (scripts) => {
    const [loaded, setLoaded] = useState(false);
    useEffect(() => {
        const loaders = scripts.filter(src => {
            if (src.includes('react@18') && window.React) return false;
            if (src.includes('react-dom@18') && window.ReactDOM) return false;
            if (src.includes('echarts') && window.echarts) return false;
            if (src.includes('papaparse') && window.Papa) return false;
            if (src.includes('xlsx') && window.XLSX) return false;
            if (src.includes('html2canvas') && window.html2canvas) return false;
            if (src.includes('jspdf') && window.jspdf) return false;
            return true;
        }).map(loadScript);

        if (loaders.length > 0) {
            Promise.all(loaders).then(() => setLoaded(true)).catch(err => console.error('CDN load error:', err));
        } else {
            setLoaded(true);
        }
    }, [scripts]);
    return loaded;
};

// Main App Component
const App = () => {
    // State for file uploads and control
    const [zohoFile, setZohoFile] = useState(null);
    const [imamRosterFile, setImamRosterFile] = useState(null);
    const [selectedMonth, setSelectedMonth] = useState('');
    const [availableMonths, setAvailableMonths] = useState([]);
    const [includeCSAT, setIncludeCSAT] = useState(false);
    const [good, setGood] = useState(0);
    const [okay, setOkay] = useState(0);
    const [bad, setBad] = useState(0);
    const [reportData, setReportData] = useState(null);
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState('');

    const scripts = [
        'https://unpkg.com/react@18/umd/react.development.js',
        'https://unpkg.com/react-dom@18/umd/react-dom.development.js',
        'https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js',
        'https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.0/papaparse.min.js',
        'https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js',
        'https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js',
        'https://cdn.jsdelivr.net/npm/jspdf@2.5.1/dist/jspdf.umd.min.js',
    ];
    const scriptsLoaded = useExternalScripts(scripts);

    // Color definitions for the theme
    const brandPrimary = '#BD1F5B';
    const brandSecondary = '#597585';
    const darkGray = '#111827';
    const lighterGray = '#374151';
    const offWhite = '#f9fafb';
    const textColor = '#e5e7eb';

    // Helper functions (unchanged from original code)
    const pad2 = (n) => n.toString().padStart(2, '0');
    const formatDuration = (sec) => {
        if (typeof sec !== 'number' || isNaN(sec)) return 'N/A';
        const h = Math.floor(sec / 3600);
        const m = Math.floor((sec % 3600) / 60);
        return `${pad2(h)} hours ${pad2(m)} mins`;
    };
    const cleanName = (name) => {
        if (typeof name !== 'string') return '';
        let cleaned = name.split(/\s+/).filter(w => w.length > 1 || !/^[a-zA-Z]\.$/.test(w)).join(' ');
        cleaned = cleaned.replace(/[^a-zA-Z\s]/g, '');
        return cleaned.trim().toLowerCase();
    };
    const getWeekOfMonth = (date) => {
        const first = new Date(date.getFullYear(), date.getMonth(), 1);
        const adj = date.getDate() + first.getDay();
        return Math.floor(adj / 7) + ((adj % 7) > 0 ? 1 : 0);
    };

    const mapCountryToTickets = (tickets, roster) => tickets.map(t => {
        const cleanedContactName = cleanName(t['Contact Name']);
        const matched = roster.find(i => cleanName(i['Imam Name']) === cleanedContactName);
        return {
            ...t,
            'Cleaned Contact Name': cleanedContactName,
            'Mapped Country': matched && matched['Country'] ? matched['Country'] : 'Unknown',
            'Original Imam Name Roster': matched && matched['Imam Name'] ? matched['Imam Name'] : 'Unknown',
            'Mapped Imam Number': matched && matched['Imam Number'] ? matched['Imam Number'] : 'N/A'
        };
    });

    const calcCSAT = (g, o, b) => {
        const t = g + o + b;
        if (!t) return 'No data available';
        const score = (((g * 5) + (o * 3) + (b * 1)) / t).toFixed(2);
        return `${score} (Good: ${g}, Okay: ${o}, Bad: ${b})`;
    };

    const analyzeData = (dfTicketsMapped, targetMonthStart, csat) => {
        let dfTickets = dfTicketsMapped.map(ticket => {
            const createdTime = ticket['Created Time'] ? new Date(ticket['Created Time']) : null;
            const ticketClosedTime = ticket['Ticket Closed Time'] ? new Date(ticket['Ticket Closed Time']) : null;
            const timeToRespond = ticket['Time to Respond'] ? new Date(ticket['Time to Respond']) : null;
            let timeDifferenceSeconds = null;
            if (createdTime && timeToRespond && !isNaN(createdTime) && !isNaN(timeToRespond)) {
                timeDifferenceSeconds = (timeToRespond.getTime() - createdTime.getTime()) / 1000;
            }
            return {
                ...ticket,
                'Created Time': createdTime,
                'Ticket Closed Time': ticketClosedTime,
                'Time to Respond': timeToRespond,
                'Time Difference Seconds': timeDifferenceSeconds,
                'Month': createdTime ? createdTime.getMonth() : null,
                'Month_Name': createdTime ? createdTime.toLocaleString('default', { month: 'long' }) : null,
                'Year': createdTime ? createdTime.getFullYear() : null,
                'Week_of_Year': createdTime ? Math.ceil((createdTime - new Date(createdTime.getFullYear(), 0, 1)) / (1000 * 60 * 60 * 24 * 7)) : null,
                'Week_of_Month': createdTime ? getWeekOfMonth(createdTime) : null
            };
        }).filter(t => t['Created Time'] && !isNaN(t['Created Time']));

        const yearlyData = {
            total_queries: dfTickets.length,
            query_type_breakdown: Object.entries(dfTickets.reduce((a, t) => { const c = t['Classification'] || 'Unclassified'; a[c] = (a[c] || 0) + 1; return a; }, {})),
            busiest_week: {},
            popular_query_hours: Object.entries(dfTickets.reduce((a, t) => { const h = t['Created Time'] ? t['Created Time'].getHours() : 'Unknown'; a[h] = (a[h] || 0) + 1; return a; }, {})).sort((a, b) => b[1] - a[1]),
            within_24_hours: 0,
            over_24_hours: 0,
            weekend_tickets: 0,
            avg_response_time: 0,
            tickets_resolved: dfTickets.filter(t => t['Ticket Closed Time']).length,
            customer_satisfaction: csat,
            monthly_trend: Object.entries(dfTickets.reduce((a, t) => { if (t['Created Time']) { const d = t['Created Time']; const key = `${d.getFullYear()}-${pad2(d.getMonth() + 1)}`; a[key] = (a[key] || 0) + 1; } return a; }, {})).sort((a, b) => a[0].localeCompare(b[0])),
            reopening_rate: (dfTickets.filter(t => String(t['Reopened']).toLowerCase() === 'true').length / (dfTickets.length || 1)) * 100,
            first_contact_resolution_rate: (dfTickets.filter(t => String(t['First Contact Resolution']).toLowerCase() === 'true').length / (dfTickets.length || 1)) * 100,
            country_query_counts: Object.entries(dfTickets.reduce((a, t) => { const c = t['Mapped Country'] || 'Unknown'; a[c] = (a[c] || 0) + 1; return a; }, {})).sort((a, b) => b[1] - a[1]),
            top_5_imams_overall: []
        };

        const byWeekYear = dfTickets.reduce((a, t) => { if (t['Week_of_Year'] != null) a[t['Week_of_Year']] = (a[t['Week_of_Year']] || 0) + 1; return a; }, {});
        if (Object.keys(byWeekYear).length) {
            const maxW = Object.keys(byWeekYear).reduce((x, y) => byWeekYear[x] > byWeekYear[y] ? x : y);
            yearlyData.busiest_week = {
                [`Week ${maxW}`]: byWeekYear[maxW]
            };
        } else yearlyData.busiest_week = {
            'No data available': 0
        };

        let sumRTY = 0,
            cntRTY = 0;
        dfTickets.forEach(t => {
            if (t['Created Time'] && t['Time to Respond'] && t['Time Difference Seconds'] != null) {
                sumRTY += t['Time Difference Seconds'];
                cntRTY++;
                const d = t['Created Time'];
                if (d.getDay() === 6 || d.getDay() === 0 || (d.getDay() === 5 && d.getHours() >= 13) || (d.getDay() === 1 && d.getHours() < 8)) yearlyData.weekend_tickets++;
                if (t['Time Difference Seconds'] <= 24 * 3600) yearlyData.within_24_hours++;
                else yearlyData.over_24_hours++;
            }
        });
        yearlyData.avg_response_time = cntRTY ? (sumRTY / cntRTY) : 0;

        const imamAggY = dfTickets.reduce((a, t) => {
            const key = `${t['Original Imam Name Roster']||'Unknown Imam'}|${t['Mapped Country']||'Unknown Country'}|${t['Mapped Imam Number']||'N/A'}`;
            a[key] = (a[key] || 0) + 1;
            return a;
        }, {});
        yearlyData.top_5_imams_overall = Object.entries(imamAggY).map(([k, count]) => {
            const [name, country, number] = k.split('|');
            return {
                'Original Imam Name Roster': name,
                'Mapped Country': country,
                'Mapped Imam Number': number,
                'Query Count': count
            };
        }).sort((a, b) => b['Query Count'] - a['Query Count']).slice(0, 5);

        let monthSet = dfTickets;
        if (targetMonthStart) {
            const end = new Date(targetMonthStart.getFullYear(), targetMonthStart.getMonth() + 1, 1);
            monthSet = dfTickets.filter(t => t['Created Time'] >= targetMonthStart && t['Created Time'] < end);
        }

        const monthlyData = {
            total_queries: monthSet.length,
            query_type_breakdown: Object.entries(monthSet.reduce((a, t) => { const c = t['Classification'] || 'Unclassified'; a[c] = (a[c] || 0) + 1; return a; }, {})),
            busiest_week: {},
            popular_query_hours: Object.entries(monthSet.reduce((a, t) => { const h = t['Created Time'] ? t['Created Time'].getHours() : 'Unknown'; a[h] = (a[h] || 0) + 1; return a; }, {})).sort((a, b) => b[1] - a[1]),
            within_24_hours: 0,
            over_24_hours: 0,
            weekend_tickets: 0,
            avg_response_time: 0,
            tickets_resolved: monthSet.filter(t => t['Ticket Closed Time']).length,
            customer_satisfaction: csat,
            monthly_trend: Object.entries(monthSet.reduce((a, t) => { if (t['Created Time']) { const d = t['Created Time']; const key = `${d.getFullYear()}-${pad2(d.getMonth() + 1)}`; a[key] = (a[key] || 0) + 1; } return a; }, {})).sort((a, b) => a[0].localeCompare(b[0])),
            reopening_rate: (monthSet.filter(t => String(t['Reopened']).toLowerCase() === 'true').length / (monthSet.length || 1)) * 100,
            first_contact_resolution_rate: (monthSet.filter(t => String(t['First Contact Resolution']).toLowerCase() === 'true').length / (monthSet.length || 1)) * 100,
            country_query_counts: Object.entries(monthSet.reduce((a, t) => { const c = t['Mapped Country'] || 'Unknown'; a[c] = (a[c] || 0) + 1; return a; }, {})).sort((a, b) => b[1] - a[1]),
            top_5_imams_overall: []
        };

        const byWeekMonth = monthSet.reduce((a, t) => { if (t['Week_of_Month'] != null) a[t['Week_of_Month']] = (a[t['Week_of_Month']] || 0) + 1; return a; }, {});
        if (Object.keys(byWeekMonth).length) {
            const maxW = Object.keys(byWeekMonth).reduce((x, y) => byWeekMonth[x] > byWeekMonth[y] ? x : y);
            monthlyData.busiest_week = {
                [`Week ${maxW}`]: byWeekMonth[maxW]
            };
        } else monthlyData.busiest_week = {
            'No data available': 0
        };

        let sumRTM = 0,
            cntRTM = 0;
        monthSet.forEach(t => {
            if (t['Created Time'] && t['Time to Respond'] && t['Time Difference Seconds'] != null) {
                sumRTM += t['Time Difference Seconds'];
                cntRTM++;
                const d = t['Created Time'];
                if (d.getDay() === 6 || d.getDay() === 0 || (d.getDay() === 5 && d.getHours() >= 13) || (d.getDay() === 1 && d.getHours() < 8)) monthlyData.weekend_tickets++;
                if (t['Time Difference Seconds'] <= 24 * 3600) monthlyData.within_24_hours++;
                else monthlyData.over_24_hours++;
            }
        });
        monthlyData.avg_response_time = cntRTM ? (sumRTM / cntRTM) : 0;

        const imamAggM = monthSet.reduce((a, t) => {
            const key = `${t['Original Imam Name Roster']||'Unknown Imam'}|${t['Mapped Country']||'Unknown Country'}|${t['Mapped Imam Number']||'N/A'}`;
            a[key] = (a[key] || 0) + 1;
            return a;
        }, {});
        monthlyData.top_5_imams_overall = Object.entries(imamAggM).map(([k, count]) => {
            const [name, country, number] = k.split('|');
            return {
                'Original Imam Name Roster': name,
                'Mapped Country': country,
                'Mapped Imam Number': number,
                'Query Count': count
            };
        }).sort((a, b) => b['Query Count'] - a['Query Count']).slice(0, 5);

        return {
            overall_data_for_month: monthlyData,
            overall_data_for_year: yearlyData
        };
    };

    // ECharts component for bar charts
    const EChartsComponent = ({
        id,
        data,
        title,
        color
    }) => {
        const ref = useRef(null);
        useEffect(() => {
            if (!ref.current || !window.echarts) return;
            const chart = window.echarts.init(ref.current, 'dark');
            const labels = data.map(d => d.name);
            const values = data.map(d => d.value);
            chart.setOption({
                backgroundColor: 'transparent',
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    textStyle: {
                        fontSize: 14,
                        color: offWhite
                    },
                    formatter: (params) => {
                        const p = params[0];
                        return `<div class="font-bold">${p.name}</div><div>${p.seriesName}: ${p.value}</div>`;
                    }
                },
                title: {
                    text: title,
                    left: 'center',
                    textStyle: {
                        color: textColor,
                        fontSize: 16
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '6%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: labels,
                    axisLabel: {
                        color: textColor,
                        rotate: 45,
                        interval: 0,
                        fontFamily: 'Inter, sans-serif',
                    },
                    axisLine: {
                        lineStyle: {
                            color: lighterGray
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        color: textColor,
                        fontFamily: 'Inter, sans-serif',
                    },
                    splitLine: {
                        lineStyle: {
                            color: lighterGray
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: lighterGray
                        }
                    }
                },
                series: [{
                    name: 'Count',
                    type: 'bar',
                    data: values,
                    itemStyle: {
                        color,
                        borderRadius: [6, 6, 0, 0]
                    }
                }]
            });
            const onResize = () => chart.resize();
            window.addEventListener('resize', onResize);
            return () => {
                window.removeEventListener('resize', onResize);
                chart.dispose();
            };
        }, [data, title, color, scriptsLoaded]);
        return <div id={id} ref={ref} className="w-full h-80" />;
    };

    // Handler for file uploads
    const handleFile = (e, setter) => {
        setter(e.target.files[0]);
        setError('');
    };

    // Function to run the analysis
    const runAnalysis = async () => {
        if (!zohoFile || !imamRosterFile) {
            setError('Please upload both the Zoho Desk CSV and the Imam Roster Excel files.');
            return;
        }
        setLoading(true);
        setError('');
        setReportData(null);
        try {
            const csvText = await zohoFile.text();
            const parsed = window.Papa.parse(csvText, {
                header: true,
                skipEmptyLines: true,
                dynamicTyping: true
            });
            if (parsed.errors ?.length) throw new Error('CSV parsing errors: ' + parsed.errors.map(e => e.message).join(', '));
            const tickets = parsed.data;

            const buf = await imamRosterFile.arrayBuffer();
            const wb = window.XLSX.read(buf, {
                type: 'array'
            });
            const sheet = wb.SheetNames[0];
            const roster = window.XLSX.utils.sheet_to_json(wb.Sheets[sheet]);

            const mapped = mapCountryToTickets(tickets, roster);

            const setMonths = new Set();
            mapped.forEach(t => {
                const dt = new Date(t['Created Time']);
                if (dt && !isNaN(dt)) {
                    setMonths.add(`${dt.toLocaleString('default',{month:'long'})} ${dt.getFullYear()}`);
                }
            });
            const months = Array.from(setMonths).sort((a, b) => {
                const [ma, ya] = a.split(' ');
                const [mb, yb] = b.split(' ');
                return new Date(`${ma} 1, ${ya}`) - new Date(`${mb} 1, ${yb}`);
            });
            setAvailableMonths(months);

            let current = selectedMonth;
            if (!current && months.length) current = months[months.length - 1];
            if (current && !months.includes(current)) current = months[months.length - 1] || '';
            if (current !== selectedMonth) setSelectedMonth(current);

            const csat = includeCSAT ? calcCSAT(good, okay, bad) : 'Not included';
            const analysis = analyzeData(mapped, current ? new Date(current) : null, csat);
            setReportData(analysis);
        } catch (e) {
            console.error(e);
            setError(`Failed to process files: ${e.message}. Please check file formats/columns.`);
        } finally {
            setLoading(false);
        }
    };

    // Effects to trigger analysis on file/month changes
    useEffect(() => {
        if (scriptsLoaded && zohoFile && imamRosterFile) runAnalysis();
    }, [zohoFile, imamRosterFile, scriptsLoaded]);
    useEffect(() => {
        if (scriptsLoaded && zohoFile && imamRosterFile) runAnalysis();
    }, [selectedMonth, includeCSAT, good, okay, bad, scriptsLoaded]);

    // PDF download functionality
    const downloadPDF = async () => {
        if (!reportData) return;
        const target = document.getElementById('report-capture');
        if (!target) return;
        setLoading(true);
        await new Promise(r => setTimeout(r, 400));
        const canvas = await window.html2canvas(target, {
            scale: 2,
            useCORS: true,
            backgroundColor: '#ffffff'
        });
        const imgData = canvas.toDataURL('image/png');
        const {
            jsPDF
        } = window.jspdf;
        const pdf = new jsPDF('p', 'mm', 'a4');
        const pageWidth = 210,
            pageHeight = 297,
            margin = 10;
        const contentWidth = pageWidth - margin * 2;
        const imgHeight = (canvas.height * contentWidth) / canvas.width;
        let heightLeft = imgHeight,
            position = margin;
        pdf.addImage(imgData, 'PNG', margin, position, contentWidth, imgHeight);
        heightLeft -= (pageHeight - margin * 2);
        while (heightLeft > 0) {
            pdf.addPage();
            position = margin - (imgHeight - heightLeft);
            pdf.addImage(imgData, 'PNG', margin, position, contentWidth, imgHeight);
            heightLeft -= (pageHeight - margin * 2);
        }
        const fileLabel = (selectedMonth || 'Report').replace(/[^\w\-]+/g, '_');
        pdf.save(`Helpdesk_Report_${fileLabel}.pdf`);
        setLoading(false);
    };

    // Component for a single metric card
    const MetricCard = ({
        title,
        value,
        className = ''
    }) => (
        <div className={`p-4 bg-${lighterGray} rounded-xl shadow-inner border border-${darkGray} ${className}`}>
            <h6 className="text-sm font-semibold text-gray-400">{title}</h6>
            <p className="text-2xl font-bold text-white mt-1">{value}</p>
        </div>
    );

    // Component for the Top Imams table
    const TopImamsTable = ({
        data
    }) => (
        <div className="mt-6 overflow-x-auto rounded-xl">
            <table className="min-w-full divide-y divide-gray-700">
                <thead className={`bg-${lighterGray}`}>
                    <tr>
                        {['Rank', 'Imam Name', 'Country', 'Imam Number', 'Query Count'].map(header => (
                            <th key={header} className={`px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider`}>{header}</th>
                        ))}
                    </tr>
                </thead>
                <tbody className={`bg-${darkGray} divide-y divide-gray-700`}>
                    {data.map((item, index) => (
                        <tr key={index}>
                            <td className={`px-6 py-4 whitespace-nowrap text-sm font-medium text-white`}>{index + 1}</td>
                            <td className={`px-6 py-4 whitespace-nowrap text-sm text-gray-400`}>{item['Original Imam Name Roster']}</td>
                            <td className={`px-6 py-4 whitespace-nowrap text-sm text-gray-400`}>{item['Mapped Country']}</td>
                            <td className={`px-6 py-4 whitespace-nowrap text-sm text-gray-400`}>{item['Mapped Imam Number']}</td>
                            <td className={`px-6 py-4 whitespace-nowrap text-sm text-gray-400`}>{item['Query Count']}</td>
                        </tr>
                    ))}
                </tbody>
            </table>
        </div>
    );

    // Helper to format hour labels safely
    const hourLabel = (h) => {
        const n = parseInt(h, 10);
        if (isNaN(n)) return String(h);
        return `${n}:00-${n+1}:00`;
    };

    // Main render block
    return (
        <div className="p-4 sm:p-8 bg-gray-900 min-h-screen text-white font-inter">
            <style>
                {`
                    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
                    body {
                        font-family: 'Inter', sans-serif;
                        background: linear-gradient(135deg, #1f2937 0%, #0f172a 100%);
                        color: #e5e7eb;
                    }
                    .file-upload-input {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        opacity: 0;
                        cursor: pointer;
                    }
                    .file-upload-label {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                        border-radius: 0.75rem;
                        border: 2px dashed #4b5563;
                        padding: 1.5rem;
                        text-align: center;
                        transition: all 0.2s ease-in-out;
                        background-color: #1f2937;
                    }
                    .file-upload-label:hover {
                        background-color: #1a232f;
                        border-color: #6b7280;
                    }
                    .btn-primary {
                        background: linear-gradient(90deg, #BD1F5B 0%, #9C194D 100%);
                        transition: all 0.3s ease;
                    }
                    .btn-primary:hover {
                        box-shadow: 0 4px 15px rgba(189, 31, 91, 0.4);
                        transform: translateY(-2px);
                    }
                    .btn-secondary {
                        background: linear-gradient(90deg, #597585 0%, #4c6370 100%);
                        transition: all 0.3s ease;
                    }
                    .btn-secondary:hover {
                        box-shadow: 0 4px 15px rgba(89, 117, 133, 0.4);
                        transform: translateY(-2px);
                    }
                    .chart-container div {
                        min-width: 100%;
                    }
                `}
            </style>

            <div className="max-w-6xl mx-auto py-8">
                <h1 className="text-4xl sm:text-5xl font-extrabold text-center mb-2 leading-tight tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-white to-gray-400">
                    Helpdesk Report Dashboard
                </h1>
                <p className="text-center text-gray-400 mb-8">
                    Analyze Zoho Desk data and Imam Roster performance with detailed reports.
                </p>

                {/* File Upload Section */}
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
                    <div className="relative">
                        <label htmlFor="zoho-upload" className="file-upload-label">
                            <svg xmlns="http://www.w3.org/2000/svg" className="h-12 w-12 text-gray-500 mb-2" viewBox="0 0 20 20" fill="currentColor">
                                <path fillRule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.414L14.586 5A2 2 0 0115 6.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 2a1 1 0 011-1h.5a1 1 0 011 1V6h3V5a1 1 0 011-1h.5a1 1 0 011 1v2a1 1 0 01-1 1h-6a1 1 0 01-1-1V6zM6 10a1 1 0 011-1h.5a1 1 0 011 1v4a1 1 0 01-1 1h-1a1 1 0 01-1-1v-4zM10 10a1 1 0 011-1h.5a1 1 0 011 1v4a1 1 0 01-1 1h-1a1 1 0 01-1-1v-4z" clipRule="evenodd" />
                            </svg>
                            <span className="text-lg font-semibold text-gray-200">Upload Zoho Desk CSV</span>
                            {zohoFile && <p className="text-sm text-brandSecondary mt-1">{zohoFile.name}</p>}
                        </label>
                        <input id="zoho-upload" type="file" accept=".csv" onChange={(e) => handleFile(e, setZohoFile)} className="file-upload-input" />
                    </div>
                    <div className="relative">
                        <label htmlFor="imam-upload" className="file-upload-label">
                            <svg xmlns="http://www.w3.org/2000/svg" className="h-12 w-12 text-gray-500 mb-2" viewBox="0 0 20 20" fill="currentColor">
                                <path fillRule="evenodd" d="M5 4a3 3 0 00-3 3v6a3 3 0 003 3h10a3 3 0 003-3V7a3 3 0 00-3-3H5zm2 2a1 1 0 011 1v2h4V7a1 1 0 112 0v6a1 1 0 11-2 0v-2H8v2a1 1 0 11-2 0V7a1 1 0 011-1z" clipRule="evenodd" />
                            </svg>
                            <span className="text-lg font-semibold text-gray-200">Upload Imam Roster Excel</span>
                            {imamRosterFile && <p className="text-sm text-brandSecondary mt-1">{imamRosterFile.name}</p>}
                        </label>
                        <input id="imam-upload" type="file" accept=".xlsx,.xls" onChange={(e) => handleFile(e, setImamRosterFile)} className="file-upload-input" />
                    </div>
                </div>

                {/* Controls Section */}
                <div className={`p-6 rounded-2xl shadow-xl border border-${lighterGray} bg-${darkGray} mb-8`}>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label className="block text-sm font-medium mb-2 text-gray-400">Report Month:</label>
                            <div className="relative">
                                <select
                                    value={selectedMonth}
                                    onChange={(e) => setSelectedMonth(e.target.value)}
                                    className={`w-full px-4 py-3 pr-10 rounded-lg border focus:outline-none focus:ring-2 transition-colors bg-${lighterGray} text-white border-gray-700 focus:ring-${brandPrimary} appearance-none`}
                                >
                                    {!availableMonths.length ? (
                                        <option value="">Upload files to see months</option>
                                    ) : (
                                        availableMonths.map(m => (
                                            <option key={m} value={m}>{m}</option>
                                        ))
                                    )}
                                </select>
                                <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-400">
                                    <svg className="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
                                </div>
                            </div>
                        </div>
                        <div>
                            <div className="flex items-center mb-4">
                                <input id="csat-toggle" type="checkbox" checked={includeCSAT} onChange={(e) => setIncludeCSAT(e.target.checked)} className={`h-5 w-5 rounded border-gray-300 accent-[${brandPrimary}]`} />
                                <label htmlFor="csat-toggle" className="ml-2 text-sm font-medium text-gray-300">
                                    Include Customer Satisfaction Scores
                                </label>
                            </div>
                            {includeCSAT && (
                                <div className="grid grid-cols-3 gap-3">
                                    <input type="number" placeholder="Good" value={good} onChange={(e) => setGood(parseInt(e.target.value) || 0)} className={`w-full px-4 py-3 rounded-lg border focus:outline-none focus:ring-2 transition-colors bg-${lighterGray} text-white border-gray-700 focus:ring-[${brandPrimary}]`} />
                                    <input type="number" placeholder="Okay" value={okay} onChange={(e) => setOkay(parseInt(e.target.value) || 0)} className={`w-full px-4 py-3 rounded-lg border focus:outline-none focus:ring-2 transition-colors bg-${lighterGray} text-white border-gray-700 focus:ring-[${brandPrimary}]`} />
                                    <input type="number" placeholder="Bad" value={bad} onChange={(e) => setBad(parseInt(e.target.value) || 0)} className={`w-full px-4 py-3 rounded-lg border focus:outline-none focus:ring-2 transition-colors bg-${lighterGray} text-white border-gray-700 focus:ring-[${brandPrimary}]`} />
                                </div>
                            )}
                        </div>
                    </div>
                </div>

                {/* Action Buttons */}
                <div className="flex flex-col sm:flex-row justify-center gap-4 mb-8">
                    <button
                        onClick={runAnalysis}
                        disabled={loading || !zohoFile || !imamRosterFile || !scriptsLoaded}
                        className={`w-full sm:w-1/2 py-3 px-6 rounded-xl shadow-lg font-bold text-white transition-all ${(loading || !zohoFile || !imamRosterFile || !scriptsLoaded) ? 'bg-gray-600 cursor-not-allowed' : 'btn-primary'}`}
                    >
                        {loading ? 'Processing Reports...' : 'Generate Reports'}
                    </button>
                    <button
                        onClick={downloadPDF}
                        disabled={!reportData || loading}
                        className={`w-full sm:w-1/2 py-3 px-6 rounded-xl shadow-lg font-bold text-white transition-all ${(!reportData || loading) ? 'bg-gray-600 cursor-not-allowed' : 'btn-secondary'}`}
                    >
                        Download PDF Report
                    </button>
                </div>

                {/* Error Message */}
                {error && <div className="p-4 bg-red-800 border border-red-700 rounded-lg text-center text-red-100 mb-6">{error}</div>}

                {/* Report Display Section */}
                {reportData && (
                    <div id="report-capture" className={`mt-8 p-6 bg-${darkGray} rounded-2xl shadow-2xl`}>
                        {/* Monthly Report */}
                        <div className="mb-10">
                            <h2 className={`text-2xl font-bold text-[${brandPrimary}] mb-4`}>Monthly Data Breakdown ({selectedMonth || 'All'})</h2>
                            <p className="text-lg text-gray-300">Total Queries: <span className="font-bold text-white">{reportData.overall_data_for_month.total_queries}</span></p>

                            <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
                                <EChartsComponent
                                    id="m-qt"
                                    data={reportData.overall_data_for_month.query_type_breakdown.map(([k, v]) => ({ name: k, value: v }))}
                                    title="Monthly Query Type Breakdown"
                                    color={brandSecondary}
                                />
                                <EChartsComponent
                                    id="m-hrs"
                                    data={reportData.overall_data_for_month.popular_query_hours.map(([h, v]) => ({ name: hourLabel(h), value: v }))}
                                    title="Monthly Popular Query Hours"
                                    color={brandSecondary}
                                />
                                <EChartsComponent
                                    id="m-rt"
                                    data={[{ name: 'Within 24 hours', value: reportData.overall_data_for_month.within_24_hours }, { name: 'Over 24 hours', value: reportData.overall_data_for_month.over_24_hours }]}
                                    title="Monthly Response Time"
                                    color={brandSecondary}
                                />
                                <div className="grid grid-cols-1 gap-4">
                                    <MetricCard title="Busiest Week" value={Object.keys(reportData.overall_data_for_month.busiest_week)[0] || 'N/A'} />
                                    <MetricCard title="Avg Response Time" value={formatDuration(reportData.overall_data_for_month.avg_response_time)} />
                                    <MetricCard title="Customer Satisfaction" value={reportData.overall_data_for_month.customer_satisfaction} />
                                    <MetricCard title="Reopening Rate" value={`${reportData.overall_data_for_month.reopening_rate.toFixed(2)}%`} />
                                    <MetricCard title="First Contact Resolution Rate" value={`${reportData.overall_data_for_month.first_contact_resolution_rate.toFixed(2)}%`} />
                                </div>
                            </div>
                        </div>

                        {/* Yearly Report */}
                        <div>
                            <h2 className={`text-2xl font-bold text-[${brandPrimary}] mb-4`}>Yearly Data Breakdown</h2>
                            <p className="text-lg text-gray-300">Total Queries: <span className="font-bold text-white">{reportData.overall_data_for_year.total_queries}</span></p>

                            <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
                                <EChartsComponent
                                    id="y-qt"
                                    data={reportData.overall_data_for_year.query_type_breakdown.map(([k, v]) => ({ name: k, value: v }))}
                                    title="Yearly Query Type Breakdown"
                                    color={brandPrimary}
                                />
                                <EChartsComponent
                                    id="y-hrs"
                                    data={reportData.overall_data_for_year.popular_query_hours.map(([h, v]) => ({ name: hourLabel(h), value: v }))}
                                    title="Yearly Popular Query Hours"
                                    color={brandPrimary}
                                />
                                <EChartsComponent
                                    id="y-rt"
                                    data={[{ name: 'Within 24 hours', value: reportData.overall_data_for_year.within_24_hours }, { name: 'Over 24 hours', value: reportData.overall_data_for_year.over_24_hours }]}
                                    title="Yearly Response Time"
                                    color={brandPrimary}
                                />
                                <div className="grid grid-cols-1 gap-4">
                                    <MetricCard title="Busiest Week" value={Object.keys(reportData.overall_data_for_year.busiest_week)[0] || 'N/A'} />
                                    <MetricCard title="Avg Response Time" value={formatDuration(reportData.overall_data_for_year.avg_response_time)} />
                                    <MetricCard title="Customer Satisfaction" value={reportData.overall_data_for_year.customer_satisfaction} />
                                    <MetricCard title="Reopening Rate" value={`${reportData.overall_data_for_year.reopening_rate.toFixed(2)}%`} />
                                    <MetricCard title="First Contact Resolution Rate" value={`${reportData.overall_data_for_year.first_contact_resolution_rate.toFixed(2)}%`} />
                                </div>
                            </div>

                            <h3 className={`text-xl font-bold text-[${brandPrimary}] mt-8 mb-4`}>Top 5 Imams Overall (by query count)</h3>
                            <TopImamsTable data={reportData.overall_data_for_year.top_5_imams_overall} />
                        </div>
                    </div>
                )}
            </div>
        </div>
    );
};

// Default export for the app
export default App;