import { useState } from 'react';
import { PageContainer } from '@/components/layout/PageContainer';
import { Typography } from '@/components/ui/typography';
import { AnchoringStatusView, CardLearningView } from '@/features/learning/LearningView';
import { useAnchoringData, useLearningData } from '@/features/learning/api';

// 협상 학습. AI가 협상을 거치며 쌓은 결과를 보는 화면이다.
//   협상카드 = 어떤 카드가 잘 먹혔는지(강화학습), 앵커링 = 구간별 인하폭이 어떻게 조정됐는지.
// 두 축은 성격이 달라 탭으로 나눈다 — 각각 한 화면에서 끝나야 훑기 좋다.
type Tab = 'cards' | 'anchoring';

export default function LearningPage() {
  const [tab, setTab] = useState<Tab>('cards');
  const learning = useLearningData();
  const anchoring = useAnchoringData();
  const isLoading = tab === 'cards' ? learning.isLoading : anchoring.isLoading;

  return (
    <PageContainer>
      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        <Typography variant="h2">협상 학습</Typography>
        <div className="flex gap-1 rounded-lg border border-border bg-card p-1">
          <TabButton active={tab === 'cards'} onClick={() => setTab('cards')}>
            협상카드
          </TabButton>
          <TabButton active={tab === 'anchoring'} onClick={() => setTab('anchoring')}>
            앵커링
          </TabButton>
        </div>
      </div>

      {isLoading ? (
        <Typography variant="muted">학습 현황을 불러오는 중…</Typography>
      ) : tab === 'cards' ? (
        <CardLearningView data={learning.data} />
      ) : (
        <AnchoringStatusView data={anchoring.data} />
      )}
    </PageContainer>
  );
}

function TabButton({
  active,
  onClick,
  children,
}: {
  active: boolean;
  onClick: () => void;
  children: React.ReactNode;
}) {
  return (
    <button
      type="button"
      onClick={onClick}
      className={`rounded-md px-3 py-1.5 text-xs font-semibold transition-colors ${
        active ? 'bg-primary text-primary-foreground' : 'text-muted-foreground hover:bg-muted'
      }`}
    >
      {children}
    </button>
  );
}