import { Link, router, usePage } from '@inertiajs/react';
import { CalendarDays, Car, ChevronDown, LogOut, Phone, RotateCcw, Settings, User } from 'lucide-react';
import { ThemeToggle } from '@/components/theme-toggle';
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuLabel,
    DropdownMenuSeparator,
    DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { cn } from '@/lib/utils';
import { dashboard, home, login } from '@/routes';
import type { User as AuthUser } from '@/types/auth';

export type SiteHeader = {
    brandName: string;
    tagline: string;
    phone: string;
};

const DEFAULTS: SiteHeader = {
    brandName: 'AIO Car Wash',
    tagline: 'Premium Auto Care',
    phone: '(800) 555-1234',
};

export function usePublicHeader(): SiteHeader & { phoneHref: string } {
    const props = usePage().props as Record<string, unknown>;
    const h = (props.siteHeader as SiteHeader | undefined) ?? DEFAULTS;
    const digits = h.phone.replace(/\D/g, '');
    const phoneHref = digits.length === 10 ? `tel:+1${digits}` : `tel:+${digits}`;
    return { ...h, phoneHref };
}

function getInitials(name: string): string {
    const parts = name.trim().split(/\s+/);
    if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
    return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
}

function UserMenu({ user, isStaff }: { user: AuthUser; isStaff: boolean }) {
    const initials = getInitials(user.name ?? 'U');

    return (
        <DropdownMenu>
            <DropdownMenuTrigger className="group flex items-center gap-2 rounded-lg border border-border/60 bg-muted/40 px-2 py-1.5 text-sm font-medium transition-all hover:border-primary/30 hover:bg-muted/70 focus:outline-none">
                <span className="flex size-7 shrink-0 items-center justify-center rounded-full bg-primary text-[11px] font-bold text-primary-foreground">
                    {initials}
                </span>
                <span className="hidden max-w-[120px] truncate sm:block">{user.name}</span>
                <ChevronDown className="size-3.5 text-muted-foreground transition-transform group-data-[state=open]:rotate-180" />
            </DropdownMenuTrigger>

            <DropdownMenuContent align="end" className="w-56">
                {/* Identity block */}
                <div className="flex items-center gap-3 px-3 py-3">
                    <span className="flex size-9 shrink-0 items-center justify-center rounded-full bg-primary text-sm font-bold text-primary-foreground">
                        {initials}
                    </span>
                    <div className="min-w-0">
                        <p className="truncate text-sm font-semibold">{user.name}</p>
                        <p className="truncate text-xs text-muted-foreground">{user.email}</p>
                    </div>
                </div>

                <DropdownMenuSeparator />

                {isStaff ? (
                    <>
                        <DropdownMenuItem asChild>
                            <Link href={dashboard.url()} className="flex items-center gap-2">
                                <CalendarDays className="size-4 text-muted-foreground" />
                                Dashboard
                            </Link>
                        </DropdownMenuItem>
                        <DropdownMenuItem asChild>
                            <Link href="/settings/profile" className="flex items-center gap-2">
                                <Settings className="size-4 text-muted-foreground" />
                                Settings
                            </Link>
                        </DropdownMenuItem>
                    </>
                ) : (
                    <>
                        <DropdownMenuLabel className="text-xs font-medium text-muted-foreground uppercase tracking-wider px-3 py-1">
                            My Account
                        </DropdownMenuLabel>
                        <DropdownMenuItem asChild>
                            <Link href="/portal#profile" className="flex items-center gap-2">
                                <User className="size-4 text-muted-foreground" />
                                Personal Info
                            </Link>
                        </DropdownMenuItem>
                        <DropdownMenuItem asChild>
                            <Link href="/portal#bookings" className="flex items-center gap-2">
                                <CalendarDays className="size-4 text-muted-foreground" />
                                My Bookings
                            </Link>
                        </DropdownMenuItem>
                        <DropdownMenuItem asChild>
                            <Link href="/portal#vehicles" className="flex items-center gap-2">
                                <Car className="size-4 text-muted-foreground" />
                                My Vehicles
                            </Link>
                        </DropdownMenuItem>
                        <DropdownMenuItem asChild>
                            <Link href="/portal#cancellations" className="flex items-center gap-2">
                                <RotateCcw className="size-4 text-muted-foreground" />
                                Cancellations
                            </Link>
                        </DropdownMenuItem>
                    </>
                )}

                <DropdownMenuSeparator />

                <DropdownMenuItem
                    className="flex items-center gap-2 text-destructive focus:text-destructive"
                    onClick={() => router.post('/logout')}
                >
                    <LogOut className="size-4" />
                    Logout
                </DropdownMenuItem>
            </DropdownMenuContent>
        </DropdownMenu>
    );
}

/**
 * Renders the inner nav row (logo + right nav).
 * Wrap this in whatever <header> / container the layout needs.
 */
export function PublicHeader() {
    const props = usePage().props as Record<string, unknown>;
    const authUser = (props.auth as { user?: AuthUser } | undefined)?.user ?? null;
    const isStaff = ['admin', 'manager', 'technician'].includes(
        (authUser?.role as string | undefined) ?? '',
    );
    const { brandName, tagline, phone, phoneHref } = usePublicHeader();

    return (
        <div className="flex items-center justify-between gap-4">
            <Link href={home.url()} prefetch className="group flex items-center gap-3">
                <div className="relative flex size-10 shrink-0 items-center justify-center rounded-xl bg-primary shadow-sm ring-1 ring-primary/20 transition-shadow group-hover:shadow-md group-hover:ring-primary/40">
                    <Car className="size-5 text-primary-foreground" />
                </div>
                <div className="flex flex-col leading-none">
                    <span className="text-base font-bold tracking-tight">{brandName}</span>
                    {tagline && (
                        <span className="mt-0.5 text-[10px] font-medium uppercase tracking-widest text-muted-foreground">
                            {tagline}
                        </span>
                    )}
                </div>
            </Link>

            <nav className="flex items-center gap-3">
                {phone && (
                    <a
                        href={phoneHref}
                        className="hidden items-center gap-2 rounded-lg border border-border/60 bg-muted/40 px-3 py-1.5 transition-all hover:border-primary/30 hover:bg-muted/70 hover:text-foreground sm:flex"
                    >
                        <Phone className="size-3.5 shrink-0 text-primary" />
                        <span className="flex flex-col leading-none">
                            <span className="text-[9px] font-semibold uppercase tracking-wider text-muted-foreground">
                                Call us
                            </span>
                            <span className="text-xs font-semibold tabular-nums">{phone}</span>
                        </span>
                    </a>
                )}
                <ThemeToggle />
                {authUser ? (
                    <UserMenu user={authUser} isStaff={isStaff} />
                ) : (
                    <Link
                        href={login.url()}
                        className={cn('inline-flex items-center gap-1.5 rounded-lg border border-border/60 bg-muted/40 px-3 py-1.5 text-sm font-medium transition-all hover:border-primary/30 hover:bg-muted/70')}
                    >
                        Sign in
                    </Link>
                )}
            </nav>
        </div>
    );
}