import * as React from 'react';

import { cn } from '@/lib/utils';

/**
 * Data tables (TanStack React Table): wrap the result of `useReactTable` in
 * `<Table>` → `<TableHeader>` / `<TableBody>` → `<TableHeaderRow>` or `<TableRow>`
 * → `<TableHead>` / `<TableCell>` and render headers and cells with `flexRender`.
 */

type TableProps = React.ComponentProps<'table'> & {
    /** `embedded`: subtle border for tables nested inside a `Card`. `default`: full app shell. */
    variant?: 'default' | 'embedded';
};

function Table({ className, variant = 'default', ...props }: TableProps) {
    const shellClass =
        variant === 'embedded'
            ? 'rounded-lg border border-border/70 bg-transparent shadow-none'
            : 'rounded-xl border border-border/80 bg-card text-card-foreground shadow-[var(--shadow-surface)]';

    return (
        <div data-slot="table-shell" className={cn('relative w-full overflow-hidden', shellClass)}>
            <div data-slot="table-container" className="w-full overflow-x-auto">
                <table
                    data-slot="table"
                    className={cn('w-full min-w-0 border-collapse caption-bottom text-xs leading-snug', className)}
                    {...props}
                />
            </div>
        </div>
    );
}

function TableHeader({ className, ...props }: React.ComponentProps<'thead'>) {
    return (
        <thead
            data-slot="table-header"
            className={cn(
                'border-b border-dashed border-border/55 bg-primary-soft/50 dark:bg-muted/35',
                className,
            )}
            {...props}
        />
    );
}

/** Use inside `<TableHeader>` for TanStack `getHeaderGroups()` rows (distinct from body `<TableRow>`). */
function TableHeaderRow({ className, ...props }: React.ComponentProps<'tr'>) {
    return (
        <tr
            data-slot="table-header-row"
            className={cn('border-0', className)}
            {...props}
        />
    );
}

function TableBody({ className, ...props }: React.ComponentProps<'tbody'>) {
    return (
        <tbody
            data-slot="table-body"
            className={cn(
                /* Zebra rows — subtle tint on even rows (screenshot-style) */
                '[&>tr:nth-child(odd)]:bg-background [&>tr:nth-child(even)]:bg-primary-soft/40',
                'dark:[&>tr:nth-child(odd)]:bg-card/80 dark:[&>tr:nth-child(even)]:bg-muted/25',
                '[&>tr:last-child]:border-b-0',
                className,
            )}
            {...props}
        />
    );
}

function TableFooter({ className, ...props }: React.ComponentProps<'tfoot'>) {
    return (
        <tfoot
            data-slot="table-footer"
            className={cn(
                'border-t border-dashed border-border/55 bg-muted/30 font-medium dark:bg-muted/25',
                className,
            )}
            {...props}
        />
    );
}

function TableRow({ className, ...props }: React.ComponentProps<'tr'>) {
    return (
        <tr
            data-slot="table-row"
            className={cn(
                'group border-b border-dashed border-border/50 transition-colors',
                'hover:!bg-muted/40 dark:hover:!bg-muted/30',
                'data-[state=selected]:!bg-muted',
                'data-[state=expanded]:!bg-primary-soft/65 dark:data-[state=expanded]:!bg-muted/40',
                className,
            )}
            {...props}
        />
    );
}

function TableHead({ className, scope = 'col', ...props }: React.ComponentProps<'th'>) {
    return (
        <th
            data-slot="table-head"
            scope={scope}
            className={cn(
                'h-8 px-2.5 py-1.5 text-left align-middle text-[11px] font-semibold text-foreground/85',
                'first:pl-3 last:pr-3 last:text-end',
                '[&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
                className,
            )}
            {...props}
        />
    );
}

function TableCell({ className, ...props }: React.ComponentProps<'td'>) {
    return (
        <td
            data-slot="table-cell"
            className={cn(
                'min-w-0 px-2.5 py-1.5 align-middle text-xs text-foreground/90',
                'first:pl-3 last:pr-3 last:text-end',
                '[&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
                className,
            )}
            {...props}
        />
    );
}

function TableCaption({ className, ...props }: React.ComponentProps<'caption'>) {
    return (
        <caption
            data-slot="table-caption"
            className={cn('mt-3 text-xs text-muted-foreground', className)}
            {...props}
        />
    );
}

export {
    Table,
    TableHeader,
    TableHeaderRow,
    TableBody,
    TableFooter,
    TableRow,
    TableHead,
    TableCell,
    TableCaption,
};