import React, { useState } from 'react';
import { GlassCard } from '@/components/ui/GlassCard';
import { Button } from '@/components/ui/button';
import { Switch } from '@/components/ui/switch';
import { Label } from '@/components/ui/label';
import { Separator } from '@/components/ui/separator';
import { Badge } from '@/components/ui/badge';
import { useTheme } from '@/context/ThemeContext';
import {
    User,
    ShieldCheck,
    Globe,
    Bell,
    Moon,
    Download,
    Trash2,
    LogOut,
    CheckCircle,
    Building,
    Sparkles
} from 'lucide-react';

export const Profile = () => {
    const { theme, setTheme } = useTheme();
    const [isShariaEnabled, setIsShariaEnabled] = useState(false);
    const [notifications, setNotifications] = useState(true);
    const [currency, setCurrency] = useState('AED');

    return (
        <div className="max-w-4xl mx-auto space-y-6 animate-fade-in pb-20">
            {/* Header */}
            <div className="flex flex-col sm:flex-row items-center sm:items-start gap-4 mb-8 text-center sm:text-left">
                <div className="w-20 h-20 rounded-full bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center text-3xl shadow-lg border-4 border-white shrink-0">
                    👩‍💼
                </div>
                <div>
                    <h1 className="text-2xl font-bold text-slate-900">Anjali</h1>
                    <div className="flex flex-col sm:flex-row items-center gap-2 mt-1">
                        <Badge variant="outline" className="bg-green-50 text-green-700 border-green-200 gap-1">
                            <CheckCircle className="w-3 h-3" /> Verified Investor
                        </Badge>
                        <span className="text-sm text-slate-500">Member since 2023</span>
                    </div>
                </div>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                {/* Identity & KYC */}
                <GlassCard className="p-6 space-y-6">
                    <div className="flex items-center gap-3 mb-4">
                        <div className="p-2 bg-blue-100 rounded-lg text-blue-600">
                            <ShieldCheck className="w-5 h-5" />
                        </div>
                        <h3 className="text-lg font-semibold">Identity & KYC</h3>
                    </div>

                    <div className="space-y-4">
                        <div className="flex justify-between items-center p-3 bg-white/50 rounded-lg border border-white/40">
                            <div>
                                <p className="text-xs text-slate-500 uppercase tracking-wide">Emirates ID</p>
                                <p className="font-mono text-slate-800">784-1988-1234567-9</p>
                            </div>
                            <Badge className="bg-green-100 text-green-700 hover:bg-green-100">Verified via UAE Pass</Badge>
                        </div>

                        <div className="flex justify-between items-center p-3 bg-white/50 rounded-lg border border-white/40">
                            <div>
                                <p className="text-xs text-slate-500 uppercase tracking-wide">Investor Number (NIN)</p>
                                <p className="font-mono text-slate-800">99200312</p>
                            </div>
                            <Badge variant="outline" className="text-xs">ADX / DFM Linked</Badge>
                        </div>
                    </div>
                </GlassCard>

                {/* Regional Preferences */}
                <GlassCard className="p-6 space-y-6">
                    <div className="flex items-center gap-3 mb-4">
                        <div className="p-2 bg-purple-100 rounded-lg text-purple-600">
                            <Globe className="w-5 h-5" />
                        </div>
                        <h3 className="text-lg font-semibold">Regional Preferences</h3>
                    </div>

                    <div className="space-y-4">
                        <div className="flex items-center justify-between">
                            <div className="space-y-0.5">
                                <Label className="text-base">Base Currency</Label>
                                <p className="text-sm text-slate-500">Locked to AED for local compliance</p>
                            </div>
                            <div className="flex items-center gap-2 bg-slate-100 rounded-lg p-1">
                                <Button
                                    size="sm"
                                    variant={currency === 'AED' ? 'default' : 'ghost'}
                                    className={currency === 'AED' ? "bg-white text-slate-900 shadow-sm" : ""}
                                    onClick={() => setCurrency('AED')}
                                >
                                    AED
                                </Button>
                                <Button
                                    size="sm"
                                    variant={currency === 'USD' ? 'default' : 'ghost'}
                                    className={currency === 'USD' ? "bg-white text-slate-900 shadow-sm" : ""}
                                    onClick={() => setCurrency('USD')}
                                >
                                    USD
                                </Button>
                            </div>
                        </div>
                        <Separator />
                        <div className="flex items-center justify-between">
                            <div className="space-y-0.5">
                                <Label className="text-base flex items-center gap-2">
                                    Islamic Finance Mode <Moon className="w-4 h-4 text-green-600" />
                                </Label>
                                <p className="text-sm text-slate-500">Hide non-Sharia compliant assets</p>
                            </div>
                            <Switch checked={isShariaEnabled} onCheckedChange={setIsShariaEnabled} className="data-[state=checked]:bg-green-600" />
                        </div>
                    </div>
                </GlassCard>

                {/* App Settings */}
                <GlassCard className="p-6 space-y-6">
                    <div className="flex items-center gap-3 mb-4">
                        <div className="p-2 bg-orange-100 rounded-lg text-orange-600">
                            <User className="w-5 h-5" />
                        </div>
                        <h3 className="text-lg font-semibold">App Settings</h3>
                    </div>

                    <div className="space-y-4">
                        <div className="flex items-center justify-between">
                            <div className="space-y-0.5">
                                <Label className="text-base">Notifications</Label>
                                <p className="text-sm text-slate-500">Market alerts and diverse insights</p>
                            </div>
                            <Switch checked={notifications} onCheckedChange={setNotifications} />
                        </div>
                    </div>
                </GlassCard>

                {/* Appearance & Themes */}
                <GlassCard className="p-6 space-y-6">
                    <div className="flex items-center gap-3 mb-4">
                        <div className="p-2 bg-pink-100 rounded-lg text-pink-600">
                            <Sparkles className="w-5 h-5" />
                        </div>
                        <h3 className="text-lg font-semibold">Appearance</h3>
                    </div>

                    <div className="grid grid-cols-2 gap-3">
                        {['default', 'dubai', 'minimal', 'nature'].map((themeName) => (
                            <button
                                key={themeName}
                                onClick={() => setTheme(themeName as any)}
                                className={`relative h-20 rounded-xl overflow-hidden border-2 transition-all ${theme === themeName ? 'border-blue-600 shadow-md scale-[1.02]' : 'border-transparent hover:scale-[1.02]'}`}
                            >
                                {themeName === 'default' && <div className="absolute inset-0 bg-gradient-to-br from-purple-100 to-blue-100" />}
                                {themeName === 'dubai' && <img src="https://images.unsplash.com/photo-1512453979798-5ea9ba6a80f4?q=80&w=300&auto=format&fit=crop" className="absolute inset-0 w-full h-full object-cover" />}
                                {themeName === 'minimal' && <img src="https://images.unsplash.com/photo-1550684848-fac1c5b4e853?q=80&w=300&auto=format&fit=crop" className="absolute inset-0 w-full h-full object-cover" />}
                                {themeName === 'nature' && <img src="https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?q=80&w=300&auto=format&fit=crop" className="absolute inset-0 w-full h-full object-cover" />}

                                <div className="absolute inset-0 bg-black/20 flex items-center justify-center">
                                    <span className="text-white font-medium text-xs capitalized drop-shadow-md capitalize">{themeName}</span>
                                </div>
                                {theme === themeName && (
                                    <div className="absolute top-1 right-1 bg-blue-600 rounded-full p-0.5">
                                        <CheckCircle className="w-3 h-3 text-white" />
                                    </div>
                                )}
                            </button>
                        ))}
                    </div>
                </GlassCard>

                {/* Data Privacy (UAE PDPL) */}
                <GlassCard className="p-6 space-y-6 border-red-100/50">
                    <div className="flex items-center gap-3 mb-4">
                        <div className="p-2 bg-red-100 rounded-lg text-red-600">
                            <ShieldCheck className="w-5 h-5" />
                        </div>
                        <h3 className="text-lg font-semibold">Data Privacy</h3>
                    </div>

                    <div className="space-y-4">
                        <Button variant="outline" className="w-full justify-start gap-2 border-slate-200">
                            <Download className="w-4 h-4" /> Download My Data (UAE PDPL)
                        </Button>
                        <Button variant="ghost" className="w-full justify-start gap-2 text-red-600 hover:text-red-700 hover:bg-red-50">
                            <Trash2 className="w-4 h-4" /> Delete Account
                        </Button>
                        <p className="text-xs text-slate-400 text-center pt-2">
                            Your data is stored locally in UAE data centers in compliance with Federal Decree-Law No. 45 of 2021.
                        </p>
                    </div>
                </GlassCard>
            </div>

            <div className="flex justify-center pt-8">
                <Button variant="ghost" className="text-slate-500 gap-2">
                    <LogOut className="w-4 h-4" /> Sign Out
                </Button>
            </div>
        </div>
    );
};