"use client";

import { Eye } from "lucide-react";
import type { ComponentConfig } from "@/types/report";

interface TablePreviewPanelProps {
  component: ComponentConfig;
}

export function TablePreviewPanel({ component }: TablePreviewPanelProps) {
  const visibleCols = (component.tableColumns ?? []).filter((c) => c.visible !== false);
  const hasColumns = visibleCols.length > 0;
  const previewRowCount = component.tableRowCount ?? 3;

  const headerBg = component.headerBackgroundColor || "#f3f4f6";
  const headerColor = component.headerTextColor || "#111827";
  const rowHeight = component.rowHeight ?? 28;
  const hasBorder = component.showBorder !== false;
  const borderClass = hasBorder ? "border border-gray-300" : "";

  const totalConfigWidth = visibleCols.reduce((s, c) => s + (c.width || 120), 0);

  return (
    <div className="flex flex-col gap-4 p-4">
      <div className="w-full">
        <div className="flex items-center gap-2 mb-1 text-sm font-semibold text-gray-700">
          <Eye className="w-4 h-4 text-blue-600" />
          미리보기 (저장 전 상태)
        </div>
        <p className="text-xs text-muted-foreground">
          실제 데이터는 저장 후 확인 가능합니다.
        </p>
      </div>

      <div className="flex items-center justify-center w-full min-h-[600px] rounded-xl bg-gray-100 border border-gray-200 p-8 overflow-auto">
        {hasColumns ? (
          <div
            className="rounded-lg bg-white shadow-sm overflow-hidden"
            style={{
              width: Math.min(component.width || 700, 700),
              minHeight: Math.min(component.height || 400, 400),
            }}
          >
            <table className="w-full border-collapse text-xs" style={{ tableLayout: "fixed" }}>
              <colgroup>
                {visibleCols.map((col, idx) => {
                  const ratio = (col.width || 120) / totalConfigWidth;
                  return <col key={idx} style={{ width: `${(ratio * 100).toFixed(2)}%` }} />;
                })}
              </colgroup>
              <thead>
                <tr style={{ backgroundColor: headerBg, color: headerColor }}>
                  {visibleCols.map((col, idx) => (
                    <th
                      key={idx}
                      className={borderClass}
                      style={{
                        padding: "4px 6px",
                        textAlign: col.align || "left",
                        fontWeight: 600,
                        overflow: "hidden",
                        textOverflow: "ellipsis",
                        whiteSpace: "nowrap",
                      }}
                    >
                      {col.header}
                    </th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {Array.from({ length: previewRowCount }).map((_, rowIdx) => (
                  <tr key={rowIdx}>
                    {visibleCols.map((col, colIdx) => (
                      <td
                        key={colIdx}
                        className={borderClass}
                        style={{
                          padding: "4px 6px",
                          textAlign: col.align || "left",
                          height: `${rowHeight}px`,
                          overflow: "hidden",
                          textOverflow: "ellipsis",
                          whiteSpace: "nowrap",
                          color: "#d1d5db",
                        }}
                      >
                        {col.field ? `{${col.field}}` : "—"}
                      </td>
                    ))}
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        ) : (
          <div className="flex items-center justify-center h-40 text-sm text-gray-400">
            컬럼을 설정하면 미리보기가 표시됩니다.
          </div>
        )}
      </div>
    </div>
  );
}