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

export default function HowToPage() {
    return (
        <div className="min-h-screen bg-base-200 flex items-center justify-center p-6">
            <div className=" w-full bg-base-100 shadow-xl rounded-2xl p-8 space-y-8">
                <h1 className="text-4xl font-bold text-primary text-center">How to Use</h1>

                {/* Section 1: Launcher Features */}
                <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>Using the Launcher Features</span>
                    </h2>
                    <div className="space-y-3 text-green-700">
                        <div className="flex items-start gap-3">
                            <div className="text-green-600 text-lg">🔄</div>
                            <p>Automatically update <span className="font-semibold text-amber-600">Firefly Go</span> and proxy tools when launching.</p>
                        </div>
                        <div className="flex items-start gap-3">
                            <div className="text-green-600 text-lg">🎮</div>
                            <p>Launch the game directly through the launcher with correct parameters and runtime environment.</p>
                        </div>
                        <div className="flex items-start gap-3">
                            <div className="text-green-600 text-lg">🌐</div>
                            <p>Support switching in-game language (e.g., EN, JP, ZH, KR) via{" "}
                                <a href="/language" className="link link-info font-mono">Language Tools</a>
                            </p>
                        </div>
                        <div className="flex items-start gap-3">
                            <div className="text-green-600 text-2xl">📦</div>
                            <div>
                                <p className="text-green-800 font-semibold">
                                    Patch & Update Game Files
                                </p>
                                <p className="text-green-700">
                                    Use the{" "}
                                    <a href="/diff" className="link link-info font-mono">Diff Tool</a>{" "}
                                    (<span className="font-medium">DiffPatch</span>) for fast & lightweight incremental updates.
                                </p>
                                <p className="text-green-700 mt-1">
                                    Supports <span className="font-semibold">Hdiff</span>, <span className="font-semibold">Ldiff</span>, and custom diff formats.
                                </p>
                            </div>
                        </div>

                    </div>
                </div>

                {/* Section 2: FireflyGo Commands */}
                <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>FireflyGo Chat Commands</span>
                    </h2>

                    <p className="text-blue-700 mb-4">
                        Below are in-game chat commands you can use. Some commands require you to enable{" "}
                        <span className="font-semibold text-accent">Theorycraft Mode</span>.
                    </p>

                    {/* Theorycraft Mode Warning */}
                    <div className="bg-red-50 border border-red-200 rounded-lg p-4 mb-6">
                        <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">Theorycraft Mode Required</h3>
                                <p className="text-red-700 mb-2">The following commands are only available when <strong>Theorycraft Mode</strong> is enabled:</p>
                                <div className="flex flex-wrap gap-2">
                                    <code className="bg-red-100 px-2 py-1 rounded text-sm text-red-800">/cycle</code>
                                    <code className="bg-red-100 px-2 py-1 rounded text-sm text-red-800">/hp</code>
                                    <code className="bg-red-100 px-2 py-1 rounded text-sm text-red-800">/log</code>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div className="bg-white border border-blue-200 rounded-lg p-4">
                        <div className="flex items-start gap-3">
                            <div className="text-blue-600 text-lg">✨</div>
                            <div className="flex-1">
                                <h4 className="font-semibold text-blue-800 mb-1">Extra Settings</h4>

                                <div className="space-y-4 text-blue-700 text-sm">

                                    <div className="bg-blue-50 border border-blue-200 rounded-lg p-3">
                                        <h5 className="font-semibold text-blue-800 flex items-center gap-2">
                                            🎭 Hidden UI
                                        </h5>
                                        <p className="mt-1">
                                            Instantly hides the entire game UI — often used in DIM showcase videos.
                                        </p>
                                    </div>


                                    <div className="bg-blue-50 border border-blue-200 rounded-lg p-3">
                                        <h5 className="font-semibold text-blue-800 flex items-center gap-2">
                                            🚫 Disable Censorship
                                        </h5>
                                        <p className="mt-1">
                                            Remove the Lens Flare censor effect 💀 for a cleaner experience.
                                        </p>
                                    </div>

                                    <div className="bg-blue-50 border border-blue-200 rounded-lg p-3">
                                        <h5 className="font-semibold text-blue-800 flex items-center gap-2">
                                            🧪 Theorycraft Mode
                                        </h5>
                                        <p className="mt-1">
                                            No need to type chat commands anymore — configure everything through the
                                            web: adjust monster HP, set cycles, view logs, and more.
                                        </p>
                                    </div>
                                </div>


                                <div className="mt-4 aspect-w-16 aspect-h-9">
                                    <iframe
                                        src="https://www.youtube.com/embed/uiKdFrvn9NQ"
                                        title="Extra Settings Tutorial"
                                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                                        allowFullScreen
                                        className="rounded-lg w-full h-[300px]"
                                    ></iframe>
                                </div>
                            </div>
                        </div>
                    </div>

                    {/* Commands List */}
                    <div className="space-y-4 mt-4">
                        <h3 className="text-lg font-semibold text-blue-800">Available Commands:</h3>

                        {/* Theorycraft Toggle */}
                        <div className="bg-white border border-blue-200 rounded-lg p-4">
                            <div className="flex items-start gap-3">
                                <div className="text-blue-600 text-lg">⚙️</div>
                                <div className="flex-1">
                                    <h4 className="font-semibold text-blue-800 mb-1">Theorycraft Mode</h4>
                                    <div className="space-y-1 text-blue-700">
                                        <p><code className="bg-blue-100 px-1 py-0.5 rounded text-sm">/theorycraft 1</code> — Enable Theorycraft Mode</p>
                                        <p><code className="bg-blue-100 px-1 py-0.5 rounded text-sm">/theorycraft 0</code> — Disable Theorycraft Mode</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {/* Cycle Command */}
                        <div className="bg-white border border-blue-200 rounded-lg p-4">
                            <div className="flex items-start gap-3">
                                <div className="text-blue-600 text-lg">🔄</div>
                                <div className="flex-1">
                                    <h4 className="font-semibold text-blue-800 mb-1">Cycle Control <span className="text-red-600 text-sm">(Theorycraft only)</span></h4>
                                    <div className="space-y-1 text-blue-700">
                                        <p><code className="bg-blue-100 px-1 py-0.5 rounded text-sm">/cycle N</code> — Set cycle count in battle</p>
                                        <p className="text-sm">Example: <code className="bg-blue-100 px-1 py-0.5 rounded text-sm">/cycle 30</code> sets battle to 30 cycles</p>
                                        <p className="text-sm"><code className="bg-blue-100 px-1 py-0.5 rounded text-sm">/cycle 0</code> disables custom cycle</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {/* HP Command */}
                        <div className="bg-white border border-blue-200 rounded-lg p-4">
                            <div className="flex items-start gap-3">
                                <div className="text-blue-600 text-lg">❤️</div>
                                <div className="flex-1">
                                    <h4 className="font-semibold text-blue-800 mb-1">
                                        HP Override <span className="text-red-600 text-sm">(Theorycraft only)</span>
                                    </h4>
                                    <div className="space-y-2 text-blue-700 text-sm">
                                        <p>
                                            <code className="bg-blue-100 px-1 py-0.5 rounded text-sm">/hp N</code> — Set monster HP (only available in Theorycraft mode)
                                        </p>
                                        <p>
                                            <code className="bg-blue-100 px-1 py-0.5 rounded text-sm">/hp 0</code> — Disable the set HP feature
                                        </p>
                                        <p>
                                            <code className="bg-blue-100 px-1 py-0.5 rounded text-sm">/hp Wave V1 V2 ...</code> — Set HP for each monster in a specific wave
                                        </p>
                                        <p className="ml-4">
                                            Example: <code className="bg-blue-100 px-1 py-0.5 rounded text-sm">/hp 1 2000000 3000000</code> sets wave 1 monster1 HP=2,000,000 and monster2 HP=3,000,000
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>


                        {/* Log Command */}
                        <div className="bg-white border border-blue-200 rounded-lg p-4">
                            <div className="flex items-start gap-3">
                                <div className="text-blue-600 text-lg">📝</div>
                                <div className="flex-1">
                                    <h4 className="font-semibold text-blue-800 mb-1">Battle Log <span className="text-red-600 text-sm">(Theorycraft only)</span></h4>
                                    <div className="space-y-1 text-blue-700">
                                        <p><code className="bg-blue-100 px-1 py-0.5 rounded text-sm">/log 1</code> — Enable battle log output</p>
                                        <p><code className="bg-blue-100 px-1 py-0.5 rounded text-sm">/log 0</code> — Disable battle log</p>
                                        <p className="text-sm">Output will be written as <code className="bg-blue-100 px-1 py-0.5 rounded text-sm">.json</code></p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {/* Skip Command */}
                        <div className="bg-white border border-blue-200 rounded-lg p-4">
                            <div className="flex items-start gap-3">
                                <div className="text-blue-600 text-lg">⏭️</div>
                                <div className="flex-1">
                                    <h4 className="font-semibold text-blue-800 mb-1">Skip Nodes</h4>
                                    <div className="space-y-1 text-blue-700">
                                        <p><code className="bg-blue-100 px-1 py-0.5 rounded text-sm">/skip N</code> — Skip nodes in MOC / AS / Pure Fiction</p>
                                        <p className="text-sm">Example: <code className="bg-blue-100 px-1 py-0.5 rounded text-sm">/skip 2</code> skips node 2</p>
                                        <p className="text-sm"><code className="bg-blue-100 px-1 py-0.5 rounded text-sm">/skip 0</code> disables skipping</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {/* ID Command */}
                        <div className="bg-white border border-blue-200 rounded-lg p-4">
                            <div className="flex items-start gap-3">
                                <div className="text-blue-600 text-lg">🔄</div>
                                <div className="flex-1">
                                    <h4 className="font-semibold text-blue-800 mb-1">Character Path Switch</h4>
                                    <div className="space-y-1 text-blue-700">
                                        <p><code className="bg-blue-100 px-1 py-0.5 rounded text-sm">/id CHAR_ID</code> — Switch path for multi-form characters</p>
                                        <p className="text-sm">Example: <code className="bg-blue-100 px-1 py-0.5 rounded text-sm">/id 8008</code> to change MC (Trailblazer) form</p>
                                        <p className="text-sm">Works with IDs like <code className="bg-blue-100 px-1 py-0.5 rounded text-sm">8001 → 8008</code>, <code className="bg-blue-100 px-1 py-0.5 rounded text-sm">1001 → 1224</code></p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {/* Update Command */}
                        <div className="bg-white border border-blue-200 rounded-lg p-4">
                            <div className="flex items-start gap-3">
                                <div className="text-blue-600 text-lg">🔄</div>
                                <div className="flex-1">
                                    <h4 className="font-semibold text-blue-800 mb-1">Refresh Data</h4>
                                    <div className="space-y-1 text-blue-700">
                                        <p><code className="bg-blue-100 px-1 py-0.5 rounded text-sm">/update</code> — Refresh server data from current <code className="bg-blue-100 px-1 py-0.5 rounded text-sm">freesr-data.json</code></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {/* Section 3: Other Notes */}
                <div className="bg-gray-50 border-l-4 border-gray-400 p-6 rounded-r-lg">
                    <h2 className="text-2xl font-bold text-gray-800 flex items-center gap-2 mb-4">
                        <span>📌</span>
                        <span>Other Notes</span>
                    </h2>

                    <div className="space-y-4">
                        {/* Administrator Note */}
                        <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
                            <div className="flex items-start gap-3">
                                <div className="text-yellow-600 text-xl">⚠️</div>
                                <div>
                                    <h3 className="font-semibold text-yellow-800 mb-1">Administrator Rights</h3>
                                    <p className="text-yellow-700">
                                        Always run the launcher as Administrator for file permission access.
                                    </p>
                                </div>
                            </div>
                        </div>

                        {/* Backup Note */}
                        <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
                            <div className="flex items-start gap-3">
                                <div className="text-blue-600 text-xl">💾</div>
                                <div>
                                    <h3 className="font-semibold text-blue-800 mb-1">Backup Data</h3>
                                    <p className="text-blue-700">
                                        Backup your <code className="bg-blue-100 px-1 py-0.5 rounded text-sm">config.json</code> and{' '}
                                        <code className="bg-blue-100 px-1 py-0.5 rounded text-sm">freesr-data.json</code> regularly.
                                    </p>
                                </div>
                            </div>
                        </div>

                        {/* Voice Pack Note */}
                        <div className="bg-green-50 border border-green-200 rounded-lg p-4">
                            <div className="flex items-start gap-3">
                                <div className="text-green-600 text-xl">🎵</div>
                                <div className="flex-1">
                                    <h3 className="font-semibold text-green-800 mb-2">Enable Voice Packs in Beta Client</h3>
                                    <div className="space-y-3 text-green-700">
                                        <div className="flex items-start gap-2">
                                            <span className="font-medium min-w-[20px] text-green-600">1.</span>
                                            <div>
                                                <p className="mb-1">Copy the desired voice folder (e.g., <code className="bg-green-100 px-1 py-0.5 rounded text-sm">Japanese</code>, <code className="bg-green-100 px-1 py-0.5 rounded text-sm">English</code>) from:</p>
                                                <code className="block bg-green-100 px-2 py-1 rounded text-sm mt-1">
                                                    Star Rail\Games\StarRail_Data\Persistent\Audio\AudioPackage\Windows
                                                </code>
                                                <p className="mt-1">to the beta folder by clicking <strong>"Open Voice Folder"</strong> on the Home tab.</p>
                                            </div>
                                        </div>
                                        <div className="flex items-start gap-2">
                                            <span className="font-medium min-w-[20px] text-green-600">2.</span>
                                            <p>When launching the game for the first time, it may delete the voice folder. If so, repeat step 1 to restore it.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

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