ERP-node/frontend/components/dashboard/widgets/ListSummaryWidget.tsx

/**
 * ⚠️ 임시 주석 처리된 파일
 * 다른 분이 범용 리스트 작업 중이어서 충돌 방지를 위해 주석 처리
 * 나중에 merge 시 활성화 필요
 */

"use client";

import React, { useState, useEffect } from "react";
import { DashboardElement } from "@/components/admin/dashboard/types";
import { getApiUrl } from "@/lib/utils/apiUrl";

interface ListSummaryWidgetProps {
  element: DashboardElement;
}

interface ColumnInfo {
  key: string;
  label: string;
}

// 컬럼명 한글 번역
const translateColumnName = (colName: string): string => {
  const columnTranslations: { [key: string]: string } = {
    // 공통
    id: "ID",
    name: "이름",
    status: "상태",
    created_at: "생성일",
    updated_at: "수정일",
    created_date: "생성일",
    updated_date: "수정일",

    // 기사 관련
    driver_id: "기사ID",
    phone: "전화번호",
    license_number: "면허번호",
    vehicle_id: "차량ID",
    current_location: "현재위치",
    rating: "평점",
    total_deliveries: "총배송건수",
    average_delivery_time: "평균배송시간",
    total_distance: "총운행거리",
    join_date: "가입일",
    last_active: "마지막활동",

    // 차량 관련
    vehicle_number: "차량번호",
    model: "모델",
    year: "연식",
    color: "색상",
    type: "종류",

    // 배송 관련
    delivery_id: "배송ID",
    order_id: "주문ID",
    customer_name: "고객명",
    address: "주소",
    delivery_date: "배송일",
    estimated_time: "예상시간",

    // 제품 관련
    product_id: "제품ID",
    product_name: "제품명",
    price: "가격",
    stock: "재고",
    category: "카테고리",
    description: "설명",

    // 주문 관련
    order_date: "주문일",
    quantity: "수량",
    total_amount: "총금액",
    payment_status: "결제상태",

    // 고객 관련
    customer_id: "고객ID",
    email: "이메일",
    company: "회사",
    department: "부서",
  };

  return (
    columnTranslations[colName.toLowerCase()] || columnTranslations[colName.replace(/_/g, "").toLowerCase()] || colName
  );
};

/**
 * 범용 목록 위젯
 * - SQL 쿼리 결과를 테이블 형식으로 표시
 * - 어떤 데이터든 표시 가능 (기사, 차량, 제품, 주문 등)
 */
