galaxis-po/frontend/src/app/admin/data/page.tsx

'use client';

import { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';
import Sidebar from '@/components/layout/Sidebar';
import Header from '@/components/layout/Header';
import { api } from '@/lib/api';

interface JobLog {
  id: number;
  job_name: string;
  status: string;
  started_at: string;
  finished_at: string | null;
  records_count: number | null;
  error_msg: string | null;
}

interface User {
  id: number;
  username: string;
  email: string;
}

const collectors = [
  { key: 'stocks', label: '종목 마스터', description: 'KRX에서 종목 정보 수집' },
  { key: 'sectors', label: '섹터 정보', description: 'WISEindex에서 섹터 분류 수집' },
  { key: 'prices', label: '가격 데이터', description: 'pykrx로 OHLCV 데이터 수집' },
  { key: 'valuations', label: '밸류 지표', description: 'KRX에서 PER/PBR 등 수집' },
];

export default function DataManagementPage() {
  const router = useRouter();
  const [user, setUser] = useState<User | null>(null);
  const [loading, setLoading] = useState(true);
  const [jobs, setJobs] = useState<JobLog[]>([]);
  const [collecting, setCollecting] = useState<string | null>(null);

  useEffect(() => {
    const init = async () => {
      try {
        const userData = await api.getCurrentUser() as User;
        setUser(userData);
        await fetchJobs();
      } catch {
        router.push('/login');
      } finally {
        setLoading(false);
      }
    };
    init();
  }, [router]);

  const fetchJobs = async () => {
    try {
      const data = await api.get<JobLog[]>('/api/admin/collect/status');
      setJobs(data);
    } catch (err) {
      console.error('Failed to fetch jobs:', err);
    }
  };

  const runCollector = async (key: string) => {
    setCollecting(key);
    try {
      await api.post(`/api/admin/collect/${key}`);
      await fetchJobs();
    } catch (err) {
      console.error('Collection failed:', err);
    } finally {
      setCollecting(null);
    }
  };

  const getStatusBadge = (status: string) => {
    const colors: Record<string, string> = {
      success: 'bg-green-100 text-green-800',
      failed: 'bg-red-100 text-red-800',
      running: 'bg-yellow-100 text-yellow-800',
    };
    return colors[status] || 'bg-gray-100 text-gray-800';
  };

  if (loading) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div className="text-gray-500">Loading...</div>
      </div>
    );
  }

  return (
    <div className="flex min-h-screen">
      <Sidebar />
      <div className="flex-1">
        <Header username={user?.username} />
        <main className="p-6">
          <h1 className="text-2xl font-bold text-gray-800 mb-6">데이터 수집 관리</h1>

          <div className="bg-white rounded-lg shadow mb-6">
            <div className="p-4 border-b">
              <h2 className="text-lg font-semibold">수집 작업</h2>
            </div>
            <div className="p-4">
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                {collectors.map((col) => (
                  <div
                    key={col.key}
                    className="border rounded-lg p-4 flex flex-col"
                  >
                    <h3 className="font-medium text-gray-800">{col.label}</h3>
                    <p className="text-sm text-gray-500 mb-4">{col.description}</p>
                    <button
                      onClick={() => runCollector(col.key)}
                      disabled={collecting !== null}
                      className="mt-auto px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 disabled:bg-blue-400 transition-colors"
                    >
                      {collecting === col.key ? '수집 중...' : '실행'}
                    </button>
                  </div>
                ))}
              </div>
            </div>
          </div>

          <div className="bg-white rounded-lg shadow">
            <div className="p-4 border-b flex justify-between items-center">
              <h2 className="text-lg font-semibold">최근 작업 이력</h2>
              <button
                onClick={fetchJobs}
                className="text-sm text-blue-600 hover:text-blue-800"
              >
                새로고침
              </button>
            </div>
            <div className="overflow-x-auto">
              <table className="w-full">
                <thead className="bg-gray-50">
                  <tr>
                    <th className="px-4 py-3 text-left text-sm font-medium text-gray-600">작업명</th>
                    <th className="px-4 py-3 text-left text-sm font-medium text-gray-600">상태</th>
                    <th className="px-4 py-3 text-left text-sm font-medium text-gray-600">시작 시간</th>
                    <th className="px-4 py-3 text-left text-sm font-medium text-gray-600">건수</th>
                    <th className="px-4 py-3 text-left text-sm font-medium text-gray-600">에러</th>
                  </tr>
                </thead>
                <tbody className="divide-y">
                  {jobs.map((job) => (
                    <tr key={job.id}>
                      <td className="px-4 py-3 text-sm">{job.job_name}</td>
                      <td className="px-4 py-3">
                        <span className={`px-2 py-1 rounded text-xs ${getStatusBadge(job.status)}`}>
                          {job.status}
                        </span>
                      </td>
                      <td className="px-4 py-3 text-sm text-gray-600">
                        {new Date(job.started_at).toLocaleString('ko-KR')}
                      </td>
                      <td className="px-4 py-3 text-sm">{job.records_count ?? '-'}</td>
                      <td className="px-4 py-3 text-sm text-red-600 truncate max-w-xs">
                        {job.error_msg || '-'}
                      </td>
                    </tr>
                  ))}
                  {jobs.length === 0 && (
                    <tr>
                      <td colSpan={5} className="px-4 py-8 text-center text-gray-500">
                        아직 수집 이력이 없습니다.
                      </td>
                    </tr>
                  )}
                </tbody>
              </table>
            </div>
          </div>
        </main>
      </div>
    </div>
  );
}