const { useState, useEffect, useRef } = React;

const SMTP_STORAGE_KEY = "cert_smtp_profiles_v1";
const FORM_STORAGE_KEY = "cert_form_data_v2";

function loadSmtpProfiles() {
    try {
        const saved = localStorage.getItem(SMTP_STORAGE_KEY);
        if (saved) {
            const parsed = JSON.parse(saved);
            if (Array.isArray(parsed) && parsed.length > 0) return parsed;
        }
    } catch (e) {
        console.error("Error loading SMTP profiles from localStorage", e);
    }
    return [{
        id: "default_1",
        label: "Default Gmail",
        sender_email: "",
        password: "",
        smtp_server: "smtp.gmail.com",
        port: "587"
    }];
}

function saveSmtpProfiles(profiles) {
    try {
        localStorage.setItem(SMTP_STORAGE_KEY, JSON.stringify(profiles));
    } catch (e) {
        console.error("Error saving SMTP profiles to localStorage", e);
    }
}

function loadFormData() {
    try {
        const saved = localStorage.getItem(FORM_STORAGE_KEY);
        if (saved) {
            const parsed = JSON.parse(saved);
            if (parsed && typeof parsed === 'object') return parsed;
        }
    } catch (e) {}
    const today = new Date().toISOString().split('T')[0];
    return {
        recipient_name: "",
        recipient_email: "",
        course_title: "AI IN ACTION",
        issue_date: today,
        sign_left: "Gouri Shankar",
        sign_right: "Arpit Shah",
        template_id: "ai_in_action"
    };
}

function saveFormData(data) {
    try {
        localStorage.setItem(FORM_STORAGE_KEY, JSON.stringify(data));
    } catch (e) {}
}

function App() {
    const [activeTab, setActiveTab] = useState("generator");
    const [certHistory, setCertHistory] = useState([]);
    
    const [smtpProfiles, setSmtpProfiles] = useState(() => loadSmtpProfiles());
    const [activeProfileId, setActiveProfileId] = useState(() => {
        return localStorage.getItem("active_smtp_profile_id") || (loadSmtpProfiles()[0]?.id || "default_1");
    });

    useEffect(() => {
        saveSmtpProfiles(smtpProfiles);
    }, [smtpProfiles]);

    useEffect(() => {
        localStorage.setItem("active_smtp_profile_id", activeProfileId);
    }, [activeProfileId]);

    const activeSmtpConfig = smtpProfiles.find(p => p.id === activeProfileId) || smtpProfiles[0] || {
        sender_email: "", password: "", smtp_server: "smtp.gmail.com", port: "587"
    };

    // =========================================================================
    // API CALL 1: GET /api/certificates/history
    // Fetches the complete list of issued certificates from database
    // =========================================================================
    const fetchHistory = async () => {
        try {
            const res = await fetch('/api/certificates/history');
            const data = await res.json();
            if (data.history) setCertHistory(data.history);
        } catch (err) {
            console.error("Failed to fetch certificate history", err);
        }
    };

    useEffect(() => {
        fetchHistory();
    }, []);

    return (
        <div className="app-container">
            {/* Header */}
            <header className="main-header">
                <div className="brand-title">
                    <div className="brand-icon">AI</div>
                    <div>
                        <h1>Certificate Automation & Dispatch System</h1>
                        <p>Generate, Preview & Dispatch Verified Single-Page PDF Certificates</p>
                    </div>
                </div>

                <div style={{ display: 'flex', gap: '10px', alignItems: 'center' }}>
                    {activeSmtpConfig.sender_email ? (
                        <div style={{ fontSize: '12px', color: 'var(--success-text)', background: 'var(--success-bg)', padding: '6px 12px', borderRadius: '20px', border: '1px solid var(--success-border)', fontWeight: '600' }}>
                            SMTP Active: {activeSmtpConfig.sender_email}
                        </div>
                    ) : (
                        <div style={{ fontSize: '12px', color: 'var(--error-text)', background: 'var(--error-bg)', padding: '6px 12px', borderRadius: '20px', border: '1px solid var(--error-border)', fontWeight: '600' }}>
                            SMTP Not Configured
                        </div>
                    )}

                    <button 
                        className={`btn-outline ${activeTab === 'smtp' ? 'btn-gold' : ''}`}
                        onClick={() => setActiveTab(activeTab === 'smtp' ? 'generator' : 'smtp')}
                    >
                        SMTP Accounts
                    </button>
                </div>
            </header>

            {/* Navigation Tabs Bar */}
            <nav className="nav-tabs">
                <button 
                    className={`nav-tab-btn ${activeTab === 'generator' ? 'active' : ''}`}
                    onClick={() => setActiveTab('generator')}
                >
                    Generator
                </button>
                
                <button 
                    className={`nav-tab-btn ${activeTab === 'batch' ? 'active' : ''}`}
                    onClick={() => setActiveTab('batch')}
                >
                    Batch Recipient Import (.xlsx / .csv)
                </button>
                
                <button 
                    className={`nav-tab-btn ${activeTab === 'records' ? 'active' : ''}`}
                    onClick={() => setActiveTab('records')}
                >
                    Records & Dispatch Manager
                    <span className="nav-tab-badge">{certHistory.length}</span>
                </button>

                <button 
                    className={`nav-tab-btn ${activeTab === 'smtp' ? 'active' : ''}`}
                    onClick={() => setActiveTab('smtp')}
                >
                    SMTP Settings
                </button>
            </nav>

            {/* Main Active Tab Content */}
            <main>
                {activeTab === 'generator' && (
                    <GeneratorTab 
                        smtpConfig={activeSmtpConfig} 
                        fetchHistory={fetchHistory} 
                        setActiveTab={setActiveTab}
                    />
                )}

                {activeTab === 'batch' && (
                    <BatchTab 
                        smtpConfig={activeSmtpConfig}
                        fetchHistory={fetchHistory} 
                        setActiveTab={setActiveTab}
                    />
                )}

                {activeTab === 'records' && (
                    <RecordsTab 
                        certHistory={certHistory} 
                        fetchHistory={fetchHistory} 
                        smtpConfig={activeSmtpConfig}
                        setActiveTab={setActiveTab}
                    />
                )}

                {activeTab === 'smtp' && (
                    <SmtpTab 
                        smtpProfiles={smtpProfiles}
                        setSmtpProfiles={setSmtpProfiles}
                        activeProfileId={activeProfileId}
                        setActiveProfileId={setActiveProfileId}
                        setActiveTab={setActiveTab}
                    />
                )}
            </main>
        </div>
    );
}

