import React, { useState, useRef } from 'react';
import { X, CheckCircle, AlertCircle, Loader, FileSpreadsheet, ChevronDown, ChevronRight, ShieldAlert, AlertTriangle, Info, Wrench } from 'lucide-react';
import { useAuth } from '../../contexts/AuthContext';

const API_BASE = process.env.REACT_APP_API_BASE || 'http://localhost:3001/api';

/* ── Drift Findings Group sub-component ─────────────────────────── */
const SEVERITY_CONFIG = {
    breaking:    { label: 'Breaking',    color: '#EF4444', Icon: ShieldAlert },
    silent_miss: { label: 'Silent-miss', color: '#F59E0B', Icon: AlertTriangle },
    cosmetic:    { label: 'Cosmetic',    color: '#94A3B8', Icon: Info },
};

function DriftFindingsGroup({ severity, findings }) {
    const [expanded, setExpanded] = useState(false);
    const { label, color, Icon } = SEVERITY_CONFIG[severity];
    const COLLAPSE_THRESHOLD = 5;
    const needsCollapse = findings.length > COLLAPSE_THRESHOLD;
    const visibleFindings = needsCollapse && !expanded
        ? findings.slice(0, COLLAPSE_THRESHOLD)
        : findings;
    const hiddenCount = findings.length - COLLAPSE_THRESHOLD;

    return (
        <div style={{ marginBottom: '1rem' }}>
            {/* Group header */}
            <div style={{
                display: 'flex', alignItems: 'center', gap: '0.5rem',
                marginBottom: '0.5rem',
            }}>
                <Icon style={{ width: '14px', height: '14px', color, flexShrink: 0 }} />
                <span style={{
                    fontFamily: "'JetBrains Mono', 'Fira Code', monospace",
                    fontSize: '0.75rem', fontWeight: '600', color,
                    textTransform: 'uppercase', letterSpacing: '0.05em',
                }}>
                    {label}
                </span>
                <span style={{
                    fontFamily: "'JetBrains Mono', 'Fira Code', monospace",
                    fontSize: '0.65rem', fontWeight: '700', color,
                    background: `${color}18`, border: `1px solid ${color}40`,
                    borderRadius: '0.25rem', padding: '0.1rem 0.4rem',
                    minWidth: '1.25rem', textAlign: 'center',
                }}>
                    {findings.length}
                </span>
            </div>

            {/* Findings list */}
            {visibleFindings.map((f, i) => (
                <div key={i} style={{
                    borderLeft: `4px solid ${color}`,
                    background: 'rgba(15,23,42,0.6)',
                    borderRadius: '0 0.375rem 0.375rem 0',
                    padding: '0.5rem 0.75rem',
                    marginBottom: '0.375rem',
                }}>
                    <div style={{
                        fontFamily: "'JetBrains Mono', 'Fira Code', monospace",
                        fontSize: '0.8rem', color: '#E2E8F0', lineHeight: '1.4',
                    }}>
                        {f.message}
                    </div>
                    <div style={{
                        fontFamily: "'JetBrains Mono', 'Fira Code', monospace",
                        fontSize: '0.7rem', color: `${color}CC`, marginTop: '0.2rem',
                    }}>
                        {f.value}
                    </div>
                </div>
            ))}

            {/* Show more / less toggle */}
            {needsCollapse && (
                <button
                    onClick={() => setExpanded(!expanded)}
                    style={{
                        background: 'none', border: 'none', cursor: 'pointer',
                        display: 'flex', alignItems: 'center', gap: '0.25rem',
                        fontFamily: "'JetBrains Mono', 'Fira Code', monospace",
                        fontSize: '0.7rem', color: '#64748B', padding: '0.25rem 0',
                    }}
                    onMouseEnter={e => e.currentTarget.style.color = '#94A3B8'}
                    onMouseLeave={e => e.currentTarget.style.color = '#64748B'}
                >
                    {expanded
                        ? <><ChevronDown style={{ width: '12px', height: '12px' }} /> Show less</>
                        : <><ChevronRight style={{ width: '12px', height: '12px' }} /> Show {hiddenCount} more</>
                    }
                </button>
            )}
        </div>
    );
}

