'use client';

import {Heading} from '@astryxdesign/core/Text';
import {Badge} from '@astryxdesign/core/Badge';
import type {TablePartSpec} from '@/features/loyaly-ai/types/chat';

export function TableBlock({tables}: {tables: TablePartSpec[]}) {
  if (!tables || tables.length === 0) return null;

  return (
    <div className="space-y-4 w-full">
      {tables.map((t, idx) => (
        <div
          key={t.title || idx}
          className="rounded-xl border border-border bg-card overflow-hidden shadow-sm"
        >
          {t.title ? (
            <div className="p-4 border-b border-border bg-card">
              <Heading level={4} className="text-sm font-semibold text-primary">
                {t.title}
              </Heading>
            </div>
          ) : null}

          <div className="overflow-x-auto w-full">
            <table className="w-full text-left text-xs border-collapse">
              <thead>
                <tr className="border-b border-border bg-muted/40 text-secondary font-medium">
                  {t.columns.map((col) => (
                    <th
                      key={col.key}
                      className={`px-4 py-3 ${
                        col.align === 'end'
                          ? 'text-right'
                          : col.align === 'center'
                          ? 'text-center'
                          : 'text-left'
                      }`}
                    >
                      {col.header}
                    </th>
                  ))}
                </tr>
              </thead>
              <tbody className="divide-y divide-border/60">
                {t.rows.map((row, rIdx) => (
                  <tr key={rIdx} className="hover:bg-white/[0.02] transition-colors">
                    {t.columns.map((col) => {
                      const val = row[col.key];
                      const valStr = String(val ?? '');
                      const isStatus = col.key === 'status' || col.key === 'state';

                      return (
                        <td
                          key={col.key}
                          className={`px-4 py-3 text-primary ${
                            col.align === 'end'
                              ? 'text-right'
                              : col.align === 'center'
                              ? 'text-center'
                              : 'text-left'
                          }`}
                        >
                          {isStatus ? (
                            <Badge
                              variant={
                                valStr.toLowerCase() === 'active' || valStr.toLowerCase() === 'paid'
                                  ? 'success'
                                  : valStr.toLowerCase() === 'warning' || valStr.toLowerCase() === 'at risk'
                                  ? 'warning'
                                  : 'neutral'
                              }
                              label={valStr}
                            />
                          ) : (
                            valStr
                          )}
                        </td>
                      );
                    })}
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      ))}
    </div>
  );
}