import { Link } from '@tanstack/react-router';

export default function AnalysisPage() {
    return (
        <div className="min-h-screen bg-base-200 flex items-center justify-center p-6">
            <div className="max-w-4xl w-full bg-base-100 shadow-xl rounded-2xl p-8 space-y-8">
                <h1 className="text-4xl font-bold text-primary text-center">
                    Firefly Analysis & Veritas Plugin
                </h1>

                {/* About Veritas Section */}
                <div className="bg-green-50 border-l-4 border-green-400 p-6 rounded-r-lg">
                    <h2 className="text-2xl font-bold text-green-800 flex items-center gap-2 mb-4">
                        <span>🔬</span>
                        <span>About Veritas</span>
                    </h2>
                    
                    <div className="space-y-4 text-green-700">
                        <div className="flex items-start gap-3">
                            <div className="text-green-600 text-lg">⚡</div>
                            <div>
                                <p className="mb-2">
                                    <span className="font-semibold text-success">Veritas</span> is a powerful{" "}
                                    <span className="text-info font-mono bg-blue-100 px-2 py-1 rounded">Damage Logger</span> designed for analyzing damage in real-time during gameplay.
                                </p>
                                <p className="text-sm">It's lightweight, fast, and easy to use for comprehensive damage analysis.</p>
                            </div>
                        </div>
                        
                        <div className="bg-white border border-green-200 rounded-lg p-4">
                            <div className="flex items-center gap-2 mb-2">
                                <span className="text-green-600 text-lg">📁</span>
                                <span className="font-semibold text-green-800">GitHub Repository</span>
                            </div>
                            <a
                                href="https://github.com/hessiser/veritas"
                                target="_blank"
                                rel="noopener noreferrer"
                                className="link link-info font-mono break-all"
                            >
                                https://github.com/hessiser/veritas
                            </a>
                        </div>
                    </div>
                </div>

                {/* Web Analysis Tools Section */}
                <div className="bg-blue-50 border-l-4 border-blue-400 p-6 rounded-r-lg">
                    <h2 className="text-2xl font-bold text-blue-800 flex items-center gap-2 mb-4">
                        <span>🌐</span>
                        <span>Web Analysis Tools</span>
                    </h2>
                    
                    <div className="space-y-4">
                        <p className="text-blue-700">
                            Use these web applications for real-time damage analysis with Veritas:
                        </p>
                        
                        <div className="grid md:grid-cols-2 gap-4">
                            <div className="bg-white border border-blue-200 rounded-lg p-4">
                                <div className="flex items-center gap-2 mb-2">
                                    <span className="text-blue-600 text-lg">🏆</span>
                                    <span className="font-semibold text-blue-800">Master Website</span>
                                </div>
                                <a
                                    href="https://sranalysis.kain.id.vn/"
                                    className="link link-warning font-mono text-sm break-all"
                                    target="_blank"
                                    rel="noopener noreferrer"
                                >
                                    https://sranalysis.kain.id.vn/
                                </a>
                            </div>
                            
                            <div className="bg-white border border-blue-200 rounded-lg p-4">
                                <div className="flex items-center gap-2 mb-2">
                                    <span className="text-blue-600 text-lg">🔄</span>
                                    <span className="font-semibold text-blue-800">Backup Website</span>
                                </div>
                                <a
                                    href="https://firefly-sranalysis.vercel.app/"
                                    className="link link-warning font-mono text-sm break-all"
                                    target="_blank"
                                    rel="noopener noreferrer"
                                >
                                    https://firefly-sranalysis.vercel.app/
                                </a>
                            </div>
                        </div>
                        
                        <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-3">
                            <div className="flex items-start gap-2">
                                <div className="text-yellow-600 text-lg">💡</div>
                                <p className="text-yellow-800 text-sm">
                                    <strong>Tip:</strong> If your country has issues loading from the master site, please use the backup site instead.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

                {/* Installation Instructions */}
                <div className="bg-red-50 border-l-4 border-red-400 p-6 rounded-r-lg">
                    <h2 className="text-2xl font-bold text-red-800 flex items-center gap-2 mb-4">
                        <span>⚠️</span>
                        <span>Installation Instructions</span>
                    </h2>
                    
                    <div className="bg-white border border-red-200 rounded-lg p-4">
                        <div className="flex items-start gap-3">
                            <div className="text-red-600 text-xl">📋</div>
                            <div>
                                <h3 className="font-semibold text-red-800 mb-2">Important Setup Step</h3>
                                <p className="text-red-700 mb-2">
                                    After downloading Veritas, you must rename the file for it to work properly:
                                </p>
                                <div className="bg-red-100 p-3 rounded-lg">
                                    <p className="text-red-800 font-mono text-sm">
                                        Rename: <code className="bg-red-200 px-1 py-0.5 rounded">veritas.dll</code> → <code className="bg-red-200 px-1 py-0.5 rounded">astrolabe.dll</code>
                                    </p>
                                    <p className="text-red-800 text-sm mt-1">
                                        Then place <code className="bg-red-200 px-1 py-0.5 rounded">astrolabe.dll</code> into your game directory.
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {/* Usage Instructions */}
                <div className="bg-purple-50 border-l-4 border-purple-400 p-6 rounded-r-lg">
                    <h2 className="text-2xl font-bold text-purple-800 flex items-center gap-2 mb-4">
                        <span>🛠️</span>
                        <span>How to Use Web App</span>
                    </h2>
                    
                    <div className="space-y-6">
                        {/* Firefly GO Local */}
                        <div className="bg-white border border-purple-200 rounded-lg p-4">
                            <h3 className="font-semibold text-purple-800 mb-3 flex items-center gap-2">
                                <span className="text-purple-600">🚀</span>
                                <span>For Firefly GO Local</span>
                            </h3>
                            <div className="space-y-2 text-purple-700">
                                <div className="flex items-start gap-2">
                                    <span className="font-medium min-w-[20px] text-purple-600">1.</span>
                                    <p>Launch the <span className="font-semibold">game</span> and your <span className="font-semibold">Firefly Private Server (PS)</span>.</p>
                                </div>
                                <div className="flex items-start gap-2">
                                    <span className="font-medium min-w-[20px] text-purple-600">2.</span>
                                    <p>Open one of the web analysis tools.</p>
                                </div>
                                <div className="flex items-start gap-2">
                                    <span className="font-medium min-w-[20px] text-purple-600">3.</span>
                                    <p>Go to <strong>Connection Settings</strong> → select <strong>Connection Type: PS</strong> → click <strong>Connect</strong>.</p>
                                </div>
                                <div className="flex items-start gap-2">
                                    <span className="font-medium min-w-[20px] text-purple-600">4.</span>
                                    <p>Once connected, play the game. The tool will automatically analyze in the background.</p>
                                </div>
                            </div>
                        </div>

                        {/* Other Private Servers */}
                        <div className="bg-white border border-purple-200 rounded-lg p-4">
                            <h3 className="font-semibold text-purple-800 mb-3 flex items-center gap-2">
                                <span className="text-purple-600">🌐</span>
                                <span>For Other Private Servers</span>
                            </h3>
                            <div className="space-y-2 text-purple-700">
                                <div className="flex items-start gap-2">
                                    <span className="font-medium min-w-[20px] text-purple-600">1.</span>
                                    <p>Launch the <span className="font-semibold">game</span> and your <span className="font-semibold">Private Server</span>.</p>
                                </div>
                                <div className="flex items-start gap-2">
                                    <span className="font-medium min-w-[20px] text-purple-600">2.</span>
                                    <p>Open one of the web analysis tools.</p>
                                </div>
                                <div className="flex items-start gap-2">
                                    <span className="font-medium min-w-[20px] text-purple-600">3.</span>
                                    <p>Go to <strong>Connection Settings</strong> → select <strong>Connection Type: Native</strong> → click <strong>Connect</strong>.</p>
                                </div>
                                <div className="flex items-start gap-2">
                                    <span className="font-medium min-w-[20px] text-purple-600">4.</span>
                                    <p>Once connected, play the game normally.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div className="text-center pt-6">
                    <Link to="/" className="btn btn-primary btn-wide">Back to Home</Link>
                </div>
            </div>
        </div>
    );
}