import type { User } from '@/types';
import { UserCircle } from 'lucide-react';

export interface NavSection {
    id: string;
    label: string;
    badge?: number;
    danger?: boolean;
}

export default function ProfileSidebar({
    user,
    sections,
    activeSection,
    onNavigate,
}: {
    user: User;
    sections: NavSection[];
    activeSection: string;
    onNavigate: (id: string) => void;
}) {
    const initials = user.name
        .split(' ')
        .map((w) => w[0] ?? '')
        .join('')
        .slice(0, 2)
        .toUpperCase();

    return (
        <aside className="border-border bg-card/40 sticky top-16 hidden h-[calc(100vh-4rem)] w-60 shrink-0 flex-col border-r lg:flex">
            {/* User mini-hero */}
            <div className="border-border border-b px-4 py-5">
                <div className="flex items-center gap-3">
                    {user.avatar ? (
                        <img
                            src={user.avatar}
                            alt={user.name}
                            className="ring-border h-10 w-10 rounded-full object-cover ring-2"
                        />
                    ) : (
                        <div className="bg-primary/10 text-primary ring-border flex h-10 w-10 shrink-0 items-center justify-center rounded-full text-sm font-bold ring-2">
                            {initials}
                        </div>
                    )}
                    <div className="min-w-0">
                        <p className="text-foreground truncate text-sm font-semibold">
                            {user.name}
                        </p>
                        <p className="text-muted-foreground truncate text-[11px]">
                            {user.email}
                        </p>
                    </div>
                </div>
            </div>

            {/* Section links */}
            <nav className="flex-1 overflow-y-auto px-3 py-4">
                <p className="text-muted-foreground dark:text-muted-foreground/55 mb-2 px-2 text-[9px] font-bold tracking-widest uppercase">
                    Profile
                </p>
                <div className="space-y-0.5">
                    {sections.map((s) => {
                        const isActive = activeSection === s.id;
                        return (
                            <button
                                key={s.id}
                                type="button"
                                onClick={() => onNavigate(s.id)}
                                className={`flex w-full items-center gap-2.5 rounded-xl px-3 py-2 text-sm transition-all ${
                                    isActive
                                        ? s.danger
                                            ? 'bg-red-50 font-semibold text-red-600 dark:bg-red-900/10 dark:text-red-400'
                                            : 'bg-primary/10 text-primary font-semibold'
                                        : s.danger
                                          ? 'text-muted-foreground hover:bg-muted/40 hover:text-red-600 dark:hover:text-red-400'
                                          : 'text-muted-foreground hover:bg-muted/40 hover:text-foreground'
                                }`}
                            >
                                <span className="flex-1 text-left">
                                    {s.label}
                                </span>
                                {s.badge != null && (
                                    <span className="flex h-5 w-5 items-center justify-center rounded-full bg-orange-500 text-[10px] font-bold text-white">
                                        {s.badge}
                                    </span>
                                )}
                            </button>
                        );
                    })}
                </div>
            </nav>

            {/* Footer */}
            <div className="border-border shrink-0 border-t px-4 py-3">
                <div className="text-muted-foreground dark:text-muted-foreground/50 flex items-center gap-1.5 text-[11px]">
                    <UserCircle className="h-3.5 w-3.5" />
                    Account settings
                </div>
            </div>
        </aside>
    );
}