/*
Copyright (C) 2025 QuantumNous

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as
published by the Free Software Foundation, either version 3 of the
License, or (at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <https://www.gnu.org/licenses/>.

For commercial licensing, please contact support@quantumnous.com
*/

import React, { useMemo, useState, useRef, useEffect } from 'react';
import { TrendingUp, RefreshCw, ChevronDown } from 'lucide-react';
import Sparkline from './Sparkline';
import { renderQuota } from '../../helpers';

const formatMD = (d) => {
  const m = d.getMonth() + 1;
  const day = d.getDate();
  return `${m}/${day}`;
};

const toDateStr = (d) => {
  const y = d.getFullYear();
  const m = String(d.getMonth() + 1).padStart(2, '0');
  const day = String(d.getDate()).padStart(2, '0');
  return `${y}-${m}-${day}`;
};

const RANGE_OPTIONS = [
  { key: 'today', label: '今天' },
  { key: 'yesterday', label: '昨天' },
  { key: '24h', label: '近 24 小时' },
  { key: '7d', label: '近 7 天' },
  { key: '14d', label: '近 14 天' },
  { key: '30d', label: '近 30 天' },
  { key: 'thisMonth', label: '本月' },
  { key: 'lastMonth', label: '上月' },
];

const getRangeDates = (key) => {
  const now = new Date();
  const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
  switch (key) {
    case 'today':
      return { start: today, end: now };
    case 'yesterday': {
      const y = new Date(today.getTime() - 86400000);
      return { start: y, end: new Date(today.getTime() - 1000) };
    }
    case '24h':
      return { start: new Date(now.getTime() - 86400000), end: now };
    case '7d':
      return { start: new Date(today.getTime() - 6 * 86400000), end: now };
    case '14d':
      return { start: new Date(today.getTime() - 13 * 86400000), end: now };
    case '30d':
      return { start: new Date(today.getTime() - 29 * 86400000), end: now };
    case 'thisMonth':
      return { start: new Date(now.getFullYear(), now.getMonth(), 1), end: now };
    case 'lastMonth': {
      const lmStart = new Date(now.getFullYear(), now.getMonth() - 1, 1);
      const lmEnd = new Date(now.getFullYear(), now.getMonth(), 0, 23, 59, 59, 999);
      return { start: lmStart, end: lmEnd };
    }
    default:
      return { start: new Date(today.getTime() - 6 * 86400000), end: now };
  }
};

