"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-border/50 rounded-xl bg-card overflow-hidden shadow-soft">
            <button
                onClick={() => setOpen(!open)}
                className="w-full flex items-center justify-between p-4 text-left hover:bg-muted/50 transition-colors"
            >
                <div className="flex items-center gap-2">
                    <Smartphone className="h-5 w-5 text-primary" />
                    <span className="font-bold text-sm text-foreground">How to get cookies on Mobile?</span>
                </div>
                {open ? <ChevronDown className="h-4 w-4 text-muted-foreground" /> : <ChevronRight className="h-4 w-4 text-muted-foreground" />}
            </button>

            {open && (
                <div className="p-6 border-t border-border/10 bg-muted/20 space-y-6">
                    <div className="flex gap-2 overflow-x-auto pb-2 scrollbar-none">
                        <button
                            onClick={() => setPlatform('desktop')}
                            className={cn(
                                "flex items-center gap-2 px-4 py-2 rounded-xl text-xs font-bold whitespace-nowrap transition-all active:scale-95",
                                platform === 'desktop' ? "bg-primary/20 text-primary border border-primary/30 shadow-lg shadow-primary/10" : "bg-muted text-muted-foreground hover:bg-muted/80"
                            )}
                        >
                            <Monitor className="h-3.5 w-3.5" />
                            Desktop Sync (Best)
                        </button>
                        <button
                            onClick={() => setPlatform('android')}
                            className={cn(
                                "flex items-center gap-2 px-4 py-2 rounded-xl text-xs font-bold whitespace-nowrap transition-all active:scale-95",
                                platform === 'android' ? "bg-green-500/20 text-green-600 dark:text-green-400 border border-green-500/30 shadow-lg shadow-green-500/10" : "bg-muted text-muted-foreground hover:bg-muted/80"
                            )}
                        >
                            <Smartphone className="h-3.5 w-3.5" />
                            Android
                        </button>
                        <button
                            onClick={() => setPlatform('ios')}
                            className={cn(
                                "flex items-center gap-2 px-4 py-2 rounded-xl text-xs font-bold whitespace-nowrap transition-all active:scale-95",
                                platform === 'ios' ? "bg-blue-500/20 text-blue-600 dark:text-blue-400 border border-blue-500/30 shadow-lg shadow-blue-500/10" : "bg-muted text-muted-foreground hover:bg-muted/80"
                            )}
                        >
                            <Smartphone className="h-3.5 w-3.5" />
                            iPhone (iOS)
                        </button>
                    </div>

                    <div className="space-y-4 max-w-2xl">
                        {platform === 'desktop' && (
                            <div className="space-y-4 animate-in fade-in slide-in-from-left-4 duration-500">
                                <p className="text-sm font-medium text-muted-foreground leading-relaxed">Getting cookies on mobile is hard. The easiest way is to do it on a PC and send it to yourself.</p>
                                <ol className="space-y-3">
                                    {[
                                        { step: 1, text: <>Install <strong className="text-foreground">Cookie-Editor</strong> extension on your PC browser (Chrome/Edge).</> },
                                        { step: 2, text: <>Go to <code className="bg-muted px-1.5 py-0.5 rounded text-primary">labs.google</code> (Whisk) or <code className="bg-muted px-1.5 py-0.5 rounded text-blue-500 dark:text-blue-400">facebook.com</code> (Meta) and login.</> },
                                        { step: 3, text: <>Open extension &rarr; Click <strong className="text-foreground">Export</strong> &rarr; <strong className="text-foreground">Export as JSON</strong>.</> },
                                        { step: 4, text: <>Paste into a Google Doc, Keep, Notes, or email it to yourself.</> },
                                        { step: 5, text: <>Open on phone and paste here.</> }
                                    ].map((item) => (
                                        <li key={item.step} className="flex gap-3 text-sm text-foreground/80">
                                            <span className="flex-shrink-0 w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center text-[11px] font-black text-primary">{item.step}</span>
                                            <span className="leading-tight">{item.text}</span>
                                        </li>
                                    ))}
                                </ol>
                            </div>
                        )}

                        {platform === 'android' && (
                            <div className="space-y-4 animate-in fade-in slide-in-from-left-4 duration-500">
                                <p className="text-sm font-medium text-muted-foreground leading-relaxed">Android allows extensions via specific browsers.</p>
                                <ol className="space-y-3">
                                    {[
                                        { step: 1, text: <>Install <strong className="text-foreground">Kiwi Browser</strong> or <strong className="text-foreground">Firefox Nightly</strong> from Play Store.</> },
                                        { step: 2, text: <>Open Kiwi/Firefox and install <strong className="text-foreground">Cookie-Editor</strong> from Chrome Web Store.</> },
                                        { step: 3, text: <>Login to the service (Whisk/Facebook).</> },
                                        { step: 4, text: <>Tap menu &rarr; Cookie-Editor &rarr; Export JSON.</> }
                                    ].map((item) => (
                                        <li key={item.step} className="flex gap-3 text-sm text-foreground/80">
                                            <span className="flex-shrink-0 w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center text-[11px] font-black text-primary">{item.step}</span>
                                            <span className="leading-tight">{item.text}</span>
                                        </li>
                                    ))}
                                </ol>
                            </div>
                        )}

                        {platform === 'ios' && (
                            <div className="space-y-4 animate-in fade-in slide-in-from-left-4 duration-500">
                                <p className="text-sm font-medium text-muted-foreground leading-relaxed">iPhone is restrictive. Syncing from Desktop is recommended.</p>
                                <div className="p-4 bg-amber-500/5 border border-amber-500/20 rounded-2xl text-xs text-amber-700 dark:text-amber-200/80 leading-relaxed shadow-sm">
                                    <strong className="text-amber-800 dark:text-amber-100 block mb-1">Alternative:</strong> Use "Alook Browser" app (Paid) which acts like a desktop browser with developer tools.
                                </div>
                                <ol className="space-y-3">
                                    {[
                                        { step: 1, text: <>Use <strong className="text-foreground">Method 1 (Desktop Sync)</strong> - it's much faster.</> },
                                        { step: 2, text: <>Or access this site on your Mac/PC and configure it there first. Settings are saved to the browser.</> }
                                    ].map((item) => (
                                        <li key={item.step} className="flex gap-3 text-sm text-foreground/80">
                                            <span className="flex-shrink-0 w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center text-[11px] font-black text-primary">{item.step}</span>
                                            <span className="leading-tight">{item.text}</span>
                                        </li>
                                    ))}
                                </ol>
                            </div>
                        )}
                    </div>
                </div>
            )}
        </div>
    );
}