"use client";

import React, { useState } from 'react';
import { Smartphone, Monitor, ChevronDown, ChevronRight, Copy, Check } from 'lucide-react';
import { cn } from '@/lib/utils';

export function MobileCookieInstructions() {
    const [open, setOpen] = useState(false);
    const [platform, setPlatform] = useState<'desktop' | 'android' | 'ios'>('desktop');

    return (
        <div className="border border-white/10 rounded-xl bg-white/5 overflow-hidden">
            <button
                onClick={() => setOpen(!open)}
                className="w-full flex items-center justify-between p-4 text-left hover:bg-white/5 transition-colors"
            >
                <div className="flex items-center gap-2">
                    <Smartphone className="h-5 w-5 text-purple-400" />
                    <span className="font-medium text-sm text-white/90">How to get cookies on Mobile?</span>
                </div>
                {open ? <ChevronDown className="h-4 w-4 text-white/50" /> : <ChevronRight className="h-4 w-4 text-white/50" />}
            </button>

            {open && (
                <div className="p-4 pt-0 border-t border-white/5 bg-black/20">
                    <div className="flex gap-2 mb-4 overflow-x-auto pb-2 scrollbar-none">
                        <button
                            onClick={() => setPlatform('desktop')}
                            className={cn(
                                "flex items-center gap-2 px-3 py-1.5 rounded-lg text-xs font-medium whitespace-nowrap transition-colors",
                                platform === 'desktop' ? "bg-purple-500/20 text-purple-200 border border-purple-500/30" : "bg-white/5 text-white/60 hover:bg-white/10"
                            )}
                        >
                            <Monitor className="h-3 w-3" />
                            Desktop Sync (Best)
                        </button>
                        <button
                            onClick={() => setPlatform('android')}
                            className={cn(
                                "flex items-center gap-2 px-3 py-1.5 rounded-lg text-xs font-medium whitespace-nowrap transition-colors",
                                platform === 'android' ? "bg-green-500/20 text-green-200 border border-green-500/30" : "bg-white/5 text-white/60 hover:bg-white/10"
                            )}
                        >
                            <Smartphone className="h-3 w-3" />
                            Android
                        </button>
                        <button
                            onClick={() => setPlatform('ios')}
                            className={cn(
                                "flex items-center gap-2 px-3 py-1.5 rounded-lg text-xs font-medium whitespace-nowrap transition-colors",
                                platform === 'ios' ? "bg-blue-500/20 text-blue-200 border border-blue-500/30" : "bg-white/5 text-white/60 hover:bg-white/10"
                            )}
                        >
                            <Smartphone className="h-3 w-3" />
                            iPhone (iOS)
                        </button>
                    </div>

                    <div className="space-y-3 text-sm text-white/80">
                        {platform === 'desktop' && (
                            <div className="space-y-2 animate-in fade-in slide-in-from-left-2 duration-300">
                                <p className="text-xs text-white/60">Getting cookies on mobile is hard. The easiest way is to do it on a PC and send it to yourself.</p>
                                <ol className="list-decimal list-inside space-y-2 text-xs">
                                    <li>Install <strong>Cookie-Editor</strong> extension on your PC browser (Chrome/Edge).</li>
                                    <li>Go to <code>labs.google</code> (Whisk) or <code>facebook.com</code> (Meta) and login.</li>
                                    <li>Open extension &rarr; Click <strong>Export</strong> &rarr; <strong>Export as JSON</strong>.</li>
                                    <li>Paste into a Google Doc, Keep, Notes, or email it to yourself.</li>
                                    <li>Open on phone and paste here.</li>
                                </ol>
                            </div>
                        )}

                        {platform === 'android' && (
                            <div className="space-y-2 animate-in fade-in slide-in-from-left-2 duration-300">
                                <p className="text-xs text-white/60">Android allows extensions via specific browsers.</p>
                                <ol className="list-decimal list-inside space-y-2 text-xs">
                                    <li>Install <strong>Kiwi Browser</strong> or <strong>Firefox Nightly</strong> from Play Store.</li>
                                    <li>Open Kiwi/Firefox and install <strong>Cookie-Editor</strong> from Chrome Web Store.</li>
                                    <li>Login to the service (Whisk/Facebook).</li>
                                    <li>Tap menu &rarr; Cookie-Editor &rarr; Export JSON.</li>
                                </ol>
                            </div>
                        )}

                        {platform === 'ios' && (
                            <div className="space-y-2 animate-in fade-in slide-in-from-left-2 duration-300">
                                <p className="text-xs text-white/60">iPhone is restrictive. Syncing from Desktop is recommended.</p>
                                <div className="p-2 bg-amber-500/10 border border-amber-500/20 rounded-lg text-[10px] text-amber-200">
                                    <strong>Alternative:</strong> Use "Alook Browser" app (Paid) which acts like a desktop browser with developer tools.
                                </div>
                                <ol className="list-decimal list-inside space-y-2 text-xs">
                                    <li>Use <strong>Method 1 (Desktop Sync)</strong> - it's much faster.</li>
                                    <li>Or access this site on your Mac/PC and configure it there first.Settings are saved to the browser, so this only works if you sync local storage or use the same device.</li>
                                </ol>
                            </div>
                        )}
                    </div>
                </div>
            )}
        </div>
    );
}