import React, { useState } from 'react';
import { 
    BookOpen, 
    BarChart2, 
    Activity, 
    CheckCircle, 
    AlertCircle, 
    Copy, 
    Scale, 
    TrendingUp, 
    Scissors, 
    Target, 
    FileText,
    Info,
    Brain
} from 'lucide-react';

const Card = ({ title, icon: Icon, children, color = "blue", delay = 0 }) => {
    const colorClasses = {
        blue: "border-l-4 border-blue-500",
        emerald: "border-l-4 border-emerald-500",
        amber: "border-l-4 border-amber-500",
        indigo: "border-l-4 border-indigo-500",
        rose: "border-l-4 border-rose-500",
        purple: "border-l-4 border-purple-500",
        cyan: "border-l-4 border-cyan-500",
        teal: "border-l-4 border-teal-500",
        slate: "border-l-4 border-slate-500"
    };

    return (
        <div 
            className={`bg-white rounded-xl shadow-sm p-6 card-hover ${colorClasses[color]} animate-fade-in`}
            style={{ animationDelay: `${delay}ms` }}
        >
            <div className="flex items-center gap-3 mb-4">
                <div className={`p-2 rounded-lg bg-${color}-50 text-${color}-600`}>
                    <Icon size={24} />
                </div>
                <h3 className="text-lg font-bold text-slate-800">{title}</h3>
            </div>
            <div className="text-slate-600 text-sm leading-relaxed space-y-3">
                {children}
            </div>
        </div>
    );
};

const ReportingRow = ({ metric, extract, why, guide }) => (
    <tr className="border-b border-slate-100 hover:bg-slate-50 transition-colors">
        <td className="p-4 font-semibold text-blue-700">{metric}</td>
        <td className="p-4 text-slate-700 font-mono text-xs md:text-sm bg-slate-50/50">{extract}</td>
        <td className="p-4 text-slate-600 italic">{why}</td>
        <td className="p-4 text-emerald-700 font-medium">{guide}</td>
    </tr>
);

