import { useState, useEffect, useCallback } from 'react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Card, CardContent } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Switch } from '@/components/ui/switch';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import {
  Plus,
  Trash2,
  Pencil,
  RefreshCw,
  Loader2,
  TrendingUp,
  TrendingDown,
  Wallet,
  CalendarDays,
  AlertTriangle,
  Bell,
} from 'lucide-react';
import { toast } from 'sonner';
import { useConfirm } from '@/components/ui/confirm-dialog';
import { billingApi } from '@/services/api';

const providerLabels: Record<string, string> = {
  aliyun: '阿里云',
  tencent: '腾讯云',
  aws: 'AWS',
  huawei: '华为云',
  azure: 'Azure',
};

const providerColors: Record<string, string> = {
  aliyun: 'bg-orange-500',
  tencent: 'bg-blue-500',
  aws: 'bg-amber-500',
  huawei: 'bg-red-500',
  azure: 'bg-sky-500',
};

function formatCurrency(n: number) {
  return `¥${n.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
}

export function CloudBilling() {
  const confirm = useConfirm();

  const [activeTab, setActiveTab] = useState<'overview' | 'records' | 'alerts'>('overview');

  const [stats, setStats] = useState<any>(null);
  const [statsLoading, setStatsLoading] = useState(true);

  const [records, setRecords] = useState<any[]>([]);
  const [recordsLoading, setRecordsLoading] = useState(true);
  const [filterProvider, setFilterProvider] = useState('');
  const [filterStart, setFilterStart] = useState('');
  const [filterEnd, setFilterEnd] = useState('');

  const [rules, setRules] = useState<any[]>([]);
  const [rulesLoading, setRulesLoading] = useState(true);

  const [recordDialogOpen, setRecordDialogOpen] = useState(false);
  const [editingRecord, setEditingRecord] = useState<any>(null);
  const [ruleDialogOpen, setRuleDialogOpen] = useState(false);
  const [editingRule, setEditingRule] = useState<any>(null);
  const [submitting, setSubmitting] = useState(false);

  const emptyRecord = { provider: 'aliyun', billing_date: '', cost: '', service: '', region: '', account_name: '', description: '' };
  const [recordForm, setRecordForm] = useState<any>(emptyRecord);
  const emptyRule = { name: '', provider: '', metric: 'daily', threshold: '', operator: '>', enabled: true };
  const [ruleForm, setRuleForm] = useState<any>(emptyRule);

  const loadStats = useCallback(async () => {
    setStatsLoading(true);
    try {
      const res = await billingApi.getStats();
      setStats(res);
    } catch (e: any) {
      toast.error('加载统计失败', { description: e.message });
    } finally {
      setStatsLoading(false);
    }
  }, []);

  const loadRecords = useCallback(async () => {
    setRecordsLoading(true);
    try {
      const params: any = {};
      if (filterProvider) params.provider = filterProvider;
      if (filterStart) params.start_date = filterStart;
      if (filterEnd) params.end_date = filterEnd;
      const res = await billingApi.list(params);
      setRecords(res.list || []);
    } catch (e: any) {
      toast.error('加载账单失败', { description: e.message });
    } finally {
      setRecordsLoading(false);
    }
  }, [filterProvider, filterStart, filterEnd]);

  const loadRules = useCallback(async () => {
    setRulesLoading(true);
    try {
      const res = await billingApi.listAlertRules();
      setRules(res.list || []);
    } catch (e: any) {
      toast.error('加载预警规则失败', { description: e.message });
    } finally {
      setRulesLoading(false);
    }
  }, []);

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

  useEffect(() => {
    if (activeTab === 'records') loadRecords();
  }, [activeTab, loadRecords]);

  useEffect(() => {
    if (activeTab === 'alerts') loadRules();
  }, [activeTab, loadRules]);

  const openAddRecord = () => {
    setEditingRecord(null);
    setRecordForm({ ...emptyRecord, billing_date: new Date().toISOString().slice(0, 10) });
    setRecordDialogOpen(true);
  };

  const openEditRecord = (r: any) => {
    setEditingRecord(r);
    setRecordForm({ provider: r.provider, billing_date: r.billing_date, cost: r.cost, service: r.service || '', region: r.region || '', account_name: r.account_name || '', description: r.description || '' });
    setRecordDialogOpen(true);
  };

  const handleSaveRecord = async () => {
    if (!recordForm.provider || !recordForm.billing_date || !recordForm.cost) {
      toast.error('请填写必填字段');
      return;
    }
    setSubmitting(true);
    try {
      const data = { ...recordForm, cost: parseFloat(recordForm.cost) };
      if (editingRecord) {
        await billingApi.remove(editingRecord.id);
        await billingApi.create(data);
      } else {
        await billingApi.create(data);
      }
      setRecordDialogOpen(false);
      loadRecords();
      loadStats();
      toast('保存成功');
    } catch (e: any) {
      toast.error('保存失败', { description: e.message });
    } finally {
      setSubmitting(false);
    }
  };

  const handleDeleteRecord = async (id: number) => {
    const ok = await confirm({ title: '删除账单记录', description: '确定删除这条成本记录？', variant: 'destructive' });
    if (!ok) return;
    try {
      await billingApi.remove(id);
      loadRecords();
      loadStats();
      toast('删除成功');
    } catch (e: any) {
      toast.error('删除失败', { description: e.message });
    }
  };

  const openAddRule = () => {
    setEditingRule(null);
    setRuleForm({ ...emptyRule });
    setRuleDialogOpen(true);
  };

  const openEditRule = (r: any) => {
    setEditingRule(r);
    setRuleForm({ name: r.name, provider: r.provider || '', metric: r.metric || 'daily', threshold: r.threshold, operator: r.operator || '>', enabled: r.enabled });
    setRuleDialogOpen(true);
  };

  const handleSaveRule = async () => {
    if (!ruleForm.name || !ruleForm.threshold) {
      toast.error('请填写规则名称和阈值');
      return;
    }
    setSubmitting(true);
    try {
      const data = { ...ruleForm, threshold: parseFloat(ruleForm.threshold) };
      if (editingRule) {
        await billingApi.updateAlertRule(editingRule.id, data);
      } else {
        await billingApi.createAlertRule(data);
      }
      setRuleDialogOpen(false);
      loadRules();
      loadStats();
      toast('保存成功');
    } catch (e: any) {
      toast.error('保存失败', { description: e.message });
    } finally {
      setSubmitting(false);
    }
  };

  const handleDeleteRule = async (id: number) => {
    const ok = await confirm({ title: '删除预警规则', description: '确定删除此预警规则？', variant: 'destructive' });
    if (!ok) return;
    try {
      await billingApi.deleteAlertRule(id);
      loadRules();
      toast('删除成功');
    } catch (e: any) {
      toast.error('删除失败', { description: e.message });
    }
  };

  const handleToggleRule = async (id: number) => {
    try {
      await billingApi.toggleAlertRule(id);
      loadRules();
      loadStats();
    } catch (e: any) {
      toast.error('操作失败', { description: e.message });
    }
  };

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <h2 className="text-lg font-semibold text-slate-100">云账单管理</h2>
        <div className="flex items-center gap-2">
          <Button variant="outline" size="sm" onClick={() => { loadStats(); if (activeTab === 'records') loadRecords(); if (activeTab === 'alerts') loadRules(); }}>
            <RefreshCw className="h-4 w-4 mr-1" />刷新
          </Button>
          {activeTab === 'records' && (
            <Button size="sm" onClick={openAddRecord}>
              <Plus className="h-4 w-4 mr-1" />记录成本
            </Button>
          )}
          {activeTab === 'alerts' && (
            <Button size="sm" onClick={openAddRule}>
              <Plus className="h-4 w-4 mr-1" />添加规则
            </Button>
          )}
        </div>
      </div>

      <div className="flex gap-1 border-b border-slate-800">
        {([
          { key: 'overview', label: '概览统计' },
          { key: 'records', label: '成本记录' },
          { key: 'alerts', label: '预警规则' },
        ] as const).map(tab => (
          <button
            key={tab.key}
            onClick={() => setActiveTab(tab.key)}
            className={`px-4 py-2 text-sm font-medium transition-colors border-b-2 -mb-px ${
              activeTab === tab.key
                ? 'text-blue-400 border-blue-400'
                : 'text-slate-400 border-transparent hover:text-slate-200'
            }`}
          >
            {tab.label}
          </button>
        ))}
      </div>

      {activeTab === 'overview' && (
        <div className="space-y-4">
          {statsLoading ? (
            <div className="flex items-center justify-center py-20 text-slate-500"><Loader2 className="h-6 w-6 animate-spin mr-2" />加载中...</div>
          ) : stats ? (
            <>
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3">
                <StatCard
                  icon={<Wallet className="h-5 w-5" />}
                  label="今日成本"
                  value={formatCurrency(stats.today_cost || 0)}
                  trend={stats.today_cost - (stats.yesterday_cost || 0)}
                  trendLabel={`昨日 ${formatCurrency(stats.yesterday_cost || 0)}`}
                />
                <StatCard
                  icon={<CalendarDays className="h-5 w-5" />}
                  label="本月成本"
                  value={formatCurrency(stats.month_cost || 0)}
                />
                <StatCard
                  icon={<TrendingUp className="h-5 w-5" />}
                  label="年度成本"
                  value={formatCurrency(stats.year_cost || 0)}
                />
                <StatCard
                  icon={<AlertTriangle className="h-5 w-5" />}
                  label="活跃预警"
                  value={`${stats.alerts?.length || 0} 条`}
                  alert={stats.alerts?.length > 0}
                />
              </div>

              {stats.alerts?.length > 0 && (
                <div className="rounded-lg border border-amber-500/30 bg-amber-500/5 p-4">
                  <div className="flex items-center gap-2 mb-3">
                    <Bell className="h-4 w-4 text-amber-400" />
                    <span className="text-sm font-medium text-amber-300">成本预警</span>
                  </div>
                  <div className="space-y-2">
                    {stats.alerts.map((a: any, i: number) => (
                      <div key={i} className="flex items-center justify-between text-sm">
                        <div className="flex items-center gap-2">
                          <Badge variant="outline" className="border-amber-500/50 text-amber-300">{a.rule_name}</Badge>
                          <span className="text-slate-400">
                            {a.provider} · {a.metric === 'daily' ? '日' : '月'}成本
                          </span>
                        </div>
                        <span className="text-slate-300">
                          当前 <span className="text-amber-300 font-medium">{formatCurrency(a.current)}</span>
                          {' '}{a.operator}{' '}
                          阈值 <span className="text-red-400 font-medium">{formatCurrency(a.threshold)}</span>
                        </span>
                      </div>
                    ))}
                  </div>
                </div>
              )}

              <Card className="bg-slate-900/50 border-slate-800">
                <CardContent className="pt-4">
                  <h3 className="text-sm font-medium text-slate-200 mb-4">近 30 天成本趋势</h3>
                  <TrendChart data={stats.month_trend || []} />
                </CardContent>
              </Card>

              <Card className="bg-slate-900/50 border-slate-800">
                <CardContent className="pt-4">
                  <h3 className="text-sm font-medium text-slate-200 mb-4">本月厂商成本分布</h3>
                  {(stats.provider_dist || []).length === 0 ? (
                    <p className="text-sm text-slate-500 py-8 text-center">暂无数据</p>
                  ) : (
                    <div className="space-y-3">
                      <div className="flex h-8 rounded-lg overflow-hidden">
                        {stats.provider_dist.map((p: any, i: number) => (
                          <div
                            key={i}
                            className={`${providerColors[p.provider] || 'bg-slate-600'} flex items-center justify-center text-xs text-white font-medium`}
                            style={{ width: `${p.percent}%` }}
                            title={`${providerLabels[p.provider] || p.provider}: ${formatCurrency(p.cost)} (${p.percent.toFixed(1)}%)`}
                          >
                            {p.percent > 8 ? (providerLabels[p.provider] || p.provider) : ''}
                          </div>
                        ))}
                      </div>
                      <div className="grid grid-cols-2 md:grid-cols-3 gap-2">
                        {stats.provider_dist.map((p: any, i: number) => (
                          <div key={i} className="flex items-center justify-between text-sm">
                            <div className="flex items-center gap-2">
                              <div className={`w-3 h-3 rounded ${providerColors[p.provider] || 'bg-slate-600'}`} />
                              <span className="text-slate-300">{providerLabels[p.provider] || p.provider}</span>
                            </div>
                            <div className="text-right">
                              <span className="text-slate-200 font-medium">{formatCurrency(p.cost)}</span>
                              <span className="text-slate-500 ml-2">{p.percent.toFixed(1)}%</span>
                            </div>
                          </div>
                        ))}
                      </div>
                    </div>
                  )}
                </CardContent>
              </Card>
            </>
          ) : null}
        </div>
      )}

      {activeTab === 'records' && (
        <div className="space-y-3">
          <div className="flex flex-wrap items-end gap-3">
            <div>
              <Label className="text-xs text-slate-400 mb-1">厂商</Label>
              <Select value={filterProvider || 'all'} onValueChange={(v) => setFilterProvider(v === 'all' ? '' : v)}>
                <SelectTrigger className="w-32 h-9"><SelectValue /></SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">全部</SelectItem>
                  {Object.entries(providerLabels).map(([k, v]) => (
                    <SelectItem key={k} value={k}>{v}</SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
            <div>
              <Label className="text-xs text-slate-400 mb-1">开始日期</Label>
              <Input type="date" className="w-40 h-9" value={filterStart} onChange={(e) => setFilterStart(e.target.value)} />
            </div>
            <div>
              <Label className="text-xs text-slate-400 mb-1">结束日期</Label>
              <Input type="date" className="w-40 h-9" value={filterEnd} onChange={(e) => setFilterEnd(e.target.value)} />
            </div>
            <Button variant="outline" size="sm" onClick={loadRecords}>
              <RefreshCw className="h-4 w-4 mr-1" />查询
            </Button>
          </div>

          {recordsLoading ? (
            <div className="flex items-center justify-center py-20 text-slate-500"><Loader2 className="h-6 w-6 animate-spin mr-2" />加载中...</div>
          ) : records.length === 0 ? (
            <div className="py-20 text-center text-slate-500">
              <Wallet className="h-12 w-12 mx-auto mb-3 opacity-30" />
              <p className="text-sm">暂无成本记录</p>
            </div>
          ) : (
            <div className="overflow-x-auto rounded-lg border border-slate-800">
              <table className="w-full text-sm">
                <thead className="bg-slate-900/80 text-slate-400">
                  <tr>
                    <th className="px-4 py-2.5 text-left font-medium">日期</th>
                    <th className="px-4 py-2.5 text-left font-medium">厂商</th>
                    <th className="px-4 py-2.5 text-left font-medium">服务</th>
                    <th className="px-4 py-2.5 text-left font-medium">区域</th>
                    <th className="px-4 py-2.5 text-left font-medium">账号</th>
                    <th className="px-4 py-2.5 text-right font-medium">费用</th>
                    <th className="px-4 py-2.5 text-left font-medium">说明</th>
                    <th className="px-4 py-2.5 text-center font-medium">操作</th>
                  </tr>
                </thead>
                <tbody>
                  {records.map((r) => (
                    <tr key={r.id} className="border-t border-slate-800 hover:bg-slate-800/30">
                      <td className="px-4 py-2.5 text-slate-300">{r.billing_date}</td>
                      <td className="px-4 py-2.5">
                        <span className="inline-flex items-center gap-1.5">
                          <span className={`w-2 h-2 rounded-full ${providerColors[r.provider] || 'bg-slate-500'}`} />
                          {providerLabels[r.provider] || r.provider}
                        </span>
                      </td>
                      <td className="px-4 py-2.5 text-slate-400">{r.service || '-'}</td>
                      <td className="px-4 py-2.5 text-slate-400">{r.region || '-'}</td>
                      <td className="px-4 py-2.5 text-slate-400">{r.account_name || '-'}</td>
                      <td className="px-4 py-2.5 text-right text-slate-200 font-medium">{formatCurrency(r.cost)}</td>
                      <td className="px-4 py-2.5 text-slate-500 max-w-xs truncate">{r.description || '-'}</td>
                      <td className="px-4 py-2.5">
                        <div className="flex items-center justify-center gap-1">
                          <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => openEditRecord(r)}>
                            <Pencil className="h-3.5 w-3.5" />
                          </Button>
                          <Button variant="ghost" size="icon" className="h-7 w-7 text-red-400 hover:text-red-300" onClick={() => handleDeleteRecord(r.id)}>
                            <Trash2 className="h-3.5 w-3.5" />
                          </Button>
                        </div>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
        </div>
      )}

      {activeTab === 'alerts' && (
        <div className="space-y-3">
          {rulesLoading ? (
            <div className="flex items-center justify-center py-20 text-slate-500"><Loader2 className="h-6 w-6 animate-spin mr-2" />加载中...</div>
          ) : rules.length === 0 ? (
            <div className="py-20 text-center text-slate-500">
              <Bell className="h-12 w-12 mx-auto mb-3 opacity-30" />
              <p className="text-sm">暂无预警规则</p>
            </div>
          ) : (
            <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
              {rules.map((r) => (
                <Card key={r.id} className="bg-slate-900/50 border-slate-800">
                  <CardContent className="pt-4">
                    <div className="flex items-center justify-between mb-3">
                      <div className="flex items-center gap-2">
                        <Bell className={`h-4 w-4 ${r.enabled ? 'text-amber-400' : 'text-slate-600'}`} />
                        <span className="text-sm font-medium text-slate-200">{r.name}</span>
                      </div>
                      <Switch checked={r.enabled} onCheckedChange={() => handleToggleRule(r.id)} />
                    </div>
                    <div className="grid grid-cols-2 gap-2 text-sm">
                      <div>
                        <span className="text-slate-500">厂商</span>
                        <span className="ml-2 text-slate-300">{r.provider ? (providerLabels[r.provider] || r.provider) : '全部'}</span>
                      </div>
                      <div>
                        <span className="text-slate-500">指标</span>
                        <span className="ml-2 text-slate-300">{r.metric === 'daily' ? '日成本' : '月累计'}</span>
                      </div>
                      <div>
                        <span className="text-slate-500">阈值</span>
                        <span className="ml-2 text-amber-300 font-medium">{r.operator} {formatCurrency(r.threshold)}</span>
                      </div>
                      {r.last_triggered && (
                        <div>
                          <span className="text-slate-500">最后触发</span>
                          <span className="ml-2 text-slate-400">{new Date(r.last_triggered).toLocaleString('zh-CN')}</span>
                        </div>
                      )}
                    </div>
                    <div className="flex justify-end gap-1 mt-3">
                      <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => openEditRule(r)}>
                        <Pencil className="h-3.5 w-3.5" />
                      </Button>
                      <Button variant="ghost" size="icon" className="h-7 w-7 text-red-400 hover:text-red-300" onClick={() => handleDeleteRule(r.id)}>
                        <Trash2 className="h-3.5 w-3.5" />
                      </Button>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          )}
        </div>
      )}

      <Dialog open={recordDialogOpen} onOpenChange={setRecordDialogOpen}>
        <DialogContent className="max-w-md">
          <DialogHeader>
            <DialogTitle>{editingRecord ? '编辑成本记录' : '记录成本'}</DialogTitle>
            <DialogDescription>记录一条每日云资源成本</DialogDescription>
          </DialogHeader>
          <div className="space-y-3">
            <div className="grid grid-cols-2 gap-3">
              <div>
                <Label className="text-sm text-slate-300">厂商 *</Label>
                <Select value={recordForm.provider} onValueChange={(v) => setRecordForm({ ...recordForm, provider: v })}>
                  <SelectTrigger className="mt-1"><SelectValue /></SelectTrigger>
                  <SelectContent>
                    {Object.entries(providerLabels).map(([k, v]) => (
                      <SelectItem key={k} value={k}>{v}</SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
              <div>
                <Label className="text-sm text-slate-300">日期 *</Label>
                <Input type="date" className="mt-1" value={recordForm.billing_date} onChange={(e) => setRecordForm({ ...recordForm, billing_date: e.target.value })} />
              </div>
            </div>
            <div className="grid grid-cols-2 gap-3">
              <div>
                <Label className="text-sm text-slate-300">费用(元) *</Label>
                <Input type="number" step="0.01" className="mt-1" placeholder="0.00" value={recordForm.cost} onChange={(e) => setRecordForm({ ...recordForm, cost: e.target.value })} />
              </div>
              <div>
                <Label className="text-sm text-slate-300">服务</Label>
                <Input className="mt-1" placeholder="ECS, RDS..." value={recordForm.service} onChange={(e) => setRecordForm({ ...recordForm, service: e.target.value })} />
              </div>
            </div>
            <div className="grid grid-cols-2 gap-3">
              <div>
                <Label className="text-sm text-slate-300">区域</Label>
                <Input className="mt-1" placeholder="cn-hangzhou" value={recordForm.region} onChange={(e) => setRecordForm({ ...recordForm, region: e.target.value })} />
              </div>
              <div>
                <Label className="text-sm text-slate-300">账号名称</Label>
                <Input className="mt-1" placeholder="主账号" value={recordForm.account_name} onChange={(e) => setRecordForm({ ...recordForm, account_name: e.target.value })} />
              </div>
            </div>
            <div>
              <Label className="text-sm text-slate-300">备注</Label>
              <Input className="mt-1" placeholder="可选" value={recordForm.description} onChange={(e) => setRecordForm({ ...recordForm, description: e.target.value })} />
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setRecordDialogOpen(false)}>取消</Button>
            <Button onClick={handleSaveRecord} disabled={submitting}>
              {submitting && <Loader2 className="h-4 w-4 mr-1 animate-spin" />}
              保存
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      <Dialog open={ruleDialogOpen} onOpenChange={setRuleDialogOpen}>
        <DialogContent className="max-w-md">
          <DialogHeader>
            <DialogTitle>{editingRule ? '编辑预警规则' : '添加预警规则'}</DialogTitle>
            <DialogDescription>设置成本阈值，超标时自动预警</DialogDescription>
          </DialogHeader>
          <div className="space-y-3">
            <div>
              <Label className="text-sm text-slate-300">规则名称 *</Label>
              <Input className="mt-1" placeholder="如：日成本超 500 元预警" value={ruleForm.name} onChange={(e) => setRuleForm({ ...ruleForm, name: e.target.value })} />
            </div>
            <div className="grid grid-cols-2 gap-3">
              <div>
                <Label className="text-sm text-slate-300">厂商</Label>
                <Select value={ruleForm.provider || 'all'} onValueChange={(v) => setRuleForm({ ...ruleForm, provider: v === 'all' ? '' : v })}>
                  <SelectTrigger className="mt-1"><SelectValue /></SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">全部厂商</SelectItem>
                    {Object.entries(providerLabels).map(([k, v]) => (
                      <SelectItem key={k} value={k}>{v}</SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
              <div>
                <Label className="text-sm text-slate-300">指标</Label>
                <Select value={ruleForm.metric} onValueChange={(v) => setRuleForm({ ...ruleForm, metric: v })}>
                  <SelectTrigger className="mt-1"><SelectValue /></SelectTrigger>
                  <SelectContent>
                    <SelectItem value="daily">日成本</SelectItem>
                    <SelectItem value="monthly">月累计</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>
            <div className="grid grid-cols-2 gap-3">
              <div>
                <Label className="text-sm text-slate-300">比较</Label>
                <Select value={ruleForm.operator} onValueChange={(v) => setRuleForm({ ...ruleForm, operator: v })}>
                  <SelectTrigger className="mt-1"><SelectValue /></SelectTrigger>
                  <SelectContent>
                    <SelectItem value=">">大于 &gt;</SelectItem>
                    <SelectItem value=">=">大于等于 &ge;</SelectItem>
                    <SelectItem value="<">小于 &lt;</SelectItem>
                    <SelectItem value="<=">小于等于 &le;</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div>
                <Label className="text-sm text-slate-300">阈值(元) *</Label>
                <Input type="number" step="0.01" className="mt-1" placeholder="500.00" value={ruleForm.threshold} onChange={(e) => setRuleForm({ ...ruleForm, threshold: e.target.value })} />
              </div>
            </div>
            <div className="flex items-center gap-2">
              <Switch checked={ruleForm.enabled} onCheckedChange={(v) => setRuleForm({ ...ruleForm, enabled: v })} />
              <Label className="text-sm text-slate-300">启用</Label>
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setRuleDialogOpen(false)}>取消</Button>
            <Button onClick={handleSaveRule} disabled={submitting}>
              {submitting && <Loader2 className="h-4 w-4 mr-1 animate-spin" />}
              保存
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}

function StatCard({ icon, label, value, trend, trendLabel, alert }: {
  icon: React.ReactNode;
  label: string;
  value: string;
  trend?: number;
  trendLabel?: string;
  alert?: boolean;
}) {
  return (
    <div className={`rounded-lg border p-4 ${alert ? 'border-amber-500/30 bg-amber-500/5' : 'border-slate-800 bg-slate-900/50'}`}>
      <div className="flex items-center justify-between mb-2">
        <span className="text-slate-400 text-sm">{label}</span>
        <span className={alert ? 'text-amber-400' : 'text-slate-500'}>{icon}</span>
      </div>
      <div className={`text-2xl font-bold ${alert ? 'text-amber-300' : 'text-slate-100'}`}>{value}</div>
      {trendLabel && (
        <div className="flex items-center gap-1 mt-1 text-xs">
          {trend !== undefined && trend > 0 && <TrendingUp className="h-3 w-3 text-red-400" />}
          {trend !== undefined && trend < 0 && <TrendingDown className="h-3 w-3 text-green-400" />}
          <span className="text-slate-500">{trendLabel}</span>
        </div>
      )}
    </div>
  );
}

function TrendChart({ data }: { data: { date: string; cost: number }[] }) {
  if (data.length === 0) {
    return <p className="text-sm text-slate-500 py-8 text-center">暂无数据</p>;
  }
  const max = Math.max(...data.map((d) => d.cost), 1);
  const recent = data.slice(-30);

  return (
    <div>
      <div className="flex items-end gap-0.5 h-40">
        {recent.map((d, i) => {
          const h = Math.max((d.cost / max) * 100, 2);
          return (
            <div
              key={i}
              className="flex-1 group relative"
              style={{ height: '100%' }}
            >
              <div
                className="absolute bottom-0 w-full rounded-t-sm bg-gradient-to-t from-blue-600/60 to-blue-400/80 group-hover:from-blue-500 group-hover:to-blue-300 transition-colors"
                style={{ height: `${h}%` }}
              />
              <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 hidden group-hover:block whitespace-nowrap text-xs bg-slate-800 text-slate-200 px-2 py-1 rounded border border-slate-700 z-10">
                {d.date}: {formatCurrency(d.cost)}
              </div>
            </div>
          );
        })}
      </div>
      <div className="flex justify-between mt-2 text-xs text-slate-500">
        <span>{recent[0]?.date}</span>
        <span>{recent[recent.length - 1]?.date}</span>
      </div>
    </div>
  );
}