import { ReactNode } from "react";
import { LucideIcon } from "lucide-react";
import { PageLayout } from "../organisms/PageLayout";
import { PageHeader } from "../organisms/PageHeader";
import { SearchFilter } from "../organisms/SearchFilter";
import { StatCards } from "../organisms/StatCards";
import { DataTable, Column } from "../organisms/DataTable";
import { EmptyState } from "../organisms/EmptyState";
import { MobileCard } from "../organisms/MobileCard";

interface ListPageTemplateProps<T> {
  // Header
  title: string;
  description?: string;
  icon?: LucideIcon;
  actions?: ReactNode;
  
  // Stats
  stats?: Array<{
    label: string;
    value: string | number;
    icon: LucideIcon;
    iconColor?: string;
    trend?: { value: string; isPositive: boolean };
  }>;
  
  // Search & Filter
  searchValue: string;
  onSearchChange: (value: string) => void;
  searchPlaceholder?: string;
  filterButton?: boolean;
  onFilterClick?: () => void;
  extraActions?: ReactNode;
  
  // Data
  data: T[];
  keyField: keyof T;
  loading?: boolean;
  
  // Table
  columns: Column<T>[];
  onRowClick?: (row: T) => void;
  
  // Mobile
  renderMobileCard: (item: T) => {
    title: string;
    subtitle?: string;
    icon?: ReactNode;
    badge?: { label: string; variant?: "default" | "secondary" | "destructive" | "outline" };
    fields: Array<{ label: string; value: string; badge?: boolean; badgeVariant?: string }>;
    actions?: Array<{ label: string; onClick: () => void; icon?: ReactNode; variant?: "default" | "outline" | "destructive" }>;
  };
  
  // Empty State
  emptyIcon?: LucideIcon;
  emptyTitle?: string;
  emptyDescription?: string;
  emptyAction?: { label: string; onClick: () => void };
  
  // Pagination
  pagination?: {
    currentPage: number;
    totalPages: number;
    onPageChange: (page: number) => void;
  };
}

export function ListPageTemplate<T>({
  title,
  description,
  icon,
  actions,
  stats,
  searchValue,
  onSearchChange,
  searchPlaceholder,
  filterButton,
  onFilterClick,
  extraActions,
  data,
  keyField,
  loading,
  columns,
  onRowClick,
  renderMobileCard,
  emptyIcon,
  emptyTitle,
  emptyDescription,
  emptyAction,
  pagination
}: ListPageTemplateProps<T>) {
  const isEmpty = !loading && data.length === 0;
  
  return (
    <PageLayout>
      <PageHeader
        title={title}
        description={description}
        icon={icon}
        actions={actions}
      />
      
      {stats && <StatCards stats={stats} />}
      
      <SearchFilter
        searchValue={searchValue}
        onSearchChange={onSearchChange}
        searchPlaceholder={searchPlaceholder}
        filterButton={filterButton}
        onFilterClick={onFilterClick}
        extraActions={extraActions}
      />
      
      {isEmpty ? (
        <EmptyState
          icon={emptyIcon || icon}
          title={emptyTitle || `${title} 데이터가 없습니다`}
          description={emptyDescription}
          action={emptyAction}
        />
      ) : (
        <>
          <DataTable
            columns={columns}
            data={data}
            keyField={keyField}
            onRowClick={onRowClick}
            loading={loading}
            pagination={pagination}
          />
          
          <div className="md:hidden space-y-3">
            {data.map((item) => {
              const cardProps = renderMobileCard(item);
              return <MobileCard key={String(item[keyField])} {...cardProps} />;
            })}
          </div>
        </>
      )}
    </PageLayout>
  );
}
