import { useAuth } from '@/contexts/AuthContext'
import { useProfile } from '@/contexts/ProfileProvider'
import { useState, useEffect } from 'react'
import { Camera, Loader2, Phone, MapPin, Shield, Trophy, Activity, Plus, Trash2, Pencil, Home, Building2, Edit2, Check, X } from 'lucide-react'
import AvatarUploadDialog from '@/components/generic/AvatarUploadDialog'

import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Separator } from '@/components/ui/separator'
import { Badge } from '@/components/ui/badge'
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogClose } from '@/components/ui/dialog'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, } from '@/components/ui/alert-dialog'
import { useForm, Controller } from 'react-hook-form'
import { z } from 'zod'
import { zodResolver } from '@hookform/resolvers/zod'

import { ROLE_CONFIG, AVATAR_COLORS } from '@/data/profile.data'

// ─── Schemas ──────────────────────────────────────────────────────────────────
const addressSchema = z.object({
    address_type: z.string().min(1, 'Required'),
    street: z.string().min(1, 'Required'),
    city: z.string().min(1, 'Required'),
    state: z.string().min(1, 'Required'),
    zip: z.string().min(1, 'Required'),
    country: z.string().min(1, 'Required'),
})

const phoneSchema = z.object({
    phone_type: z.string().min(1, 'Required'),
    country_code: z.string().min(1, 'Required'),
    number: z.string().min(7, 'Required'),
})

// ─── Address Dialog ───────────────────────────────────────────────────────────
function AddressDialog({ open, onClose, initial, onSave }) {
    const { register, handleSubmit, control, formState: { errors } } = useForm({
        resolver: zodResolver(addressSchema),
        defaultValues: initial ?? {
            address_type: 'home', street: '', city: '',
            state: '', zip: '', country: 'Philippines',
        },
    })

    const onSubmit = (data) => {
        onSave({ ...data, full_address: `${data.street}, ${data.city}, ${data.state}, ${data.country}, ${data.zip}` })
        onClose()
    }

    return (
        <Dialog open={open} onOpenChange={onClose}>
            <DialogContent className="sm:max-w-md">
                <DialogHeader>
                    <DialogTitle>{initial ? 'Edit address' : 'Add address'}</DialogTitle>
                </DialogHeader>
                <form onSubmit={handleSubmit(onSubmit)} className="space-y-3 py-1">

                    <div className="space-y-1.5">
                        <Label>Address type</Label>
                        <Controller name="address_type" control={control} render={({ field }) => (
                            <Select onValueChange={field.onChange} defaultValue={field.value}>
                                <SelectTrigger><SelectValue placeholder="Select type" /></SelectTrigger>
                                <SelectContent>
                                    <SelectItem value="home">Home</SelectItem>
                                    <SelectItem value="work">Work</SelectItem>
                                    <SelectItem value="province">Province</SelectItem>
                                    <SelectItem value="other">Other</SelectItem>
                                </SelectContent>
                            </Select>
                        )} />
                        {errors.address_type && <p className="text-xs text-destructive">{errors.address_type.message}</p>}
                    </div>

                    <div className="space-y-1.5">
                        <Label>Street</Label>
                        <Input placeholder="123 Mabini St" {...register('street')} />
                        {errors.street && <p className="text-xs text-destructive">{errors.street.message}</p>}
                    </div>

                    <div className="grid grid-cols-2 gap-3">
                        <div className="space-y-1.5">
                            <Label>City</Label>
                            <Input placeholder="Manila" {...register('city')} />
                            {errors.city && <p className="text-xs text-destructive">{errors.city.message}</p>}
                        </div>
                        <div className="space-y-1.5">
                            <Label>State / Region</Label>
                            <Input placeholder="NCR" {...register('state')} />
                            {errors.state && <p className="text-xs text-destructive">{errors.state.message}</p>}
                        </div>
                    </div>

                    <div className="grid grid-cols-2 gap-3">
                        <div className="space-y-1.5">
                            <Label>ZIP code</Label>
                            <Input placeholder="1000" {...register('zip')} />
                            {errors.zip && <p className="text-xs text-destructive">{errors.zip.message}</p>}
                        </div>
                        <div className="space-y-1.5">
                            <Label>Country</Label>
                            <Input placeholder="Philippines" {...register('country')} />
                            {errors.country && <p className="text-xs text-destructive">{errors.country.message}</p>}
                        </div>
                    </div>

                    <DialogFooter>
                        <DialogClose asChild>
                            <Button type="button" variant="outline">Cancel</Button>
                        </DialogClose>
                        <Button type="submit">{initial ? 'Save changes' : 'Add address'}</Button>
                    </DialogFooter>
                </form>
            </DialogContent>
        </Dialog>
    )
}

