import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuSeparator,
    DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { cn } from '@/lib/utils';
import { router } from '@inertiajs/react';
import {
    AlertTriangle,
    Mail,
    MoreHorizontal,
    Pencil,
    Trash2,
    Users,
} from 'lucide-react';
import { statusConfig, type AdminUserDetail } from './types';

export default function ProfileHero({
    user,
    onDelete,
}: {
    user: AdminUserDetail;
    onDelete: () => void;
}) {
    const initials = user.name
        .split(' ')
        .map((w) => w[0])
        .join('')
        .slice(0, 2)
        .toUpperCase();
    const statusCfg = statusConfig(user.status);

    return (
        <div className="border-border bg-background/60 border-b px-6 py-5 backdrop-blur-sm">
            <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
                {/* Avatar + name + meta */}
                <div className="flex items-start gap-4">
                    {user.avatar_url ? (
                        <img
                            src={user.avatar_url}
                            alt={user.name}
                            className="ring-border h-14 w-14 rounded-full object-cover ring-2"
                        />
                    ) : (
                        <span className="bg-primary/10 text-primary ring-border flex h-14 w-14 shrink-0 items-center justify-center rounded-full text-base font-bold ring-2">
                            {initials}
                        </span>
                    )}
                    <div className="min-w-0 pt-0.5">
                        <h1 className="text-foreground text-xl font-bold tracking-tight">
                            {user.name}
                        </h1>
                        {(user.job_title || user.department) && (
                            <p className="text-muted-foreground mt-0.5 text-sm">
                                {[user.job_title, user.department]
                                    .filter(Boolean)
                                    .join(' · ')}
                            </p>
                        )}
                        <div className="mt-2 flex flex-wrap items-center gap-1.5">
                            <span
                                className={cn(
                                    'inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold',
                                    statusCfg.cls,
                                )}
                            >
                                {statusCfg.label}
                            </span>
                            {user.role && (
                                <Badge
                                    variant="secondary"
                                    className="font-mono text-xs"
                                >
                                    {user.role}
                                </Badge>
                            )}
                            {user.force_password_reset && (
                                <span className="inline-flex items-center gap-1 rounded-full border border-amber-500/20 bg-amber-500/10 px-2.5 py-0.5 text-xs font-semibold text-amber-600 dark:text-amber-400">
                                    <AlertTriangle className="h-3 w-3" />
                                    Password reset required
                                </span>
                            )}
                        </div>
                    </div>
                </div>

                {/* Actions */}
                <div className="flex shrink-0 items-center gap-2">
                    {/* Button group */}
                    <div className="inline-flex" role="group">
                        <Button
                            variant="outline"
                            size="sm"
                            className="rounded-r-none border-r-0"
                            asChild
                        >
                            <a
                                href={`mailto:${user.email}`}
                                aria-label={`Email ${user.name}`}
                            >
                                <Mail className="h-3.5 w-3.5" />
                                <span className="ml-1.5 hidden sm:inline">
                                    Email
                                </span>
                            </a>
                        </Button>
                        <Button
                            size="sm"
                            className="rounded-l-none"
                            onClick={() =>
                                router.visit(`/admin/users/${user.id}/edit`)
                            }
                        >
                            <Pencil className="h-3.5 w-3.5" />
                            <span className="ml-1.5">Edit User</span>
                        </Button>
                    </div>
                    <DropdownMenu>
                        <DropdownMenuTrigger asChild>
                            <Button
                                variant="outline"
                                size="sm"
                                className="px-2"
                                aria-label="More options"
                            >
                                <MoreHorizontal className="h-4 w-4" />
                            </Button>
                        </DropdownMenuTrigger>
                        <DropdownMenuContent align="end" className="w-44">
                            <DropdownMenuItem
                                onClick={() => router.visit('/admin/users')}
                            >
                                <Users className="mr-2 h-3.5 w-3.5" />
                                Back to list
                            </DropdownMenuItem>
                            <DropdownMenuSeparator />
                            <DropdownMenuItem
                                className="text-destructive focus:bg-destructive/10 focus:text-destructive"
                                onClick={onDelete}
                            >
                                <Trash2 className="mr-2 h-3.5 w-3.5" />
                                Delete admin
                            </DropdownMenuItem>
                        </DropdownMenuContent>
                    </DropdownMenu>
                </div>
            </div>
        </div>
    );
}