"use client"

import { useState, useEffect } from "react";
import { User } from "@/types/models";
import { useTranslations, useLocale } from "next-intl";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Button } from "@/components/ui/button";
import { useToast } from "@/hooks/use-toast";
import { Loader2, Edit2, X, User2, Mail, Phone, Briefcase, MapPin } from "lucide-react";
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from "@/components/ui/select";
import { updateProfile } from "../_actions/profile";
import { BASE_URL } from "@/utils/url";

export function AboutTab({ user }: { user: User }) {
    const t = useTranslations();
    const locale = useLocale();
    const { toast } = useToast();
    const [isEditing, setIsEditing] = useState(false);
    const [loading, setLoading] = useState(false);
    
    // Location data states
    const [countries, setCountries] = useState<Array<{id: number, name: string}>>([]);
    const [cities, setCities] = useState<{[key: string]: string}>({});
    const [selectedCountry, setSelectedCountry] = useState<string>("");
    
    // Determine text alignment based on locale
    const isArabic = locale === 'ar';
    const textAlign = isArabic ? 'text-right' : 'text-left';
    const flexAlign = isArabic ? 'flex-row-reverse' : 'flex-row';
    
    // Fetch countries on mount
    useEffect(() => {
        fetch(`${BASE_URL}/ajax/countries`)
            .then(res => res.json())
            .then(data => setCountries(data))
            .catch(err => console.error("Failed to fetch countries:", err));
            
        // Set initial country and load cities if user has country_id
        if (user && (user as any)?.country_id) {
            const countryId = String((user as any).country_id);
            setSelectedCountry(countryId);
            
            // Load cities for the user's country
            fetch(`${BASE_URL}/ajax/citiesFromCountry/${countryId}`)
                .then(res => res.json())
                .then(data => setCities(data))
                .catch(err => console.error("Failed to fetch cities:", err));
        }
    }, [user]);
    
    // Fetch cities when country is selected (for when user changes country)
    useEffect(() => {
        if (selectedCountry && isEditing) {
            fetch(`${BASE_URL}/ajax/citiesFromCountry/${selectedCountry}`)
                .then(res => res.json())
                .then(data => setCities(data))
                .catch(err => console.error("Failed to fetch cities:", err));
        }
    }, [selectedCountry, isEditing]);
    
    async function handleSubmit(formData: FormData) {
        setLoading(true);
        const res = await updateProfile(null, formData);
        setLoading(false);
        
        if (res?.success) {
            setIsEditing(false);
            toast({
                title: t("custom.done"),
                description: res.message,
                className: "bg-green-500 text-white"
            });
        } else {
             toast({
                variant: "destructive",
                title: t("custom.failed"),
                description: res.message
            });
        }
    }
    
    const InfoItem = ({ icon: Icon, label, value }: { icon?: any, label: string, value?: string | null }) => {
        if (!value) return null;
        return (
            <div className={`flex items-start gap-3 p-3 rounded-lg bg-gray-50 hover:bg-gray-100 transition-colors ${textAlign} ${flexAlign}`}>
                <div className="flex-1 min-w-0">
                    <p className="text-xs text-gray-500 uppercase tracking-wide mb-1">{label}</p>
                    <p className="text-sm text-gray-900 break-words">{value}</p>
                </div>
                 {Icon && <Icon className="w-5 h-5 text-gray-500 mt-0.5" />}
            </div>
        );
    };
    
    if (isEditing) {
        return (
            <form action={handleSubmit} className={`rounded-lg p-6 border bg-white space-y-6 shadow-sm`}>
                <div className="flex items-center justify-between border-b pb-4">
                    
                    <div className="flex gap-2">
                        <Button type="button" variant="outline" onClick={() => setIsEditing(false)} disabled={loading}>
                            <X className="w-4 h-4 mr-2" />
                            {t("custom.cancel")}
                        </Button>
                        <Button type="submit" disabled={loading}>
                            {loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
                            {t("custom.save")}
                        </Button>
                    </div>
                    <h2 className="text-2xl text-gray-700 flex items-center gap-2">
                       
                        {t("actions.edit")} {t("routes.profile")}
                         <Edit2 className="w-6 h-6" />
                    </h2>
                </div>
                
                {/* Account Information */}
                <div className="space-y-4">
                    <h3 className={`text-lg text-gray-700 `}>
                        <User2 className="w-5 h-5" />
                        {t("auth.account_info") || "Account Information"}
                        
                    </h3>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div className="space-y-2">
                            <Label htmlFor="username">{t("auth.username") || "Username"}</Label>
                            <Input id="username" name="username" defaultValue={user?.username || ""} className={textAlign} />
                        </div>
                        <div className="space-y-2">
                            <Label htmlFor="email">{t("auth.email") || "Email"}</Label>
                            <Input id="email" name="email" type="email" defaultValue={user?.email || ""} className={textAlign} />
                        </div>
                    </div>
                </div>
                
                {/* Personal Names */}
                <div className="space-y-4">
                    <h3 className="text-lg text-gray-700">{t("auth.personal_info") || "Personal Information"}</h3>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div className="space-y-2">
                            <Label htmlFor="first_name">{t("auth.first_name") || "First Name"}</Label>
                            <Input id="first_name" name="first_name" defaultValue={user?.first_name || ""} className={textAlign} />
                        </div>
                        <div className="space-y-2">
                            <Label htmlFor="second_name">{t("auth.second_name") || "Second Name"}</Label>
                            <Input id="second_name" name="second_name" defaultValue={user?.second_name || ""} className={textAlign} />
                        </div>
                        <div className="space-y-2">
                            <Label htmlFor="third_name">{t("auth.third_name") || "Third Name"}</Label>
                            <Input id="third_name" name="third_name" defaultValue={user?.third_name || ""} className={textAlign} />
                        </div>
                        <div className="space-y-2">
                            <Label htmlFor="fourth_name">{t("auth.fourth_name") || "Fourth Name"}</Label>
                            <Input id="fourth_name" name="fourth_name" defaultValue={user?.fourth_name || ""} className={textAlign} />
                        </div>
                        <div className="space-y-2">
                            <Label htmlFor="name_an">{t("auth.name_an") || "Full Name (Arabic)"}</Label>
                            <Input id="name_an" name="name_an" defaultValue={(user as any)?.name_an || ""} className={textAlign} />
                        </div>
                    </div>
                </div>
                
                {/* Contact & Work */}
                <div className="space-y-4">
                    <h3 className={`text-lg text-gray-700 flex items-center gap-2 ${flexAlign}`}>
                        <Briefcase className="w-5 h-5" />
                        {t("auth.contact_work") || "Contact & Work"}
                    </h3>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div className="space-y-2">
                            <Label htmlFor="phone">{t("auth.phone") || "Phone"}</Label>
                            <Input id="phone" name="phone" defaultValue={user?.phone || ""} className={textAlign} />
                        </div>
                        <div className="space-y-2">
                            <Label htmlFor="function">{t("auth.function") || "Job Title"}</Label>
                            <Input id="function" name="function" defaultValue={user?.function || ""} className={textAlign} />
                        </div>
                        <div className="space-y-2">
                            <Label htmlFor="gender">{t("auth.gender") || "Gender"}</Label>
                            <Input id="gender" name="gender" defaultValue={user?.gender || ""} className={textAlign} />
                        </div>
                    </div>
                </div>
                
                {/* Location */}
                <div className="space-y-4">
                    <h3 className="text-lg text-gray-700">
                        <MapPin className="w-5 h-5" />
                        {t("auth.location") || "Location"}
                    </h3>
                    <div className="grid grid-cols-1 gap-6">
                        {/* Nationality - Full width */}
                        <div className="space-y-2">
                            <Label htmlFor="nastionality_id" className="text-sm">{t("auth.nationality") || "Nationality"}</Label>
                            <Select name="nastionality_id" defaultValue={String((user as any)?.nastionality_id || (user as any)?.nationality_id || "")}>
                                <SelectTrigger className="w-full">
                                    <SelectValue placeholder={t("auth.select_nationality") || "Select nationality"} />
                                </SelectTrigger>
                                <SelectContent>
                                    {countries.map((country) => (
                                        <SelectItem key={country.id} value={String(country.id)}>
                                            {country.name}
                                        </SelectItem>
                                    ))}
                                </SelectContent>
                            </Select>
                        </div>
                        
                        {/* Country and City - Side by side on larger screens */}
                        <div className="grid grid-cols-1  gap-6">
                            <div className="space-y-2">
                                <Label htmlFor="country_id" className="text-sm">{t("auth.country") || "Country"}</Label>
                                <Select 
                                    name="country_id" 
                                    defaultValue={String((user as any)?.country_id || "")}
                                    onValueChange={(value) => setSelectedCountry(value)}
                                >
                                    <SelectTrigger className="w-full">
                                        <SelectValue placeholder={t("auth.select_country") || "Select country"} />
                                    </SelectTrigger>
                                    <SelectContent>
                                        {countries.map((country) => (
                                            <SelectItem key={country.id} value={String(country.id)}>
                                                {country.name}
                                            </SelectItem>
                                        ))}
                                    </SelectContent>
                                </Select>
                            </div>
                            <div className="space-y-2">
                                <Label htmlFor="city_id" className="text-sm">{t("auth.city") || "City"}</Label>
                                <Select name="city_id" defaultValue={String((user as any)?.city_id || "")}>
                                    <SelectTrigger className="w-full">
                                        <SelectValue placeholder={t("auth.select_city") || "Select city"} />
                                    </SelectTrigger>
                                    <SelectContent>
                                        {Object.entries(cities).map(([id, name]) => (
                                            <SelectItem key={id} value={id}>
                                                {name}
                                            </SelectItem>
                                        ))}
                                    </SelectContent>
                                </Select>
                            </div>
                        </div>
                    </div>
                    
                </div>
                
                <input type="hidden" name="avatar" value={user?.avatar || ""} />
            </form>
        );
    }
    
    return (
        <div dir={isArabic ? 'rtl' : 'ltr'} className={`rounded-lg p-6 border bg-white space-y-6 shadow-sm ${textAlign}`}>
            <div className="flex items-center justify-between border-b pb-4">
                
                <h2 className="text-2xl text-gray-700">
                    {t("profile.about")}
                </h2>
                <Button onClick={() => setIsEditing(true)} variant="outline" className="gap-2">
                    <Edit2 className="w-4 h-4" />
                    {t("actions.edit")}
                </Button>
               
            </div>
            
            {/* Bio Section */}
            {user?.about && (
                <div className="p-4 rounded-lg bg-blue-50 border border-blue-100">
                    <p className="text-sm text-gray-700 leading-relaxed italic">
                        "{user.about}"
                    </p>
                </div>
            )}
            
            {/* Account Information */}
            <div className="space-y-3">
                <h3 className={`text-lg text-gray-700 flex items-center gap-2`}>
                    <User2 className="w-5 h-5 text-blue-600" />
                    {t("auth.account_info") || "Account Information"}
                </h3>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                    <InfoItem icon={User2} label={t("auth.username") || "Username"} value={user?.username} />
                    <InfoItem icon={Mail} label={t("auth.email") || "Email"} value={user?.email} />
                    <InfoItem icon={Phone} label={t("auth.phone") || "Phone"} value={user?.phone} />
                    <InfoItem icon={Briefcase} label={t("auth.function") || "Job Title"} value={user?.function} />
                </div>
            </div>
            
            {/* Personal Information */}
            <div className="space-y-3">
                <h3 className="text-lg text-gray-700">{t("auth.personal_info") || "Personal Information"}</h3>
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
                    <InfoItem label={t("auth.first_name") || "First Name"} value={user?.first_name} />
                    <InfoItem label={t("auth.second_name") || "Second Name"} value={user?.second_name} />
                    <InfoItem label={t("auth.third_name") || "Third Name"} value={user?.third_name} />
                    <InfoItem label={t("auth.fourth_name") || "Fourth Name"} value={user?.fourth_name} />
                    <InfoItem label={t("auth.gender") || "Gender"} value={user?.gender} />
                </div>
            </div>
            
            {/* Location Information */}
            <div className="space-y-3">
                <h3 className={`text-lg text-gray-700 flex items-center gap-2 `}>
                    <MapPin className="w-5 h-5 text-green-600" />
                    {t("auth.location") || "Location Information"}
                </h3>
                <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
                    <InfoItem icon={MapPin} label={t("auth.country") || "Country"} value={((user?.country as any)?.name || user?.country) as string} />
                    <InfoItem icon={MapPin} label={t("auth.city") || "City"} value={((user?.city as any)?.name || user?.city) as string} />
                    <InfoItem icon={MapPin} label={t("auth.nationality") || "Nationality"} value={((user?.nationality as any)?.name || user?.nationality) as string} />
                </div>
            </div>
        </div>
    )
}