"use client";
import { X, User, Briefcase, GraduationCap, Activity, Phone, Mail } from "lucide-react";
import { useState, useEffect } from "react";

type ProfileFormData = {
    fullname: string;
    title: string;
    degree: string;
    specialisation: string;
    phone: string;
    email: string;
};

type EditProfileModalProps = {
    open: boolean;
    onClose: () => void;
    initialData?: Partial<ProfileFormData>;
    onSave?: (data: ProfileFormData) => void;
};

function FieldInput({
    icon,
    label,
    value,
    placeholder,
    onChange,
    disabled = false,
}: {
    icon: React.ReactNode;
    label: string;
    value: string;
    placeholder?: string;
    onChange: (val: string) => void;
    disabled?: boolean;
}) {
    return (
        <div className="flex flex-col gap-2">
            <label className="text-sm font-medium text-[#4b5563]">{label}</label>
            <div
                className={`flex items-center gap-3 rounded-xl border px-4 py-3.5 transition-colors ${disabled
                    ? "bg-[#f7f7f8] border-[#e5e7eb] cursor-not-allowed"
                    : "bg-white border-[#e5e7eb] focus-within:border-[#d4537e] focus-within:ring-2 focus-within:ring-[#fceef3]"
                    }`}
            >
                <span className="text-[#d4537e] flex-shrink-0">{icon}</span>
                <input
                    type="text"
                    value={value}
                    placeholder={placeholder}
                    disabled={disabled}
                    onChange={(e) => onChange(e.target.value)}
                    className="w-full bg-transparent border-none outline-none text-base text-[#111111] placeholder:text-[#9ca3af] disabled:text-[#9ca3af] disabled:cursor-not-allowed"
                />
            </div>
        </div>
    );
}

function SectionHeading({
    icon,
    iconColorClass,
    iconBgClass,
    title,
}: {
    icon: React.ReactNode;
    iconColorClass: string;
    iconBgClass: string;
    title: string;
}) {
    return (
        <div className="flex items-center gap-2.5 mb-4">
            <span className={`w-9 h-9 rounded-lg flex items-center justify-center flex-shrink-0 ${iconBgClass} ${iconColorClass}`}>
                {icon}
            </span>
            <span className="text-sm font-semibold uppercase tracking-wider text-[#4b5563]">{title}</span>
        </div>
    );
}

export default function EditProfileModal({ open, onClose, initialData, onSave }: EditProfileModalProps) {
    const [form, setForm] = useState<ProfileFormData>({
        fullname: "",
        title: "",
        degree: "",
        specialisation: "",
        phone: "",
        email: "",
    });

    useEffect(() => {
        if (initialData) {
            setForm({
                fullname: initialData.fullname || "",
                title: initialData.title || "",
                degree: initialData.degree || "",
                specialisation: initialData.specialisation || "",
                phone: initialData.phone || "",
                email: initialData.email || "",
            });
        }
    }, [initialData, open]);

    if (!open) return null;

    const update = (key: keyof ProfileFormData) => (val: string) =>
        setForm((prev) => ({ ...prev, [key]: val }));

    const handleSave = () => {
        onSave?.(form);
        onClose();
    };

    return (
        <div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
            {/* Overlay */}
            <div className="absolute inset-0 bg-black/50" onClick={onClose} />

            {/* Modal box */}
            <div className="relative bg-white w-full max-w-[760px] rounded-3xl shadow-2xl max-h-[92vh] overflow-hidden flex flex-col">
                {/* Header */}
                <div className="flex items-center justify-between gap-4 px-8 py-6 border-b border-[#f3f4f6] flex-shrink-0">
                    <div className="flex items-center gap-4">
                        <span className="w-12 h-12 rounded-xl bg-[#fceef3] text-[#d4537e] flex items-center justify-center flex-shrink-0">
                            <User size={24} />
                        </span>
                        <div>
                            <p className="text-xl font-semibold text-[#111111]">Your information</p>
                            <p className="text-sm text-[#9ca3af] mt-0.5">
                                Provide basic information like contact, clinic, and specialization
                            </p>
                        </div>
                    </div>
                    <button
                        onClick={onClose}
                        className="w-10 h-10 rounded-lg flex items-center justify-center text-[#9ca3af] hover:text-[#374151] hover:bg-[#f7f7f8] bg-transparent border-none cursor-pointer flex-shrink-0 transition-colors"
                    >
                        <X size={22} />
                    </button>
                </div>

                {/* Body (scrollable) */}
                <div className="px-8 py-7 overflow-y-auto">
                    {/* Identity */}
                    <SectionHeading
                        icon={<User size={18} />}
                        iconColorClass="text-[#d4537e]"
                        iconBgClass="bg-[#fceef3]"
                        title="Identity"
                    />
                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-5 mb-8">
                        <FieldInput
                            icon={<User size={18} />}
                            label="Full name"
                            value={form.fullname}
                            placeholder="Enter full name"
                            onChange={update("fullname")}
                        />

                        <FieldInput
                            icon={<GraduationCap size={18} />}
                            label="Degree"
                            value={form.degree}
                            placeholder="e.g. MBBS, MD"
                            onChange={update("degree")}
                        />
                        <FieldInput
                            icon={<Activity size={18} />}
                            label="Specialisation"
                            value={form.specialisation}
                            placeholder="e.g. Internal Medicine"
                            onChange={update("specialisation")}
                        />
                    </div>

                    {/* Contact */}
                    <SectionHeading
                        icon={<Phone size={18} />}
                        iconColorClass="text-[#16a34a]"
                        iconBgClass="bg-[#e8f8ee]"
                        title="Contact"
                    />
                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
                        <FieldInput
                            icon={<Phone size={18} />}
                            label="Phone number"
                            value={form.phone}
                            placeholder="Enter phone number"
                            onChange={(value) => {
                                const phone = value
                                    .replace(/\D/g, "")
                                    .slice(0, 10);

                                setForm((prev) => ({
                                    ...prev,
                                    phone,
                                }));
                            }}
                        />
                        <FieldInput
                            icon={<Mail size={18} />}
                            label="Email address"
                            value={form.email}
                            onChange={update("email")}
                            disabled
                        />
                    </div>
                </div>

                {/* Footer */}
                <div className="flex items-center justify-end gap-3 px-8 py-6 border-t border-[#f3f4f6] flex-shrink-0">
                    <button
                        onClick={onClose}
                        className="text-base font-medium text-[#374151] bg-white border border-[#e5e7eb] rounded-xl px-6 py-3 cursor-pointer hover:bg-[#f7f7f8] transition-colors"
                    >
                        Cancel
                    </button>
                    <button
                        onClick={handleSave}
                        className="text-base font-semibold text-white bg-[#d4537e] hover:bg-[#993556] rounded-xl px-6 py-3 cursor-pointer transition-colors"
                    >
                        Save and continue
                    </button>
                </div>
            </div>
        </div>
    );
}