import { Link } from '@inertiajs/react';
import {
    ArrowUpRight,
    Building2,
    Contact,
    Mail,
    ShieldCheck,
} from 'lucide-react';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Button } from '@/components/ui/button';
import { useInitials } from '@/hooks/use-initials';
import { cn } from '@/lib/utils';
import { show } from '@/routes/users';
import type { UserListItem } from '@/types';
import { formatUserCi, formatUserName } from './helpers';
import { UserRoleBadge } from './user-role-badge';
import { UserStatusBadge } from './user-status-badge';

type Props = {
    user: UserListItem;
    onEdit?: (user: UserListItem) => void;
};

export function UserCardRow({ user, onEdit }: Props) {
    const getInitials = useInitials();
    const displayName = formatUserName(user);
    const ci = formatUserCi(user);

    return (
        <article className="group rounded-3xl border bg-card/95 p-4 shadow-sm transition-colors hover:border-primary/40 hover:bg-card">
            <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
                <div className="flex min-w-0 items-start gap-4">
                    <Avatar className="size-14 rounded-2xl border bg-muted/60">
                        <AvatarImage src={user.avatar} alt={displayName} />
                        <AvatarFallback className="rounded-2xl text-sm font-semibold">
                            {getInitials(displayName)}
                        </AvatarFallback>
                    </Avatar>

                    <div className="flex min-w-0 flex-1 flex-col gap-3">
                        <div className="flex flex-col gap-2 md:flex-row md:items-center">
                            <div className="min-w-0">
                                <Link
                                    href={show(user.id)}
                                    prefetch
                                    className="inline-flex items-center gap-2 text-base font-semibold tracking-tight hover:text-primary"
                                >
                                    <span className="truncate">
                                        {displayName}
                                    </span>
                                    <ArrowUpRight className="opacity-0 transition-opacity group-hover:opacity-100" />
                                </Link>
                                <p className="truncate text-sm text-muted-foreground">
                                    {user.email}
                                </p>
                            </div>
                            <div className="flex flex-wrap items-center gap-2 md:ml-auto">
                                <UserRoleBadge
                                    role={user.role}
                                    label={user.role_label}
                                />
                                <UserStatusBadge isActive={user.is_active} />
                            </div>
                        </div>

                        <div className="grid gap-3 text-sm text-muted-foreground sm:grid-cols-3">
                            <div className="flex items-center gap-2 rounded-2xl bg-muted/45 px-3 py-2">
                                <Building2 className="text-muted-foreground/70" />
                                <span className="truncate">
                                    {user.organization || 'Sin organizacion'}
                                </span>
                            </div>
                            <div className="flex items-center gap-2 rounded-2xl bg-muted/45 px-3 py-2">
                                <Contact className="text-muted-foreground/70" />
                                <span className="truncate">
                                    {ci || 'CI sin registrar'}
                                </span>
                            </div>
                            <div className="flex items-center gap-2 rounded-2xl bg-muted/45 px-3 py-2">
                                <Mail className="text-muted-foreground/70" />
                                <span className="truncate">
                                    {user.phone || 'Sin telefono'}
                                </span>
                            </div>
                        </div>
                    </div>
                </div>

                <div className="flex items-center justify-end gap-2 lg:self-stretch">
                    <Button variant="outline" asChild>
                        <Link href={show(user.id)} prefetch>
                            <ShieldCheck data-icon="inline-start" />
                            Ver detalle
                        </Link>
                    </Button>
                    <Button
                        type="button"
                        variant="ghost"
                        className={cn(!onEdit && 'hidden')}
                        onClick={() => onEdit?.(user)}
                    >
                        Editar
                    </Button>
                </div>
            </div>
        </article>
    );
}