import { useState } from 'react';
import { DataTable } from '../../lib';
import { DemoPageWithGuide } from '../DemoPageWithGuide';

const DATATABLE_GUIDE = {
  summary:
    'columns and rows are required. Everything else is optional (defaults: striped false, bordered false, compact false, clientSort true, rowSelection false).',
  propsOverview:
    'Column fields (per entry): id, label, optional width, className, style, onClick, link, sortable, accessor, groupable, parentHeader, colspan, align, borders, renderCell. Table-level optional: striped, bordered, compact, clientSort, groupBy, groupCollapsible, renderGroupHeader, onSortChange, onGroupToggle, rowSelection, getRowId, selectedRowIds, defaultSelectedRowIds, onSelectedRowIdsChange, className.',
  features: ['Provide getRowId when using rowSelection for stable ids across sorts'],
  codeLabel: 'Full example (columns + rows required)',
  code: `import { DataTable } from 'ccl-ui-components-react';

<DataTable
  columns={[
    { id: 'name', label: 'Name', sortable: true },
    { id: 'role', label: 'Role', sortable: false },
  ]}
  rows={[{ name: 'Ada', role: 'Dev' }]}
  striped={false}
  bordered={false}
  compact={false}
  clientSort={true}
  groupCollapsible={true}
  rowSelection={false}
  getRowId={(row, i) => String(i)}
  selectedRowIds={[]}
  onSelectedRowIdsChange={(ids) => {}}
  onSortChange={(p) => {}}
  onGroupToggle={(p) => {}}
  className=""
/>`,
} as const;

export default function DataTablePage() {
  const [selected, setSelected] = useState<string[]>([]);
  const [enableSelection, setEnableSelection] = useState(true);
  const [striped, setStriped] = useState(true);
  const [bordered, setBordered] = useState(false);
  const [compact, setCompact] = useState(false);
  return (
    <DemoPageWithGuide guide={DATATABLE_GUIDE}>
    <main className="demo demo-page">
      <h1>Data table</h1>
      <p className="demo-lead">Data table with optional column sorting and row selection.</p>
      <section className="demo-section">
        <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 12, flexWrap: 'wrap', gap: 16 }}>
          <label style={{ display: 'inline-flex', gap: 8, alignItems: 'center' }}>
            <input
              type="checkbox"
              checked={enableSelection}
              onChange={(e) => {
                setEnableSelection(e.target.checked);
                if (!e.target.checked) setSelected([]);
              }}
            />
            Enable row selection
          </label>

          <label style={{ display: 'inline-flex', gap: 8, alignItems: 'center' }}>
            <input type="checkbox" checked={striped} onChange={(e) => setStriped(e.target.checked)} />
            Striped
          </label>

          <label style={{ display: 'inline-flex', gap: 8, alignItems: 'center' }}>
            <input type="checkbox" checked={bordered} onChange={(e) => setBordered(e.target.checked)} />
            Bordered
          </label>

          <label style={{ display: 'inline-flex', gap: 8, alignItems: 'center' }}>
            <input type="checkbox" checked={compact} onChange={(e) => setCompact(e.target.checked)} />
            Compact
          </label>
        </div>

        <DataTable
          striped={striped}
          bordered={bordered}
          compact={compact}
          rowSelection={enableSelection}
          getRowId={(r) => String((r as any).id)}
          selectedRowIds={selected}
          onSelectedRowIdsChange={setSelected}
          columns={[
            { id: 'id', label: '#', sortable: true, width: '64px' },
            { id: 'name', label: 'Name', sortable: true },
            { id: 'role', label: 'Role', sortable: true },
            { id: 'team', label: 'Team' }, // not sortable
            { id: 'status', label: 'Status', sortable: true },
            { id: 'email', label: 'Email' }, // not sortable
            { id: 'age', label: 'Age', sortable: true, align: 'right', width: '80px' },
          ]}
          rows={[
            { id: 1, name: 'Ada', role: 'Dev', team: 'Platform', status: 'Active', email: 'ada@example.com', age: 29 },
            { id: 2, name: 'Lin', role: 'Design', team: 'Core UI', status: 'Active', email: 'lin@example.com', age: 31 },
            { id: 3, name: 'Kim', role: 'PM', team: 'Growth', status: 'Inactive', email: 'kim@example.com', age: 27 },
            { id: 4, name: 'Ravi', role: 'Dev', team: 'Core UI', status: 'Active', email: 'ravi@example.com', age: 35 },
            { id: 5, name: 'Sara', role: 'QA', team: 'Platform', status: 'Active', email: 'sara@example.com', age: 26 },
          ]}
        />
        {selected.length ? <p className="demo-muted">Selected ids: {selected.join(', ')}</p> : null}
      </section>
    </main>
    </DemoPageWithGuide>
  );
}