'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-base font-bold text-white whitespace-normal break-words">
                {t.title}
              </Heading>
            </div>
          ) : null}

          {/*
            The scroll container is what lets the table below refuse to be
            crushed. `w-full` alone made the table a prisoner of the panel: at
            five columns in ~376px the browser had to honour width:100%, so it
            drove every column to its min-content width and long labels came
            apart. Pairing a readable floor (`min-w-[34rem]`) with horizontal
            scroll means a narrow panel scrolls a legible table instead of
            displaying an illegible one — and a wide panel never scrolls,
            because `w-full` still stretches it past the floor.
          */}
          <div className="overflow-x-auto w-full max-w-full">
            <table
              data-ai-report
              className="w-full min-w-full table-auto text-left text-sm border-collapse"
            >
              <thead>
                <tr className="border-b border-zinc-700 bg-zinc-800/80 text-white font-bold">
                  {t.columns.map((col) => (
                    <th
                      key={col.key}
                      className={`px-3.5 py-3.5 whitespace-nowrap text-sm font-bold text-white ${
                        col.align === 'end'
                          ? 'text-right'
                          : col.align === 'center'
                          ? 'text-center'
                          : 'text-left'
                      }`}
                    >
                      {col.header}
                    </th>
                  ))}
                </tr>
              </thead>
              <tbody className="divide-y divide-zinc-800/80">
                {t.rows.map((row, rIdx) => (
                  <tr key={rIdx} className="hover:bg-white/[0.04] 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-3.5 py-3.5 text-white font-semibold align-middle text-sm ${
                            col.align === 'end'
                              ? 'text-right tabular-nums whitespace-nowrap'
                              : col.align === 'center'
                              ? 'text-center'
                              : 'text-left whitespace-normal break-words'
                          }`}
                        >
                          {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>
  );
}
