import { Link } from '@inertiajs/react';
import { EmptyTab, SimpleTable } from './shared';
import { fmt, type Member } from './types';

export default function TeamTab({ members }: { members: Member[] }) {
    return (
        <div className="bg-card border-border overflow-hidden rounded-xl border">
            {members.length > 0 ? (
                <SimpleTable headers={['Member', 'Role', 'Status', 'Joined']}>
                    {members.map((m, i) => (
                        <tr
                            key={m.id ?? i}
                            className="hover:bg-muted/30 transition-colors"
                        >
                            <td className="px-6 py-3">
                                {m.id ? (
                                    <Link
                                        href={`/admin/clients/${m.id}`}
                                        className="flex items-center gap-3 hover:opacity-80"
                                    >
                                        {m.avatar ? (
                                            <img
                                                src={m.avatar}
                                                alt=""
                                                className="h-8 w-8 rounded-full object-cover"
                                            />
                                        ) : (
                                            <div className="bg-primary/10 text-primary flex h-8 w-8 items-center justify-center rounded-full text-xs font-bold">
                                                {m.name[0]}
                                            </div>
                                        )}
                                        <div>
                                            <p className="text-foreground font-medium">
                                                {m.name}
                                            </p>
                                            <p className="text-muted-foreground text-[11px]">
                                                {m.email}
                                            </p>
                                        </div>
                                    </Link>
                                ) : (
                                    <span className="text-muted-foreground text-sm">
                                        {m.name}
                                    </span>
                                )}
                            </td>
                            <td className="px-6 py-3">
                                {m.is_owner ? (
                                    <span className="rounded-full bg-blue-100 px-2 py-0.5 text-[10px] font-semibold text-blue-700 dark:bg-blue-900/30 dark:text-blue-400">
                                        owner
                                    </span>
                                ) : (
                                    <span className="text-muted-foreground text-xs">
                                        member
                                    </span>
                                )}
                            </td>
                            <td className="px-6 py-3">
                                <span className="text-foreground/80 text-xs capitalize">
                                    {m.status}
                                </span>
                            </td>
                            <td className="text-muted-foreground px-6 py-3 text-xs tabular-nums">
                                {fmt(m.joined_at)}
                            </td>
                        </tr>
                    ))}
                </SimpleTable>
            ) : (
                <EmptyTab text="No team members yet." />
            )}
        </div>
    );
}