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 { 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 { wonCompact, pct, signedWonCompact } from './fmt';
import type { StatData } from './types';

// 통계 본문. KPI 요약 + 절감 분석 + 성사/프로세스 + 카드 효과. scope(회사/내견적)별로 동일 레이아웃.
export function StatisticsView({ data }: { data: StatData }) {
  const k = data.kpi;
  return (
    <div className="space-y-4">
      {/* 임팩트 요약 KPI */}
      <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 xl: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" />
        <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>

      {/* 절감 분석 */}
      <div className="grid gap-4 lg:grid-cols-3">
        <Panel
          title="월별 절감 추이"
          subtitle="목표가 대비 절감액 · 막대에 마우스를 올리면 절감률"
          className="lg:col-span-2"
        >
          <SavingsTrendChart data={data.trend} />
        </Panel>
        <Panel title="마감 결과" subtitle="낙찰 vs 개찰 사유 4종">
          <OutcomeChart data={data.outcome} />
        </Panel>
      </div>

      {/* 성사 · 프로세스 */}
      <div className="grid gap-4 lg:grid-cols-2">
        <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 lg:grid-cols-2">
        <Panel title="카테고리별 절감" subtitle="어디서 절감이 났나">
          <CategoryChart data={data.categories} />
        </Panel>
        <Panel title="협상카드 효과" subtitle="유형별 사용빈도 + 사용 직후 평균 제시가 하락">
          <CardEffectChart data={data.cards} />
        </Panel>
      </div>
    </div>
  );
}