import { Table } from './Table';
import type { TableColumn } from './Table';
import { Badge } from '../Badge/Badge';
import { Button } from '../Button/Button';
import { Avatar } from '../Avatar/Avatar';
import { Stack } from '../Stack/Stack';

interface Member extends Record<string, unknown> {
  name: string;
  email: string;
  role: string;
  status: 'active' | 'invited' | 'suspended';
}

const MEMBERS: Member[] = [
  { name: 'Ada Lovelace', email: 'ada@kibrisyazilim.com', role: 'Owner', status: 'active' },
  { name: 'Grace Hopper', email: 'grace@kibrisyazilim.com', role: 'Admin', status: 'active' },
  { name: 'Alan Turing', email: 'alan@kibrisyazilim.com', role: 'Editor', status: 'invited' },
  { name: 'Katherine Johnson', email: 'kj@kibrisyazilim.com', role: 'Viewer', status: 'suspended' },
];

const STATUS_TONE = {
  active: 'success',
  invited: 'warning',
  suspended: 'danger',
} as const;

export function TeamTable() {
  const columns: TableColumn<Member>[] = [
    {
      key: 'name',
      header: 'Member',
      render: (row) => (
        <Stack direction="horizontal" gap="xs" align="center">
          <Avatar name={row.name} size="sm" />
          <Stack gap="none">
            <span style={{ fontWeight: 'var(--ds-weight-medium)' }}>{row.name}</span>
            <span style={{ color: 'var(--ds-color-text-muted)', fontSize: 'var(--ds-text-sm)' }}>
              {row.email}
            </span>
          </Stack>
        </Stack>
      ),
    },
    { key: 'role', header: 'Role', width: '120px' },
    {
      key: 'status',
      header: 'Status',
      width: '120px',
      render: (row) => (
        <Badge tone={STATUS_TONE[row.status]} dot>
          {row.status}
        </Badge>
      ),
    },
    {
      key: 'actions',
      header: '',
      align: 'end',
      width: '90px',
      render: () => (
        <Button size="sm" variant="ghost">
          Manage
        </Button>
      ),
    },
  ];

  return <Table caption="Team members" columns={columns} rows={MEMBERS} getRowKey={(row) => row.email} />;
}

export function Plain() {
  return (
    <Table
      striped
      density="compact"
      columns={[
        { key: 'invoice', header: 'Invoice' },
        { key: 'issued', header: 'Issued' },
        { key: 'amount', header: 'Amount', align: 'end' },
      ]}
      rows={[
        { invoice: 'INV-1042', issued: '01 Jul 2026', amount: '₺4,200.00' },
        { invoice: 'INV-1041', issued: '01 Jun 2026', amount: '₺4,200.00' },
        { invoice: 'INV-1040', issued: '01 May 2026', amount: '₺3,950.00' },
      ]}
    />
  );
}

export function Empty() {
  return (
    <Table
      columns={[
        { key: 'name', header: 'Name' },
        { key: 'role', header: 'Role' },
      ]}
      rows={[]}
      emptyMessage="No members yet — invite someone to get started."
    />
  );
}