export default function App() {
    const [copied, setCopied] = useState(false);

    const handleCopy = () => {
        const text = "The three-factor CFA showed adequate fit: χ²(132) = 227.61, p < .001, CMIN/DF = 1.724; RMSEA = .052, 90% CI [.040, .063], PCLOSE = .385. Incremental indices were high (CFI = .969, TLI = .964, IFI = .969, NFI = .930), and absolute fit was acceptable (GFI = .916). Parsimony indices were PNFI = .802 and PCFI = .836. Information criteria further supported adequacy (AIC = 305.61; BIC = 446.10).";
        navigator.clipboard.writeText(text);
        setCopied(true);
        setTimeout(() => setCopied(false), 2000);
    };

    return (
        <div className="min-h-screen bg-slate-50 text-slate-900 font-sans selection:bg-blue-100 selection:text-blue-900">
            <style>{`
                @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Merriweather:ital,wght@0,400;0,700;1,400&display=swap');
                
                body { font-family: 'Inter', sans-serif; }
                .font-serif { font-family: 'Merriweather', serif; }
                
                .card-hover { transition: all 0.3s ease; }
                .card-hover:hover {
                    transform: translateY(-5px);
                    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
                }
                
                @keyframes fadeIn {
                    from { opacity: 0; transform: translateY(20px); }
                    to { opacity: 1; transform: translateY(0); }
                }
                .animate-fade-in {
                    animation: fadeIn 0.8s ease-out forwards;
                    opacity: 0;
                }
            `}</style>

            {/* Header */}
            <header className="bg-white border-b border-slate-200 sticky top-0 z-50 bg-opacity-90 backdrop-blur-md">
                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-20 flex items-center justify-between">
                    <div className="flex items-center gap-3">
                        <div className="bg-blue-600 p-2 rounded-lg">
                            <BarChart2 className="text-white" size={24} />
                        </div>
                        <div>
                            <h1 className="text-xl font-bold text-slate-900 leading-tight">AMOS Model Fit Summary</h1>
                            <p className="text-xs text-slate-500 font-medium uppercase tracking-wider">Applied Linguistics Research</p>
                        </div>
                    </div>
                    <div className="hidden md:flex items-center gap-4 text-sm font-medium text-slate-600">
                        <span>Structural Equation Modeling</span>
                        <span className="h-4 w-px bg-slate-300"></span>
                        <span>CFA Guidelines</span>
                    </div>
                </div>
            </header>

            <main className="flex-grow max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10 space-y-12">
                
                {/* Hero / Quick Tips */}
                <section className="relative overflow-hidden bg-gradient-to-br from-slate-900 to-slate-800 rounded-2xl shadow-xl p-8 md:p-12 text-white animate-fade-in">
                    <div className="absolute top-0 right-0 p-12 opacity-10 transform translate-x-12 -translate-y-12">
                        <Activity size={300} />
                    </div>
                    
                    <div className="relative z-10 max-w-3xl">
                        <div className="flex items-center gap-3 mb-6">
                            <div className="bg-yellow-500/20 p-2 rounded-full border border-yellow-500/50">
                                <BookOpen className="text-yellow-400" size={24} />
                            </div>
                            <h2 className="text-2xl md:text-3xl font-bold">Quick Reading Tips</h2>
                        </div>
                        
                        <ul className="space-y-4 text-slate-200 text-lg">
                            <li className="flex items-start gap-3">
                                <CheckCircle className="text-emerald-400 mt-1 flex-shrink-0" size={20} />
                                <span>Focus on the <strong>Default model</strong> row (your CFA) when collecting indices.</span>
                            </li>
                            <li className="flex items-start gap-3">
                                <CheckCircle className="text-emerald-400 mt-1 flex-shrink-0" size={20} />
                                <span><strong>Saturated model</strong> = perfect fit (reference). <strong>Independence model</strong> = zero correlation (poor fit reference).</span>
                            </li>
                            <li className="flex items-start gap-3">
                                <CheckCircle className="text-emerald-400 mt-1 flex-shrink-0" size={20} />
                                <span>Report a <strong>balanced set</strong>: one absolute, one/two incremental, one parsimony, and one information criterion.</span>
                            </li>
                        </ul>

                        {/* Visual Fallback/Thresholds */}
                        <div className="mt-8 bg-white/10 backdrop-blur-sm rounded-xl p-6 border border-white/10">
                            <h4 className="text-sm font-semibold uppercase tracking-wider text-slate-400 mb-4">Fit Index Thresholds Summary</h4>
                            <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-center">
                                <div className="p-3 bg-white/5 rounded-lg border border-emerald-500/30">
                                    <div className="text-2xl font-bold text-emerald-400">&lt; 3.0</div>
                                    <div className="text-xs text-slate-300">CMIN/DF</div>
                                </div>
                                <div className="p-3 bg-white/5 rounded-lg border border-emerald-500/30">
                                    <div className="text-2xl font-bold text-emerald-400">&gt; 0.90</div>
                                    <div className="text-xs text-slate-300">CFI / TLI / GFI</div>
                                </div>
                                <div className="p-3 bg-white/5 rounded-lg border border-emerald-500/30">
                                    <div className="text-2xl font-bold text-emerald-400">&lt; 0.06</div>
                                    <div className="text-xs text-slate-300">RMSEA</div>
                                </div>
                                <div className="p-3 bg-white/5 rounded-lg border border-emerald-500/30">
                                    <div className="text-2xl font-bold text-emerald-400">Low</div>
                                    <div className="text-xs text-slate-300">AIC / BIC</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                {/* Metrics Grid */}
                <section>
                    <h2 className="text-2xl font-bold text-slate-800 mb-6 flex items-center gap-2">
                        <TrendingUp className="text-blue-600" /> 
                        Detailed Breakdown
                    </h2>
                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                        {/* 1. CMIN */}
                        <Card title="CMIN (Chi-Square)" icon={Activity} color="blue" delay={100}>
                            <p><strong>NPAR:</strong> Free parameters estimated.</p>
                            <p><strong>CMIN (χ²):</strong> Model chi-square. Lower is better. Tests exact fit.</p>
                            <p><strong>CMIN/DF:</strong> "Normed chi-square". Because χ² is sensitive to N, use this.</p>
                            <div className="mt-3 p-3 bg-blue-50 rounded text-sm text-blue-800">
                                <strong>Rule of thumb:</strong> &lt; 3.0 (Good), &lt; 2.0 (Excellent).
                            </div>
                        </Card>

                        {/* 2. RMR / GFI */}
                        <Card title="RMR & GFI" icon={Target} color="emerald" delay={200}>
                            <p><strong>RMR:</strong> Root Mean Square Residual. Smaller is better.</p>
                            <p><strong>GFI:</strong> Goodness-of-Fit Index (0-1). Absolute fit.</p>
                            <p><strong>AGFI:</strong> Adjusted GFI (penalizes complexity).</p>
                            <div className="mt-3 p-3 bg-emerald-50 rounded text-sm text-emerald-800">
                                <strong>Goal:</strong> SRMR ≤ .08. GFI/AGFI ≥ .90.
                            </div>
                        </Card>

                        {/* 3. Baseline Comparisons */}
                        <Card title="Baseline Comparisons" icon={Scale} color="indigo" delay={300}>
                            <p>Compares default model to independence model (worst case).</p>
                            <p><strong>CFI</strong> (Comparative Fit Index) & <strong>TLI</strong> (Tucker-Lewis) are most common.</p>
                            <div className="mt-3 p-3 bg-indigo-50 rounded text-sm text-indigo-800">
                                <strong>Goal:</strong> Values &ge; .90 acceptable; &ge; .95 strong.
                            </div>
                        </Card>

                        {/* 4. Parsimony */}
                        <Card title="Parsimony Adjusted" icon={Scissors} color="amber" delay={400}>
                            <p>Rewards simpler models. Useful for comparing candidates.</p>
                            <p><strong>PNFI & PCFI:</strong> Parsimonious NFI/CFI.</p>
                            <div className="mt-3 p-3 bg-amber-50 rounded text-sm text-amber-800">
                                <strong>Goal:</strong> &gt; .50 is often cited as acceptable. Interpret comparatively.
                            </div>
                        </Card>

                        {/* 5. NCP & FMIN */}
                        <Card title="NCP & FMIN" icon={Info} color="slate" delay={500}>
                            <p><strong>NCP:</strong> Noncentrality parameter. Building block for RMSEA.</p>
                            <p><strong>FMIN:</strong> Minimum discrepancy per sample.</p>
                            <p className="text-xs text-slate-500 mt-2">Rarely reported alone. Used for diagnostics.</p>
                        </Card>

                        {/* 6. RMSEA */}
                        <Card title="RMSEA" icon={AlertCircle} color="rose" delay={600}>
                            <p><strong>RMSEA:</strong> Population misfit per df. Lower is better.</p>
                            <p><strong>PCLOSE:</strong> Test of close fit (H₀: RMSEA ≤ .05). We want PCLOSE &gt; .05.</p>
                            <div className="mt-3 p-3 bg-rose-50 rounded text-sm text-rose-800">
                                <strong>Goal:</strong> &lt; .06 (Good), .06–.08 (Acceptable). Always report the CI.
                            </div>
                        </Card>

                        {/* 7. Information Criteria */}
                        <Card title="AIC / BIC" icon={Brain} color="purple" delay={700}>
                            <p>Trade-off between fit and complexity.</p>
                            <p><strong>AIC & BIC:</strong> Lower is better when comparing rival models.</p>
                            <div className="mt-3 p-3 bg-purple-50 rounded text-sm text-purple-800">
                                <strong>Usage:</strong> Justify chosen model among rivals (lowest AIC wins).
                            </div>
                        </Card>

                        {/* 8. ECVI */}
                        <Card title="ECVI" icon={BarChart2} color="cyan" delay={800}>
                            <p>Expected Cross-Validation Index.</p>
                            <p>Estimates how well model fits a similar sample.</p>
                            <p className="text-xs text-slate-500 mt-2">Lower implies better expected replication.</p>
                        </Card>

                        {/* 9. HOELTER */}
                        <Card title="HOELTER" icon={FileText} color="teal" delay={900}>
                            <p>Critical N. Smallest sample size where χ² becomes significant.</p>
                            <div className="mt-3 p-3 bg-teal-50 rounded text-sm text-teal-800">
                                <strong>Goal:</strong> &gt; 200 (Good), &gt; 75 (Minimal).
                            </div>
                        </Card>
                    </div>
                </section>

                {/* Write-up Section */}
                <section className="bg-white rounded-2xl shadow-lg border border-slate-200 overflow-hidden">
                    <div className="bg-slate-50 border-b border-slate-200 p-6 flex flex-col md:flex-row md:items-center justify-between gap-4">
                        <div>
                            <h3 className="text-xl font-bold text-slate-800 flex items-center gap-2">
                                <FileText className="text-blue-600" />
                                Reporting Guide & Example
                            </h3>
                            <p className="text-slate-500 text-sm mt-1">Match journal style with this structure.</p>
                        </div>
                    </div>

                    {/* Table */}
                    <div className="overflow-x-auto">
                        <table className="w-full text-left border-collapse">
                            <thead>
                                <tr className="bg-slate-100 text-slate-600 text-sm uppercase tracking-wider">
                                    <th className="p-4 border-b border-slate-200">AMOS Block</th>
                                    <th className="p-4 border-b border-slate-200">Statistic to Take</th>
                                    <th className="p-4 border-b border-slate-200">Why it matters</th>
                                    <th className="p-4 border-b border-slate-200">Typical Guideline</th>
                                </tr>
                            </thead>
                            <tbody className="text-sm">
                                <ReportingRow 
                                    metric="CMIN" 
                                    extract="χ²(DF), p, CMIN/DF" 
                                    why="Absolute fit & misfit per df" 
                                    guide="CMIN/DF < 3 (pref < 2)" 
                                />
                                <ReportingRow 
                                    metric="RMSEA" 
                                    extract="RMSEA, 90% CI, PCLOSE" 
                                    why="Population misfit; precision" 
                                    guide="RMSEA < .06; PCLOSE > .05" 
                                />
                                <ReportingRow 
                                    metric="Baseline" 
                                    extract="CFI, TLI, IFI, NFI" 
                                    why="Improvement over independence" 
                                    guide="≥ .90 acceptable; ≥ .95 strong" 
                                />
                                <ReportingRow 
                                    metric="Absolutes" 
                                    extract="SRMR, GFI, AGFI" 
                                    why="Absolute fit" 
                                    guide="SRMR ≤ .08; GFI ≥ .90" 
                                />
                                <ReportingRow 
                                    metric="Parsimony" 
                                    extract="PNFI, PCFI" 
                                    why="Penalize complexity" 
                                    guide="> .50, compare models" 
                                />
                                <ReportingRow 
                                    metric="Info Criteria" 
                                    extract="AIC (± BIC)" 
                                    why="Model selection" 
                                    guide="Lower is better" 
                                />
                            </tbody>
                        </table>
                    </div>

                    {/* Copy Block */}
                    <div className="p-8 bg-slate-50 border-t border-slate-200">
                        <div className="bg-white rounded-xl border border-blue-200 shadow-sm p-6 relative group">
                            <div className="absolute top-4 right-4">
                                <button 
                                    onClick={handleCopy}
                                    className={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 ${
                                        copied 
                                        ? "bg-emerald-100 text-emerald-700" 
                                        : "bg-blue-50 text-blue-600 hover:bg-blue-100"
                                    }`}
                                >
                                    {copied ? <CheckCircle size={16} /> : <Copy size={16} />}
                                    {copied ? "Copied!" : "Copy Template"}
                                </button>
                            </div>
                            <h4 className="text-sm font-bold text-slate-400 uppercase tracking-wider mb-3">Copy-ready Example Sentence</h4>
                            <p className="text-slate-700 font-serif leading-relaxed pr-0 md:pr-32 text-lg">
                                “The three-factor CFA showed adequate fit: χ²(132) = 227.61, p &lt; .001, CMIN/DF = 1.724; 
                                RMSEA = .052, 90% CI [.040, .063], PCLOSE = .385. Incremental indices were high (CFI = .969, 
                                TLI = .964, IFI = .969, NFI = .930), and absolute fit was acceptable (GFI = .916). 
                                Parsimony indices were PNFI = .802 and PCFI = .836. Information criteria further 
                                supported adequacy (AIC = 305.61; BIC = 446.10).”
                            </p>
                        </div>
                    </div>
                </section>

                {/* Glossary */}
                <section className="bg-slate-800 rounded-2xl p-8 md:p-12 text-slate-300">
                    <h3 className="text-xl font-bold text-white mb-8 border-b border-slate-700 pb-4">Abbreviation Quick-Glossary</h3>
                    <div className="columns-1 md:columns-2 lg:columns-3 gap-8 space-y-4">
                        <div className="break-inside-avoid"><strong className="text-white">CMIN</strong> — chi-square (χ²)</div>
                        <div className="break-inside-avoid"><strong className="text-white">DF</strong> — degrees of freedom</div>
                        <div className="break-inside-avoid"><strong className="text-white">RMR</strong> — root mean square residual</div>
                        <div className="break-inside-avoid"><strong className="text-white">GFI</strong> — Goodness-of-Fit Index</div>
                        <div className="break-inside-avoid"><strong className="text-white">NFI</strong> — normed fit index</div>
                        <div className="break-inside-avoid"><strong className="text-white">IFI</strong> — incremental fit index</div>
                        <div className="break-inside-avoid"><strong className="text-white">TLI</strong> — Tucker–Lewis index</div>
                        <div className="break-inside-avoid"><strong className="text-white">CFI</strong> — comparative fit index</div>
                        <div className="break-inside-avoid"><strong className="text-white">PRATIO</strong> — parsimony ratio</div>
                        <div className="break-inside-avoid"><strong className="text-white">NCP</strong> — noncentrality parameter</div>
                        <div className="break-inside-avoid"><strong className="text-white">RMSEA</strong> — root mean square error of approximation</div>
                        <div className="break-inside-avoid"><strong className="text-white">PCLOSE</strong> — p-value for "close fit"</div>
                        <div className="break-inside-avoid"><strong className="text-white">AIC/BIC</strong> — information criteria</div>
                        <div className="break-inside-avoid"><strong className="text-white">HOELTER</strong> — critical N</div>
                    </div>
                </section>

            </main>

            {/* Footer */}
            <footer className="bg-white border-t border-slate-200 py-12 mt-8">
                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center space-y-2">
                    <div className="flex justify-center mb-6">
                        <div className="h-1 w-20 bg-blue-600 rounded-full"></div>
                    </div>
                    <p className="text-slate-900 font-bold text-lg tracking-tight">Applied Linguistics Research</p>
                    <p className="text-slate-500 font-medium">Instructor: Assoc.Prof.Dr. Nguyen Ngoc Vu</p>
                </div>
            </footer>
        </div>
    );
}