import { useMemo, useState } from 'react';
import { Alert, Button, Col, Row, Space, Typography } from 'antd';
import { ProCard } from '@ant-design/pro-components';
import { useQuery } from '@tanstack/react-query';
import {
  AreaChart, Area, BarChart, Bar, XAxis, YAxis,
  CartesianGrid, Tooltip, ResponsiveContainer, Legend,
} from 'recharts';
import {
  IconTrendingUp, IconTrendingDown, IconMinus, IconDownload,
} from '@tabler/icons-react';
import type { ColDef } from '@ag-grid-community/core';
import dayjs from 'dayjs';
import PageContainer from '@/components/common/PageContainer';
import SearchForm from '@/components/common/SearchForm';
import DataGrid from '@/components/common/DataGrid';
import { kpiApi, MonthlySummaryRow, KpiSearchParam } from '@/api/kpi';
import {
  COLOR_PRIMARY, COLOR_ERROR, COLOR_SUCCESS,
  GRAY, SHADOW, RADIUS,
} from '@/theme/tokens';

const { Text } = Typography;

// ────────────────────────────────────────────────────────
// 유틸
// ────────────────────────────────────────────────────────

const fmt = (v: number) => v.toLocaleString();
const fmtM = (v: number) => `${(v / 1_000_000).toFixed(1)}M`;

function calcPct(curr: number, prev: number): number | null {
  if (prev === 0) return null;
  return Math.round(((curr - prev) / Math.abs(prev)) * 1000) / 10;
}

// ────────────────────────────────────────────────────────
// 서브 컴포넌트 — KPI 카드
// ────────────────────────────────────────────────────────

interface KpiCardProps {
  label: string;
  value: number;
  unit?: string;
  delta?: number | null;
  deltaLabel?: string;
  color?: string;
  bg?: string;
}

