// components/sections/DataTable.tsx
// Responsive data table with zebra rows, scrollable on mobile
// Supports 3 design themes: default, striped, minimal
// Rows use positional col1–col8 fields that map to columns by order

import React from 'react';

interface DataTableColumn {
  key: string;
  label: string;
  align?: 'left' | 'center' | 'right';
  highlight?: boolean;
}

interface DataTableRow {
  col1?: string;
  col2?: string;
  col3?: string;
  col4?: string;
  col5?: string;
  col6?: string;
  col7?: string;
  col8?: string;
}

type ThemeKey = 'default' | 'striped' | 'minimal' | 'ocean' | 'forest';

interface ThemeStyles {
  wrapper: string;
  headerRow: string;
  headerCell: string;
  evenRow: string;
  oddRow: string;
  rowHover: string;
  rowBorder: string;
  cell: string;
  highlightCell: string;
  rankBadge: (v: string) => string;
}

const THEMES: Record<ThemeKey, ThemeStyles> = {
  default: {
    wrapper: 'rounded-xl border border-soft-gray-border/40 overflow-hidden',
    headerRow: 'bg-crimson-red text-white',
    headerCell: 'px-4 py-3 font-semibold whitespace-nowrap',
    evenRow: 'bg-white',
    oddRow: 'bg-deep-black',
    rowHover: 'hover:bg-soft-dark/20',
    rowBorder: 'border-b border-soft-gray-border/20',
    cell: 'text-white',
    highlightCell: 'font-bold text-crimson-red',
    rankBadge: (v) =>
      v === '1' ? 'bg-crimson-red text-white'
      : v === '2' ? 'bg-hover-red text-white'
      : v === '3' ? 'bg-soft-dark text-white'
      : 'bg-deep-black text-text-light-gray',
  },
  striped: {
    wrapper: 'rounded-xl overflow-hidden shadow-sm',
    headerRow: 'bg-slate-800 text-white',
    headerCell: 'px-5 py-3.5 font-semibold whitespace-nowrap tracking-wide uppercase text-xs',
    evenRow: 'bg-white',
    oddRow: 'bg-indigo-50/40',
    rowHover: 'hover:bg-indigo-50',
    rowBorder: 'border-b border-slate-100',
    cell: 'text-slate-700',
    highlightCell: 'font-bold text-indigo-600',
    rankBadge: (v) =>
      v === '1' ? 'bg-gradient-to-br from-indigo-500 to-purple-500 text-white'
      : v === '2' ? 'bg-gradient-to-br from-blue-400 to-indigo-400 text-white'
      : v === '3' ? 'bg-gradient-to-br from-cyan-400 to-blue-400 text-white'
      : 'bg-slate-100 text-slate-500',
  },
  minimal: {
    wrapper: 'rounded-lg',
    headerRow: 'bg-transparent border-b-2 border-slate-200',
    headerCell: 'px-4 py-3 font-bold whitespace-nowrap text-slate-900',
    evenRow: 'bg-white',
    oddRow: 'bg-white',
    rowHover: 'hover:bg-slate-50',
    rowBorder: 'border-b border-slate-100',
    cell: 'text-slate-600',
    highlightCell: 'font-semibold text-emerald-600',
    rankBadge: (v) =>
      v === '1' ? 'bg-emerald-500 text-white'
      : v === '2' ? 'bg-emerald-400 text-white'
      : v === '3' ? 'bg-emerald-300 text-emerald-900'
      : 'bg-slate-100 text-slate-500',
  },
  ocean: {
    wrapper: 'rounded-xl border border-blue-200 overflow-hidden shadow-sm',
    headerRow: 'bg-gradient-to-r from-blue-600 to-indigo-600 text-white',
    headerCell: 'px-4 py-3 font-semibold whitespace-nowrap',
    evenRow: 'bg-white',
    oddRow: 'bg-blue-50/40',
    rowHover: 'hover:bg-blue-50',
    rowBorder: 'border-b border-blue-100',
    cell: 'text-slate-700',
    highlightCell: 'font-bold text-blue-600',
    rankBadge: (v) =>
      v === '1' ? 'bg-gradient-to-br from-blue-600 to-indigo-600 text-white'
      : v === '2' ? 'bg-gradient-to-br from-cyan-500 to-blue-500 text-white'
      : v === '3' ? 'bg-gradient-to-br from-sky-400 to-cyan-400 text-white'
      : 'bg-blue-50 text-blue-500',
  },
  forest: {
    wrapper: 'rounded-xl border border-emerald-200 overflow-hidden shadow-sm',
    headerRow: 'bg-gradient-to-r from-emerald-600 to-teal-600 text-white',
    headerCell: 'px-4 py-3 font-semibold whitespace-nowrap',
    evenRow: 'bg-white',
    oddRow: 'bg-emerald-50/40',
    rowHover: 'hover:bg-emerald-50',
    rowBorder: 'border-b border-emerald-100',
    cell: 'text-slate-700',
    highlightCell: 'font-bold text-emerald-600',
    rankBadge: (v) =>
      v === '1' ? 'bg-gradient-to-br from-emerald-600 to-green-700 text-white'
      : v === '2' ? 'bg-gradient-to-br from-teal-500 to-emerald-500 text-white'
      : v === '3' ? 'bg-gradient-to-br from-green-400 to-teal-400 text-white'
      : 'bg-emerald-50 text-emerald-500',
  },
};

