import { useCallback, useEffect, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import {
  Bar,
  BarChart,
  CartesianGrid,
  ResponsiveContainer,
  Tooltip,
  XAxis,
  YAxis,
} from 'recharts';
import { ArrowDownRight, ArrowUpRight, CalendarRange, Loader2, Sparkles } from 'lucide-react';
import { toast } from 'sonner';
import { billingApi, aiApi } from '@/api';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { ContentPanel } from '@/components/layout/ContentPanel';
import { PageEmpty } from '@/components/layout/PageEmpty';
import { PageLoading } from '@/components/layout/PageLoading';
import { AgentMarkdown } from '@/components/aiops/AgentMarkdown';

interface BillingAnalysisItem {
  name: string;
  cost: number;
  percent: number;
}

interface BillingAnalysisMonth {
  month: string;
  total: number;
  items: BillingAnalysisItem[];
}

interface BillingAttribution {
  name: string;
  previous_cost: number;
  current_cost: number;
  delta: number;
  contribution: number;
}

interface BillingAnalysisData {
  start_month: string;
  end_month: string;
  currency: string;
  exchange_rates: Record<string, number>;
  rate_source: string;
  dimension: string;
  data_through: string;
  incomplete_period: boolean;
  categories: string[];
  months: BillingAnalysisMonth[];
  summary: {
    total_cost: number;
    average_cost: number;
    peak_cost: number;
    peak_month: string;
    mom_percent: number;
  };
  attributions: BillingAttribution[];
}

interface BillingChartRow {
  month: string;
  total: number;
  [category: string]: string | number;
}

interface BillingTooltipProps {
  active?: boolean;
  label?: string;
  currency?: string;
  payload?: Array<{
    name?: string;
    value?: number;
    color?: string;
    payload?: BillingChartRow;
  }>;
}

const chartColors = [
  'var(--chart-1)', 'var(--chart-2)', 'var(--chart-3)', 'var(--chart-4)',
  'var(--chart-5)', 'var(--chart-6)', 'var(--chart-7)', 'var(--text-tertiary)',
];

// monthOffset 返回相对当前月份的 YYYY-MM。 // Logan.Li
function monthOffset(offset: number): string {
  const date = new Date();
  date.setDate(1);
  date.setMonth(date.getMonth() + offset);
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}`;
}

// formatAnalysisCurrency 按账单币种展示金额，避免多币种混算。 // Logan.Li
function formatAnalysisCurrency(amount: number, currency = 'CNY'): string {
  const prefix = currency === 'CNY' ? '¥' : currency === 'USD' ? '$' : `${currency} `;
  return `${prefix}${amount.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
}

function BillingTooltip({ active, label, payload, currency }: BillingTooltipProps) {
  if (!active || !payload?.length) return null;
  const visible = payload.filter((item) => Number(item.value) !== 0);
  const total = Number(payload[0]?.payload?.total || 0);
  return (
    <div className="min-w-60 rounded-md border border-[var(--chart-tooltip-border)] bg-[var(--chart-tooltip-bg)] p-3 shadow-lg">
      <div className="mb-2 flex items-center justify-between gap-4 text-sm font-medium text-[var(--text-primary)]">
        <span>{label}</span>
        <span>{formatAnalysisCurrency(total, currency)}</span>
      </div>
      <div className="space-y-1.5">
        {visible.map((item) => (
          <div key={item.name} className="grid grid-cols-[10px_minmax(100px,1fr)_auto_auto] items-center gap-2 text-xs">
            <span className="h-2 w-2 rounded-sm" style={{ backgroundColor: item.color }} />
            <span className="truncate text-[var(--text-secondary)]">{item.name}</span>
            <span className="font-medium text-[var(--text-primary)]">{formatAnalysisCurrency(Number(item.value), currency)}</span>
            <span className="w-12 text-right text-[var(--text-tertiary)]">
              {total ? `${(Number(item.value) / total * 100).toFixed(1)}%` : '0%'}
            </span>
          </div>
        ))}
      </div>
    </div>
  );
}

export function BillingAnalysisPanel() {
  const { t } = useTranslation();
  const [startMonth, setStartMonth] = useState(monthOffset(-5));
  const [endMonth, setEndMonth] = useState(monthOffset(0));
  const [dimension, setDimension] = useState('service');
  const [currency, setCurrency] = useState('CNY');
  const [provider, setProvider] = useState('__all');
  const [providers, setProviders] = useState<Array<{ value: string; label: string }>>([]);
  const [data, setData] = useState<BillingAnalysisData | null>(null);
  const [loading, setLoading] = useState(true);
  const [analyzing, setAnalyzing] = useState(false);
  const [insight, setInsight] = useState('');

  const load = useCallback(async () => {
    if (startMonth > endMonth) {
      toast.error(t('cloud.analysisInvalidRange'));
      return;
    }
    setLoading(true);
    try {
      const result = await billingApi.getCostAnalysis({
        start_month: startMonth,
        end_month: endMonth,
        dimension,
        currency,
        provider: provider === '__all' ? undefined : provider,
      });
      setData(result as BillingAnalysisData);
      setInsight('');
    } catch (error) {
      toast.error(t('cloud.analysisLoadFailed'), { description: error instanceof Error ? error.message : '' });
    } finally {
      setLoading(false);
    }
  }, [currency, dimension, endMonth, provider, startMonth, t]);

  useEffect(() => {
    void Promise.all([billingApi.getProviders(), billingApi.getSettings()]).then(([result, settings]) => {
      setProviders(Array.isArray(result) ? result as Array<{ value: string; label: string }> : []);
      setCurrency(settings.base_currency || 'CNY');
    }).catch(() => setProviders([]));
  }, []);

  useEffect(() => {
    const timer = window.setTimeout(load, 0);
    return () => window.clearTimeout(timer);
  }, [load]);

  const chartData = useMemo<BillingChartRow[]>(() => (data?.months || []).map((month) => {
    const row: BillingChartRow = { month: month.month, total: month.total };
    month.items.forEach((item) => { row[item.name] = item.cost; });
    return row;
  }), [data]);

  const analyze = async () => {
    if (!data || data.summary.total_cost === 0) return;
    setAnalyzing(true);
    try {
      const prompt = [
        '你是企业 FinOps 专家。请只依据以下已经计算好的账单汇总进行分析，不要重新计算或虚构数据。',
        '输出四段：成本概览、波动趋势、归因分析、可执行优化建议。每段使用加粗标题，建议需指明优先级和验证方法。',
        `分析维度：${dimension}；报告币种：${data.currency}；汇率：${JSON.stringify(data.exchange_rates)}；数据截止：${data.data_through || '未知'}；末月未完整出账：${data.incomplete_period ? '是' : '否'}`,
        `汇总：${JSON.stringify(data.summary)}`,
        `月度数据：${JSON.stringify(data.months)}`,
        `变化归因：${JSON.stringify(data.attributions)}`,
      ].join('\n');
      const result = await aiApi.chat([{ role: 'user', content: prompt }], `billing-analysis-${Date.now()}`);
      setInsight(result.content || '');
    } catch (error) {
      toast.error(t('cloud.analysisAIFailed'), { description: error instanceof Error ? error.message : '' });
    } finally {
      setAnalyzing(false);
    }
  };

  return (
    <div className="space-y-4">
      <div className="flex flex-wrap items-end gap-3 rounded-md border border-[var(--border-default)] bg-[var(--surface-raised)] px-4 py-3">
        <div>
          <Label className="mb-1 block text-xs text-[var(--text-tertiary)]">{t('cloud.analysisPeriod')}</Label>
          <div className="flex items-center gap-2">
            <Input type="month" value={startMonth} onChange={(event) => setStartMonth(event.target.value)} className="h-9 w-[118px] min-w-0 sm:w-36 dg-input" />
            <span className="text-[var(--text-tertiary)]">-</span>
            <Input type="month" value={endMonth} onChange={(event) => setEndMonth(event.target.value)} className="h-9 w-[118px] min-w-0 sm:w-36 dg-input" />
          </div>
        </div>
        <div>
          <Label className="mb-1 block text-xs text-[var(--text-tertiary)]">{t('cloud.platformLabel')}</Label>
          <Select value={provider} onValueChange={setProvider}>
            <SelectTrigger className="h-9 w-36 dg-input"><SelectValue /></SelectTrigger>
            <SelectContent>
              <SelectItem value="__all">{t('cloud.allProviders')}</SelectItem>
              {providers.map((item) => <SelectItem key={item.value} value={item.value}>{item.label}</SelectItem>)}
            </SelectContent>
          </Select>
        </div>
        <div>
          <Label className="mb-1 block text-xs text-[var(--text-tertiary)]">{t('cloud.analysisDimension')}</Label>
          <Select value={dimension} onValueChange={setDimension}>
            <SelectTrigger className="h-9 w-36 dg-input"><SelectValue /></SelectTrigger>
            <SelectContent>
              <SelectItem value="service">{t('cloud.dimensionService')}</SelectItem>
              <SelectItem value="provider">{t('cloud.dimensionProvider')}</SelectItem>
              <SelectItem value="account">{t('cloud.dimensionAccount')}</SelectItem>
              <SelectItem value="region">{t('cloud.dimensionRegion')}</SelectItem>
            </SelectContent>
          </Select>
        </div>
        <div>
          <Label className="mb-1 block text-xs text-[var(--text-tertiary)]">{t('cloud.analysisCurrency')}</Label>
          <Select value={currency} onValueChange={setCurrency}>
            <SelectTrigger className="h-9 w-28 dg-input"><SelectValue /></SelectTrigger>
            <SelectContent>
              <SelectItem value="CNY">CNY</SelectItem>
              <SelectItem value="USD">USD</SelectItem>
            </SelectContent>
          </Select>
        </div>
        <Button variant="outline" size="sm" onClick={load} disabled={loading} className="dg-btn-secondary">
          {loading ? <Loader2 className="mr-1 h-4 w-4 animate-spin" /> : <CalendarRange className="mr-1 h-4 w-4" />}
          {t('cloud.query')}
        </Button>
        <Button size="sm" onClick={analyze} disabled={analyzing || !data || data.summary.total_cost === 0} className="dg-btn-primary ml-auto">
          {analyzing ? <Loader2 className="mr-1 h-4 w-4 animate-spin" /> : <Sparkles className="mr-1 h-4 w-4" />}
          {t('cloud.aiAnalysis')}
        </Button>
      </div>

      {loading ? <PageLoading /> : !data || data.summary.total_cost === 0 ? (
        <PageEmpty title={t('cloud.analysisNoData')} />
      ) : (
        <>
          <ContentPanel>
            <div className="grid grid-cols-2 gap-x-6 gap-y-4 lg:grid-cols-4">
              <div><p className="text-xs text-[var(--text-tertiary)]">{t('cloud.analysisTotal')}</p><p className="mt-1 text-xl font-semibold text-[var(--text-primary)]">{formatAnalysisCurrency(data.summary.total_cost, data.currency)}</p></div>
              <div><p className="text-xs text-[var(--text-tertiary)]">{t('cloud.analysisAverage')}</p><p className="mt-1 text-xl font-semibold text-[var(--text-primary)]">{formatAnalysisCurrency(data.summary.average_cost, data.currency)}</p></div>
              <div><p className="text-xs text-[var(--text-tertiary)]">{t('cloud.analysisPeak')}</p><p className="mt-1 text-xl font-semibold text-[var(--text-primary)]">{formatAnalysisCurrency(data.summary.peak_cost, data.currency)}</p><p className="text-xs text-[var(--text-tertiary)]">{data.summary.peak_month}</p></div>
              <div>
                <p className="text-xs text-[var(--text-tertiary)]">{t('cloud.analysisMom')}</p>
                <p className={`mt-1 flex items-center text-xl font-semibold ${data.summary.mom_percent > 0 ? 'dg-text-red' : data.summary.mom_percent < 0 ? 'dg-text-green' : 'text-[var(--text-primary)]'}`}>
                  {data.summary.mom_percent > 0 ? <ArrowUpRight className="mr-1 h-5 w-5" /> : data.summary.mom_percent < 0 ? <ArrowDownRight className="mr-1 h-5 w-5" /> : null}
                  {Math.abs(data.summary.mom_percent).toFixed(1)}%
                </p>
                {data.incomplete_period && <p className="text-xs text-[var(--text-tertiary)]">{t('cloud.analysisIncomplete')}</p>}
              </div>
            </div>
          </ContentPanel>

          {insight && (
            <ContentPanel>
              <div className="mb-3 flex items-center gap-2">
                <Sparkles className="h-4 w-4 text-[var(--brand)]" />
                <h3 className="text-sm font-semibold text-[var(--text-primary)]">{t('cloud.aiAnalysisResult')}</h3>
              </div>
              <AgentMarkdown content={insight} />
            </ContentPanel>
          )}

          <ContentPanel>
            <div className="mb-4 flex flex-wrap items-start justify-between gap-2">
              <div>
                <h3 className="text-sm font-semibold text-[var(--text-primary)]">{t('cloud.analysisTrendTitle')}</h3>
                <p className="mt-0.5 text-xs text-[var(--text-tertiary)]">{t('cloud.analysisDataThrough', { date: data.data_through || '-' })}</p>
                <p className="mt-0.5 text-xs text-[var(--text-tertiary)]">{t('cloud.analysisConversionNote', { currency: data.currency, rates: Object.entries(data.exchange_rates || {}).map(([source, rate]) => `1 ${source} = ${rate} ${data.currency}`).join(' · ') })}</p>
              </div>
              <div className="flex max-w-full flex-wrap justify-end gap-x-3 gap-y-1">
                {data.categories.map((category, index) => (
                  <span key={category} className="inline-flex items-center gap-1.5 text-xs text-[var(--text-secondary)]">
                    <span className="h-2.5 w-2.5 rounded-sm" style={{ backgroundColor: chartColors[index % chartColors.length] }} />{category}
                  </span>
                ))}
              </div>
            </div>
            <div className="h-80 w-full">
              <ResponsiveContainer width="100%" height="100%">
                <BarChart data={chartData} margin={{ top: 8, right: 8, left: 8, bottom: 0 }}>
                  <CartesianGrid vertical={false} stroke="var(--chart-grid)" strokeDasharray="3 3" />
                  <XAxis dataKey="month" tickLine={false} axisLine={{ stroke: 'var(--chart-axis)' }} tick={{ fill: 'var(--text-tertiary)', fontSize: 12 }} />
                  <YAxis tickLine={false} axisLine={false} width={66} tick={{ fill: 'var(--text-tertiary)', fontSize: 12 }} tickFormatter={(value: number) => value >= 10000 ? `${(value / 10000).toFixed(1)}万` : value.toLocaleString('zh-CN')} />
                  <Tooltip content={<BillingTooltip currency={data.currency} />} cursor={{ fill: 'var(--surface-hover)' }} />
                  {data.categories.map((category, index) => (
                    <Bar key={category} dataKey={category} name={category} stackId="cost" fill={chartColors[index % chartColors.length]} maxBarSize={88} radius={index === data.categories.length - 1 ? [3, 3, 0, 0] : 0} />
                  ))}
                </BarChart>
              </ResponsiveContainer>
            </div>
          </ContentPanel>

          <ContentPanel noPadding>
            <div className="overflow-x-auto">
              <table className="w-full min-w-[720px] text-sm">
                <thead className="bg-[var(--surface-inset)] text-[var(--text-secondary)]">
                  <tr>
                    <th className="sticky left-0 z-10 bg-[var(--surface-inset)] px-4 py-3 text-left font-medium">{t('cloud.analysisCategory')}</th>
                    <th className="px-4 py-3 text-right font-medium">{t('cloud.totalCost')}</th>
                    {data.months.map((month) => <th key={month.month} className="px-4 py-3 text-right font-medium">{month.month}</th>)}
                  </tr>
                </thead>
                <tbody>
                  <tr className="border-t border-[var(--border-default)] font-semibold text-[var(--text-primary)]">
                    <td className="sticky left-0 bg-[var(--surface-raised)] px-4 py-3">{t('cloud.analysisTotalRow')}</td>
                    <td className="px-4 py-3 text-right">{formatAnalysisCurrency(data.summary.total_cost, data.currency)}</td>
                    {data.months.map((month) => <td key={month.month} className="px-4 py-3 text-right">{formatAnalysisCurrency(month.total, data.currency)}</td>)}
                  </tr>
                  {data.categories.map((category, index) => (
                    <tr key={category} className="border-t border-[var(--border-default)] text-[var(--text-secondary)] hover:bg-[var(--surface-hover)]">
                      <td className="sticky left-0 bg-[var(--surface-raised)] px-4 py-3"><span className="inline-flex items-center gap-2"><span className="h-2.5 w-2.5 rounded-sm" style={{ backgroundColor: chartColors[index % chartColors.length] }} />{category}</span></td>
                      <td className="px-4 py-3 text-right font-medium text-[var(--text-primary)]">{formatAnalysisCurrency(data.months.reduce((sum, month) => sum + (month.items.find((item) => item.name === category)?.cost || 0), 0), data.currency)}</td>
                      {data.months.map((month) => <td key={month.month} className="px-4 py-3 text-right">{formatAnalysisCurrency(month.items.find((item) => item.name === category)?.cost || 0, data.currency)}</td>)}
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </ContentPanel>
        </>
      )}
    </div>
  );
}