export default function ListSummaryWidget({ element }: ListSummaryWidgetProps) {
  const [data, setData] = useState<any[]>([]);
  const [columns, setColumns] = useState<ColumnInfo[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [tableName, setTableName] = useState<string | null>(null);
  const [searchTerm, setSearchTerm] = useState("");

  useEffect(() => {
    loadData();

    // 자동 새로고침 (30초마다)
    const interval = setInterval(loadData, 30000);
    return () => clearInterval(interval);
  }, [element]);

  const loadData = async () => {
    if (!element?.dataSource?.query) {
      setError(null);
      setLoading(false);
      setTableName(null);
      return;
    }

    // 쿼리에서 테이블 이름 추출
    const extractTableName = (query: string): string | null => {
      const fromMatch = query.match(/FROM\s+([a-zA-Z0-9_가-힣]+)/i);
      if (fromMatch) {
        return fromMatch[1];
      }
      return null;
    };

    try {
      setLoading(true);
      const extractedTableName = extractTableName(element.dataSource.query);
      setTableName(extractedTableName);

      const token = localStorage.getItem("authToken");
      const response = await fetch(getApiUrl("/api/dashboards/execute-query"), {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${token}`,
        },
        body: JSON.stringify({
          query: element.dataSource.query,
          connectionType: element.dataSource.connectionType || "current",
          connectionId: element.dataSource.connectionId,
        }),
      });

      if (!response.ok) throw new Error("데이터 로딩 실패");

      const result = await response.json();

      if (result.success && result.data?.rows) {
        const rows = result.data.rows;

        // 컬럼 정보 추출 (한글 번역 적용)
        if (rows.length > 0) {
          const cols: ColumnInfo[] = Object.keys(rows[0]).map((key) => ({
            key,
            label: translateColumnName(key),
          }));
          setColumns(cols);
        }

        setData(rows);
      }

      setError(null);
    } catch (err) {
      setError(err instanceof Error ? err.message : "데이터 로딩 실패");
    } finally {
      setLoading(false);
    }
  };

  // 테이블 이름 한글 번역
  const translateTableName = (name: string): string => {
    const tableTranslations: { [key: string]: string } = {
      drivers: "기사",
      driver: "기사",
      vehicles: "차량",
      vehicle: "차량",
      products: "제품",
      product: "제품",
      orders: "주문",
      order: "주문",
      customers: "고객",
      customer: "고객",
      deliveries: "배송",
      delivery: "배송",
      users: "사용자",
      user: "사용자",
    };

    return tableTranslations[name.toLowerCase()] || tableTranslations[name.replace(/_/g, "").toLowerCase()] || name;
  };

  const displayTitle = tableName ? `${translateTableName(tableName)} 목록` : "데이터 목록";

  // 검색 필터링
  const filteredData = data.filter((row) =>
    Object.values(row).some((value) => String(value).toLowerCase().includes(searchTerm.toLowerCase())),
  );

  if (loading) {
    return (
      <div className="flex h-full items-center justify-center">
        <div className="text-center">
          <div className="border-primary mx-auto h-8 w-8 animate-spin rounded-full border-2 border-t-transparent" />
          <p className="mt-2 text-sm text-muted-foreground">데이터 로딩 중...</p>
        </div>
      </div>
    );
  }

  if (error) {
    return (
      <div className="flex h-full items-center justify-center">
        <div className="text-center text-destructive">
          <p className="text-sm">⚠️ {error}</p>
          <button
            onClick={loadData}
            className="mt-2 rounded bg-destructive/10 px-3 py-1 text-xs text-destructive hover:bg-destructive/20"
          >
            다시 시도
          </button>
        </div>
      </div>
    );
  }

  if (!element?.dataSource?.query) {
    return (
      <div className="flex h-full items-center justify-center p-3">
        <div className="max-w-xs space-y-2 text-center">
          <div className="text-3xl">📋</div>
          <h3 className="text-sm font-bold text-foreground">데이터 목록</h3>
          <div className="space-y-1.5 text-xs text-foreground">
            <p className="font-medium">📋 테이블 형식 데이터 표시 위젯</p>
            <ul className="space-y-0.5 text-left">
              <li>• SQL 쿼리로 데이터를 불러옵니다</li>
              <li>• 테이블 형식으로 자동 표시</li>
              <li>• 검색 기능 지원</li>
              <li>• 실시간 데이터 모니터링 가능</li>
            </ul>
          </div>
          <div className="mt-2 rounded-lg bg-primary/10 p-2 text-[10px] text-primary">
            <p>SQL 쿼리를 입력하고 저장하세요</p>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="flex h-full w-full flex-col overflow-hidden bg-gradient-to-br from-background to-primary/10 p-2">
      {/* 헤더 */}
      <div className="mb-2 flex flex-shrink-0 items-center justify-between">
        <div className="flex-1">
          <h3 className="text-sm font-bold text-foreground">📋 {displayTitle}</h3>
          <p className="text-xs text-muted-foreground">총 {filteredData.length.toLocaleString()}건</p>
        </div>
        <button
          onClick={loadData}
          className="border-border hover:bg-accent flex h-7 w-7 items-center justify-center rounded border bg-background p-0 text-xs disabled:opacity-50"
          disabled={loading}
        >
          {loading ? "⏳" : "🔄"}
        </button>
      </div>

      {/* 검색 */}
      {data.length > 0 && (
        <div className="mb-2 flex-shrink-0">
          <input
            type="text"
            placeholder="검색..."
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
            className="focus:border-primary focus:ring-primary w-full rounded border border-border px-2 py-1 text-xs focus:ring-1 focus:outline-none"
          />
        </div>
      )}

      {/* 테이블 */}
      <div className="flex-1 overflow-auto">
        {filteredData.length > 0 ? (
          <table className="w-full border-collapse text-xs">
            <thead className="sticky top-0 bg-muted">
              <tr>
                {columns.map((col) => (
                  <th key={col.key} className="border border-border px-2 py-1 text-left font-semibold text-foreground">
                    {col.label}
                  </th>
                ))}
              </tr>
            </thead>
            <tbody className="bg-background">
              {filteredData.map((row, idx) => (
                <tr key={idx} className="hover:bg-muted">
                  {columns.map((col) => (
                    <td key={col.key} className="border border-border px-2 py-1 text-foreground">
                      {String(row[col.key] || "")}
                    </td>
                  ))}
                </tr>
              ))}
            </tbody>
          </table>
        ) : (
          <div className="flex h-full items-center justify-center text-muted-foreground">
            <p className="text-sm">검색 결과가 없습니다</p>
          </div>
        )}
      </div>
    </div>
  );
}