'use client';

import { useState, useTransition } from 'react';
import { createDuo } from '@/lib/api';
import { translateApiErrorMessage } from '@/lib/ui-text';

type DuoResult = Awaited<ReturnType<typeof createDuo>>;

const TRAIT_LABELS: Record<string, string> = {
  aggression: '공격성',
  stability: '안정성',
  roaming: '로밍',
  vision: '시야',
  objective: '오브젝트',
  growth: '성장',
  fightJoin: '교전 합류',
};

export default function DuoPage() {
  const [form, setForm] = useState({
    aName: '',
    aTag: 'KR1',
    bName: '',
    bTag: 'KR1',
  });
  const [result, setResult] = useState<DuoResult | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [isPending, startTransition] = useTransition();

  const submit = (event: React.FormEvent) => {
    event.preventDefault();
    setError(null);
    startTransition(async () => {
      try {
        const data = await createDuo({
          playerA: { gameName: form.aName, tagLine: form.aTag, region: 'KR' },
          playerB: { gameName: form.bName, tagLine: form.bTag, region: 'KR' },
        });
        setResult(data);
      } catch (err) {
        setError(
          translateApiErrorMessage(err instanceof Error ? err.message : 'Request failed.'),
        );
      }
    });
  };

  return (
    <main className="mx-auto max-w-6xl px-4 pb-20 pt-8">
      <section className="result-hero rounded-[2rem]">
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_20%_30%,rgba(74,215,226,0.16),transparent_24%),radial-gradient(circle_at_78%_32%,rgba(216,173,83,0.18),transparent_28%),linear-gradient(135deg,#111827_0%,#1c1531_54%,#101b2a_100%)]" />
        <div className="relative z-[2] grid gap-8 px-6 py-8 md:grid-cols-[1fr_0.92fr] md:px-8">
          <div>
            <p className="text-sm font-black tracking-[0.24em] text-[#d8ad53]">듀오 시너지</p>
            <h1 className="mt-3 text-5xl font-black tracking-[-0.06em] text-white md:text-6xl">
              듀오 궁합 테스트
            </h1>
            <p className="mt-5 max-w-2xl text-lg leading-8 text-[#c8d4e5]">
              두 플레이어의 교전 호흡, 성장 성향, 운영 밸런스를 비교해 어떤 조합으로 맞물리는지
              GGTI 기준으로 해석합니다.
            </p>
            <div className="mt-8 grid gap-3 sm:grid-cols-3">
              <InfoPill title="교전 호흡" body="먼저 여는 타입과 받아치는 타입을 구분합니다." />
              <InfoPill title="성장 성향" body="라인 안정 성장형인지, 합류 우선형인지 비교합니다." />
              <InfoPill title="운영 밸런스" body="오브젝트 전환과 시야 사용 패턴을 함께 봅니다." />
            </div>
          </div>

          <form onSubmit={submit} className="ggti-card rounded-[1.75rem] p-6">
            <div className="grid gap-4 md:grid-cols-2">
              {[
                ['aName', '플레이어 A Riot ID 또는 Riot ID#태그'],
                ['aTag', 'A 태그'],
                ['bName', '플레이어 B Riot ID 또는 Riot ID#태그'],
                ['bTag', 'B 태그'],
              ].map(([key, label]) => (
                <input
                  key={key}
                  value={form[key as keyof typeof form]}
                  onChange={(event) => setForm((prev) => ({ ...prev, [key]: event.target.value }))}
                  placeholder={label}
                  className="rounded-2xl border border-white/10 bg-black/30 px-5 py-4 outline-none ring-[#5ce1e6]/25 transition focus:ring-4"
                  required
                />
              ))}
            </div>
            <button className="mt-5 w-full rounded-2xl bg-[#d8ad53] px-6 py-4 font-black text-[#111722]">
              {isPending ? '분석 중...' : '궁합 분석'}
            </button>
            {error ? <p className="mt-3 text-sm font-bold text-[#ff6b7a]">{error}</p> : null}
          </form>
        </div>
      </section>

      {result ? (
        <section className="mt-8 grid gap-6 lg:grid-cols-[0.78fr_1.22fr]">
          <div className="ggti-card rounded-[1.75rem] p-7 text-center">
            <p className="text-sm font-black text-[#d8ad53]">궁합 점수</p>
            <h2 className="mt-3 text-7xl font-black text-white">{result.compatibilityScore}</h2>
            <div className="mt-5 h-3 overflow-hidden rounded-full bg-white/8">
              <div
                className="h-full rounded-full bg-[linear-gradient(90deg,#4ad7e2_0%,#788cff_50%,#d8ad53_100%)]"
                style={{ width: `${Math.max(0, Math.min(100, result.compatibilityScore))}%` }}
              />
            </div>
          </div>
          <div className="ggti-card rounded-[1.75rem] p-7">
            <p className="text-sm font-black text-[#d8ad53]">관계 유형</p>
            <h3 className="mt-2 text-3xl font-black text-white">{result.relationType}</h3>
            <p className="mt-4 text-base leading-8 text-[#aeb8c9]">{result.summary}</p>
            <div className="mt-6 grid gap-3 sm:grid-cols-3">
              {Object.entries(result.traitDiff).slice(0, 3).map(([key, value]) => (
                <div key={key} className="rounded-2xl border border-white/6 bg-black/15 p-4">
                  <p className="text-sm font-bold text-[#93a4bb]">{TRAIT_LABELS[key] ?? key}</p>
                  <p className="mt-2 text-2xl font-black text-white">{value}</p>
                </div>
              ))}
            </div>
          </div>
        </section>
      ) : null}
    </main>
  );
}

function InfoPill({ title, body }: { title: string; body: string }) {
  return (
    <div className="rounded-2xl border border-white/8 bg-black/18 px-4 py-4">
      <p className="text-sm font-black text-white">{title}</p>
      <p className="mt-2 text-sm leading-6 text-[#99a8bd]">{body}</p>
    </div>
  );
}