import React, { ReactNode } from 'react';
import { useTranslation } from 'react-i18next';
import { Search } from 'lucide-react';
import PlatformTable from './PlatformTable';

interface PlatformListingProps<T> {
    title: string;
    description: string;
    isLoading: boolean;
    error: any;
    data: T[];
    renderRow: (item: T) => ReactNode;
    columns: string[];
    searchPlaceholder: string;
    searchTerm: string;
    onSearchChange: (term: string) => void;
    filterOptions?: { label: string; value: string }[];
    filterValue?: string;
    onFilterChange?: (value: string) => void;
    actionButton?: ReactNode;
    emptyMessage?: string;
    extraContent?: ReactNode;
}

function PlatformListing<T>({
    title,
    description,
    isLoading,
    error,
    data,
    renderRow,
    columns,
    searchPlaceholder,
    searchTerm,
    onSearchChange,
    filterOptions,
    filterValue,
    onFilterChange,
    actionButton,
    emptyMessage,
    extraContent,
}: PlatformListingProps<T>) {
    const { t } = useTranslation();

    if (isLoading) {
        return (
            <div className="flex items-center justify-center h-64">
                <div className="text-gray-500 dark:text-gray-400">{t('common.loading')}</div>
            </div>
        );
    }

    if (error) {
        return (
            <div className="flex items-center justify-center h-64">
                <div className="text-red-500">{t('errors.generic')}</div>
            </div>
        );
    }

    return (
        <div className="space-y-6">
            <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
                <div>
                    <h2 className="text-2xl font-bold text-gray-900 dark:text-white">{title}</h2>
                    <p className="text-gray-500 dark:text-gray-400">{description}</p>
                </div>
                {actionButton}
            </div>

            <div className="flex flex-col sm:flex-row gap-4 bg-white dark:bg-gray-800 p-4 rounded-xl border border-gray-200 dark:border-gray-700 shadow-sm">
                <div className="relative flex-1">
                    <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" size={18} />
                    <input
                        type="text"
                        placeholder={searchPlaceholder}
                        value={searchTerm}
                        onChange={(e) => onSearchChange(e.target.value)}
                        className="w-full pl-10 pr-4 py-2 bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:text-white"
                    />
                </div>
                {filterOptions && onFilterChange && (
                    <select
                        value={filterValue}
                        onChange={(e) => onFilterChange(e.target.value)}
                        className="px-4 py-2 bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 text-gray-700 dark:text-gray-200"
                    >
                        {filterOptions.map((opt) => (
                            <option key={opt.value} value={opt.value}>
                                {opt.label}
                            </option>
                        ))}
                    </select>
                )}
            </div>

            <PlatformTable
                data={data}
                columns={columns}
                renderRow={renderRow}
                emptyMessage={emptyMessage}
            />

            {extraContent}
        </div>
    );
}

export default PlatformListing;