// ============================================================================
// TAB 1: Single Certificate Generator (NO AUTO-GENERATE ON REFRESH)
// ============================================================================
function GeneratorTab({ smtpConfig, fetchHistory, setActiveTab }) {
    const [formData, setFormData] = useState(() => loadFormData());
    const [currentCert, setCurrentCert] = useState(null);
    const [loading, setLoading] = useState(false);
    const [showPreviewModal, setShowPreviewModal] = useState(false);

    // Save form data to localStorage whenever updated
    useEffect(() => {
        saveFormData(formData);
    }, [formData]);

    // Explicit manual generate ONLY
    const handleGenerateSingle = async (e) => {
        if (e) e.preventDefault();
        if (!formData.recipient_name.trim()) {
            alert("Please enter Recipient Name first!");
            return;
        }
        setLoading(true);
        try {
            // =========================================================================
            // API CALL 2: POST /api/certificates/generate
            // Generates single certificate (PDF + SVG) for the current form inputs
            // =========================================================================
            const res = await fetch('/api/certificates/generate', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(formData)
            });
            const data = await res.json();
            setCurrentCert(data);
            setShowPreviewModal(true);
            fetchHistory();
        } catch (err) {
            alert("Error generating certificate: " + err.message);
        } finally {
            setLoading(false);
        }
    };

    const handleGenerateAndSendEmail = async (e) => {
        if (e) e.preventDefault();
        if (!formData.recipient_name.trim()) {
            alert("Please enter Recipient Name first!");
            return;
        }
        if (!formData.recipient_email.trim()) {
            alert("Please enter a valid Recipient Email Address!");
            return;
        }
        if (!smtpConfig.sender_email || !smtpConfig.password) {
            alert("Please configure your SMTP Sender Email and App Password in SMTP Settings first!");
            setActiveTab("smtp");
            return;
        }

        setLoading(true);
        try {
            // =========================================================================
            // API CALL 3A: POST /api/certificates/generate
            // Step 1: Generates the single certificate PDF & SVG files first
            // =========================================================================
            const res = await fetch('/api/certificates/generate', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(formData)
            });
            const data = await res.json();
            setCurrentCert(data);

            // =========================================================================
            // API CALL 3B: POST /api/certificates/send_email
            // Step 2: Dispatches the 1-page PDF certificate email via SMTP
            // =========================================================================
            const emailRes = await fetch('/api/certificates/send_email', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    cert_ids: [data.id],
                    override_email: formData.recipient_email,
                    smtp_config: smtpConfig
                })
            });
            const emailData = await emailRes.json();
            const result = emailData.results[0];

            if (result && result.success) {
                alert(`SUCCESS: Certificate generated & 1-page PDF emailed to ${formData.recipient_email}!`);
                setActiveTab("records");
            } else {
                alert(`Certificate generated, but Email failed: ${result?.error || 'Check SMTP credentials'}`);
            }

            fetchHistory();
        } catch (err) {
            alert("Error: " + err.message);
        } finally {
            setLoading(false);
        }
    };

    const downloadSvg = () => {
        if (!currentCert) return;
        const blob = new Blob([currentCert.svg_content], { type: 'image/svg+xml' });
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        const clean_name = currentCert.recipient_name.replace(/[^a-zA-Z0-9]/g, '_');
        a.download = `Certificate_${clean_name}.svg`;
        a.click();
    };

    const resetForm = () => {
        const today = new Date().toISOString().split('T')[0];
        setFormData({
            recipient_name: "",
            recipient_email: "",
            course_title: "AI IN ACTION",
            issue_date: today,
            sign_left: "Gouri Shankar",
            sign_right: "Arpit Shah",
            template_id: "ai_in_action"
        });
    };

    return (
        <div className="white-panel" style={{ maxWidth: '680px', margin: '0 auto' }}>
            <div className="panel-title">
                <span>Certificate Generator</span>
                <button className="btn-outline" style={{ padding: '4px 12px', fontSize: '12px' }} onClick={resetForm}>
                    Clear / Reset Form
                </button>
            </div>

            <form onSubmit={handleGenerateSingle}>
                <div className="form-group">
                    <label>Recipient Name</label>
                    <input 
                        type="text" 
                        className="form-control"
                        placeholder="Enter full recipient name..."
                        value={formData.recipient_name}
                        onChange={(e) => setFormData({...formData, recipient_name: e.target.value})}
                        required
                    />
                </div>

                <div className="form-group">
                    <label>Recipient Email Address</label>
                    <input 
                        type="email" 
                        className="form-control"
                        placeholder="recipient@example.com"
                        value={formData.recipient_email}
                        onChange={(e) => setFormData({...formData, recipient_email: e.target.value})}
                    />
                </div>

                <div className="form-group">
                    <label>Course / Event Title</label>
                    <input 
                        type="text" 
                        className="form-control"
                        value={formData.course_title}
                        onChange={(e) => setFormData({...formData, course_title: e.target.value})}
                        required
                    />
                </div>

                <div className="form-group">
                    <label>Issue Date</label>
                    <input 
                        type="date" 
                        className="form-control"
                        value={formData.issue_date}
                        onChange={(e) => setFormData({...formData, issue_date: e.target.value})}
                        required
                    />
                </div>

                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px' }}>
                    <div className="form-group">
                        <label>Left Signatory</label>
                        <input 
                            type="text" 
                            className="form-control"
                            value={formData.sign_left}
                            onChange={(e) => setFormData({...formData, sign_left: e.target.value})}
                        />
                    </div>
                    <div className="form-group">
                        <label>Right Signatory</label>
                        <input 
                            type="text" 
                            className="form-control"
                            value={formData.sign_right}
                            onChange={(e) => setFormData({...formData, sign_right: e.target.value})}
                        />
                    </div>
                </div>

                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px', marginTop: '16px' }}>
                    <button type="submit" className="btn-primary" disabled={loading}>
                        {loading ? "Generating..." : "Generate Certificate Preview"}
                    </button>
                    
                    <button 
                        type="button" 
                        className="btn-primary btn-gold"
                        onClick={handleGenerateAndSendEmail}
                        disabled={loading}
                    >
                        Generate & Email 1-Page PDF
                    </button>
                </div>
            </form>

            {/* On-Demand Preview Modal */}
            {showPreviewModal && currentCert && (
                <div className="modal-overlay" onClick={() => setShowPreviewModal(false)}>
                    <div className="modal-card" style={{ maxWidth: '850px' }} onClick={(e) => e.stopPropagation()}>
                        <div className="panel-title">
                            <span>Generated Certificate Preview</span>
                            <button className="btn-outline" style={{ padding: '4px 10px', fontSize: '12px' }} onClick={() => setShowPreviewModal(false)}>
                                ✕ Close
                            </button>
                        </div>

                        <div 
                            className="cert-frame"
                            style={{ margin: '0 auto 20px auto' }}
                            dangerouslySetInnerHTML={{ __html: currentCert.svg_content }}
                        />

                        <div className="action-row">
                            <button className="btn-outline" style={{ flex: 1 }} onClick={downloadSvg}>
                                Download SVG Vector
                            </button>
                            <button className="btn-primary btn-gold" style={{ flex: 1 }} onClick={() => window.print()}>
                                Print / Save 1-Page PDF
                            </button>
                        </div>
                    </div>
                </div>
            )}
        </div>
    );
}