// phase: idle → uploading → drift-review (if findings) → preview → committing → done | error
export default function ComplianceUploadModal({ onClose, onUploadComplete }) {
    const { isAdmin }                     = useAuth();
    const [phase, setPhase]               = useState('idle');
    const [previewData, setPreviewData]   = useState(null);
    const [driftReport, setDriftReport]   = useState(null);
    const [reconcileChanges, setReconcileChanges] = useState(null);
    const [reconciling, setReconciling]   = useState(false);
    const [error, setError]               = useState(null);
    const [dragOver, setDragOver]         = useState(false);
    const [lastFile, setLastFile]         = useState(null);
    const [lastSchema, setLastSchema]     = useState(null);
    const fileInputRef                    = useRef(null);

    /** Check whether a drift report has any findings */
    const hasDriftFindings = (drift) => {
        if (!drift) return false;
        return (
            (drift.breaking && drift.breaking.length > 0) ||
            (drift.silent_miss && drift.silent_miss.length > 0) ||
            (drift.cosmetic && drift.cosmetic.length > 0)
        );
    };

    const handleFile = async (file) => {
        if (!file) return;
        if (!file.name.toLowerCase().endsWith('.xlsx')) {
            setError('File must be an .xlsx spreadsheet');
            return;
        }

        setPhase('uploading');
        setError(null);
        setDriftReport(null);
        setReconcileChanges(null);
        setLastFile(file);

        try {
            const formData = new FormData();
            formData.append('file', file);

            const res  = await fetch(`${API_BASE}/compliance/preview`, {
                method: 'POST',
                credentials: 'include',
                body: formData,
            });
            const data = await res.json();

            if (!res.ok) {
                throw new Error(data.error || 'Upload failed');
            }

            setPreviewData(data);

            // Store schema for reconcile requests
            if (data.schema) {
                setLastSchema(data.schema);
            }

            // Drift routing: if drift is non-null and has findings, enter drift-review
            // If drift is null (failed) or has no findings, skip to preview
            if (data.drift && hasDriftFindings(data.drift)) {
                setDriftReport(data.drift);
                setPhase('drift-review');
            } else {
                setPhase('preview');
            }
        } catch (err) {
            setError(err.message);
            setPhase('error');
        }
    };

    const handleCommit = async () => {
        if (!previewData) return;
        setPhase('committing');
        setError(null);

        try {
            const res  = await fetch(`${API_BASE}/compliance/commit`, {
                method: 'POST',
                credentials: 'include',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    tempFile:    previewData.tempFile,
                    filename:    previewData.filename,
                    report_date: previewData.report_date,
                }),
            });
            const data = await res.json();

            if (!res.ok) throw new Error(data.error || 'Commit failed');

            setPhase('done');
            setTimeout(onUploadComplete, 1200);
        } catch (err) {
            setError(err.message);
            setPhase('error');
        }
    };

    /** Admin-only: reconcile config to fix breaking/silent-miss drift, then re-upload */
    const handleReconcile = async () => {
        if (!driftReport || reconciling) return;
        setReconciling(true);
        setError(null);

        try {
            // Step 1: Call reconcile endpoint
            const reconcileRes = await fetch(`${API_BASE}/compliance/reconcile-config`, {
                method: 'POST',
                credentials: 'include',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ drift: driftReport, schema: lastSchema }),
            });
            const reconcileData = await reconcileRes.json();

            if (!reconcileRes.ok) throw new Error(reconcileData.error || 'Reconcile failed');

            setReconcileChanges(reconcileData.changes);

            // Step 2: Re-upload the same file to get a fresh drift check
            if (!lastFile) {
                setReconciling(false);
                return;
            }

            setPhase('uploading');

            const formData = new FormData();
            formData.append('file', lastFile);

            const previewRes = await fetch(`${API_BASE}/compliance/preview`, {
                method: 'POST',
                credentials: 'include',
                body: formData,
            });
            const previewData = await previewRes.json();

            if (!previewRes.ok) {
                throw new Error(previewData.error || 'Re-upload failed after reconcile');
            }

            setPreviewData(previewData);
            setReconciling(false);

            // Update schema for any subsequent reconcile
            if (previewData.schema) {
                setLastSchema(previewData.schema);
            }

            if (previewData.drift && hasDriftFindings(previewData.drift)) {
                setDriftReport(previewData.drift);
                setPhase('drift-review');
            } else {
                setDriftReport(null);
                setPhase('preview');
            }
        } catch (err) {
            setError(err.message);
            setReconciling(false);
            setPhase('error');
        }
    };

    const TEAL = '#14B8A6';

    return (
        <div style={{
            position: 'fixed', inset: 0, zIndex: 60,
            background: 'rgba(10, 14, 39, 0.97)',
            backdropFilter: 'blur(12px)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            padding: '1rem',
        }}>
            <div style={{
                background: 'linear-gradient(135deg, rgba(30,41,59,0.98) 0%, rgba(15,23,42,0.99) 100%)',
                border: `1px solid ${TEAL}40`,
                borderRadius: '0.75rem',
                boxShadow: `0 20px 60px rgba(0,0,0,0.7), 0 0 40px ${TEAL}15`,
                width: '100%', maxWidth: phase === 'drift-review' ? '560px' : '480px',
                maxHeight: 'calc(100vh - 2rem)',
                overflowY: 'auto',
                transition: 'max-width 0.3s ease',
                padding: '2rem',
            }}>
                {/* Header */}
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1.75rem' }}>
                    <div>
                        <div style={{ fontFamily: 'monospace', fontSize: '1rem', fontWeight: '700', color: TEAL, textTransform: 'uppercase', letterSpacing: '0.1em' }}>
                            Upload Report
                        </div>
                        <div style={{ fontSize: '0.75rem', color: '#475569', marginTop: '2px' }}>NTS_AEO xlsx compliance report</div>
                    </div>
                    <button onClick={onClose} style={{ background: 'none', border: 'none', cursor: 'pointer', color: '#475569', padding: '0.25rem' }}
                        onMouseEnter={e => e.currentTarget.style.color = '#E2E8F0'}
                        onMouseLeave={e => e.currentTarget.style.color = '#475569'}>
                        <X style={{ width: '20px', height: '20px' }} />
                    </button>
                </div>

                {/* IDLE — drop zone */}
                {phase === 'idle' && (
                    <>
                        <div
                            onClick={() => fileInputRef.current?.click()}
                            onDragOver={e => { e.preventDefault(); setDragOver(true); }}
                            onDragLeave={() => setDragOver(false)}
                            onDrop={e => { e.preventDefault(); setDragOver(false); handleFile(e.dataTransfer.files[0]); }}
                            style={{
                                border: `2px dashed ${dragOver ? TEAL : 'rgba(20,184,166,0.3)'}`,
                                borderRadius: '0.5rem',
                                padding: '2.5rem',
                                textAlign: 'center',
                                cursor: 'pointer',
                                background: dragOver ? `${TEAL}08` : 'transparent',
                                transition: 'all 0.2s',
                            }}>
                            <FileSpreadsheet style={{ width: '40px', height: '40px', color: TEAL, margin: '0 auto 1rem', opacity: 0.8 }} />
                            <div style={{ color: '#CBD5E1', fontSize: '0.875rem', marginBottom: '0.5rem' }}>
                                Drop your xlsx file here or <span style={{ color: TEAL }}>browse</span>
                            </div>
                            <div style={{ color: '#475569', fontSize: '0.75rem' }}>NTS_AEO_YYYY_MM_DD.xlsx</div>
                        </div>
                        <input ref={fileInputRef} type="file" accept=".xlsx" style={{ display: 'none' }}
                            onChange={e => handleFile(e.target.files[0])} />
                        {error && (
                            <div style={{ marginTop: '1rem', display: 'flex', alignItems: 'center', gap: '0.5rem', color: '#F87171', fontSize: '0.8rem' }}>
                                <AlertCircle style={{ width: '16px', height: '16px', flexShrink: 0 }} />{error}
                            </div>
                        )}
                    </>
                )}

                {/* UPLOADING / COMMITTING — spinner */}
                {(phase === 'uploading' || phase === 'committing') && (
                    <div style={{ textAlign: 'center', padding: '2rem 0' }}>
                        <Loader style={{ width: '40px', height: '40px', color: TEAL, margin: '0 auto 1rem', animation: 'spin 1s linear infinite' }} />
                        <div style={{ color: '#CBD5E1', fontFamily: 'monospace', fontSize: '0.875rem' }}>
                            {phase === 'uploading' ? 'Parsing report…' : 'Committing upload…'}
                        </div>
                    </div>
                )}

                {/* DRIFT-REVIEW — schema drift findings */}
                {phase === 'drift-review' && driftReport && (
                    <>
                        <div style={{
                            fontFamily: "'JetBrains Mono', 'Fira Code', monospace",
                            fontSize: '0.8rem', color: '#64748B',
                            textTransform: 'uppercase', letterSpacing: '0.05em',
                            marginBottom: '1rem',
                        }}>
                            Schema Drift Review
                        </div>

                        <div style={{
                            maxHeight: '320px', overflowY: 'auto',
                            marginBottom: '1rem',
                            paddingRight: '0.25rem',
                        }}>
                            {driftReport.breaking && driftReport.breaking.length > 0 && (
                                <DriftFindingsGroup severity="breaking" findings={driftReport.breaking} />
                            )}
                            {driftReport.silent_miss && driftReport.silent_miss.length > 0 && (
                                <DriftFindingsGroup severity="silent_miss" findings={driftReport.silent_miss} />
                            )}
                            {driftReport.cosmetic && driftReport.cosmetic.length > 0 && (
                                <DriftFindingsGroup severity="cosmetic" findings={driftReport.cosmetic} />
                            )}
                        </div>

                        {/* Status message */}
                        {driftReport.breaking && driftReport.breaking.length > 0 && (
                            <div style={{
                                fontFamily: "'JetBrains Mono', 'Fira Code', monospace",
                                fontSize: '0.7rem', color: '#EF4444',
                                background: 'rgba(239,68,68,0.08)',
                                border: '1px solid rgba(239,68,68,0.25)',
                                borderRadius: '0.375rem',
                                padding: '0.5rem 0.75rem',
                                marginBottom: '1rem',
                                lineHeight: '1.4',
                            }}>
                                {isAdmin()
                                    ? 'Upload blocked — use "Reconcile Config" to auto-fix the parser configuration, or update it manually.'
                                    : 'Upload blocked — an admin must reconcile the parser configuration before this report can be uploaded.'}
                            </div>
                        )}
                        {(!driftReport.breaking || driftReport.breaking.length === 0) &&
                         driftReport.silent_miss && driftReport.silent_miss.length > 0 && (
                            <div style={{
                                fontFamily: "'JetBrains Mono', 'Fira Code', monospace",
                                fontSize: '0.7rem', color: '#F59E0B',
                                background: 'rgba(245,158,11,0.08)',
                                border: '1px solid rgba(245,158,11,0.25)',
                                borderRadius: '0.375rem',
                                padding: '0.5rem 0.75rem',
                                marginBottom: '1rem',
                                lineHeight: '1.4',
                            }}>
                                Review warnings before proceeding. Data may be miscategorised or dropped.
                                {isAdmin() && ' Use "Reconcile Config" to auto-add unknown metrics and sheets.'}
                            </div>
                        )}

                        {/* Reconcile changes summary (shown after a successful reconcile) */}
                        {reconcileChanges && reconcileChanges.length > 0 && (
                            <div style={{
                                fontFamily: "'JetBrains Mono', 'Fira Code', monospace",
                                fontSize: '0.7rem', color: '#10B981',
                                background: 'rgba(16,185,129,0.08)',
                                border: '1px solid rgba(16,185,129,0.25)',
                                borderRadius: '0.375rem',
                                padding: '0.5rem 0.75rem',
                                marginBottom: '1rem',
                                lineHeight: '1.6',
                            }}>
                                <div style={{ fontWeight: '600', marginBottom: '0.25rem' }}>
                                    Config reconciled — {reconcileChanges.length} change(s) applied:
                                </div>
                                {reconcileChanges.map((c, i) => (
                                    <div key={i} style={{ color: '#94A3B8' }}>
                                        {c.action === 'added' ? '+' : '−'} {c.detail}
                                    </div>
                                ))}
                                <div style={{ color: '#10B981', marginTop: '0.25rem' }}>Re-uploading file…</div>
                            </div>
                        )}

                        {/* Action buttons */}
                        <div style={{ display: 'flex', gap: '0.75rem', flexWrap: 'wrap' }}>
                            <button onClick={() => { setPhase('idle'); setPreviewData(null); setDriftReport(null); setReconcileChanges(null); setLastFile(null); setLastSchema(null); }}
                                style={{
                                    flex: 1, minWidth: '80px', padding: '0.625rem', background: 'transparent',
                                    border: '1px solid rgba(100,116,139,0.4)', borderRadius: '0.375rem',
                                    color: '#64748B', cursor: 'pointer',
                                    fontFamily: "'JetBrains Mono', 'Fira Code', monospace", fontSize: '0.8rem',
                                }}
                                onMouseEnter={e => e.currentTarget.style.borderColor = 'rgba(100,116,139,0.8)'}
                                onMouseLeave={e => e.currentTarget.style.borderColor = 'rgba(100,116,139,0.4)'}>
                                Cancel
                            </button>
                            {/* Admin reconcile button — shown when there are breaking or silent-miss findings */}
                            {isAdmin() && ((driftReport.breaking && driftReport.breaking.length > 0) ||
                                           (driftReport.silent_miss && driftReport.silent_miss.length > 0)) && (
                                <button
                                    onClick={handleReconcile}
                                    disabled={reconciling}
                                    style={{
                                        flex: 2, minWidth: '140px', padding: '0.625rem',
                                        background: reconciling ? 'rgba(245,158,11,0.05)' : 'rgba(245,158,11,0.1)',
                                        border: '1px solid rgba(245,158,11,0.5)',
                                        borderRadius: '0.375rem',
                                        color: '#F59E0B',
                                        cursor: reconciling ? 'wait' : 'pointer',
                                        fontFamily: "'JetBrains Mono', 'Fira Code', monospace", fontSize: '0.8rem',
                                        fontWeight: '600', textTransform: 'uppercase', letterSpacing: '0.05em',
                                        display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '0.4rem',
                                        opacity: reconciling ? 0.6 : 1,
                                    }}
                                    onMouseEnter={e => { if (!reconciling) e.currentTarget.style.background = 'rgba(245,158,11,0.18)'; }}
                                    onMouseLeave={e => { if (!reconciling) e.currentTarget.style.background = 'rgba(245,158,11,0.1)'; }}>
                                    {reconciling
                                        ? <><Loader style={{ width: '14px', height: '14px', animation: 'spin 1s linear infinite' }} /> Reconciling…</>
                                        : <><Wrench style={{ width: '14px', height: '14px' }} /> Reconcile Config</>
                                    }
                                </button>
                            )}
                            <button
                                onClick={() => { setPhase('preview'); }}
                                disabled={driftReport.breaking && driftReport.breaking.length > 0}
                                style={{
                                    flex: 2, padding: '0.625rem',
                                    background: (driftReport.breaking && driftReport.breaking.length > 0)
                                        ? 'rgba(100,116,139,0.08)'
                                        : `${TEAL}18`,
                                    border: `1px solid ${(driftReport.breaking && driftReport.breaking.length > 0) ? 'rgba(100,116,139,0.3)' : TEAL}`,
                                    borderRadius: '0.375rem',
                                    color: (driftReport.breaking && driftReport.breaking.length > 0) ? '#475569' : TEAL,
                                    cursor: (driftReport.breaking && driftReport.breaking.length > 0) ? 'not-allowed' : 'pointer',
                                    fontFamily: "'JetBrains Mono', 'Fira Code', monospace", fontSize: '0.8rem',
                                    fontWeight: '600', textTransform: 'uppercase', letterSpacing: '0.05em',
                                    opacity: (driftReport.breaking && driftReport.breaking.length > 0) ? 0.5 : 1,
                                }}
                                onMouseEnter={e => {
                                    if (!(driftReport.breaking && driftReport.breaking.length > 0)) {
                                        e.currentTarget.style.background = `${TEAL}28`;
                                    }
                                }}
                                onMouseLeave={e => {
                                    if (!(driftReport.breaking && driftReport.breaking.length > 0)) {
                                        e.currentTarget.style.background = `${TEAL}18`;
                                    }
                                }}>
                                Continue to Preview
                            </button>
                        </div>
                    </>
                )}

                {/* PREVIEW — diff summary + confirm */}
                {phase === 'preview' && previewData && (
                    <>
                        <div style={{ marginBottom: '1.5rem' }}>
                            <div style={{ fontSize: '0.8rem', color: '#64748B', fontFamily: 'monospace', marginBottom: '0.75rem', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
                                {previewData.filename}
                                {previewData.report_date && <span style={{ color: TEAL, marginLeft: '0.75rem' }}>{previewData.report_date}</span>}
                            </div>

                            {[
                                { label: 'Recurring items',  count: previewData.diff.recurring_count, color: '#94A3B8', icon: '↺' },
                                { label: 'New items',        count: previewData.diff.new_count,       color: '#EF4444', icon: '+' },
                                { label: 'Resolved',         count: previewData.diff.resolved_count,  color: '#10B981', icon: '✓' },
                            ].map(({ label, count, color, icon }) => (
                                <div key={label} style={{
                                    display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                                    padding: '0.75rem 1rem', marginBottom: '0.5rem',
                                    background: 'rgba(15,23,42,0.6)', borderRadius: '0.375rem',
                                    border: `1px solid ${color}25`,
                                }}>
                                    <span style={{ color: '#CBD5E1', fontSize: '0.875rem' }}>
                                        <span style={{ color, marginRight: '0.5rem', fontWeight: '700' }}>{icon}</span>
                                        {label}
                                    </span>
                                    <span style={{ color, fontFamily: 'monospace', fontWeight: '700', fontSize: '1.1rem' }}>{count}</span>
                                </div>
                            ))}
                        </div>

                        <div style={{ display: 'flex', gap: '0.75rem' }}>
                            <button onClick={() => { setPhase('idle'); setPreviewData(null); }}
                                style={{ flex: 1, padding: '0.625rem', background: 'transparent', border: '1px solid rgba(100,116,139,0.4)', borderRadius: '0.375rem', color: '#64748B', cursor: 'pointer', fontFamily: 'monospace', fontSize: '0.8rem' }}
                                onMouseEnter={e => e.currentTarget.style.borderColor = 'rgba(100,116,139,0.8)'}
                                onMouseLeave={e => e.currentTarget.style.borderColor = 'rgba(100,116,139,0.4)'}>
                                Cancel
                            </button>
                            <button onClick={handleCommit}
                                style={{ flex: 2, padding: '0.625rem', background: `${TEAL}18`, border: `1px solid ${TEAL}`, borderRadius: '0.375rem', color: TEAL, cursor: 'pointer', fontFamily: 'monospace', fontSize: '0.8rem', fontWeight: '600', textTransform: 'uppercase', letterSpacing: '0.05em' }}
                                onMouseEnter={e => e.currentTarget.style.background = `${TEAL}28`}
                                onMouseLeave={e => e.currentTarget.style.background = `${TEAL}18`}>
                                Confirm Upload
                            </button>
                        </div>
                    </>
                )}

                {/* DONE */}
                {phase === 'done' && (
                    <div style={{ textAlign: 'center', padding: '1.5rem 0' }}>
                        <CheckCircle style={{ width: '44px', height: '44px', color: '#10B981', margin: '0 auto 1rem' }} />
                        <div style={{ color: '#10B981', fontFamily: 'monospace', fontSize: '0.875rem', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
                            Upload committed
                        </div>
                    </div>
                )}

                {/* ERROR */}
                {phase === 'error' && (
                    <div style={{ textAlign: 'center', padding: '1rem 0' }}>
                        <AlertCircle style={{ width: '36px', height: '36px', color: '#EF4444', margin: '0 auto 0.75rem' }} />
                        <div style={{ color: '#F87171', fontSize: '0.875rem', marginBottom: '1.25rem' }}>{error}</div>
                        <button onClick={() => { setPhase('idle'); setError(null); }}
                            style={{ padding: '0.5rem 1.25rem', background: 'rgba(239,68,68,0.1)', border: '1px solid #EF4444', borderRadius: '0.375rem', color: '#F87171', cursor: 'pointer', fontFamily: 'monospace', fontSize: '0.8rem' }}>
                            Try Again
                        </button>
                    </div>
                )}
            </div>
        </div>
    );
}
