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 {
    User,
    ShieldCheck,
    Globe,
    Bell,
    Moon,
    Download,
    Trash2,
    LogOut,
    CheckCircle,
    Building
} from 'lucide-react';

export const Profile = () => {
    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>

                {/* 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>
    );
};