// ============================================================================
// TAB 2: Batch Recipient Import with Drag & Drop
// ============================================================================
function BatchTab({ smtpConfig, fetchHistory, setActiveTab }) {
    const [parsedRecipients, setParsedRecipients] = useState([]);
    const [fileName, setFileName] = useState("");
    const [loading, setLoading] = useState(false);
    const [isDragOver, setIsDragOver] = useState(false);
    const [mode, setMode] = useState("file");
    const [batchText, setBatchText] = useState("");
    const fileInputRef = useRef(null);

    const handleFileSelected = (file) => {
        if (!file) return;
        setFileName(file.name);
        setLoading(true);

        const reader = new FileReader();
        reader.onload = async (e) => {
            const base64Data = e.target.result.split(',')[1];
            try {
                const res = await fetch('/api/certificates/parse_file', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        filename: file.name,
                        file_data: base64Data
                    })
                });
                const data = await res.json();
                if (data.success && data.recipients) {
                    setParsedRecipients(data.recipients);
                } else {
                    alert("Failed to parse file: " + (data.error || "Unknown error"));
                }
            } catch (err) {
                alert("File parse error: " + err.message);
            } finally {
                setLoading(false);
            }
        };
        reader.readAsDataURL(file);
    };

    const handleDragOver = (e) => {
        e.preventDefault();
        setIsDragOver(true);
    };

    const handleDragLeave = (e) => {
        e.preventDefault();
        setIsDragOver(false);
    };

    const handleDrop = (e) => {
        e.preventDefault();
        setIsDragOver(false);
        if (e.dataTransfer.files && e.dataTransfer.files[0]) {
            handleFileSelected(e.dataTransfer.files[0]);
        }
    };

    const handleProcessBatchImport = async (shouldSendEmail = false) => {
        let items = [];
        if (mode === "file") {
            items = parsedRecipients.map(r => ({
                recipient_name: r.recipient_name,
                email: r.email,
                course_title: r.course_title || "AI IN ACTION"
            }));
        } else {
            if (!batchText.trim()) return;
            const lines = batchText.trim().split('\n');
            items = lines.map(line => {
                const parts = line.split(',');
                return {
                    recipient_name: parts[0]?.trim() || "Recipient",
                    email: parts[1]?.trim() || "",
                    course_title: parts[2]?.trim() || "AI IN ACTION"
                };
            });
        }

        if (items.length === 0) {
            alert("No recipients to process!");
            return;
        }

        if (shouldSendEmail && (!smtpConfig?.sender_email || !smtpConfig?.password)) {
            alert("Please configure your SMTP Sender Email and App Password in SMTP Settings first!");
            setActiveTab("smtp");
            return;
        }

        setLoading(true);
        try {
            // Step 1: Batch generate certificates into folder & database
            const res = await fetch('/api/certificates/generate_to_folder', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ items, template_id: "ai_in_action" })
            });
            const data = await res.json();
            const createdCerts = data.certificates || [];

            if (shouldSendEmail && createdCerts.length > 0) {
                // Step 2: Dispatch emails via SMTP for all created certificates
                const certIds = createdCerts.map(c => c.id || c.cert_id);
                const emailMap = {};
                createdCerts.forEach((c, idx) => {
                    const targetEmail = items[idx]?.email || c.recipient_email || "";
                    if (targetEmail) emailMap[c.id || c.cert_id] = targetEmail;
                });

                const emailRes = await fetch('/api/certificates/send_email', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        cert_ids: certIds,
                        email_map: emailMap,
                        smtp_config: smtpConfig
                    })
                });
                const emailData = await emailRes.json();
                const successCount = (emailData.results || []).filter(r => r.success).length;
                alert(`SUCCESS: Generated ${data.count} certificate(s) & dispatched ${successCount} 1-page PDF email(s)!`);
            } else {
                alert(`Successfully generated & imported ${data.count} certificates into 'certificates/' folder.`);
            }

            setParsedRecipients([]);
            setFileName("");
            setBatchText("");
            fetchHistory();
            setActiveTab("records");
        } catch (err) {
            alert("Batch Process Error: " + err.message);
        } finally {
            setLoading(false);
        }
    };

    return (
        <div className="white-panel" style={{ maxWidth: '850px', margin: '0 auto' }}>
            <div className="panel-title">
                <span>Batch Recipient Import</span>
                <div style={{ display: 'flex', gap: '8px' }}>
                    <button 
                        className={`btn-icon ${mode === 'file' ? 'btn-gold' : ''}`}
                        onClick={() => setMode('file')}
                    >
                        📁 Drag & Drop File (.xlsx / .csv)
                    </button>
                    <button 
                        className={`btn-icon ${mode === 'text' ? 'btn-gold' : ''}`}
                        onClick={() => setMode('text')}
                    >
                        ✍️ Paste CSV Text
                    </button>
                </div>
            </div>

            {mode === "file" ? (
                <>
                    <input 
                        type="file" 
                        ref={fileInputRef}
                        accept=".xlsx,.xls,.csv"
                        style={{ display: 'none' }}
                        onChange={(e) => e.target.files && handleFileSelected(e.target.files[0])}
                    />

                    <div 
                        className={`drop-zone ${isDragOver ? 'drag-over' : ''}`}
                        onDragOver={handleDragOver}
                        onDragLeave={handleDragLeave}
                        onDrop={handleDrop}
                        onClick={() => fileInputRef.current && fileInputRef.current.click()}
                    >
                        <div className="drop-zone-icon">📁</div>
                        <h3 style={{ fontSize: '16px', fontWeight: '700', color: 'var(--text-primary)', marginBottom: '4px' }}>
                            {fileName ? `Loaded: ${fileName}` : "Drag and drop your Excel or CSV file here"}
                        </h3>
                        <p style={{ fontSize: '13px', color: 'var(--text-secondary)', marginBottom: '12px' }}>
                            Supports Microsoft Excel (<code>.xlsx</code>, <code>.xls</code>) and CSV (<code>.csv</code>) files
                        </p>
                        <button type="button" className="btn-outline" style={{ display: 'inline-block', width: 'auto' }}>
                            {fileName ? "Choose Different File" : "Browse Files"}
                        </button>
                    </div>

                    {parsedRecipients.length > 0 && (
                        <div style={{ marginTop: '24px' }}>
                            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '12px', flexWrap: 'wrap', gap: '10px' }}>
                                <h3 style={{ fontSize: '15px', fontWeight: '700', color: 'var(--text-primary)' }}>
                                    Parsed Recipients Preview ({parsedRecipients.length})
                                </h3>
                                <div style={{ display: 'flex', gap: '8px' }}>
                                    <button className="btn-outline" style={{ width: 'auto', padding: '8px 14px', fontSize: '13px' }} onClick={() => handleProcessBatchImport(false)} disabled={loading}>
                                        {loading ? "Processing..." : `Generate & Save Only (${parsedRecipients.length})`}
                                    </button>
                                    <button className="btn-primary btn-gold" style={{ width: 'auto', padding: '8px 14px', fontSize: '13px' }} onClick={() => handleProcessBatchImport(true)} disabled={loading}>
                                        {loading ? "Processing..." : `Generate & Email All PDFs (${parsedRecipients.length})`}
                                    </button>
                                </div>
                            </div>

                            <div style={{ maxHeight: '300px', overflowY: 'auto', border: '1px solid var(--border-color)', borderRadius: '8px' }}>
                                <table className="custom-table">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>Recipient Name</th>
                                            <th>Target Email Address</th>
                                            <th>Course / Title</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {parsedRecipients.map((r, idx) => (
                                            <tr key={idx}>
                                                <td>{idx + 1}</td>
                                                <td style={{ fontWeight: '600' }}>{r.recipient_name}</td>
                                                <td style={{ color: 'var(--text-secondary)' }}>{r.email || <em style={{ color: '#94a3b8' }}>No email set</em>}</td>
                                                <td>{r.course_title}</td>
                                            </tr>
                                        ))}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    )}
                </>
            ) : (
                <div>
                    <p style={{ fontSize: '13.5px', color: 'var(--text-secondary)', marginBottom: '16px' }}>
                        Paste CSV formatted text below. Format: <code>Recipient Name, Recipient Email, Course Title</code> per line.
                    </p>
                    <div className="form-group">
                        <textarea 
                            className="form-control"
                            style={{ minHeight: '200px' }}
                            placeholder="Sneha Patel, sneha@example.com, AI IN ACTION&#10;Rahul Sharma, rahul@example.com, AI IN ACTION&#10;Ananya Roy, ananya@example.com, AI IN ACTION"
                            value={batchText}
                            onChange={(e) => setBatchText(e.target.value)}
                        />
                    </div>
                    <div style={{ display: 'flex', gap: '10px', marginTop: '12px' }}>
                        <button className="btn-outline" style={{ flex: 1 }} onClick={() => handleProcessBatchImport(false)} disabled={loading}>
                            {loading ? "Processing Batch..." : "Generate & Save Only"}
                        </button>
                        <button className="btn-primary btn-gold" style={{ flex: 1 }} onClick={() => handleProcessBatchImport(true)} disabled={loading}>
                            {loading ? "Processing Batch..." : "Generate & Email All PDFs"}
                        </button>
                    </div>
                </div>
            )}
        </div>
    );
}

