import React from 'react';
import { Card } from './Card';

interface Column<T> {
    header: string;
    accessor: keyof T | ((item: T) => React.ReactNode);
    className?: string; // For adding widths or hiding on smaller screens
}

interface MobileListProps<T> {
    data: T[];
    columns: Column<T>[];
    keyExtractor: (item: T) => string;
    onItemClick?: (item: T) => void;
    titleAccessor?: keyof T | ((item: T) => React.ReactNode);
    subtitleAccessor?: keyof T | ((item: T) => React.ReactNode);
    actionRender?: (item: T) => React.ReactNode;
}

export const MobileList = <T,>({
    data,
    columns,
    keyExtractor,
    onItemClick,
    titleAccessor,
    subtitleAccessor,
    actionRender
}: MobileListProps<T>) => {

    const renderCell = (item: T, col: Column<T>) => {
        if (typeof col.accessor === 'function') {
            return col.accessor(item);
        }
        return item[col.accessor] as React.ReactNode;
    };

    const getTitle = (item: T) => {
        if (!titleAccessor) return undefined;
        if (typeof titleAccessor === 'function') return titleAccessor(item) as string;
        return item[titleAccessor] as string;
    };

    const getSubtitle = (item: T) => {
        if (!subtitleAccessor) return undefined;
        if (typeof subtitleAccessor === 'function') return subtitleAccessor(item) as string;
        return item[subtitleAccessor] as string;
    };

    return (
        <>
            {/* Mobile View: Cards */}
            <div className="md:hidden flex flex-col gap-4">
                {data.map((item, index) => (
                    <Card
                        key={keyExtractor(item) || `mobile-${index}`}
                        onClick={() => onItemClick?.(item)}
                        title={getTitle(item)}
                        description={getSubtitle(item)}
                        actions={actionRender?.(item)}
                        className="active:bg-surface-hover"
                    >
                        <div className="space-y-2 mt-2">
                            {columns.map((col, colIndex) => {
                                // Skip if it's the title or subtitle to avoid duplication (optional logic)
                                return (
                                    <div key={colIndex} className="flex justify-between text-sm py-1 border-b border-dashed border-border last:border-0">
                                        <span className="font-medium text-text-secondary">{col.header}:</span>
                                        <span className="text-text-main text-right">{renderCell(item, col)}</span>
                                    </div>
                                );
                            })}
                        </div>
                    </Card>
                ))}
            </div>

            {/* Desktop View: Table */}
            <div className="hidden md:block overflow-hidden rounded-2xl border border-border/40 shadow-soft bg-surface">
                <table className="min-w-full divide-y divide-border/40">
                    <thead className="bg-surface-soft/50">
                        <tr>
                            {columns.map((col, idx) => (
                                <th
                                    key={idx}
                                    className={`px-4 py-5 text-left text-[10px] font-bold text-text-muted uppercase tracking-[0.2em] ${col.className || ''}`}
                                >
                                    {col.header}
                                </th>
                            ))}
                            {actionRender && <th className="px-4 py-5 text-right text-[10px] font-bold text-text-muted uppercase tracking-[0.2em]">Ações</th>}
                        </tr>
                    </thead>
                    <tbody className="bg-surface divide-y divide-border/40">
                        {data.map((item, index) => (
                            <tr
                                key={keyExtractor(item) || `row-${index}`}
                                onClick={() => onItemClick?.(item)}
                                className="hover:bg-primary/[0.02] transition-colors cursor-pointer group"
                            >
                                {columns.map((col, idx) => (
                                    <td key={idx} className="px-4 py-5 whitespace-nowrap text-sm text-text-main font-medium group-hover:text-primary">
                                        {renderCell(item, col)}
                                    </td>
                                ))}
                                {actionRender && (
                                    <td className="px-4 py-5 whitespace-nowrap text-right text-sm font-medium">
                                        {actionRender(item)}
                                    </td>
                                )}
                            </tr>
                        ))}
                    </tbody>
                </table>
            </div>
        </>
    );
};