// ─── Phone Dialog ─────────────────────────────────────────────────────────────
function PhoneDialog({ open, onClose, initial, onSave }) {
    const { register, handleSubmit, control, formState: { errors } } = useForm({
        resolver: zodResolver(phoneSchema),
        defaultValues: initial ?? { phone_type: 'mobile', country_code: '63', number: '' },
    })

    const onSubmit = (data) => {
        onSave({ ...data, full_number: data.country_code + data.number })
        onClose()
    }

    return (
        <Dialog open={open} onOpenChange={onClose}>
            <DialogContent className="sm:max-w-sm">
                <DialogHeader>
                    <DialogTitle>{initial ? 'Edit phone number' : 'Add phone number'}</DialogTitle>
                </DialogHeader>
                <form onSubmit={handleSubmit(onSubmit)} className="space-y-3 py-1">

                    <div className="space-y-1.5">
                        <Label>Phone type</Label>
                        <Controller name="phone_type" control={control} render={({ field }) => (
                            <Select onValueChange={field.onChange} defaultValue={field.value}>
                                <SelectTrigger><SelectValue placeholder="Select type" /></SelectTrigger>
                                <SelectContent>
                                    <SelectItem value="mobile">Mobile</SelectItem>
                                    <SelectItem value="home">Home</SelectItem>
                                    <SelectItem value="work">Work</SelectItem>
                                    <SelectItem value="other">Other</SelectItem>
                                </SelectContent>
                            </Select>
                        )} />
                        {errors.phone_type && <p className="text-xs text-destructive">{errors.phone_type.message}</p>}
                    </div>

                    <div className="flex gap-2">
                        <div className="space-y-1.5 w-24">
                            <Label>Code</Label>
                            <Input placeholder="63" {...register('country_code')} />
                            {errors.country_code && <p className="text-xs text-destructive">{errors.country_code.message}</p>}
                        </div>
                        <div className="space-y-1.5 flex-1">
                            <Label>Number</Label>
                            <Input placeholder="9123456789" {...register('number')} />
                            {errors.number && <p className="text-xs text-destructive">{errors.number.message}</p>}
                        </div>
                    </div>

                    <DialogFooter>
                        <DialogClose asChild>
                            <Button type="button" variant="outline">Cancel</Button>
                        </DialogClose>
                        <Button type="submit">{initial ? 'Save changes' : 'Add number'}</Button>
                    </DialogFooter>
                </form>
            </DialogContent>
        </Dialog>
    )
}

// ─── Delete Confirm ───────────────────────────────────────────────────────────
function DeleteConfirm({ open, onClose, onConfirm, label }) {
    return (
        <AlertDialog open={open} onOpenChange={onClose}>
            <AlertDialogContent>
                <AlertDialogHeader>
                    <AlertDialogTitle>Delete {label}?</AlertDialogTitle>
                    <AlertDialogDescription>
                        This will remove the {label} from your profile. This cannot be undone.
                    </AlertDialogDescription>
                </AlertDialogHeader>
                <AlertDialogFooter>
                    <AlertDialogCancel>Cancel</AlertDialogCancel>
                    <AlertDialogAction
                        onClick={onConfirm}
                        className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
                    >
                        Delete
                    </AlertDialogAction>
                </AlertDialogFooter>
            </AlertDialogContent>
        </AlertDialog>
    )
}