function KpiCard({ label, value, unit = '원', delta, deltaLabel, color = COLOR_PRIMARY, bg = '#EBF3FF' }: KpiCardProps) {
  const renderDelta = () => {
    if (delta === null || delta === undefined) return null;
    if (delta > 0) return (
      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 2, fontSize: 12, fontWeight: 600, color: COLOR_SUCCESS }}>
        <IconTrendingUp size={12} />+{delta.toFixed(1)}%
      </span>
    );
    if (delta < 0) return (
      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 2, fontSize: 12, fontWeight: 600, color: COLOR_ERROR }}>
        <IconTrendingDown size={12} />{delta.toFixed(1)}%
      </span>
    );
    return (
      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 2, fontSize: 12, color: GRAY[400] }}>
        <IconMinus size={12} />변동없음
      </span>
    );
  };

  return (
    <div style={{
      background: '#ffffff',
      borderRadius: RADIUS.lg,
      border: `1px solid ${GRAY[100]}`,
      boxShadow: SHADOW.sm,
      padding: '24px 28px',
      display: 'flex',
      flexDirection: 'column',
      gap: 12,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <Text style={{ fontSize: 13, fontWeight: 500, color: GRAY[500] }}>{label}</Text>
        <div style={{
          width: 36, height: 36, borderRadius: 10,
          background: bg, color,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <IconTrendingUp size={18} />
        </div>
      </div>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
        <span style={{
          fontSize: 34, fontWeight: 700, color: GRAY[800], lineHeight: 1,
          fontFeatureSettings: "'tnum'", fontVariantNumeric: 'tabular-nums',
        }}>
          {fmtM(value)}
        </span>
        <Text style={{ fontSize: 14, color: GRAY[500] }}>{unit}</Text>
      </div>
      {(delta !== null && delta !== undefined) && (
        <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
          {renderDelta()}
          {deltaLabel && <Text style={{ fontSize: 12, color: GRAY[400] }}>{deltaLabel}</Text>}
        </div>
      )}
    </div>
  );
}

// ────────────────────────────────────────────────────────
// AG Grid 컬럼 정의
// ────────────────────────────────────────────────────────

const COLUMNS: ColDef<MonthlySummaryRow>[] = [
  { field: 'yyyymm',        headerName: '정산월',     width: 110, pinned: 'left' },
  { field: 'agentCount',    headerName: '설계사수',   width: 100, type: 'numericColumn', valueFormatter: (p) => fmt(p.value ?? 0) },
  { field: 'totalGross',    headerName: '총수수료',   flex: 1,    type: 'numericColumn', valueFormatter: (p) => fmt(p.value ?? 0) },
  { field: 'totalTax',      headerName: '총공제(세)', flex: 1,    type: 'numericColumn', valueFormatter: (p) => fmt(p.value ?? 0) },
  { field: 'totalNet',      headerName: '총지급',     flex: 1,    type: 'numericColumn', valueFormatter: (p) => fmt(p.value ?? 0) },
  { field: 'totalChargeback', headerName: '환수',     flex: 1,    type: 'numericColumn', valueFormatter: (p) => fmt(p.value ?? 0) },
  { field: 'totalIncentive',  headerName: '시책',     flex: 1,    type: 'numericColumn', valueFormatter: (p) => fmt(p.value ?? 0) },
];

// ────────────────────────────────────────────────────────
// 클라이언트 사이드 엑셀 내보내기 (xlsx 없음 — CSV 대체)
// ────────────────────────────────────────────────────────

function exportCsv(rows: MonthlySummaryRow[]) {
  const headers = ['정산월', '설계사수', '총수수료', '총공제', '총지급', '환수', '시책'];
  const lines = [
    headers.join(','),
    ...rows.map((r) =>
      [r.yyyymm, r.agentCount, r.totalGross, r.totalTax, r.totalNet, r.totalChargeback, r.totalIncentive].join(','),
    ),
  ];
  const blob = new Blob(['' + lines.join('\n')], { type: 'text/csv;charset=utf-8;' });
  const link = document.createElement('a');
  link.href = URL.createObjectURL(blob);
  link.download = `월별정산요약_${dayjs().format('YYYYMMDD')}.csv`;
  link.click();
  URL.revokeObjectURL(link.href);
}

// ────────────────────────────────────────────────────────
// 메인 컴포넌트
// ────────────────────────────────────────────────────────

export default function KpiMonthlySummary() {
  const [params, setParams] = useState<KpiSearchParam>({
    fromMonth: dayjs().subtract(11, 'month').format('YYYYMM'),
    toMonth: dayjs().format('YYYYMM'),
    pageSize: 100,
  });

  const { data, isLoading, isError } = useQuery({
    queryKey: ['kpi', 'monthly', params],
    queryFn: () => kpiApi.monthlySummary(params),
    retry: false,
  });

  const rows = data?.list ?? [];

  // KPI 카드: 최신월 / 전월 / YTD 합산
  const thisMonth = rows[rows.length - 1];
  const prevMonth = rows.length >= 2 ? rows[rows.length - 2] : undefined;
  const ytdGross = rows.reduce((s, r) => s + (r.totalGross ?? 0), 0);
  const grossDelta = thisMonth && prevMonth
    ? calcPct(thisMonth.totalGross, prevMonth.totalGross)
    : null;

  // 합계행
  const pinnedRow = rows.length > 0 ? {
    yyyymm: '합계',
    agentCount: rows.reduce((s, r) => s + r.agentCount, 0),
    totalGross: rows.reduce((s, r) => s + r.totalGross, 0),
    totalTax: rows.reduce((s, r) => s + r.totalTax, 0),
    totalNet: rows.reduce((s, r) => s + r.totalNet, 0),
    totalChargeback: rows.reduce((s, r) => s + r.totalChargeback, 0),
    totalIncentive: rows.reduce((s, r) => s + r.totalIncentive, 0),
  } as Partial<MonthlySummaryRow> : undefined;

  // 차트 데이터 — 최근 12개월
  const chartData = useMemo(() =>
    rows.slice(-12).map((r) => ({
      month: r.yyyymm.slice(4, 6) + '월',
      총수수료: Math.round(r.totalGross / 1_000_000),
      총지급: Math.round(r.totalNet / 1_000_000),
      환수: Math.round(r.totalChargeback / 1_000_000),
    })),
  [rows]);

  const handleSearch = (values: Record<string, unknown>) => {
    setParams({
      fromMonth: values.fromMonth as string | undefined,
      toMonth: values.toMonth as string | undefined,
      pageSize: 100,
    });
  };

  return (
    <PageContainer
      title="월별 정산 요약"
      description="정산월별 수수료 / 공제 / 지급 합계 — Materialized View"
      extra={
        <Button
          icon={<IconDownload size={14} />}
          onClick={() => rows.length && exportCsv(rows)}
          disabled={!rows.length}
          style={{ display: 'flex', alignItems: 'center', gap: 4 }}
        >
          CSV 다운로드
        </Button>
      }
    >
      {/* 검색 */}
      <SearchForm
        conditions={[
          { type: 'month', name: 'fromMonth', label: '시작 월', span: 6 },
          { type: 'month', name: 'toMonth',   label: '종료 월', span: 6 },
        ]}
        onSearch={handleSearch}
        onReset={() => setParams({ fromMonth: dayjs().subtract(11, 'month').format('YYYYMM'), toMonth: dayjs().format('YYYYMM'), pageSize: 100 })}
      />

      {isError && (
        <Alert type="warning" showIcon
          message="API 미응답"
          description="/api/kpi/monthly-summary 를 확인하세요."
          style={{ marginBottom: 16 }}
        />
      )}

      {/* KPI 카드 3개 */}
      <Row gutter={20} style={{ marginBottom: 20 }}>
        <Col span={8}>
          <KpiCard
            label="당월 총수수료"
            value={thisMonth?.totalGross ?? 0}
            unit="원"
            delta={grossDelta}
            deltaLabel="전월比"
            color={COLOR_PRIMARY}
            bg="#EBF3FF"
          />
        </Col>
        <Col span={8}>
          <KpiCard
            label="당월 총지급"
            value={thisMonth?.totalNet ?? 0}
            unit="원"
            color={COLOR_SUCCESS}
            bg="#E8FAF3"
          />
        </Col>
        <Col span={8}>
          <KpiCard
            label={`YTD 누계 (${dayjs().format('YYYY')})`}
            value={ytdGross}
            unit="원"
            color="#7C3AED"
            bg="#F3EEFF"
          />
        </Col>
      </Row>

      {/* 차트 */}
      <ProCard
        title={<span style={{ fontSize: 15, fontWeight: 700, color: GRAY[800] }}>최근 12개월 수수료 추이</span>}
        subTitle={<span style={{ fontSize: 13, color: GRAY[400] }}>단위: 백만원</span>}
        headerBordered
        style={{
          background: '#ffffff', borderRadius: RADIUS.lg,
          border: `1px solid ${GRAY[100]}`, boxShadow: SHADOW.sm,
          marginBottom: 20,
        }}
      >
        <ResponsiveContainer width="100%" height={260}>
          {chartData.length > 0 ? (
            <BarChart data={chartData} margin={{ top: 8, right: 16, left: -8, bottom: 0 }}>
              <CartesianGrid strokeDasharray="3 3" stroke={GRAY[100]} vertical={false} />
              <XAxis dataKey="month" tick={{ fontSize: 12, fill: GRAY[500] }} axisLine={false} tickLine={false} />
              <YAxis tick={{ fontSize: 12, fill: GRAY[500] }} axisLine={false} tickLine={false} />
              <Tooltip
                contentStyle={{ borderRadius: 12, border: `1px solid ${GRAY[100]}`, boxShadow: SHADOW.md, fontSize: 13 }}
                formatter={(v: number) => [`${v}백만`, '']}
              />
              <Legend wrapperStyle={{ fontSize: 12, paddingTop: 8 }} />
              <Bar dataKey="총수수료" fill={COLOR_PRIMARY} radius={[4, 4, 0, 0]} />
              <Bar dataKey="총지급"   fill={COLOR_SUCCESS} radius={[4, 4, 0, 0]} />
              <Bar dataKey="환수"     fill={COLOR_ERROR}   radius={[4, 4, 0, 0]} />
            </BarChart>
          ) : (
            <AreaChart data={[]} margin={{ top: 8, right: 16, left: -8, bottom: 0 }}>
              <XAxis /><YAxis />
            </AreaChart>
          )}
        </ResponsiveContainer>
      </ProCard>

      {/* AG Grid */}
      <ProCard
        style={{
          background: '#ffffff', borderRadius: RADIUS.lg,
          border: `1px solid ${GRAY[100]}`, boxShadow: SHADOW.sm,
        }}
      >
        <DataGrid<MonthlySummaryRow>
          rows={rows}
          columns={COLUMNS}
          loading={isLoading}
          height={480}
          pinnedBottomRow={pinnedRow}
        />
      </ProCard>
    </PageContainer>
  );
}