// src/management/components/Table.jsx
import React from "react";

/**
 * Table (Dark + Nerdy)
 * - Dunkles Data-Table mit Hover-Highlight, ANSI-Style Statusfarben und optionaler Toolbar.
 * - Fokus auf Lesbarkeit im Dark Mode, Monospace-Option für numerische Spalten.
 *
 * Props:
 * - columns: Array<{
 *     key: string;                     // Feldschlüssel in row
 *     header: string;                  // Spaltenüberschrift
 *     width?: string;                  // z.B. '120px' | '20%' (optional)
 *     align?: 'left'|'center'|'right'; // Textausrichtung (default: left)
 *     monospace?: boolean;             // Monospace-Schrift für Werte
 *     render?: (value, row) => ReactNode; // Custom-Renderer
 *   }>
 * - data: Array<object>                // Datensätze
 * - loading?: boolean
 * - error?: string
 * - emptyText?: string                 // Text bei leerer Tabelle
 * - onRowClick?: (row) => void
 * - toolbar?: React.ReactNode          // Optionaler Toolbar-Content (rechts oben)
 * - dense?: boolean                    // kompaktere Zeilen
 *
 * Beispiele für Status-Farben (ANSI-Style):
 *   <StatusBadge status="OK" />
 *   <StatusBadge status="WARN" />
 *   <StatusBadge status="FAIL" />
 */

export function StatusBadge({ status }) {
  const s = String(status || "").toUpperCase();
  const cls =
    s === "OK"
      ? "text-green-400"
      : s === "WARN"
      ? "text-orange-400"
      : s === "FAIL"
      ? "text-red-400"
      : "text-white/70";
  return <span className={`font-mono ${cls}`}>{s || "—"}</span>;
}

export default function Table({
  columns = [],
  data = [],
  loading = false,
  error = "",
  emptyText = "Keine Daten",
  onRowClick,
  toolbar,
  dense = false,
}) {
  const rowPad = dense ? "py-1.5" : "py-2.5";
  const cellPad = dense ? "py-1.5 pr-4" : "py-2.5 pr-4";

  return (
    <div className="w-full">
      {/* Header mit optionaler Toolbar */}
      <div className="flex items-center justify-end mb-2">{toolbar}</div>

      <div className="overflow-x-auto rounded-xl border border-white/10 bg-white/5">
        <table className="min-w-full text-sm">
          <thead className="text-white/60">
            <tr>
              {columns.map((col) => (
                <th
                  key={col.key}
                  className={[
                    "font-medium",
                    cellPad,
                    col.align === "right"
                      ? "text-right"
                      : col.align === "center"
                      ? "text-center"
                      : "text-left",
                  ].join(" ")}
                  style={col.width ? { width: col.width } : undefined}
                >
                  {col.header}
                </th>
              ))}
            </tr>
          </thead>

          <tbody className="text-white/80">
            {/* Loading */}
            {loading && (
              <tr>
                <td
                  className={`${rowPad} pr-4 text-white/60`}
                  colSpan={columns.length}
                >
                  Lädt…
                </td>
              </tr>
            )}

            {/* Error */}
            {!loading && error && (
              <tr>
                <td
                  className={`${rowPad} pr-4 text-red-400`}
                  colSpan={columns.length}
                >
                  {error}
                </td>
              </tr>
            )}

            {/* Empty */}
            {!loading && !error && (!data || data.length === 0) && (
              <tr>
                <td
                  className={`${rowPad} pr-4 text-white/50 italic`}
                  colSpan={columns.length}
                >
                  {emptyText}
                </td>
              </tr>
            )}

            {/* Rows */}
            {!loading &&
              !error &&
              Array.isArray(data) &&
              data.map((row, idx) => {
                const clickable = typeof onRowClick === "function";
                return (
                  <tr
                    key={row.id ?? idx}
                    className={[
                      "border-t border-white/5",
                      "hover:bg-white/5 transition",
                      clickable ? "cursor-pointer" : "",
                    ].join(" ")}
                    onClick={() => clickable && onRowClick(row)}
                  >
                    {columns.map((col) => {
                      const value = row[col.key];
                      const content = col.render
                        ? col.render(value, row)
                        : value ?? "—";
                      return (
                        <td
                          key={col.key}
                          className={[
                            cellPad,
                            col.align === "right"
                              ? "text-right"
                              : col.align === "center"
                              ? "text-center"
                              : "text-left",
                            col.monospace ? "font-mono tabular-nums" : "",
                            "align-middle",
                          ].join(" ")}
                          style={col.width ? { width: col.width } : undefined}
                          title={
                            typeof value === "string" || typeof value === "number"
                              ? String(value)
                              : undefined
                          }
                        >
                          {content}
                        </td>
                      );
                    })}
                  </tr>
                );
              })}
          </tbody>
        </table>
      </div>
    </div>
  );
}