const BentoTrend = ({
  dailyStats = [],
  topModels = [],
  className = '',
  onRefresh,
  loading = false,
}) => {
  const [rangeOpen, setRangeOpen] = useState(false);
  const [selectedKey, setSelectedKey] = useState('7d');
  const [customStart, setCustomStart] = useState('');
  const [customEnd, setCustomEnd] = useState('');
  const rangeRef = useRef(null);

  useEffect(() => {
    const handler = (e) => {
      if (rangeRef.current && !rangeRef.current.contains(e.target)) {
        setRangeOpen(false);
      }
    };
    document.addEventListener('mousedown', handler);
    return () => document.removeEventListener('mousedown', handler);
  }, []);

  const selectedLabel = RANGE_OPTIONS.find((r) => r.key === selectedKey)?.label || '近 7 天';

  const handleApply = () => {
    if (customStart && customEnd) {
      setSelectedKey('custom');
    }
    setRangeOpen(false);
  };

  const counts = useMemo(() => dailyStats.map((d) => d.count), [dailyStats]);
  const costs = useMemo(() => dailyStats.map((d) => d.cost), [dailyStats]);

  const totalCalls = counts.reduce((s, v) => s + v, 0);
  const totalCost = costs.reduce((s, v) => s + v, 0);
  const avg = totalCalls > 0 ? (totalCalls / Math.max(counts.length, 1)).toFixed(1) : '0.0';
  const peak = counts.length > 0 ? Math.max(...counts) : 0;
  const topMax = topModels[0]?.count || 0;

  return (
    <div
      className={`relative flex flex-col gap-4 rounded-2xl border border-slate-200 bg-white p-6 transition-shadow hover:shadow-md dark:border-white/5 dark:bg-white/[0.02] dark:hover:shadow-black/20 ${className}`}
    >
      <div className='flex items-center justify-between gap-3'>
        <div className='flex items-center gap-3'>
          <div className='flex h-10 w-10 items-center justify-center rounded-xl bg-slate-100 text-slate-600 dark:bg-white/5 dark:text-white/70'>
            <TrendingUp size={18} />
          </div>
          <div>
            <div className='text-sm font-semibold text-slate-900 dark:text-white'>Token 使用趋势</div>
            <div className='mt-0.5 text-[11px] text-slate-400 tabular-nums dark:text-white/40'>
              {selectedLabel}
              <span className='font-semibold text-slate-900 dark:text-white'> {totalCalls}</span> 次
              · 日均{' '}
              <span className='font-semibold text-slate-900 dark:text-white'>{avg}</span>
            </div>
          </div>
        </div>
        <div className='hidden text-right md:block'>
          <div className='text-[10px] uppercase tracking-wider text-slate-400 font-mono dark:text-white/30'>
            花费
          </div>
          <div className='font-mono text-sm font-semibold tabular-nums text-slate-900 dark:text-white'>
            {totalCost > 0 ? renderQuota(totalCost) : '—'}
          </div>
        </div>
      </div>

      <div className='flex items-center justify-between'>
        <div className='flex items-center gap-2' ref={rangeRef}>
          <div className='relative'>
            <button
              onClick={() => setRangeOpen(!rangeOpen)}
              className='inline-flex items-center gap-1.5 rounded-full border border-slate-200 bg-white px-3 py-1.5 text-xs font-medium text-slate-700 transition-colors hover:border-slate-300 dark:border-white/10 dark:bg-white/[0.02] dark:text-white/70 dark:hover:bg-white/5'
            >
              {selectedLabel}
              <ChevronDown size={12} className='text-slate-400 dark:text-white/40' />
            </button>

            {rangeOpen && (
              <div className='absolute left-0 top-full z-50 mt-1 w-64 rounded-xl border border-slate-200 bg-white p-3 shadow-lg dark:border-white/10 dark:bg-neutral-900'>
                <div className='space-y-0.5'>
                  {RANGE_OPTIONS.map((opt) => (
                    <button
                      key={opt.key}
                      onClick={() => {
                        setSelectedKey(opt.key);
                        setCustomStart('');
                        setCustomEnd('');
                        setRangeOpen(false);
                      }}
                      className={`w-full rounded-lg px-3 py-1.5 text-left text-xs transition-colors ${
                        selectedKey === opt.key
                          ? 'bg-slate-100 font-medium text-slate-900 dark:bg-white/10 dark:text-white'
                          : 'text-slate-600 hover:bg-slate-50 dark:text-white/60 dark:hover:bg-white/5'
                      }`}
                    >
                      {opt.label}
                    </button>
                  ))}
                </div>

                <div className='my-2 border-t border-slate-100 dark:border-white/5' />

                <div className='space-y-2'>
                  <div className='flex items-center gap-2'>
                    <input
                      type='date'
                      value={customStart}
                      onChange={(e) => setCustomStart(e.target.value)}
                      className='flex-1 rounded-lg border border-slate-200 bg-white px-2 py-1 text-xs text-slate-700 outline-none focus:border-slate-400 dark:border-white/10 dark:bg-white/[0.02] dark:text-white/70 dark:focus:border-white/30'
                      placeholder='开始日期'
                    />
                    <span className='text-xs text-slate-400'>—</span>
                    <input
                      type='date'
                      value={customEnd}
                      onChange={(e) => setCustomEnd(e.target.value)}
                      className='flex-1 rounded-lg border border-slate-200 bg-white px-2 py-1 text-xs text-slate-700 outline-none focus:border-slate-400 dark:border-white/10 dark:bg-white/[0.02] dark:text-white/70 dark:focus:border-white/30'
                      placeholder='结束日期'
                    />
                  </div>
                  <button
                    onClick={handleApply}
                    disabled={!customStart || !customEnd}
                    className='w-full rounded-lg bg-slate-900 py-1.5 text-xs font-medium text-white transition-colors hover:bg-slate-800 disabled:opacity-40 dark:bg-white dark:text-neutral-900 dark:hover:bg-white/90'
                  >
                    应用
                  </button>
                </div>
              </div>
            )}
          </div>

          <button
            onClick={onRefresh}
            disabled={loading}
            className='flex h-7 w-7 items-center justify-center rounded-full border border-slate-200 bg-white text-slate-500 transition-colors hover:border-slate-300 hover:bg-slate-50 hover:text-slate-700 disabled:opacity-50 dark:border-white/10 dark:bg-white/[0.02] dark:text-white/60 dark:hover:bg-white/5 dark:hover:text-white'
            title='刷新'
          >
            <RefreshCw size={12} className={loading ? 'animate-spin' : ''} />
          </button>
        </div>
      </div>

      <div className='flex min-h-[80px] flex-1 items-end text-blue-500'>
        <Sparkline data={counts} height={80} />
      </div>

      <div className='flex items-center justify-between text-[11px]'>
        <div className='flex w-full items-center justify-between tabular-nums'>
          {dailyStats.map((d, i) => (
            <span
              key={i}
              className='text-center text-xs text-slate-500 dark:text-white/50'
              title={`${d.date.getMonth() + 1}月${d.date.getDate()}日 ${d.count} 次`}
            >
              {formatMD(d.date)}
            </span>
          ))}
        </div>
        <div className='ml-4 shrink-0 text-slate-500 tabular-nums dark:text-white/50'>
          峰值{' '}
          <span className='font-semibold text-slate-900 dark:text-white'>{peak}</span> 次
        </div>
      </div>

      {topModels.length > 0 && (
        <div className='border-t border-slate-100 pt-4 dark:border-white/5'>
          <div className='mb-2 flex items-center justify-between text-[11px] uppercase tracking-wider text-slate-400 dark:text-white/40'>
            <span>Top 5 模型</span>
            <span className='font-mono normal-case tracking-normal'>近 30 日</span>
          </div>
          <ul className='space-y-1.5'>
            {topModels.map((m, i) => {
              const pct = topMax > 0 ? (m.count / topMax) * 100 : 0;
              return (
                <li
                  key={m.name + i}
                  className='flex items-center gap-3 text-xs'
                  title={m.name}
                >
                  <span className='w-3 shrink-0 text-right font-mono text-[10px] text-slate-300 tabular-nums dark:text-white/30'>
                    {i + 1}
                  </span>
                  <span className='min-w-0 flex-1 truncate text-slate-700 dark:text-white/80'>
                    {m.name}
                  </span>
                  <div className='hidden h-1 w-24 overflow-hidden rounded-full bg-slate-100 sm:block dark:bg-white/5'>
                    <div
                      className='h-full rounded-full bg-slate-300 dark:bg-white/30'
                      style={{ width: `${pct}%` }}
                    />
                  </div>
                  <span className='w-12 shrink-0 text-right font-mono tabular-nums text-slate-500 dark:text-white/60'>
                    {m.count}
                  </span>
                </li>
              );
            })}
          </ul>
        </div>
      )}
    </div>
  );
};

export default BentoTrend;