/**
 * Base table component for {{ model_name }}.
 *
 * ⚠️ AUTO-GENERATED BY PRISM - DO NOT EDIT
 */

import { type ReactElement, type ReactNode } from 'react';
import type { {{ model_name }} } from '../../types/generated';

/** Column definition for table display */
export interface Column<T> {
  key: string;
  label: string;
  tooltip?: string;
  render?: (item: T) => ReactNode;
}

/** Column definitions for {{ model_name }} table */
export const {{ model_name_upper }}_COLUMNS: Column<{{ model_name }}>[] = {{ columns }};

export interface {{ model_name }}TableBaseProps {
  /** Data to display */
  data: {{ model_name }}[];
  /** Loading state */
  loading?: boolean;
  /** Row click handler */
  onRowClick?: (item: {{ model_name }}) => void;
  /** Edit action handler */
  onEdit?: (item: {{ model_name }}) => void;
  /** Delete action handler */
  onDelete?: (item: {{ model_name }}) => void;
  /** Selected row IDs */
  selectedIds?: number[];
  /** Selection change handler */
  onSelectionChange?: (ids: number[]) => void;
}

/**
 * Base table component for displaying {{ plural_name }}.
 * Extend this in components/{{ kebab_name }}/{{ model_name }}Table.tsx
 */
export function {{ model_name }}TableBase({
  data,
  loading = false,
  onRowClick,
  onEdit,
  onDelete,
  selectedIds = [],
  onSelectionChange,
}: {{ model_name }}TableBaseProps): ReactElement {
  const handleSelect = (id: number) => {
    if (!onSelectionChange) return;
    if (selectedIds.includes(id)) {
      onSelectionChange(selectedIds.filter((i) => i !== id));
    } else {
      onSelectionChange([...selectedIds, id]);
    }
  };

  if (loading) {
    return (
      <div className="flex items-center justify-center py-12">
        <div className="animate-pulse flex items-center gap-3">
          <div className="w-2 h-2 bg-muted rounded-full animate-bounce" />
          <div className="w-2 h-2 bg-muted rounded-full animate-bounce [animation-delay:0.1s]" />
          <div className="w-2 h-2 bg-muted rounded-full animate-bounce [animation-delay:0.2s]" />
        </div>
      </div>
    );
  }

  if (data.length === 0) {
    return (
      <div className="flex flex-col items-center justify-center py-12 text-center">
        <div className="w-12 h-12 bg-surface-sunken rounded-full flex items-center justify-center mb-3">
          <svg className="w-6 h-6 text-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
          </svg>
        </div>
        <p className="text-muted">No {{ plural_name_lower }} found.</p>
      </div>
    );
  }

  return (
    <table className="table">
      <thead>
        <tr>
          {onSelectionChange && <th className="w-12" />}
          {{ "{" }}{{ model_name_upper }}_COLUMNS.map((col) => (
            <th key={col.key}>
              {col.label}
            </th>
          ))}
          {(onEdit || onDelete) && <th className="w-32 text-right">Actions</th>}
        </tr>
      </thead>
      <tbody>
        {data.map((item) => (
          <tr
            key={item.id}
            onClick={() => onRowClick?.(item)}
            className={`${onRowClick ? 'cursor-pointer' : ''} ${selectedIds.includes(item.id) ? 'bg-accent-50' : ''}`}
          >
            {onSelectionChange && (
              <td>
                <input
                  type="checkbox"
                  checked={selectedIds.includes(item.id)}
                  onChange={() => handleSelect(item.id)}
                  onClick={(e) => e.stopPropagation()}
                  className="checkbox"
                />
              </td>
            )}
            {{ "{" }}{{ model_name_upper }}_COLUMNS.map((col) => (
              <td key={col.key} className="text-muted-foreground">
                {col.render ? col.render(item) : String(item[col.key as keyof {{ model_name }}] ?? '')}
              </td>
            ))}
            {(onEdit || onDelete) && (
              <td className="text-right">
                <div className="flex items-center justify-end gap-2">
                  {onEdit && (
                    <button
                      onClick={(e) => { e.stopPropagation(); onEdit(item); }}
                      className="btn-ghost text-xs px-2 py-1"
                    >
                      Edit
                    </button>
                  )}
                  {onDelete && (
                    <button
                      onClick={(e) => { e.stopPropagation(); onDelete(item); }}
                      className="btn-ghost text-xs px-2 py-1 text-red-600 hover:text-red-700 hover:bg-red-50"
                    >
                      Delete
                    </button>
                  )}
                </div>
              </td>
            )}
          </tr>
        ))}
      </tbody>
    </table>
  );
}
