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

"use client";

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

interface DeliveryTodayStatsWidgetProps {
  element: DashboardElement;
}

interface TodayStats {
  shipped: number;
  delivered: number;
}

/**
 * 오늘 처리 현황 위젯
 * - 오늘 발송 건수
 * - 오늘 도착 건수
 */
export default function DeliveryTodayStatsWidget({ element }: DeliveryTodayStatsWidgetProps) {
  const [todayStats, setTodayStats] = useState<TodayStats>({ shipped: 0, delivered: 0 });
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

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

  const loadData = async () => {
    if (!element?.dataSource?.query) {
      setError("쿼리가 설정되지 않았습니다");
      setLoading(false);
      return;
    }

    try {
      setLoading(true);
      const token = localStorage.getItem("authToken");
      const response = await fetch("/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;
        const today = new Date().toISOString().split("T")[0];

        // 오늘 발송 건수 (created_at 기준)
        const shippedToday = rows.filter((row: any) => {
          const createdDate = row.created_at?.split("T")[0] || row.createdAt?.split("T")[0];
          return createdDate === today;
        }).length;

        // 오늘 도착 건수 (status === 'delivered' AND estimated_delivery 기준)
        const deliveredToday = rows.filter((row: any) => {
          const status = row.status || "";
          const deliveryDate = row.estimated_delivery?.split("T")[0] || row.estimatedDelivery?.split("T")[0];
          return (status === "delivered" || status === "완료") && deliveryDate === today;
        }).length;

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

  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-gray-500">데이터 로딩 중...</p>
        </div>
      </div>
    );
  }

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

  if (!element?.dataSource?.query) {
    return (
      <div className="flex h-full items-center justify-center">
        <div className="text-center text-gray-500">
          <p className="text-sm">⚙️ 톱니바퀴를 클릭하여 데이터를 연결하세요</p>
        </div>
      </div>
    );
  }

  return (
    <div className="flex h-full flex-col overflow-hidden bg-white p-4">
      {/* 헤더 */}
      <div className="mb-4 flex items-center justify-between">
        <h3 className="text-lg font-semibold text-gray-800">📅 오늘 처리 현황</h3>
        <button
          onClick={loadData}
          className="rounded-full p-1 text-gray-500 hover:bg-gray-100"
          title="새로고침"
        >
          🔄
        </button>
      </div>

      {/* 통계 카드 */}
      <div className="flex flex-1 flex-col gap-4">
        {/* 오늘 발송 */}
        <div className="flex flex-1 flex-col items-center justify-center rounded-lg bg-gradient-to-br from-blue-50 to-blue-100 p-6">
          <div className="mb-2 text-4xl">📤</div>
          <p className="text-sm font-medium text-blue-700">오늘 발송</p>
          <p className="mt-2 text-4xl font-bold text-blue-800">{todayStats.shipped.toLocaleString()}</p>
          <p className="mt-1 text-xs text-blue-600">건</p>
        </div>

        {/* 오늘 도착 */}
        <div className="flex flex-1 flex-col items-center justify-center rounded-lg bg-gradient-to-br from-green-50 to-green-100 p-6">
          <div className="mb-2 text-4xl">📥</div>
          <p className="text-sm font-medium text-green-700">오늘 도착</p>
          <p className="mt-2 text-4xl font-bold text-green-800">{todayStats.delivered.toLocaleString()}</p>
          <p className="mt-1 text-xs text-green-600">건</p>
        </div>
      </div>
    </div>
  );
}