// ─── Page ─────────────────────────────────────────────────────────────────────
export default function ProfilePage() {
    const { user } = useAuth()
    const {
        profile, getProfile,
        updateProfile, profileLoading,
        uploadAvatar, deleteAvatar, avatarLoading,
    } = useProfile()

    const isClient = user?.acc_type === 'client'
    const role = ROLE_CONFIG[user?.acc_type] ?? { label: user?.acc_type, variant: 'outline' }
    // Use fresh profile data; fall back to auth context while loading
    const info = profile?.personal_info ?? user?.personal_info

    const [avatarDialogOpen, setAvatarDialogOpen] = useState(false)

    const [editing, setEditing] = useState(false)
    const [addresses, setAddresses] = useState(info?.addresses ?? [])
    const [phones, setPhones] = useState(info?.phone_number ?? [])

    const [addrDialog, setAddrDialog] = useState({ open: false, index: null })
    const [deleteAddr, setDeleteAddr] = useState({ open: false, index: null })
    const [phoneDialog, setPhoneDialog] = useState({ open: false, index: null })
    const [deletePhone, setDeletePhone] = useState({ open: false, index: null })

    const fullName = info?.name?.full_name ?? user?.email ?? 'User'
    const initials = ((info?.name?.given_name?.[0] ?? '') + (info?.name?.last_name?.[0] ?? '')).toUpperCase() || user?.email?.[0]?.toUpperCase() || 'U'
    const avatarUrl = info?.avatar?.url ?? null
    const avatarColor = AVATAR_COLORS[user?.acc_type] ?? 'bg-muted text-muted-foreground'

    // Load fresh profile data on mount
    useEffect(() => { getProfile(); }, [])

    // Sync phones/addresses when profile arrives from API
    useEffect(() => {
        if (!profile?.personal_info) return
        setAddresses(profile.personal_info.addresses ?? [])
        setPhones(profile.personal_info.phone_number ?? [])
    }, [profile])

    // Save profile changes (phones + addresses)
    const handleSave = async () => {
        const result = await updateProfile({ phone_number: phones, addresses })
        if (result?.success) setEditing(false)
    }

    // ── Address handlers ──
    const handleSaveAddress = (data) => {
        if (addrDialog.index !== null) {
            setAddresses((p) => p.map((a, i) => i === addrDialog.index ? data : a))
        } else {
            setAddresses((p) => [...p, data])
        }
    }

    const handleDeleteAddress = () => {
        setAddresses((p) => p.filter((_, i) => i !== deleteAddr.index))
        setDeleteAddr({ open: false, index: null })
    }

    // ── Phone handlers ──
    const handleSavePhone = (data) => {
        if (phoneDialog.index !== null) {
            setPhones((p) => p.map((ph, i) => i === phoneDialog.index ? data : ph))
        } else {
            setPhones((p) => [...p, data])
        }
    }

    const handleDeletePhone = () => {
        setPhones((p) => p.filter((_, i) => i !== deletePhone.index))
        setDeletePhone({ open: false, index: null })
    }

    return (
        <TooltipProvider>
            <div className="min-h-screen bg-muted/30 p-4 md:p-8">
                <div className="max-w-4xl mx-auto space-y-6">

                    {/* ── Header ── */}
                    <Card>
                        <CardContent className="py-4">
                            <div className="flex flex-col sm:flex-row items-start sm:items-center gap-5">
                                <div className="relative">
                                    <Avatar className="w-20 h-20">
                                        <AvatarImage src={avatarUrl} alt={fullName} />
                                        <AvatarFallback className={`text-lg font-semibold ${avatarColor}`}>{initials}</AvatarFallback>
                                    </Avatar>
                                    <Tooltip>
                                        <TooltipTrigger asChild>
                                            <button
                                                className="absolute -bottom-1 -right-1 p-1.5 rounded-full bg-primary text-primary-foreground shadow hover:opacity-80 transition-opacity"
                                                onClick={() => setAvatarDialogOpen(true)}
                                            >
                                                <Camera size={11} />
                                            </button>
                                        </TooltipTrigger>
                                        <TooltipContent>Change photo</TooltipContent>
                                    </Tooltip>
                                </div>

                                {/* Name + role */}
                                <div className="flex-1 min-w-0">
                                    <h1 className="text-xl font-semibold">{fullName}</h1>
                                    <p className="text-sm text-muted-foreground">{user?.email}</p>
                                    <div className="mt-2 flex items-center gap-2 flex-wrap">
                                        {info?.occupation && (
                                            <Badge className="bg-blue-50 text-blue-700 dark:bg-blue-950 dark:text-blue-300">
                                                {info.occupation}
                                            </Badge>
                                        )}
                                        <Badge variant={role.variant}>{role.label}</Badge>
                                    </div>
                                </div>

                                {/* ← Outside flex-1, sits at the end */}
                                <div className="flex gap-2 shrink-0">
                                    {editing ? (
                                        <>
                                            <Button size="sm" onClick={handleSave} disabled={profileLoading} className="gap-1.5">
                                                {profileLoading
                                                    ? <Loader2 size={13} className="animate-spin" />
                                                    : <Check size={13} />
                                                }
                                                Save profile
                                            </Button>
                                            <Button size="sm" variant="outline" onClick={() => setEditing(false)} className="gap-1.5">
                                                <X size={13} /> Cancel
                                            </Button>
                                        </>
                                    ) : (
                                        <Button size="sm" variant="outline" onClick={() => setEditing(true)} className="gap-1.5">
                                            <Edit2 size={13} /> Edit profile
                                        </Button>
                                    )}
                                </div>
                            </div>
                        </CardContent>
                    </Card>

                    <div className="grid grid-cols-1 md:grid-cols-3 gap-6">

                        {/* ── Left: Phone + Address ── */}
                        <div className="md:col-span-1 space-y-4">

                            {/* Phone numbers */}
                            <Card>
                                <CardHeader className="">
                                    <CardTitle className="text-sm font-semibold flex items-center gap-2">
                                        <Phone size={14} className="text-muted-foreground" />
                                        Phone numbers
                                        {editing && (
                                            <Button size="icon" variant="ghost" className="ml-auto size-6 rounded-md"
                                                onClick={() => setPhoneDialog({ open: true, index: null })}>
                                                <Plus size={13} />
                                            </Button>
                                        )}
                                    </CardTitle>
                                </CardHeader>
                                <CardContent>
                                    <Separator className="" />
                                    {phones.length === 0 ? (
                                        <p className="text-xs text-muted-foreground py-2">No phone numbers added.</p>
                                    ) : (
                                        <div className="divide-y m-0">
                                            {phones.map((p, i) => (
                                                <div key={i} className="flex items-center gap-2 group py-2.5">
                                                    <div className="flex-1 min-w-0">
                                                        <p className="text-sm font-medium">+{p.country_code} {p.number}</p>
                                                        <p className="text-xs text-muted-foreground capitalize">{p.phone_type}</p>
                                                    </div>
                                                    {editing && (
                                                        <div className="flex gap-1 shrink-0">
                                                            <Button size="icon" variant="ghost" className="size-6 rounded-md"
                                                                onClick={() => setPhoneDialog({ open: true, index: i })}>
                                                                <Pencil size={11} />
                                                            </Button>
                                                            <Button size="icon" variant="ghost" className="size-6 rounded-md text-destructive hover:text-destructive"
                                                                onClick={() => setDeletePhone({ open: true, index: i })}>
                                                                <Trash2 size={11} />
                                                            </Button>
                                                        </div>
                                                    )}
                                                </div>
                                            ))}
                                        </div>
                                    )}
                                </CardContent>
                            </Card>

                            {/* Addresses */}
                            <Card>
                                <CardHeader className="">
                                    <CardTitle className="text-sm font-semibold flex items-center gap-2">
                                        <MapPin size={14} className="text-muted-foreground" />
                                        Addresses
                                        {editing && (
                                            <Button size="icon" variant="ghost" className="ml-auto size-6 rounded-md"
                                                onClick={() => setAddrDialog({ open: true, index: null })}>
                                                <Plus size={13} />
                                            </Button>
                                        )}
                                    </CardTitle>
                                </CardHeader>
                                <CardContent>
                                    <Separator className="" />
                                    {addresses.length === 0 ? (
                                        <p className="text-xs text-muted-foreground py-2">No addresses added.</p>
                                    ) : (
                                        <div className="divide-y">
                                            {addresses.map((a, i) => (
                                                <div key={i} className="flex items-start gap-2 group py-2.5">
                                                    {a.address_type === 'work'
                                                        ? <Building2 size={13} className="mt-1 text-muted-foreground shrink-0" />
                                                        : <Home size={13} className="mt-1 text-muted-foreground shrink-0" />
                                                    }
                                                    <div className="flex-1 min-w-0">
                                                        <p className="text-xs font-medium capitalize text-muted-foreground">{a.address_type}</p>
                                                        <p className="text-sm leading-snug">{a.full_address}</p>
                                                    </div>
                                                    <div className="flex gap-1 shrink-0">
                                                        {editing && (
                                                            <div className="flex gap-1 shrink-0">
                                                                <Button size="icon" variant="ghost" className="size-6 rounded-md"
                                                                    onClick={() => setAddrDialog({ open: true, index: i })}>
                                                                    <Pencil size={11} />
                                                                </Button>
                                                                <Button size="icon" variant="ghost" className="size-6 rounded-md text-destructive hover:text-destructive"
                                                                    onClick={() => setDeleteAddr({ open: true, index: i })}>
                                                                    <Trash2 size={11} />
                                                                </Button>
                                                            </div>
                                                        )}
                                                    </div>
                                                </div>
                                            ))}
                                        </div>
                                    )}
                                </CardContent>
                            </Card>
                        </div>

                        {/* ── Right column ── */}
                        <div className="md:col-span-2 space-y-6">
                            {isClient ? (
                                <>
                                    <Card>
                                        <CardHeader className="pb-2">
                                            <CardTitle className="text-sm font-semibold flex items-center gap-2">
                                                <Activity size={14} className="text-muted-foreground" />
                                                Recent activities
                                            </CardTitle>
                                        </CardHeader>
                                        <CardContent>
                                            <Separator className="mb-1" />
                                            <p className="text-xs text-muted-foreground py-2">No recent activities.</p>
                                        </CardContent>
                                    </Card>

                                    <Card>
                                        <CardHeader className="pb-2">
                                            <CardTitle className="text-sm font-semibold flex items-center gap-2">
                                                <Trophy size={14} className="text-muted-foreground" />
                                                Achievements
                                            </CardTitle>
                                        </CardHeader>
                                        <CardContent>
                                            <Separator className="mb-3" />
                                            <p className="text-xs text-muted-foreground py-2">No achievements yet.</p>
                                        </CardContent>
                                    </Card>
                                </>
                            ) : (
                                <Card className="h-full">
                                    <CardContent className="flex flex-col items-center justify-center text-center gap-3 min-h-48 pt-6">
                                        <Shield size={32} className="text-muted-foreground/30" />
                                        <div>
                                            <p className="text-sm font-medium">Nothing else to show</p>
                                            <p className="text-xs text-muted-foreground mt-1">
                                                Activities and achievements are only visible to clients.
                                            </p>
                                        </div>
                                    </CardContent>
                                </Card>
                            )}
                        </div>
                    </div>
                </div>
            </div>

            {/* ── Dialogs ── */}
            <AddressDialog
                open={addrDialog.open}
                onClose={() => setAddrDialog({ open: false, index: null })}
                initial={addrDialog.index !== null ? addresses[addrDialog.index] : null}
                onSave={handleSaveAddress}
            />
            <DeleteConfirm
                open={deleteAddr.open}
                onClose={() => setDeleteAddr({ open: false, index: null })}
                onConfirm={handleDeleteAddress}
                label="address"
            />
            <PhoneDialog
                open={phoneDialog.open}
                onClose={() => setPhoneDialog({ open: false, index: null })}
                initial={phoneDialog.index !== null ? phones[phoneDialog.index] : null}
                onSave={handleSavePhone}
            />
            <DeleteConfirm
                open={deletePhone.open}
                onClose={() => setDeletePhone({ open: false, index: null })}
                onConfirm={handleDeletePhone}
                label="phone number"
            />

            <AvatarUploadDialog
                open={avatarDialogOpen}
                onClose={() => setAvatarDialogOpen(false)}
                currentAvatarUrl={avatarUrl ?? ''}
                initials={initials}
                onUpload={uploadAvatar}
                onDelete={deleteAvatar}
                loading={avatarLoading}
            />
        </TooltipProvider>
    )
}