import { useState, useEffect, useCallback } from 'react';
import {
  LineChart, Line, BarChart, Bar, XAxis, YAxis, CartesianGrid,
  Tooltip, Legend, ResponsiveContainer, Area, ComposedChart,
} from 'recharts';
import type { UsageTrendResponse } from '../../types/statistics';
import { getUsageTrend } from '../../services/statisticsService';
import { CHART_COLORS_HEX } from '../../constants/chart';
import { useTheme } from '../../hooks/useTheme';

type Period = 'daily' | 'weekly' | 'monthly';

const PERIOD_OPTIONS: { key: Period; label: string }[] = [
  { key: 'daily', label: '일별' },
  { key: 'weekly', label: '주별' },
  { key: 'monthly', label: '월별' },
];

const formatLabel = (label: string, period: Period): string => {
  if (period === 'daily') {
    const d = new Date(label);
    return `${d.getMonth() + 1}/${d.getDate()}`;
  }
  if (period === 'weekly') {
    const d = new Date(label);
    return `${d.getMonth() + 1}/${d.getDate()}~`;
  }
  return label;
};

const getSuccessRateColor = (rate: number): string => {
  if (rate >= 99) return 'text-green-600';
  if (rate >= 95) return 'text-yellow-600';
  return 'text-red-600';
};