// ============================================================================
// TAB 3: Certificate Records & Dispatch Manager
// ============================================================================
function RecordsTab({ certHistory, fetchHistory, smtpConfig, setActiveTab }) {
    const [selectedCertIds, setSelectedCertIds] = useState([]);
    const [filterStatus, setFilterStatus] = useState("ALL");
    const [searchQuery, setSearchQuery] = useState("");
    const [loading, setLoading] = useState(false);

    const [dispatchModal, setDispatchModal] = useState(null);

    const toggleSelectCert = (id) => {
        if (selectedCertIds.includes(id)) {
            setSelectedCertIds(selectedCertIds.filter(item => item !== id));
        } else {
            setSelectedCertIds([...selectedCertIds, id]);
        }
    };

    const toggleSelectAll = () => {
        if (selectedCertIds.length === filteredHistory.length) {
            setSelectedCertIds([]);
        } else {
            setSelectedCertIds(filteredHistory.map(item => item.id));
        }
    };

    const filteredHistory = certHistory.filter(item => {
        const itemStatus = (item.email_status || "NOT_SENT").toUpperCase();
        const matchesStatus = filterStatus === "ALL" || itemStatus === filterStatus.toUpperCase();
        const q = searchQuery.toLowerCase().trim();
        const matchesQuery = !q || 
            item.recipient_name.toLowerCase().includes(q) || 
            item.id.toLowerCase().includes(q) || 
            (item.recipient_email || "").toLowerCase().includes(q);
        return matchesStatus && matchesQuery;
    });

    const handleDeleteRecords = async (certIds) => {
        if (!confirm(`Are you sure you want to delete ${certIds.length} certificate record(s)?`)) return;
        setLoading(true);
        try {
            // =========================================================================
            // API CALL 6: POST /api/certificates/delete
            // Removes selected certificate IDs from the database
            // =========================================================================
            const res = await fetch('/api/certificates/delete', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ cert_ids: certIds })
            });
            const data = await res.json();
            if (data.success) {
                setSelectedCertIds(selectedCertIds.filter(id => !certIds.includes(id)));
                fetchHistory();
            }
        } catch (err) {
            alert("Delete Error: " + err.message);
        } finally {
            setLoading(false);
        }
    };

    const openDispatchModal = (certObjects) => {
        if (!smtpConfig.sender_email || !smtpConfig.password) {
            alert("Please configure your SMTP Sender Email and App Password in SMTP Settings first!");
            setActiveTab("smtp");
            return;
        }
        setDispatchModal({
            certs: certObjects.map(c => ({
                id: c.id,
                name: c.recipient_name,
                email: c.recipient_email || ""
            }))
        });
    };

    const handleConfirmDispatch = async () => {
        if (!dispatchModal || !dispatchModal.certs.length) return;
        
        const emailMap = {};
        for (const c of dispatchModal.certs) {
            if (!c.email.trim()) {
                alert(`Please enter a valid email address for ${c.name} (${c.id})`);
                return;
            }
            emailMap[c.id] = c.email.trim();
        }

        setLoading(true);
        try {
            // =========================================================================
            // API CALL 7: POST /api/certificates/send_email
            // Bulk emails 1-page PDF certificates to selected recipients using SMTP
            // =========================================================================
            const res = await fetch('/api/certificates/send_email', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    cert_ids: dispatchModal.certs.map(c => c.id),
                    email_map: emailMap,
                    smtp_config: smtpConfig
                })
            });
            const data = await res.json();
            const successCount = data.results.filter(r => r.success).length;
            alert(`Email Dispatch Complete: ${successCount} of ${data.results.length} email(s) sent successfully.`);
            setDispatchModal(null);
            fetchHistory();
        } catch (err) {
            alert("Dispatch Error: " + err.message);
        } finally {
            setLoading(false);
        }
    };

    const handleUpdateInlineEmail = async (certId, currentEmail) => {
        const newEmail = prompt("Enter updated recipient email address:", currentEmail || "");
        if (newEmail !== null && newEmail.trim() !== currentEmail) {
            try {
                // =========================================================================
                // API CALL 8: POST /api/certificates/update_email
                // Updates recipient email address for a certificate ID in SQLite DB
                // =========================================================================
                const res = await fetch('/api/certificates/update_email', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ cert_id: certId, email: newEmail.trim() })
                });
                const data = await res.json();
                if (data.success) fetchHistory();
            } catch (err) {
                alert("Failed to update email: " + err.message);
            }
        }
    };

    const downloadSelected = () => {
        const selectedObjects = certHistory.filter(item => selectedCertIds.includes(item.id));
        selectedObjects.forEach(cert => {
            fetch('/api/certificates/generate', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    recipient_name: cert.recipient_name,
                    course_title: cert.course_title,
                    issue_date: cert.issue_date,
                    template_id: cert.template_id
                })
            })
            .then(res => res.json())
            .then(data => {
                const blob = new Blob([data.svg_content], { type: 'image/svg+xml' });
                const url = URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.href = url;
                a.download = `Certificate_${data.recipient_name.replace(/ /g, '_')}_${data.id}.svg`;
                a.click();
            });
        });
    };

    return (
        <div className="white-panel">
            <div className="panel-title">
                <span>Certificate Records & Email Dispatch</span>
                <span className="badge">{filteredHistory.length} Record(s)</span>
            </div>

            <div className="filter-bar">
                <div className="filter-pills">
                    <button 
                        className={`filter-pill ${filterStatus === 'ALL' ? 'active' : ''}`}
                        onClick={() => setFilterStatus('ALL')}
                    >
                        All Records
                    </button>
                    <button 
                        className={`filter-pill ${filterStatus === 'NOT_SENT' ? 'active' : ''}`}
                        onClick={() => setFilterStatus('NOT_SENT')}
                    >
                        Pending (Not Sent)
                    </button>
                    <button 
                        className={`filter-pill ${filterStatus === 'SENT' ? 'active' : ''}`}
                        onClick={() => setFilterStatus('SENT')}
                    >
                        Sent Successfully
                    </button>
                    <button 
                        className={`filter-pill ${filterStatus === 'FAILED' ? 'active' : ''}`}
                        onClick={() => setFilterStatus('FAILED')}
                    >
                        Failed
                    </button>
                </div>

                <div style={{ width: '280px' }}>
                    <input 
                        type="text" 
                        className="form-control"
                        placeholder="Search Name, ID, or Email..."
                        value={searchQuery}
                        onChange={(e) => setSearchQuery(e.target.value)}
                    />
                </div>
            </div>

            {selectedCertIds.length > 0 && (
                <div style={{
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'space-between',
                    background: 'var(--gold-light)',
                    border: '1px solid var(--gold-border)',
                    padding: '12px 18px',
                    borderRadius: '8px',
                    marginBottom: '16px'
                }}>
                    <span style={{ fontSize: '13.5px', fontWeight: '600', color: 'var(--gold-color)' }}>
                        {selectedCertIds.length} item(s) selected
                    </span>

                    <div style={{ display: 'flex', gap: '8px' }}>
                        <button 
                            className="btn-icon btn-success" 
                            onClick={() => openDispatchModal(certHistory.filter(c => selectedCertIds.includes(c.id)))}
                        >
                            Email Selected PDF ({selectedCertIds.length})
                        </button>

                        <button className="btn-icon" onClick={downloadSelected}>
                            Download Selected ({selectedCertIds.length})
                        </button>

                        <button 
                            className="btn-icon btn-danger" 
                            onClick={() => handleDeleteRecords(selectedCertIds)}
                        >
                            Delete Selected ({selectedCertIds.length})
                        </button>
                    </div>
                </div>
            )}

            <div style={{ overflowX: 'auto', border: '1px solid var(--border-color)', borderRadius: '8px' }}>
                <table className="custom-table">
                    <thead>
                        <tr>
                            <th style={{ width: '36px' }}>
                                <input 
                                    type="checkbox" 
                                    checked={selectedCertIds.length === filteredHistory.length && filteredHistory.length > 0}
                                    onChange={toggleSelectAll}
                                />
                            </th>
                            <th>Cert ID</th>
                            <th>Recipient Name</th>
                            <th>Target Email Address</th>
                            <th>Issued Date</th>
                            <th>Status</th>
                            <th style={{ textAlign: 'right' }}>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {filteredHistory.map((item) => (
                            <tr key={item.id} style={{ background: selectedCertIds.includes(item.id) ? '#fefce8' : 'transparent' }}>
                                <td>
                                    <input 
                                        type="checkbox" 
                                        checked={selectedCertIds.includes(item.id)}
                                        onChange={() => toggleSelectCert(item.id)}
                                    />
                                </td>
                                <td><span className="badge">{item.id}</span></td>
                                <td style={{ fontWeight: '600' }}>{item.recipient_name}</td>
                                <td>
                                    <span style={{ marginRight: '8px' }}>{item.recipient_email || <em style={{ color: '#94a3b8' }}>No email set</em>}</span>
                                    <button 
                                        className="btn-icon" 
                                        style={{ padding: '2px 6px', fontSize: '10px' }}
                                        onClick={() => handleUpdateInlineEmail(item.id, item.recipient_email)}
                                        title="Edit Email Address"
                                    >
                                        Edit
                                    </button>
                                </td>
                                <td>{item.issue_date}</td>
                                <td>
                                    <span className={
                                        `badge ${item.email_status === 'SENT' ? 'badge-success' : (item.email_status === 'FAILED' ? 'badge-failed' : '')}`
                                    }>
                                        {item.email_status || 'NOT_SENT'}
                                    </span>
                                </td>
                                <td style={{ textAlign: 'right' }}>
                                    <div style={{ display: 'inline-flex', gap: '6px', flexWrap: 'nowrap' }}>
                                        <a 
                                            href={`/download/${item.id}.pdf`}
                                            download={`Certificate_${(item.recipient_name || '').replace(/[^a-zA-Z0-9]/g, '_')}_${item.id}.pdf`}
                                            className="btn-icon btn-primary"
                                            style={{ textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: '4px' }}
                                            title="Download 1-Page PDF Certificate"
                                        >
                                            📥 PDF
                                        </a>

                                        <a 
                                            href={`/download/${item.id}.svg`}
                                            download={`Certificate_${(item.recipient_name || '').replace(/[^a-zA-Z0-9]/g, '_')}_${item.id}.svg`}
                                            className="btn-icon"
                                            style={{ textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: '4px' }}
                                            title="Download SVG Vector Certificate"
                                        >
                                            📄 SVG
                                        </a>

                                        <button 
                                            className="btn-icon btn-success"
                                            onClick={() => openDispatchModal([item])}
                                            title="Send 1-Page PDF Email"
                                        >
                                            Send Email
                                        </button>

                                        <button 
                                            className="btn-icon btn-danger"
                                            onClick={() => handleDeleteRecords([item.id])}
                                            title="Delete Certificate Record"
                                        >
                                            Delete
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        ))}
                        {filteredHistory.length === 0 && (
                            <tr>
                                <td colSpan="7" style={{ textAlign: 'center', padding: '36px', color: 'var(--text-muted)' }}>
                                    No certificate records found matching filter.
                                </td>
                            </tr>
                        )}
                    </tbody>
                </table>
            </div>

            {dispatchModal && (
                <div className="modal-overlay">
                    <div className="modal-card">
                        <h3 style={{ fontSize: '17px', fontWeight: '700', marginBottom: '8px', color: 'var(--text-primary)' }}>
                            Confirm Targeted Email Dispatch
                        </h3>
                        <p style={{ fontSize: '13px', color: 'var(--text-secondary)', marginBottom: '20px' }}>
                            Verify the target recipient email addresses before dispatching single-page PDF certificates:
                        </p>

                        <div style={{ maxHeight: '240px', overflowY: 'auto', border: '1px solid var(--border-color)', borderRadius: '8px', padding: '12px', marginBottom: '20px' }}>
                            {dispatchModal.certs.map((c, idx) => (
                                <div key={c.id} style={{ display: 'flex', gap: '12px', alignItems: 'center', marginBottom: idx === dispatchModal.certs.length-1 ? 0 : '12px' }}>
                                    <div style={{ width: '140px', fontSize: '13px', fontWeight: '600', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
                                        {c.name}
                                    </div>
                                    <input 
                                        type="email" 
                                        className="form-control"
                                        style={{ padding: '6px 10px', fontSize: '13px' }}
                                        placeholder="Target Email Address..."
                                        value={c.email}
                                        onChange={(e) => {
                                            const updated = [...dispatchModal.certs];
                                            updated[idx].email = e.target.value;
                                            setDispatchModal({ certs: updated });
                                        }}
                                    />
                                </div>
                            ))}
                        </div>

                        <div style={{ display: 'flex', gap: '12px', justifyContent: 'flex-end' }}>
                            <button className="btn-outline" style={{ width: 'auto' }} onClick={() => setDispatchModal(null)}>
                                Cancel
                            </button>
                            <button className="btn-primary btn-gold" style={{ width: 'auto' }} onClick={handleConfirmDispatch} disabled={loading}>
                                {loading ? "Dispatching..." : `Send ${dispatchModal.certs.length} PDF Email(s)`}
                            </button>
                        </div>
                    </div>
                </div>
            )}
        </div>
    );
}

// ============================================================================
// TAB 4: Dedicated SMTP Settings
// ============================================================================
function SmtpTab({ smtpProfiles, setSmtpProfiles, activeProfileId, setActiveProfileId, setActiveTab }) {
    const [formProfile, setFormProfile] = useState({
        id: "",
        label: "",
        sender_email: "",
        password: "",
        smtp_server: "smtp.gmail.com",
        port: "587"
    });
    const [isEditing, setIsEditing] = useState(false);

    const handleSaveProfile = (e) => {
        e.preventDefault();
        if (!formProfile.sender_email || !formProfile.password) {
            alert("Please enter Sender Email Address and App Password!");
            return;
        }

        let updated = [];
        if (isEditing && formProfile.id) {
            updated = smtpProfiles.map(p => p.id === formProfile.id ? formProfile : p);
        } else {
            const newId = "smtp_" + Date.now();
            const newProfile = { 
                ...formProfile, 
                id: newId, 
                label: formProfile.label || formProfile.sender_email.split('@')[0] || "SMTP Account" 
            };
            updated = [...smtpProfiles, newProfile];
            setActiveProfileId(newId);
        }

        setSmtpProfiles(updated);
        resetForm();
        alert("SMTP Account saved & persisted in localStorage!");
    };

    const handleDeleteProfile = (id) => {
        if (smtpProfiles.length <= 1) {
            alert("You must keep at least 1 SMTP account profile.");
            return;
        }
        if (!confirm("Are you sure you want to delete this SMTP account profile?")) return;
        const updated = smtpProfiles.filter(p => p.id !== id);
        setSmtpProfiles(updated);
        if (activeProfileId === id) {
            setActiveProfileId(updated[0]?.id || "");
        }
    };

    const handleEditProfile = (profile) => {
        setFormProfile(profile);
        setIsEditing(true);
    };

    const resetForm = () => {
        setFormProfile({
            id: "",
            label: "",
            sender_email: "",
            password: "",
            smtp_server: "smtp.gmail.com",
            port: "587"
        });
        setIsEditing(false);
    };

    return (
        <div className="module-layout" style={{ gridTemplateColumns: '1fr 380px' }}>
            <div className="white-panel">
                <div className="panel-title">
                    <span>{isEditing ? "Edit SMTP Account" : "Add New SMTP Account"}</span>
                    {isEditing && (
                        <button className="btn-outline" style={{ padding: '4px 10px', fontSize: '11px' }} onClick={resetForm}>
                            Cancel Edit
                        </button>
                    )}
                </div>

                <form onSubmit={handleSaveProfile}>
                    <div className="form-group">
                        <label>Account Label / Name</label>
                        <input 
                            type="text" 
                            className="form-control"
                            placeholder="e.g. Official Gmail, Support Account"
                            value={formProfile.label}
                            onChange={(e) => setFormProfile({...formProfile, label: e.target.value})}
                        />
                    </div>

                    <div className="form-group">
                        <label>Sender Email Address</label>
                        <input 
                            type="email" 
                            className="form-control"
                            placeholder="yourname@gmail.com"
                            value={formProfile.sender_email}
                            onChange={(e) => setFormProfile({...formProfile, sender_email: e.target.value})}
                            required
                        />
                    </div>

                    <div className="form-group">
                        <label>Google App Password (16 Characters)</label>
                        <input 
                            type="password" 
                            className="form-control"
                            placeholder="xxxx xxxx xxxx xxxx"
                            value={formProfile.password}
                            onChange={(e) => setFormProfile({...formProfile, password: e.target.value})}
                            required
                        />
                        <p style={{ fontSize: '12px', color: 'var(--text-muted)', marginTop: '4px' }}>
                            Generated from Google Account &gt; Security &gt; 2-Step Verification &gt; App passwords.
                        </p>
                    </div>

                    <div style={{ display: 'grid', gridTemplateColumns: '1fr 120px', gap: '16px' }}>
                        <div className="form-group">
                            <label>SMTP Host</label>
                            <input 
                                type="text" 
                                className="form-control"
                                value={formProfile.smtp_server}
                                onChange={(e) => setFormProfile({...formProfile, smtp_server: e.target.value})}
                            />
                        </div>
                        <div className="form-group">
                            <label>Port</label>
                            <input 
                                type="text" 
                                className="form-control"
                                value={formProfile.port}
                                onChange={(e) => setFormProfile({...formProfile, port: e.target.value})}
                            />
                        </div>
                    </div>

                    <button type="submit" className="btn-primary btn-gold" style={{ marginTop: '12px' }}>
                        {isEditing ? "Update SMTP Account" : "Save New SMTP Account"}
                    </button>
                </form>
            </div>

            <div className="white-panel">
                <h3 className="panel-title">Saved SMTP Accounts ({smtpProfiles.length})</h3>
                <p style={{ fontSize: '12.5px', color: 'var(--text-secondary)', marginBottom: '16px' }}>
                    Saved credentials remain stored in your browser even after refreshing.
                </p>

                <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
                    {smtpProfiles.map((p) => {
                        const isActive = p.id === activeProfileId;
                        return (
                            <div 
                                key={p.id}
                                style={{
                                    border: isActive ? '2px solid var(--gold-color)' : '1px solid var(--border-color)',
                                    background: isActive ? 'var(--gold-light)' : '#ffffff',
                                    borderRadius: '10px',
                                    padding: '14px'
                                }}
                            >
                                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '6px' }}>
                                    <strong style={{ fontSize: '14px', color: 'var(--text-primary)' }}>{p.label || "SMTP Account"}</strong>
                                    {isActive ? (
                                        <span className="badge badge-success">ACTIVE</span>
                                    ) : (
                                        <button className="btn-icon" style={{ fontSize: '11px', padding: '2px 8px' }} onClick={() => setActiveProfileId(p.id)}>
                                            Set Active
                                        </button>
                                    )}
                                </div>

                                <div style={{ fontSize: '12.5px', color: 'var(--text-secondary)', wordBreak: 'break-all', marginBottom: '8px' }}>
                                    {p.sender_email || <em style={{ color: '#94a3b8' }}>No email set</em>}
                                </div>

                                <div style={{ display: 'flex', gap: '6px', justifyContent: 'flex-end' }}>
                                    <button className="btn-icon" style={{ fontSize: '11px' }} onClick={() => handleEditProfile(p)}>
                                        Edit
                                    </button>
                                    <button className="btn-icon btn-danger" style={{ fontSize: '11px' }} onClick={() => handleDeleteProfile(p.id)}>
                                        Delete
                                    </button>
                                </div>
                            </div>
                        );
                    })}
                </div>
            </div>
        </div>
    );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);