import { useEffect, useState, useCallback } from 'react';
import { useNavigate } from 'react-router-dom';
import ReactEChartsCore from 'echarts-for-react/lib/core';
import * as echarts from 'echarts/core';
import { LineChart } from 'echarts/charts';
import { GridComponent, TooltipComponent } from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
import { useAuthStore } from '../store/auth';
import { profileApi, authApi } from '../lib/api';
import type { ProfileOverview, AdminRecord } from '../types';
import { showToast } from '../components/Toast';
import styles from './ProfilePage.module.css';
import { AxiosError } from 'axios';

echarts.use([LineChart, GridComponent, TooltipComponent, CanvasRenderer]);

export function ProfilePage() {
  const user = useAuthStore((s) => s.user);
  const logout = useAuthStore((s) => s.logout);
  const navigate = useNavigate();

  const [overview, setOverview] = useState<ProfileOverview | null>(null);
  const [records, setRecords] = useState<AdminRecord[]>([]);
  const [recordsTotal, setRecordsTotal] = useState(0);
  const [recordsPage, setRecordsPage] = useState(1);
  const [trendPeriod, setTrendPeriod] = useState<'7d' | '30d'>('7d');
  const [loading, setLoading] = useState(true);
  const [pwModalOpen, setPwModalOpen] = useState(false);
  const [oldPw, setOldPw] = useState('');
  const [newPw, setNewPw] = useState('');
  const [confirmPw, setConfirmPw] = useState('');
  const [pwError, setPwError] = useState('');
  const [pwSaving, setPwSaving] = useState(false);

  const fetchOverview = useCallback(async () => {
    try {
      const { data } = await profileApi.getOverview(trendPeriod);
      setOverview(data);
    } catch {
      showToast('加载消费概览失败');
    }
  }, [trendPeriod]);

  const fetchRecords = useCallback(async () => {
    try {
      const { data } = await profileApi.getRecords(recordsPage, 20);
      if (recordsPage === 1) {
        setRecords(data.results);
      } else {
        setRecords((prev) => [...prev, ...data.results]);
      }
      setRecordsTotal(data.total);
    } catch {
      showToast('加载消费记录失败');
    }
  }, [recordsPage]);

  useEffect(() => {
    Promise.all([fetchOverview(), fetchRecords()]).finally(() => setLoading(false));
  }, []);

  useEffect(() => { fetchOverview(); }, [fetchOverview]);
  useEffect(() => { fetchRecords(); }, [fetchRecords]);

  const handleLogout = () => {
    logout();
    navigate('/login', { replace: true });
  };

  const handleChangePassword = async () => {
    setPwError('');
    if (!oldPw) { setPwError('请输入旧密码'); return; }
    if (newPw.length < 8) { setPwError('新密码至少8位'); return; }
    if (newPw !== confirmPw) { setPwError('两次输入的新密码不一致'); return; }
    setPwSaving(true);
    try {
      await authApi.changePassword(oldPw, newPw);
      showToast('密码修改成功，请重新登录');
      setPwModalOpen(false);
      setOldPw(''); setNewPw(''); setConfirmPw('');
      setTimeout(() => { logout(); navigate('/login', { replace: true }); }, 1500);
    } catch (err) {
      const msg = (err as AxiosError<{ message?: string }>)?.response?.data?.message || '修改失败';
      setPwError(msg);
    } finally {
      setPwSaving(false);
    }
  };

  if (loading || !overview) {
    return (
      <div className={styles.page}>
        <div className={styles.skeleton}>
          <div className={styles.skeletonBar} />
          <div className={styles.skeletonCards} />
          <div className={styles.skeletonChart} />
        </div>
      </div>
    );
  }

  const dailyGenLimit = overview.daily_generation_limit || 0;
  const dailyGenUsed = overview.daily_generation_used || 0;
  const monthlyGenLimit = overview.monthly_generation_limit || 0;
  const monthlyGenUsed = overview.monthly_generation_used || 0;

  const dailyPercent = dailyGenLimit > 0 ? (dailyGenUsed / dailyGenLimit) * 100 : 0;
  const monthlyPercent = monthlyGenLimit > 0 ? (monthlyGenUsed / monthlyGenLimit) * 100 : 0;

  const sparklineOption: echarts.EChartsCoreOption = {
    tooltip: {
      trigger: 'axis',
      backgroundColor: '#1e1e2a',
      borderColor: '#2a2a38',
      textStyle: { color: '#e2e8f0', fontSize: 12 },
    },
    grid: { left: 0, right: 0, top: 5, bottom: 0, containLabel: false },
    xAxis: { type: 'category', show: false, data: overview.daily_trend.map((d) => d.date.slice(5)) },
    yAxis: { type: 'value', show: false },
    series: [{
      type: 'line',
      data: overview.daily_trend.map((d) => d.seconds),
      smooth: true,
      symbol: 'none',
      lineStyle: { color: '#00b8e6', width: 2 },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: 'rgba(0, 184, 230, 0.3)' },
          { offset: 1, color: 'rgba(0, 184, 230, 0.02)' },
        ]),
      },
    }],
  };

  const statusMap: Record<string, string> = { queued: '排队中', processing: '生成中', completed: '已完成', failed: '失败' };

  return (
    <div className={styles.page}>
      <header className={styles.header}>
        <button className={styles.backBtn} onClick={() => navigate('/app')}>
          <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
            <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/>
          </svg>
          返回首页
        </button>
        <h1 className={styles.pageTitle}>个人中心</h1>
        <div className={styles.headerRight}>
          <span className={styles.username}>{user?.username}</span>
          <button className={styles.changePwBtn} onClick={() => setPwModalOpen(true)}>修改密码</button>
          <button className={styles.logoutBtn} onClick={handleLogout}>退出</button>
        </div>
      </header>

      {/* Quota warning */}
      {dailyPercent >= 80 && dailyPercent < 100 && (
        <div className={styles.warningBanner}>今日额度已使用 {dailyPercent.toFixed(0)}%，请合理使用</div>
      )}
      {dailyPercent >= 100 && (
        <div className={styles.dangerBanner}>今日额度已用完，请明天再试</div>
      )}

      {/* Consumption Overview */}
      <div className={styles.overviewSection}>
        <h2 className={styles.sectionTitle}>消费概览</h2>
        <div className={styles.overviewGrid}>
          <div className={styles.quotaCard}>
            <div className={styles.quotaLabel}>今日生成</div>
            <div className={styles.quotaValue}>{dailyGenUsed} / {dailyGenLimit === -1 ? '不限' : dailyGenLimit + '次'}</div>
            <div className={styles.progressBar}>
              <div className={styles.progressFill} style={{
                width: `${Math.min(dailyPercent, 100)}%`,
                background: dailyPercent > 80 ? (dailyPercent >= 100 ? 'var(--color-danger)' : 'var(--color-warning)') : 'var(--color-primary)',
              }} />
            </div>
            <div className={styles.quotaPercent}>今日消费 ¥{(overview.daily_spent || 0).toFixed(2)}</div>
          </div>
          <div className={styles.quotaCard}>
            <div className={styles.quotaLabel}>本月生成</div>
            <div className={styles.quotaValue}>{monthlyGenUsed} / {monthlyGenLimit === -1 ? '不限' : monthlyGenLimit + '次'}</div>
            <div className={styles.progressBar}>
              <div className={styles.progressFill} style={{
                width: `${Math.min(monthlyPercent, 100)}%`,
                background: monthlyPercent > 80 ? 'var(--color-warning)' : 'var(--color-primary)',
              }} />
            </div>
            <div className={styles.quotaPercent}>本月消费 ¥{(overview.monthly_spent || 0).toFixed(2)}</div>
          </div>
          {overview.team && (
            <div className={styles.quotaCard}>
              <div className={styles.quotaLabel}>团队 — {overview.team.name}</div>
              <div className={styles.quotaValue}>余额: ¥{(overview.team.balance || 0).toFixed(2)}</div>
              <div className={styles.progressBar}>
                <div className={styles.progressFill} style={{ width: '0%' }} />
              </div>
              <div className={styles.quotaPercent}>可用余额 ¥{(overview.team.available_balance || 0).toFixed(2)}</div>
            </div>
          )}
        </div>
      </div>

      {/* Consumption Trend */}
      <div className={styles.trendSection}>
        <div className={styles.trendHeader}>
          <h2 className={styles.sectionTitle}>消费趋势</h2>
          <div className={styles.trendTabs}>
            <button className={trendPeriod === '7d' ? styles.tabActive : styles.tab} onClick={() => setTrendPeriod('7d')}>近7天</button>
            <button className={trendPeriod === '30d' ? styles.tabActive : styles.tab} onClick={() => setTrendPeriod('30d')}>近30天</button>
          </div>
        </div>
        <div className={styles.sparklineWrapper}>
          <ReactEChartsCore echarts={echarts} option={sparklineOption} style={{ height: 80 }} />
        </div>
      </div>

      {/* Consumption Records */}
      <div className={styles.recordsSection}>
        <h2 className={styles.sectionTitle}>消费记录</h2>
        <div className={styles.recordsList}>
          {records.length === 0 ? (
            <div className={styles.empty}>暂无记录</div>
          ) : (
            records.map((r) => (
              <div key={r.id} className={styles.recordItem}>
                <div className={styles.recordLeft}>
                  <div className={styles.recordTime}>{new Date(r.created_at).toLocaleString('zh-CN')}</div>
                  <div className={styles.recordPrompt}>{r.prompt || '-'}</div>
                </div>
                <div className={styles.recordRight}>
                  <span className={styles.recordSeconds}>¥{(r.cost_amount || 0).toFixed(2)}</span>
                  <span className={styles.recordMode}>{r.mode === 'universal' ? '全能参考' : '首尾帧'}</span>
                  <span className={`${styles.recordStatus} ${styles[r.status]}`}>{statusMap[r.status]}</span>
                </div>
              </div>
            ))
          )}
        </div>
        {records.length < recordsTotal && (
          <button className={styles.loadMoreBtn} onClick={() => setRecordsPage((p) => p + 1)}>
            加载更多
          </button>
        )}
      </div>

      {pwModalOpen && (
        <div className={styles.modalOverlay} onMouseDown={(e) => { if (e.target === e.currentTarget) setPwModalOpen(false); }}>
          <div className={styles.modal}>
            <h3 className={styles.modalTitle}>修改密码</h3>
            <div className={styles.formGroup}>
              <label className={styles.formLabel}>旧密码</label>
              <input type="password" className={styles.formInput} value={oldPw}
                onChange={(e) => setOldPw(e.target.value)} placeholder="请输入当前密码" />
            </div>
            <div className={styles.formGroup}>
              <label className={styles.formLabel}>新密码</label>
              <input type="password" className={styles.formInput} value={newPw}
                onChange={(e) => setNewPw(e.target.value)} placeholder="至少8位" />
            </div>
            <div className={styles.formGroup}>
              <label className={styles.formLabel}>确认新密码</label>
              <input type="password" className={styles.formInput} value={confirmPw}
                onChange={(e) => setConfirmPw(e.target.value)} placeholder="再次输入新密码"
                onKeyDown={(e) => e.key === 'Enter' && handleChangePassword()} />
            </div>
            {pwError && <div className={styles.formError}>{pwError}</div>}
            <div className={styles.modalActions}>
              <button className={styles.cancelBtn} onClick={() => setPwModalOpen(false)}>取消</button>
              <button className={styles.saveBtn} onClick={handleChangePassword} disabled={pwSaving}>
                {pwSaving ? '修改中...' : '确认修改'}
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}