const UsageTrendPage = () => {
  const { theme } = useTheme();
  const chartColors = CHART_COLORS_HEX[theme];
  const [period, setPeriod] = useState<Period>('daily');
  const [data, setData] = useState<UsageTrendResponse | null>(null);
  const [isLoading, setIsLoading] = useState(true);

  const fetchData = useCallback(async () => {
    setIsLoading(true);
    try {
      const res = await getUsageTrend(period);
      if (res.success && res.data) {
        setData(res.data);
      }
    } finally {
      setIsLoading(false);
    }
  }, [period]);

  useEffect(() => {
    fetchData();
  }, [fetchData]);

  const chartData = data?.items.map((item) => ({
    ...item,
    formattedLabel: formatLabel(item.label, period),
  })) ?? [];

  return (
    <div className="max-w-7xl mx-auto">
      <h1 className="text-2xl font-bold text-[var(--color-text-primary)] mb-6">사용량 추이</h1>

      {/* Period Tabs */}
      <div className="flex border-b border-[var(--color-border)] mb-6">
        {PERIOD_OPTIONS.map((opt) => (
          <button
            key={opt.key}
            onClick={() => setPeriod(opt.key)}
            className={`px-4 py-2 text-sm font-medium -mb-px ${
              period === opt.key
                ? 'border-b-2 border-[var(--color-primary)] text-[var(--color-primary)]'
                : 'text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)]'
            }`}
          >
            {opt.label}
          </button>
        ))}
      </div>

      {isLoading ? (
        <div className="flex items-center justify-center h-64">
          <div className="text-[var(--color-text-secondary)]">로딩 중...</div>
        </div>
      ) : !data || data.items.length === 0 ? (
        <p className="text-[var(--color-text-tertiary)] text-center py-20">데이터가 없습니다</p>
      ) : (
        <>
          {/* Chart 1: 요청 수 추이 (full width) */}
          <div className="bg-[var(--color-bg-surface)] rounded-lg shadow p-6 mb-6">
            <h3 className="text-lg font-semibold text-[var(--color-text-primary)] mb-4">요청 수 추이</h3>
            <ResponsiveContainer width="100%" height={350}>
              <LineChart data={chartData}>
                <defs>
                  <linearGradient id="totalRequestsFill" x1="0" y1="0" x2="0" y2="1">
                    <stop offset="5%" stopColor={chartColors[0]} stopOpacity={0.15} />
                    <stop offset="95%" stopColor={chartColors[0]} stopOpacity={0} />
                  </linearGradient>
                </defs>
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="formattedLabel" />
                <YAxis />
                <Tooltip />
                <Legend />
                <Area
                  type="monotone"
                  dataKey="totalRequests"
                  stroke="none"
                  fill="url(#totalRequestsFill)"
                  name="총 요청"
                />
                <Line
                  type="monotone"
                  dataKey="totalRequests"
                  stroke={chartColors[0]}
                  name="총 요청"
                  strokeWidth={2}
                  dot={false}
                />
                <Line
                  type="monotone"
                  dataKey="failureCount"
                  stroke="#ef4444"
                  name="실패 수"
                  strokeWidth={2}
                  dot={false}
                />
              </LineChart>
            </ResponsiveContainer>
          </div>

          {/* Charts 2 & 3: 2 column grid */}
          <div className="grid grid-cols-2 gap-6 mb-6">
            {/* Chart 2: 성공률 + 응답시간 추이 */}
            <div className="bg-[var(--color-bg-surface)] rounded-lg shadow p-6">
              <h3 className="text-lg font-semibold text-[var(--color-text-primary)] mb-4">성공률 + 응답시간 추이</h3>
              <ResponsiveContainer width="100%" height={300}>
                <ComposedChart data={chartData}>
                  <CartesianGrid strokeDasharray="3 3" />
                  <XAxis dataKey="formattedLabel" />
                  <YAxis yAxisId="left" unit="%" domain={[0, 100]} />
                  <YAxis yAxisId="right" orientation="right" unit="ms" />
                  <Tooltip />
                  <Legend />
                  <Line
                    yAxisId="left"
                    type="monotone"
                    dataKey="successRate"
                    stroke="#10b981"
                    name="성공률(%)"
                    strokeWidth={2}
                    dot={false}
                  />
                  <Bar
                    yAxisId="right"
                    dataKey="avgResponseTime"
                    fill={chartColors[0]}
                    name="평균 응답시간(ms)"
                    barSize={20}
                  />
                </ComposedChart>
              </ResponsiveContainer>
            </div>

            {/* Chart 3: 활성 사용자 추이 */}
            <div className="bg-[var(--color-bg-surface)] rounded-lg shadow p-6">
              <h3 className="text-lg font-semibold text-[var(--color-text-primary)] mb-4">활성 사용자 추이</h3>
              <ResponsiveContainer width="100%" height={300}>
                <BarChart data={chartData}>
                  <CartesianGrid strokeDasharray="3 3" />
                  <XAxis dataKey="formattedLabel" />
                  <YAxis />
                  <Tooltip />
                  <Legend />
                  <Bar dataKey="activeUsers" fill={chartColors[1]} name="활성 사용자" />
                </BarChart>
              </ResponsiveContainer>
            </div>
          </div>

          {/* Table: 상세 데이터 */}
          <div className="bg-[var(--color-bg-surface)] rounded-lg shadow">
            <div className="p-6 border-b border-[var(--color-border)]">
              <h3 className="text-lg font-semibold text-[var(--color-text-primary)]">상세 데이터</h3>
            </div>
            <div className="overflow-x-auto">
              <table className="w-full text-sm">
                <thead className="bg-[var(--color-bg-base)]">
                  <tr>
                    <th className="px-4 py-3 text-left text-xs font-medium text-[var(--color-text-secondary)] uppercase">기간</th>
                    <th className="px-4 py-3 text-left text-xs font-medium text-[var(--color-text-secondary)] uppercase">총 요청</th>
                    <th className="px-4 py-3 text-left text-xs font-medium text-[var(--color-text-secondary)] uppercase">성공</th>
                    <th className="px-4 py-3 text-left text-xs font-medium text-[var(--color-text-secondary)] uppercase">실패</th>
                    <th className="px-4 py-3 text-left text-xs font-medium text-[var(--color-text-secondary)] uppercase">성공률(%)</th>
                    <th className="px-4 py-3 text-left text-xs font-medium text-[var(--color-text-secondary)] uppercase">평균 응답시간(ms)</th>
                    <th className="px-4 py-3 text-left text-xs font-medium text-[var(--color-text-secondary)] uppercase">활성 사용자</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-[var(--color-border)]">
                  {data.items.map((item) => (
                    <tr key={item.label} className="hover:bg-[var(--color-bg-base)]">
                      <td className="px-4 py-3 text-[var(--color-text-primary)]">
                        {formatLabel(item.label, period)}
                      </td>
                      <td className="px-4 py-3 text-[var(--color-text-primary)]">
                        {item.totalRequests.toLocaleString()}
                      </td>
                      <td className="px-4 py-3 text-[var(--color-text-primary)]">
                        {item.successCount.toLocaleString()}
                      </td>
                      <td className="px-4 py-3 text-[var(--color-text-primary)]">
                        {item.failureCount.toLocaleString()}
                      </td>
                      <td className={`px-4 py-3 font-medium ${getSuccessRateColor(item.successRate)}`}>
                        {item.successRate.toFixed(1)}
                      </td>
                      <td className="px-4 py-3 text-[var(--color-text-primary)]">
                        {item.avgResponseTime.toFixed(0)}
                      </td>
                      <td className="px-4 py-3 text-[var(--color-text-primary)]">
                        {item.activeUsers.toLocaleString()}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        </>
      )}
    </div>
  );
};

export default UsageTrendPage;