import React, { useState, useEffect } from 'react';
import { motion } from 'framer-motion';
import { Cpu, HardDrive, MemoryStick } from 'lucide-react';
import StatCard from '../components/StatCard';
import NetworkCard from '../components/NetworkCard';
import SystemChart from '../components/SystemChart';
import NetworkChart from '../components/NetworkChart';

/**
 * 시스템 페이지 컴포넌트
 * 실시간 시스템 통계를 표시합니다.
 * 
 * @param {Object} props
 * @param {Object} props.stats - 시스템 통계 데이터
 */
export default function System({ stats }) {
  // 화면 크기에 따른 데이터 포인트 개수 계산
  const getMaxPoints = () => {
    if (typeof window === 'undefined') return 10;
    if (window.innerWidth < 640) return 4;   // 모바일
    if (window.innerWidth < 1024) return 7;  // 태블릿
    return 10; // 데스크탑
  };

  const [maxPoints, setMaxPoints] = useState(10); // 초기값은 안전하게 10으로 설정 후 useEffect에서 조정

  // 초기 상태 설정 및 리사이즈 이벤트 리스너
  useEffect(() => {
    setMaxPoints(getMaxPoints());

    const handleResize = () => {
      setMaxPoints(getMaxPoints());
    };

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  // maxPoints 변경 시 history 길이 조정
  useEffect(() => {
    setHistory(prev => {
      if (prev.length === 0) return prev; // 초기화 전이면 패스

      if (maxPoints > prev.length) {
        // 늘어난 만큼 과거 데이터(빈 값) 추가
        const paddingCount = maxPoints - prev.length;
        const oldestTimeStr = prev[0].time;
        const [h, m, s] = oldestTimeStr.split(':').map(Number);
        const oldestDate = new Date();
        oldestDate.setHours(h, m, s);
        
        const newPadding = [];
        for (let i = 1; i <= paddingCount; i++) {
             const d = new Date(oldestDate.getTime() - i * 2000);
             const timeStr = `${d.getHours()}:${d.getMinutes().toString().padStart(2, '0')}:${d.getSeconds().toString().padStart(2, '0')}`;
             newPadding.unshift({ 
               time: timeStr, 
               cpu: null, 
               memory: null,
               disk: null,
               net_recv: null,
               net_sent: null
             });
        }
        return [...newPadding, ...prev];
      } else if (maxPoints < prev.length) {
        // 줄어든 만큼 오래된 데이터 제거
        return prev.slice(prev.length - maxPoints);
      }
      return prev;
    });
  }, [maxPoints]);

  // 초기 상태: maxPoints에 맞춰 빈 데이터 포인트 생성
  const [history, setHistory] = useState(() => {
    // 초기 렌더링 시에는 window 접근이 어려울 수 있으므로 기본값(15) 기준으로 생성하고
    // useEffect에서 maxPoints가 확정되면 맞춰짐
    const initialData = [];
    const now = new Date();
    // 일단 10개 생성 (나중에 줄어들더라도 넉넉하게)
    for (let i = 9; i >= 0; i--) {
      const d = new Date(now.getTime() - i * 2000);
      const timeStr = `${d.getHours()}:${d.getMinutes().toString().padStart(2, '0')}:${d.getSeconds().toString().padStart(2, '0')}`;
      initialData.push({
        time: timeStr,
        cpu: null,
        memory: null,
        disk: null,
        net_recv: null,
        net_sent: null
      });
    }
    return initialData;
  });

  // stats가 업데이트될 때마다 이력 저장
  useEffect(() => {
    const now = new Date();
    const timeStr = `${now.getHours()}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}`;
    
    setHistory(prev => {
      const newData = { 
        time: timeStr, 
        cpu: parseFloat(stats.cpu) || 0, 
        memory: parseFloat(stats.mem_percent) || 0,
        disk: parseFloat(stats.disk_percent) || 0,
        net_recv: parseFloat(stats.net_recv) || 0,
        net_sent: parseFloat(stats.net_sent) || 0
      };
      // maxPoints 유지하며 업데이트
      const updated = [...prev, newData];
      return updated.slice(-maxPoints);
    });
  }, [stats, maxPoints]);

  return (
    <motion.section 
      key="system"
      initial={{ opacity: 0, y: 10 }} 
      animate={{ opacity: 1, y: 0 }} 
      exit={{ opacity: 0, y: -10 }}
      transition={{ duration: 0.2 }}
    >
      <div className="mb-8">
        <h1 className="text-3xl font-bold mb-2">시스템 상태</h1>
        <p className="text-slate-400">서버의 현재 상태를 실시간으로 모니터링합니다.</p>
      </div>
      <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6">
        <StatCard 
          title="CPU" 
          value={`${stats.cpu}%`} 
          sub={`${stats.cpu_cores} 코어 / ${stats.cpu_threads} 스레드`} 
          icon={Cpu} 
        />
        <StatCard 
          title="메모리" 
          value={`${stats.mem_percent}%`} 
          sub={`${stats.mem_used} / ${stats.mem_total} GB`} 
          icon={MemoryStick} 
        />
        <StatCard 
          title="디스크 (Root)" 
          value={`${stats.disk_percent}%`} 
          sub={`${stats.disk_used} / ${stats.disk_total} GB`} 
          icon={HardDrive} 
        />
        <NetworkCard 
          recv={stats.net_recv} 
          sent={stats.net_sent} 
        />
      </div>

      {/* 시스템 리소스 차트 */}
      <SystemChart data={history} />
      
      {/* 네트워크 차트 */}
      <NetworkChart data={history} />
    </motion.section>
  );
}