// Map positional col fields to column indices
const COL_FIELDS = ['col1', 'col2', 'col3', 'col4', 'col5', 'col6', 'col7', 'col8'] as const;

interface DataTableProps {
  sectionTitle?: string;
  columns: DataTableColumn[];
  rows: DataTableRow[];
  scrollable?: boolean;
  theme?: ThemeKey;
}

export function DataTable({ sectionTitle, columns, rows, scrollable = true, theme = 'default' }: DataTableProps) {
  const safeColumns = columns && columns.length > 0 ? columns : [];
  const safeRows = rows && rows.length > 0 ? rows : [];
  const t = THEMES[theme] || THEMES.default;

  return (
    <section className="w-full py-12 md:py-16">
    <div className="container max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
      {sectionTitle && (
        <h3 className="text-xl font-bold text-white mb-4">{sectionTitle}</h3>
      )}

      {safeColumns.length === 0 ? (
        <div className="text-center py-8 text-text-light-gray italic border border-soft-gray-border/30 rounded-xl">
          Add columns and rows using the editor panel →
        </div>
      ) : (
      <div className={`${t.wrapper} ${scrollable ? 'overflow-x-auto' : ''}`}>
        <table className="w-full min-w-[600px] text-sm">
          <thead>
            <tr className={t.headerRow}>
              {safeColumns.map((col, colIdx) => (
                <th
                  key={`${col.key}-${colIdx}`}
                  className={`${t.headerCell} ${
                    col.align === 'center' ? 'text-center' : col.align === 'right' ? 'text-right' : 'text-left'
                  }`}
                >
                  {col.label}
                </th>
              ))}
            </tr>
          </thead>

          <tbody>
            {safeRows.length === 0 ? (
              <tr>
                <td colSpan={safeColumns.length} className="px-4 py-6 text-center text-text-light-gray italic">
                  Add rows using the editor panel
                </td>
              </tr>
            ) : (
            safeRows.map((row, rowIdx) => (
              <tr
                key={rowIdx}
                className={`${t.rowBorder} ${
                  rowIdx % 2 === 0 ? t.evenRow : t.oddRow
                } ${t.rowHover} transition-colors`}
              >
                {safeColumns.map((col, colIdx) => {
                  // Get value by positional mapping: col1 → columns[0], col2 → columns[1], etc.
                  const fieldKey = COL_FIELDS[colIdx];
                  const value = (fieldKey ? (row as Record<string, string | undefined>)[fieldKey] : '') || '';
                  return (
                    <td
                      key={`${col.key}-${colIdx}`}
                      className={`px-4 py-3 ${
                        col.align === 'center' ? 'text-center' : col.align === 'right' ? 'text-right' : 'text-left'
                      } ${col.highlight ? t.highlightCell : t.cell}`}
                    >
                      {(col.key === 'rank' || (colIdx === 0 && value.match(/^\d+$/))) ? (
                        <span className={`inline-flex items-center justify-center w-7 h-7 rounded-full text-xs font-bold ${t.rankBadge(value)}`}>
                          {value}
                        </span>
                      ) : value}
                    </td>
                  );
                })}
              </tr>
            ))
            )}
          </tbody>
        </table>
      </div>
      )}
    </div>
    </section>
  );
}
