o2o-negosium-original/negodata/front/src/features/statistics/StatisticsView.tsx

import { Award, Percent, RefreshCw, Target, TrendingDown, CircleCheckBig } from 'lucide-react';
import { Panel } from './components/Panel';
import { StatTile } from './components/StatTile';
import { SavingsTrendChart } from './components/SavingsTrendChart';
import { MarkupTrendChart } from './components/MarkupTrendChart';
import { OutcomeChart } from './components/OutcomeChart';
import { ParticipationChart } from './components/ParticipationChart';
import { TypeSplitChart } from './components/TypeSplitChart';
import { CategoryChart } from './components/CategoryChart';
import { CardEffectChart } from './components/CardEffectChart';
import { CardTop5 } from './components/CardTop5';
import { wonCompact, pct, signedWonCompact } from './fmt';
import { fillMonths } from './months';
import type { StatData } from './types';
import { useLabels } from '@/features/settings/useCompanySettings';

// 통계 본문. KPI 요약 + 절감 분석 + 성사/프로세스 + 카드 효과. scope(회사/내견적)별로 동일 레이아웃.
export function StatisticsView({ data }: { data: StatData }) {
  const label = useLabels(); // 회사 설정 용어(카테고리 등)
  const k = data.kpi;
  // 월별 차트는 최근 6개월 축을 고정한다(데이터 없는 달은 0) — 한 점만 찍히던 현상 방지.
  const trend = fillMonths(data.trend, (month) => ({ month, savings: 0, rate: 0 }));
  const markupTrend = fillMonths(data.markupTrend, (month) => ({ month, rate: 0 }));
  return (
    <div className="space-y-4">
      {/* 임팩트 요약 KPI — 6열은 초광폭(2xl)에서만. xl 구간은 사이드바 빼면 타일이 ~170px 로 눌려
          라벨·증감칩이 여러 줄로 깨진다 → 3열 유지. */}
      <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 2xl:grid-cols-6">
        <StatTile
          label="총 절감액 (목표가 대비)"
          value={wonCompact(k.totalSavings)}
          icon={TrendingDown}
          tone="emerald"
          delta={{ text: `${signedWonCompact(k.savingsDeltaMoM)} 전월비`, good: k.savingsDeltaMoM >= 0 }}
        />
        <StatTile label="평균 절감률" value={pct(k.savingsRate)} icon={Percent} tone="emerald" />
        <StatTile
          label="낙찰률"
          value={pct(k.awardRate)}
          icon={Award}
          tone="blue"
          // 오프라인으로 다시 협상해 담당자가 반영한 건수 — 절감액엔 포함되지만 AI 협상 성과와 섞이지 않게 따로 짚는다.
          delta={k.offlineAwardCount > 0 ? { text: `오프라인 반영 ${k.offlineAwardCount}건` } : undefined}
        />
        <StatTile label="평균 앵커 도달률" value={pct(k.anchorReachRate)} icon={Target} tone="purple" />
        <StatTile label="마감 견적" value={`${k.closedCount}건`} icon={CircleCheckBig} tone="zinc" />
        <StatTile label="평균 재견적 라운드" value={k.regenAvgRound.toFixed(1)} icon={RefreshCw} tone="amber" />
      </div>

      {/* 월별 추이 2종 — 같은 성격이라 동일 폭(1:1) */}
      <div className="grid gap-4 lg:grid-cols-2">
        <Panel title="월별 절감 추이" subtitle="목표가 대비 절감액 · 막대에 마우스를 올리면 절감률">
          <SavingsTrendChart data={trend} />
        </Panel>
        <Panel title="월별 인상억제율" subtitle="재협상: 직전 라운드 투찰가 대비 인하율">
          <MarkupTrendChart data={markupTrend} />
        </Panel>
      </div>

      {/* 성사 · 프로세스 */}
      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
        <Panel title="마감 결과" subtitle="낙찰 vs 개찰 사유 4종">
          <OutcomeChart data={data.outcome} />
        </Panel>
        <Panel title="협력사 참여" subtitle="초대 세션 대비 응찰·미응찰·거부">
          <ParticipationChart data={data.participation} />
        </Panel>
        <Panel title="유형별 성과" subtitle="협상(1:1) vs 견적(1:N) 낙찰률">
          <TypeSplitChart data={data.typeSplit} />
        </Panel>
      </div>

      {/* 카테고리 · 카드 */}
      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
        <Panel title={`${label('category')}별 절감`} subtitle="어디서 절감이 났나">
          <CategoryChart data={data.categories} />
        </Panel>
        <Panel title="협상카드 효과" subtitle="유형별 사용빈도 + 사용 직후 평균 제시가 하락">
          <CardEffectChart data={data.cards} />
        </Panel>
        <Panel title="협상카드 성공률 TOP 5" subtitle="사용 이력 있는 카드 · 사용 세션 중 타결 비율">
          <CardTop5 />
        </Panel>
      </div>
    </div>
  );
}