import { Badge } from '@/components/ui/badge';
import { Separator } from '@/components/ui/separator';
import { parseServerDate } from '@/lib/date';
import { cn } from '@/lib/utils';
import { router } from '@inertiajs/react';
import { format } from 'date-fns';
import {
    AtSign,
    Briefcase,
    Building2,
    Calendar,
    ChevronDown,
    Clock,
    Globe,
    Phone,
    Plus,
} from 'lucide-react';
import { useState } from 'react';
import type { AdminUserDetail } from './types';

function SidebarSection({
    title,
    children,
    defaultOpen = true,
}: {
    title: string;
    children: React.ReactNode;
    defaultOpen?: boolean;
}) {
    const [open, setOpen] = useState(defaultOpen);
    return (
        <div>
            <button
                type="button"
                onClick={() => setOpen((v) => !v)}
                className="group flex w-full cursor-pointer items-center justify-between py-2.5"
            >
                <span className="text-muted-foreground dark:text-muted-foreground/65 text-[10px] font-bold tracking-[0.12em] uppercase">
                    {title}
                </span>
                <div className="text-muted-foreground dark:text-muted-foreground/60 group-hover:text-muted-foreground dark:group-hover:text-muted-foreground/70 flex items-center gap-1 transition-colors">
                    <Plus className="h-3 w-3" />
                    <ChevronDown
                        className={cn(
                            'h-3 w-3 transition-transform duration-200',
                            open && 'rotate-180',
                        )}
                    />
                </div>
            </button>
            {open && <div className="pb-3">{children}</div>}
        </div>
    );
}

function SidebarField({
    icon: Icon,
    label,
    value,
    subtext,
    badge,
}: {
    icon: React.ComponentType<{ className?: string }>;
    label: string;
    value: React.ReactNode;
    subtext?: string;
    badge?: string;
}) {
    return (
        <div className="flex items-start gap-3 py-2">
            <span className="bg-muted/60 mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-full">
                <Icon className="text-muted-foreground dark:text-muted-foreground/65 h-3.5 w-3.5" />
            </span>
            <div className="min-w-0 flex-1">
                <p className="text-muted-foreground dark:text-muted-foreground/65 mb-0.5 text-[10px]">
                    {label}
                </p>
                <div className="flex flex-wrap items-center gap-1.5">
                    <span className="text-foreground text-sm leading-tight">
                        {value}
                    </span>
                    {badge && (
                        <Badge
                            variant="outline"
                            className="h-4 px-1.5 py-0 text-[10px] font-medium"
                        >
                            {badge}
                        </Badge>
                    )}
                </div>
                {subtext && (
                    <p className="text-muted-foreground dark:text-muted-foreground/65 mt-0.5 text-[11px]">
                        {subtext}
                    </p>
                )}
            </div>
        </div>
    );
}

export default function UserSidebar({ user }: { user: AdminUserDetail }) {
    const invitedByInitials = user.invited_by
        ? user.invited_by.name
              .split(' ')
              .map((w) => w[0])
              .join('')
              .slice(0, 2)
              .toUpperCase()
        : '';

    return (
        <aside className="border-border w-full shrink-0 border-b lg:min-h-[calc(100vh-10rem)] lg:w-72 lg:border-r lg:border-b-0">
            <div className="px-4 py-2">
                <SidebarSection title="Contact information">
                    <SidebarField
                        icon={AtSign}
                        label="Email"
                        value={user.email}
                        subtext="Business"
                        badge="Primary"
                    />
                    {user.phone ? (
                        <SidebarField
                            icon={Phone}
                            label="Phone"
                            value={user.phone}
                            badge="Default"
                        />
                    ) : (
                        <p className="text-muted-foreground dark:text-muted-foreground/60 py-1 text-xs italic">
                            No phone on file
                        </p>
                    )}
                </SidebarSection>

                <Separator className="my-1" />

                <SidebarSection title="Account">
                    <SidebarField
                        icon={Calendar}
                        label="Joined"
                        value={format(
                            parseServerDate(user.created_at),
                            'dd MMM yyyy',
                        )}
                    />
                    <SidebarField
                        icon={Clock}
                        label="Last login"
                        value={
                            user.last_login_at ? (
                                format(
                                    parseServerDate(user.last_login_at),
                                    'dd MMM yyyy, HH:mm',
                                )
                            ) : (
                                <span className="text-muted-foreground dark:text-muted-foreground/60">
                                    Never
                                </span>
                            )
                        }
                    />
                    <SidebarField
                        icon={Globe}
                        label="Timezone"
                        value={
                            <span className="font-mono text-sm">
                                {user.timezone}
                            </span>
                        }
                    />
                </SidebarSection>

                {(user.job_title || user.department) && (
                    <>
                        <Separator className="my-1" />
                        <SidebarSection title="Organisation">
                            {user.job_title && (
                                <SidebarField
                                    icon={Briefcase}
                                    label="Job title"
                                    value={user.job_title}
                                />
                            )}
                            {user.department && (
                                <SidebarField
                                    icon={Building2}
                                    label="Department"
                                    value={user.department}
                                />
                            )}
                        </SidebarSection>
                    </>
                )}

                {user.invited_by && (
                    <>
                        <Separator className="my-1" />
                        <SidebarSection title="Invited by">
                            <button
                                type="button"
                                onClick={() =>
                                    router.visit(
                                        `/admin/users/${user.invited_by!.id}`,
                                    )
                                }
                                className="group hover:bg-muted/40 -mx-2 flex w-[calc(100%+1rem)] cursor-pointer items-center gap-3 rounded-lg px-2 py-2 transition-colors"
                            >
                                <span className="bg-primary/10 text-primary flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-xs font-bold">
                                    {invitedByInitials}
                                </span>
                                <div className="min-w-0 text-left">
                                    <p className="text-foreground group-hover:text-primary truncate text-sm font-medium transition-colors">
                                        {user.invited_by.name}
                                    </p>
                                    <p className="text-muted-foreground dark:text-muted-foreground/60 truncate text-[11px]">
                                        {user.invited_by.email}
                                    </p>
                                </div>
                            </button>
                        </SidebarSection>
                    </>
                )}
            </div>
        </aside>
    );
}