'use client';

import Link from 'next/link';
import { useMemo } from 'react';
import { useMediaCatalog, getSceneStageBackgroundStyle } from '@/entities/media';
import { usePlanTier } from '@/entities/plan';
import { getSceneById, SCENE_THEMES } from '@/entities/scene';
import { useFocusStats } from '@/features/stats';
import { copy } from '@/shared/i18n';
import { cn } from '@/shared/lib/cn';

const DEFAULT_STATS_SCENE_ID = getSceneById('forest')?.id ?? SCENE_THEMES[0].id;

const reviewStageSceneByPreset = (presetId: string) => {
  if (presetId.startsWith('forest')) {
    return getSceneById('forest') ?? SCENE_THEMES[0];
  }

  return getSceneById(DEFAULT_STATS_SCENE_ID) ?? SCENE_THEMES[0];
};

export const StatsOverviewWidget = () => {
  const { stats } = copy;
  const { isPro } = usePlanTier();
  const { sceneAssetMap } = useMediaCatalog();
  const { review, isLoading, error, source, refetch } = useFocusStats();

  const activeScene = useMemo(
    () => reviewStageSceneByPreset(review.carryForward.presetId),
    [review.carryForward.presetId],
  );
  const sourceLabel = source === 'api' ? stats.sourceApi : stats.sourceMock;
  const syncLabel = error ? error : isLoading ? stats.loading : stats.synced;
  const carryForwardCtaLabel = isPro ? stats.reviewCarryCtaPro : review.carryForward.ctaLabel;

  return (
    <div className="relative min-h-dvh overflow-hidden bg-black text-white selection:bg-white/20 font-sans">
      {/* Immersive Background */}
      <div
        className="absolute inset-0 bg-cover bg-center transition-transform duration-[2s] ease-[cubic-bezier(0.22,1,0.36,1)] scale-105 blur-[60px] brightness-50"
        style={getSceneStageBackgroundStyle(activeScene, sceneAssetMap?.[activeScene.id])}
      />
      {/* Premium Cinematic Overlays */}
      <div className="absolute inset-0 bg-[radial-gradient(circle_at_center,transparent_0%,rgba(0,0,0,0.85)_100%)] mix-blend-multiply pointer-events-none" />
      <div className="absolute inset-0 bg-black/40 pointer-events-none" />
      <div className="absolute inset-0 bg-[linear-gradient(180deg,transparent_0%,rgba(0,0,0,0.6)_50%,rgba(0,0,0,0.9)_100%)] pointer-events-none" />

      {/* Header */}
      <header className="absolute inset-x-0 top-0 z-40 flex items-center justify-between px-8 py-8 md:px-12 md:py-10 opacity-0 animate-fade-in delay-150">
        <div className="flex items-center gap-3">
          <p className="text-[11px] font-bold uppercase tracking-[0.4em] text-white/50 drop-shadow-sm">
            Weekly Review
          </p>
          {isPro && (
            <span className="rounded-full bg-white/10 px-2 py-0.5 text-[9px] font-bold uppercase tracking-widest text-white/60 backdrop-blur-md">
              PRO
            </span>
          )}
        </div>

        <div className="flex items-center gap-3">
          <button
            type="button"
            onClick={() => {
              void refetch();
            }}
            className="group flex items-center gap-2 rounded-full border border-white/5 bg-white/5 px-4 py-1.5 text-[10px] font-semibold uppercase tracking-widest text-white/50 backdrop-blur-md transition-all hover:bg-white/10 hover:text-white/80"
          >
            {stats.refresh}
          </button>
          <Link
            href="/app"
            className="group flex items-center gap-2 rounded-full border border-white/5 bg-white/5 px-4 py-1.5 text-[10px] font-semibold uppercase tracking-widest text-white/50 backdrop-blur-md transition-all hover:bg-white/10 hover:text-white/80"
          >
            <span>{copy.common.hub}</span>
            <span className="transition-transform group-hover:translate-x-0.5">&rarr;</span>
          </Link>
        </div>
      </header>

      {/* Main Flow */}
      <main className="relative z-10 mx-auto flex min-h-dvh w-full max-w-6xl flex-col px-6 pb-24 pt-32 md:px-12 md:pt-40">
        
        {/* 1. Hero Summary (Cinematic Entry) */}
        <section className="mb-20 flex flex-col items-center text-center opacity-0 animate-fade-in-up delay-150">
          <div className="mb-6 flex flex-wrap justify-center gap-3">
            <div className="inline-flex items-center gap-2 rounded-full border border-white/5 bg-white/5 px-3 py-1.5 backdrop-blur-md">
              <span className="h-1.5 w-1.5 rounded-full bg-white/40" />
              <span className="text-[10px] font-bold uppercase tracking-widest text-white/70">
                {review.periodLabel}
              </span>
            </div>
            <div className="inline-flex items-center gap-2 rounded-full border border-white/5 bg-white/5 px-3 py-1.5 backdrop-blur-md">
              <span className="text-[10px] font-bold uppercase tracking-widest text-white/40">
                {sourceLabel}
              </span>
            </div>
          </div>
          
          <h1 className="max-w-4xl text-[2.5rem] font-light leading-[1.1] tracking-tight text-white/95 md:text-[4rem]">
            {review.snapshotSummary}
          </h1>
          <p className="mt-6 text-[13px] font-medium tracking-widest uppercase text-white/40">
            {syncLabel}
          </p>

          {/* Inline Snapshot Metrics */}
          <div className="mt-16 flex flex-wrap justify-center gap-8 md:gap-16">
            {review.snapshotMetrics.map((metric) => (
              <div key={metric.id} className="flex flex-col items-center">
                <p className="text-[10px] font-bold uppercase tracking-[0.2em] text-white/40">
                  {metric.label}
                </p>
                <p className="mt-2 text-4xl font-light tracking-tight text-white/90 md:text-5xl">
                  {metric.value}
                </p>
                <p className="mt-2 max-w-[12rem] text-center text-[12px] leading-relaxed text-white/50">
                  {metric.hint}
                </p>
              </div>
            ))}
          </div>
        </section>

        {/* 2. Insight Pillars (Start, Recovery, Completion) */}
        <section className="mb-24 grid gap-6 md:grid-cols-3 opacity-0 animate-fade-in-up delay-300">
          {[
            {
              data: review.startQuality,
              accent: 'bg-[radial-gradient(circle_at_top,rgba(96,165,250,0.15),transparent_70%)]'
            },
            {
              data: review.recoveryQuality,
              accent: 'bg-[radial-gradient(circle_at_top,rgba(20,184,166,0.15),transparent_70%)]'
            },
            {
              data: review.completionQuality,
              accent: 'bg-[radial-gradient(circle_at_top,rgba(245,158,11,0.15),transparent_70%)]'
            }
          ].map((column, idx) => (
            <div 
              key={idx} 
              className="relative flex flex-col overflow-hidden rounded-[2rem] border border-white/5 bg-white/5 p-8 backdrop-blur-2xl transition-all hover:bg-white/10 hover:border-white/10"
            >
              <div className={cn("absolute inset-0 pointer-events-none", column.accent)} />
              <div className="relative z-10 flex flex-col h-full">
                <p className="text-[10px] font-bold uppercase tracking-[0.2em] text-white/40">
                  {column.data.title}
                </p>
                <p className="mt-4 text-[14px] leading-relaxed text-white/70">
                  {column.data.summary}
                </p>
                
                <div className="mt-8 flex-1 space-y-6">
                  {column.data.metrics.map((metric, mIdx) => (
                    <div key={metric.id} className={cn("flex flex-col", mIdx > 0 && "pt-6 border-t border-white/5")}>
                      <p className="text-[10px] font-semibold uppercase tracking-widest text-white/40">
                        {metric.label}
                      </p>
                      <p className={cn("mt-1 font-light tracking-tight text-white/90", mIdx === 0 ? "text-4xl" : "text-2xl")}>
                        {metric.value}
                      </p>
                      <p className="mt-2 text-[12px] leading-relaxed text-white/50">
                        {metric.hint}
                      </p>
                    </div>
                  ))}
                  {column.data.metrics.length === 0 && (
                     <p className="text-[12px] leading-relaxed text-white/30 italic">지표 데이터가 부족합니다.</p>
                  )}
                </div>

                {column.data.note && (
                  <div className="mt-8 rounded-2xl border border-white/5 bg-white/5 p-4">
                    <p className="text-[11px] leading-relaxed text-white/50">
                      {column.data.note}
                    </p>
                  </div>
                )}
                {column.data.availability === 'limited' && (
                  <div className="mt-6 inline-flex self-start rounded-full border border-white/5 bg-white/5 px-3 py-1 text-[9px] font-bold uppercase tracking-widest text-white/30">
                    Limited Data
                  </div>
                )}
              </div>
            </div>
          ))}
        </section>

        {/* 3. Carry Forward Climax */}
        <section className="flex flex-col items-center text-center opacity-0 animate-fade-in-up delay-500">
          <div className="relative w-full max-w-3xl overflow-hidden rounded-[2.5rem] border border-white/10 bg-white/5 p-10 backdrop-blur-3xl shadow-2xl md:p-16">
            <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,rgba(168,85,247,0.15),transparent_70%)] pointer-events-none" />
            <div className="relative z-10 flex flex-col items-center">
              <div className="inline-flex items-center gap-2 rounded-full border border-white/5 bg-white/5 px-3 py-1.5 backdrop-blur-md mb-6">
                <span className="h-1.5 w-1.5 rounded-full bg-white/40" />
                <span className="text-[10px] font-bold uppercase tracking-widest text-white/60">
                  Carry Forward
                </span>
              </div>
              
              <h2 className="text-3xl font-light tracking-tight text-white/95 md:text-4xl">
                다음 세션에 가져갈 흐름
              </h2>
              <p className="mt-6 text-lg text-white/70 font-light leading-relaxed max-w-xl">
                &quot;{review.carryForward.keepDoing}&quot;
              </p>

              <div className="mt-10 grid gap-6 text-left w-full md:grid-cols-2">
                <div className="rounded-2xl border border-white/5 bg-white/5 p-5">
                  <p className="text-[10px] font-bold uppercase tracking-[0.2em] text-white/40">
                    작은 변화 시도하기
                  </p>
                  <p className="mt-3 text-[13px] leading-relaxed text-white/70">
                    {review.carryForward.tryNext}
                  </p>
                </div>
                <div className="rounded-2xl border border-white/5 bg-white/5 p-5">
                  <p className="text-[10px] font-bold uppercase tracking-[0.2em] text-white/40 flex justify-between">
                    <span>추천 Atmosphere</span>
                    {isPro && <span className="text-white/30">PRO</span>}
                  </p>
                  <p className="mt-3 text-[15px] font-medium tracking-tight text-white/90">
                    {review.carryForward.presetLabel}
                  </p>
                  <p className="mt-1 text-[12px] text-white/50">가장 무리 없이 들어갈 수 있는 흐름.</p>
                </div>
              </div>

              <div className="mt-12 flex flex-col items-center gap-4">
                <Link
                  href={review.carryForward.ctaHref}
                  className="group relative flex h-14 items-center justify-center overflow-hidden rounded-full border border-white/20 bg-white/10 px-10 text-[14px] font-medium tracking-wide text-white shadow-2xl backdrop-blur-md transition-all duration-300 hover:bg-white/20 hover:scale-[1.02] active:scale-[0.98]"
                >
                  <span className="relative z-10">{carryForwardCtaLabel}</span>
                </Link>
                <p className="text-[11px] text-white/30 tracking-wide">
                  Review는 끝이 아니라, 더 가벼운 시작을 위한 출발점입니다.
                </p>
              </div>
            </div>
          </div>
        </section>

      </main>
    </div>
  );
};