'use client';

import Link from 'next/link';
import { useRouter } from 'next/navigation';
import { useEffect, useMemo, useRef, useState } from 'react';
import {
  type FocusPlanItem,
  type FocusPlanToday,
  useFocusPlan,
} from '@/entities/focus-plan';
import { usePlanTier } from '@/entities/plan';
import { SCENE_THEMES, getSceneById } from '@/entities/scene';
import { useMediaCatalog, getSceneStageBackgroundStyle } from '@/entities/media';
import { SOUND_PRESETS } from '@/entities/session';
import { PaywallSheetContent } from '@/features/paywall-sheet';
import { PlanPill } from '@/features/plan-pill';
import { useFocusStats } from '@/features/stats';
import { focusSessionApi } from '@/features/focus-session/api/focusSessionApi';
import { copy } from '@/shared/i18n';
import { cn } from '@/shared/lib/cn';
import { useDragScroll } from '@/shared/lib/useDragScroll';
import { FocusPlanManageSheet, type FocusPlanEditingState } from './FocusPlanManageSheet';

const FREE_MAX_ITEMS = 1;
const PRO_MAX_ITEMS = 5;

const focusEntryCopy = {
  eyebrow: 'VibeRoom',
  title: '오늘의 깊은 몰입을 위한 단 하나의 목표',
  description: '지금 당장 시작할 딱 하나만 남겨두세요.',
  inputLabel: '첫 블록',
  inputPlaceholder: '예: 제안서 첫 문단만 다듬기',
  helper: '아주 작게 잡아도 괜찮아요.',
  startNow: '바로 몰입하기',
  nextStep: '환경 세팅',
  manageBlocks: '내 계획에서 가져오기',
  previewTitle: '이어갈 블록',
  previewDescription: '다음 후보는 가볍게만 두고, 시작은 위 버튼 하나로 끝냅니다.',
  reviewLinkLabel: 'stats',
  reviewFallback: '최근 7일 흐름을 불러오는 중이에요.',
  ritualMeta: '기본 설정으로 들어갑니다. 공간 안에서 언제든 바꿀 수 있어요.',
  apiUnavailableNote: '계획 연결이 잠시 느려요. 지금은 첫 블록부터 바로 시작할 수 있어요.',
  freeUpgradeLabel: '두 번째 블록부터는 PRO',
  paywallSource: 'focus-entry-manage-sheet',
  paywallLead: 'Calm Session OS PRO',
  paywallBody: '여러 블록을 이어서 정리하는 manage sheet는 PRO에서 열립니다.',
  microStepTitle: '가장 작은 첫 단계 (선택)',
  microStepHelper: '이 목표를 위해 당장 할 수 있는 5분짜리 행동은 무엇인가요?',
  microStepPlaceholder: '예: 폴더 열기, 노션 켜기',
  ritualTitle: '어떤 환경에서 몰입하시겠어요?',
  ritualHelper: '오늘의 무드를 선택하세요.',
};

const ENTRY_SUGGESTIONS = [
  { id: 'tidy-10m', label: '정리 10분', goal: '정리 10분만 하기' },
  { id: 'mail-3', label: '메일 3개', goal: '메일 3개 정리' },
  { id: 'doc-1p', label: '문서 1p', goal: '문서 1p 다듬기' },
] as const;

type EntrySource = 'starter' | 'plan' | 'custom';
type DashboardStep = 'goal' | 'ritual';

const getVisiblePlanItems = (
  currentItem: FocusPlanItem | null,
  nextItems: FocusPlanItem[],
  limit: number,
) => {
  return [currentItem, ...nextItems]
    .filter((item): item is FocusPlanItem => Boolean(item))
    .slice(0, limit);
};

const resolveVisiblePlanItems = (nextPlan: FocusPlanToday | null, limit: number) => {
  return getVisiblePlanItems(nextPlan?.currentItem ?? null, nextPlan?.nextItems ?? [], limit);
};

// Premium Glassmorphism UI Classes
const glassInputClass = 'w-full rounded-full border border-white/20 bg-black/20 px-8 py-5 text-center text-lg md:text-xl font-light tracking-wide text-white placeholder:text-white/40 shadow-2xl backdrop-blur-xl outline-none transition-all focus:border-white/40 focus:bg-black/30 focus:ring-4 focus:ring-white/10';
const primaryGlassBtnClass = 'inline-flex items-center justify-center rounded-full border border-white/20 bg-white/20 px-8 py-4 text-base font-medium text-white shadow-xl backdrop-blur-xl transition-all hover:bg-white/30 hover:scale-[1.02] active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed';
const secondaryGlassBtnClass = 'inline-flex items-center justify-center rounded-full border border-white/10 bg-transparent px-8 py-4 text-base font-medium text-white/80 transition-all hover:bg-white/10 hover:text-white active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed';
const panelGlassClass = 'rounded-[2rem] border border-white/10 bg-black/40 p-6 md:p-8 shadow-2xl backdrop-blur-2xl';
const itemCardGlassClass = 'relative flex flex-col items-center justify-center overflow-hidden rounded-2xl border border-white/10 bg-white/5 p-4 text-white transition-all hover:bg-white/10 active:scale-95 cursor-pointer';
const itemCardGlassSelectedClass = 'border-white/40 bg-white/20 shadow-[0_0_20px_rgba(255,255,255,0.1)]';

export const FocusDashboardWidget = () => {
  const router = useRouter();
  const { plan: planTier, isPro, setPlan } = usePlanTier();
  const { plan, isLoading, isSaving, error, source, createItem, updateItem, deleteItem } = useFocusPlan();
  const { sceneAssetMap } = useMediaCatalog();

  const [step, setStep] = useState<DashboardStep>('goal');
  const [paywallSource, setPaywallSource] = useState<string | null>(null);
  const [manageSheetOpen, setManageSheetOpen] = useState(false);
  const [editingState, setEditingState] = useState<FocusPlanEditingState>(null);
  
  const [entryDraft, setEntryDraft] = useState('');
  const [selectedPlanItemId, setSelectedPlanItemId] = useState<string | null>(null);
  const [entrySource, setEntrySource] = useState<EntrySource>('starter');
  
  const [microStepDraft, setMicroStepDraft] = useState('');
  // Use user's last preference or default to first
  const [selectedSceneId, setSelectedSceneId] = useState(SCENE_THEMES[0].id);
  const [selectedSoundId, setSelectedSoundId] = useState(SOUND_PRESETS[0].id);
  const [selectedTimerId, setSelectedTimerId] = useState('50-10');
  
  const [isStartingSession, setIsStartingSession] = useState(false);

  const entryInputRef = useRef<HTMLInputElement | null>(null);
  const microStepInputRef = useRef<HTMLInputElement | null>(null);
  const inputRef = useRef<HTMLInputElement | null>(null);

  const {
    containerRef: sceneContainerRef,
    events: sceneDragEvents,
    isDragging: isSceneDragging,
    shouldSuppressClick: shouldSuppressSceneClick,
  } = useDragScroll();

  const selectedScene = useMemo(() => getSceneById(selectedSceneId) ?? SCENE_THEMES[0], [selectedSceneId]);

  const maxItems = isPro ? PRO_MAX_ITEMS : FREE_MAX_ITEMS;
  const planItems = useMemo(() => {
    return getVisiblePlanItems(plan.currentItem, plan.nextItems, maxItems);
  }, [maxItems, plan.currentItem, plan.nextItems]);

  const currentItem = planItems[0] ?? null;
  
  const hasPendingEdit = editingState !== null;
  const canAddMore = planItems.length < maxItems;
  const canManagePlan = source === 'api' && !isLoading;
  const trimmedEntryGoal = entryDraft.trim();
  const isGoalReady = trimmedEntryGoal.length > 0;

  useEffect(() => {
    if (!editingState) return;
    const rafId = window.requestAnimationFrame(() => {
      inputRef.current?.focus();
      inputRef.current?.select();
    });
    return () => window.cancelAnimationFrame(rafId);
  }, [editingState]);

  useEffect(() => {
    if (!currentItem) return;
    if (entrySource === 'starter' || (entrySource === 'plan' && !selectedPlanItemId)) {
      setEntryDraft(currentItem.title);
      setSelectedPlanItemId(currentItem.id);
      setEntrySource('plan');
    }
  }, [currentItem, entryDraft, entrySource, selectedPlanItemId]);

  const openPaywall = () => setPaywallSource(focusEntryCopy.paywallSource);

  const handleSelectPlanItem = (item: FocusPlanItem) => {
    const isCurrentSelection = currentItem?.id === item.id;
    setEntryDraft(item.title);
    setSelectedPlanItemId(isCurrentSelection ? item.id : null);
    setEntrySource(isCurrentSelection ? 'plan' : 'custom');
    setManageSheetOpen(false);
  };

  const handleSelectSuggestion = (goal: string) => {
    setEntryDraft(goal);
    setSelectedPlanItemId(null);
    setEntrySource('starter');
  };

  const handleEntryDraftChange = (value: string) => {
    setEntryDraft(value);
    setEntrySource('custom');
    setSelectedPlanItemId(null);
  };

  const handleAddBlock = () => {
    if (hasPendingEdit || isSaving || !canManagePlan) return;
    if (!canAddMore) {
      if (!isPro) openPaywall();
      return;
    }
    setEditingState({ mode: 'new', value: '' });
  };

  const handleEditRow = (item: FocusPlanItem) => {
    if (hasPendingEdit || isSaving) return;
    setEditingState({ mode: 'edit', itemId: item.id, value: item.title });
  };

  const handleManageDraftChange = (value: string) => {
    setEditingState((current) => current ? { ...current, value } : current);
  };

  const handleCancelEdit = () => {
    if (!isSaving) setEditingState(null);
  };

  const handleSaveEdit = async () => {
    if (!editingState) return;
    const trimmedTitle = editingState.value.trim();
    if (!trimmedTitle) return;

    if (editingState.mode === 'new') {
      const nextPlan = await createItem({ title: trimmedTitle });
      if (!nextPlan) return;
      setEditingState(null);
      if (!currentItem) {
        const nextVisiblePlanItems = resolveVisiblePlanItems(nextPlan, maxItems);
        const nextCurrentItem = nextVisiblePlanItems[0] ?? null;
        if (nextCurrentItem) {
          setEntryDraft(nextCurrentItem.title);
          setSelectedPlanItemId(nextCurrentItem.id);
          setEntrySource('plan');
        }
      }
      return;
    }

    const currentRow = planItems.find((item) => item.id === editingState.itemId);
    if (!currentRow) return;
    if (currentRow.title === trimmedTitle) {
      setEditingState(null);
      return;
    }

    const nextPlan = await updateItem(editingState.itemId, { title: trimmedTitle });
    if (!nextPlan) return;
    setEditingState(null);
    if (selectedPlanItemId === editingState.itemId) {
      setEntryDraft(trimmedTitle);
      setEntrySource('plan');
    }
  };

  const handleDeleteRow = async (itemId: string) => {
    const nextPlan = await deleteItem(itemId);
    if (!nextPlan) return;
    if (editingState?.mode === 'edit' && editingState.itemId === itemId) {
      setEditingState(null);
    }
    if (selectedPlanItemId === itemId) {
      const nextVisiblePlanItems = resolveVisiblePlanItems(nextPlan, maxItems);
      const nextCurrentItem = nextVisiblePlanItems[0] ?? null;
      if (nextCurrentItem) {
        setEntryDraft(nextCurrentItem.title);
        setSelectedPlanItemId(nextCurrentItem.id);
        setEntrySource('plan');
        return;
      }
      setEntryDraft('');
      setSelectedPlanItemId(null);
      setEntrySource('custom');
    }
  };

  const handleNextStep = () => {
    if (!isGoalReady) {
      entryInputRef.current?.focus();
      return;
    }
    if (step === 'goal') setStep('ritual');
  };

  const handleStartSession = async () => {
    if (isStartingSession) return;
    setIsStartingSession(true);

    try {
      await focusSessionApi.startSession({
        goal: trimmedEntryGoal,
        microStep: microStepDraft.trim() || null,
        sceneId: selectedSceneId,
        soundPresetId: selectedSoundId,
        timerPresetId: selectedTimerId,
        focusPlanItemId: selectedPlanItemId || undefined,
        entryPoint: 'space-setup'
      });
      router.push('/space');
    } catch (err) {
      console.error('Failed to start session', err);
      setIsStartingSession(false);
    }
  };

  return (
    <div className="relative min-h-dvh overflow-hidden bg-slate-900 text-white font-sans selection:bg-white/20">
      {/* Premium Cinematic Background */}
      <div
        className={cn(
          "absolute inset-0 bg-cover bg-center transition-all duration-1000 ease-out will-change-transform",
          isStartingSession ? 'scale-110 blur-2xl opacity-0' : 'scale-100 opacity-100',
          step === 'ritual' ? 'scale-105 blur-sm' : ''
        )}
        style={getSceneStageBackgroundStyle(selectedScene, sceneAssetMap?.[selectedScene.id])}
      />
      {/* Global Gradient Overlay for text readability */}
      <div className={cn(
        "absolute inset-0 bg-gradient-to-b from-black/20 via-black/40 to-black/60 transition-opacity duration-1000",
        step === 'ritual' ? 'opacity-80' : 'opacity-100'
      )} />

      {/* Header */}
      <header className="absolute top-0 left-0 right-0 z-20 flex items-center justify-between p-6 md:p-8">
        <p className="text-sm font-semibold tracking-[0.3em] text-white/50 uppercase">
          {focusEntryCopy.eyebrow}
        </p>
        <PlanPill
          plan={planTier}
          onClick={() => {
            if (!isPro) openPaywall();
          }}
        />
      </header>

      {/* Main Content Area */}
      <main className="relative z-10 flex h-dvh flex-col items-center justify-center px-4">
        
        {/* Step 1: Goal Setup */}
        <div className={cn(
          "w-full max-w-2xl transition-all duration-700 absolute",
          step === 'goal' 
            ? 'opacity-100 translate-y-0 pointer-events-auto' 
            : 'opacity-0 -translate-y-8 pointer-events-none'
        )}>
          <div className="flex flex-col items-center space-y-10 text-center">
            <h1 className="text-3xl md:text-5xl font-light tracking-tight text-white drop-shadow-lg leading-tight">
              {focusEntryCopy.title}
            </h1>
            
            <div className="w-full max-w-xl mx-auto space-y-8">
              <input
                ref={entryInputRef}
                value={entryDraft}
                onChange={(event) => handleEntryDraftChange(event.target.value)}
                onKeyDown={(e) => e.key === 'Enter' && handleNextStep()}
                placeholder={focusEntryCopy.inputPlaceholder}
                className={glassInputClass}
                autoFocus
              />

              <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
                <button
                  type="button"
                  onClick={handleStartSession}
                  disabled={!isGoalReady || isStartingSession}
                  className={primaryGlassBtnClass}
                >
                  {focusEntryCopy.startNow}
                </button>
                <button
                  type="button"
                  onClick={handleNextStep}
                  disabled={!isGoalReady || isStartingSession}
                  className={secondaryGlassBtnClass}
                >
                  {focusEntryCopy.nextStep}
                </button>
              </div>

              {/* Suggestions / Manage - very minimal */}
              <div className="pt-8 flex flex-col items-center gap-4 opacity-70 hover:opacity-100 transition-opacity">
                <div className="flex flex-wrap justify-center gap-2">
                  {ENTRY_SUGGESTIONS.map((suggestion) => {
                    const isActive = selectedPlanItemId === null && trimmedEntryGoal === suggestion.goal;
                    return (
                      <button
                        key={suggestion.id}
                        type="button"
                        onClick={() => handleSelectSuggestion(suggestion.goal)}
                        className={cn(
                          'rounded-full px-4 py-1.5 text-sm transition-all border',
                          isActive
                            ? 'bg-white/20 border-white text-white'
                            : 'bg-transparent border-white/20 text-white/70 hover:border-white/40 hover:text-white'
                        )}
                      >
                        {suggestion.label}
                      </button>
                    );
                  })}
                </div>
                <button
                  type="button"
                  onClick={() => setManageSheetOpen(true)}
                  disabled={!canManagePlan}
                  className="text-sm font-medium text-white/50 hover:text-white transition-colors underline underline-offset-4 decoration-white/20"
                >
                  {focusEntryCopy.manageBlocks}
                </button>
              </div>
            </div>
          </div>
        </div>

        {/* Step 2: Ritual Setup */}
        <div className={cn(
          "w-full max-w-4xl transition-all duration-700 absolute",
          step === 'ritual' 
            ? 'opacity-100 translate-y-0 pointer-events-auto' 
            : 'opacity-0 translate-y-8 pointer-events-none'
        )}>
          <div className={panelGlassClass}>
            <div className="flex items-center justify-between mb-8 pb-6 border-b border-white/10">
              <div className="flex-1">
                <p className="text-xs uppercase tracking-widest text-white/40 mb-2">Today's Focus</p>
                <p className="text-xl md:text-2xl font-light text-white truncate pr-4">{trimmedEntryGoal}</p>
              </div>
              <button
                type="button"
                onClick={() => setStep('goal')}
                className="rounded-full border border-white/20 bg-white/5 px-4 py-2 text-sm text-white hover:bg-white/10 transition-colors"
              >
                수정
              </button>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12">
              <div className="space-y-8">
                {/* Microstep */}
                <div className="space-y-3">
                  <label className="block space-y-2">
                    <span className="text-sm font-medium text-white/80">
                      {focusEntryCopy.microStepTitle}
                    </span>
                    <input
                      ref={microStepInputRef}
                      value={microStepDraft}
                      onChange={(e) => setMicroStepDraft(e.target.value)}
                      onKeyDown={(e) => e.key === 'Enter' && handleStartSession()}
                      placeholder={focusEntryCopy.microStepPlaceholder}
                      className="w-full rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-white placeholder:text-white/30 outline-none transition-all focus:border-white/30 focus:bg-white/10"
                    />
                  </label>
                  <p className="text-xs text-white/40">{focusEntryCopy.microStepHelper}</p>
                </div>

                {/* Timer */}
                <div className="space-y-3">
                  <p className="text-sm font-medium text-white/80">몰입 리듬</p>
                  <div className="grid grid-cols-3 gap-2">
                    {[{id: '25-5', label: '25 / 5'}, {id: '50-10', label: '50 / 10'}, {id: '90-20', label: '90 / 20'}].map(timer => (
                      <button
                        key={timer.id}
                        type="button"
                        onClick={() => setSelectedTimerId(timer.id)}
                        className={cn(itemCardGlassClass, selectedTimerId === timer.id && itemCardGlassSelectedClass)}
                      >
                        <span className="text-sm font-medium">{timer.label}</span>
                      </button>
                    ))}
                  </div>
                </div>
              </div>

              <div className="space-y-8">
                {/* Scene */}
                <div className="space-y-3">
                  <p className="text-sm font-medium text-white/80">배경 공간</p>
                  <div 
                    ref={sceneContainerRef}
                    {...sceneDragEvents}
                    className={cn(
                      "flex gap-3 overflow-x-auto pb-2 scrollbar-none",
                      isSceneDragging ? "cursor-grabbing" : "cursor-grab"
                    )}
                  >
                    {SCENE_THEMES.map(scene => (
                      <button
                        key={scene.id}
                        type="button"
                        onClick={() => {
                          if (!shouldSuppressSceneClick) {
                            setSelectedSceneId(scene.id);
                          }
                        }}
                        className={cn(
                          'group relative h-24 min-w-[120px] rounded-xl border border-white/10 text-left transition-all overflow-hidden bg-white/5 active:scale-95',
                          selectedSceneId === scene.id && 'border-white/40 shadow-[0_0_20px_rgba(255,255,255,0.1)]',
                          isSceneDragging && 'pointer-events-none'
                        )}
                        style={getSceneStageBackgroundStyle(scene, sceneAssetMap?.[scene.id])}
                      >
                        <div className="absolute inset-0 bg-black/40 transition-opacity group-hover:bg-black/20" />
                        <span className="absolute bottom-2 left-2 text-sm font-medium z-10 text-white text-shadow-sm">{scene.name}</span>
                        {selectedSceneId === scene.id && (
                          <span className="absolute top-2 right-2 z-20 flex h-5 w-5 items-center justify-center rounded-full bg-white/20 backdrop-blur-sm border border-white/40 text-white text-[10px]">
                            ✓
                          </span>
                        )}
                      </button>
                    ))}
                  </div>
                </div>

                {/* Sound */}
                <div className="space-y-3">
                  <p className="text-sm font-medium text-white/80">사운드</p>
                  <div className="grid grid-cols-2 sm:grid-cols-3 gap-2">
                    {SOUND_PRESETS.map(sound => (
                      <button
                        key={sound.id}
                        type="button"
                        onClick={() => setSelectedSoundId(sound.id)}
                        className={cn(itemCardGlassClass, "py-3", selectedSoundId === sound.id && itemCardGlassSelectedClass)}
                      >
                        <span className="text-sm font-medium">{sound.label}</span>
                      </button>
                    ))}
                  </div>
                </div>
              </div>
            </div>

            <div className="mt-10 pt-6 flex justify-end border-t border-white/10">
              <button
                type="button"
                onClick={handleStartSession}
                disabled={isStartingSession}
                className={primaryGlassBtnClass}
              >
                {isStartingSession ? '공간으로 이동 중...' : '입장하기'}
              </button>
            </div>
          </div>
        </div>
      </main>

      {/* Plan Sheet & Paywall */}
      <FocusPlanManageSheet
        isOpen={manageSheetOpen}
        planItems={planItems}
        selectedPlanItemId={selectedPlanItemId}
        editingState={editingState}
        isSaving={isSaving}
        canAddMore={canAddMore}
        isPro={isPro}
        inputRef={inputRef}
        onClose={() => {
          if (!isSaving) {
            setManageSheetOpen(false);
            setEditingState(null);
          }
        }}
        onAddBlock={handleAddBlock}
        onDraftChange={handleManageDraftChange}
        onSelect={handleSelectPlanItem}
        onEdit={handleEditRow}
        onDelete={(itemId) => {
          void handleDeleteRow(itemId);
        }}
        onSave={() => {
          void handleSaveEdit();
        }}
        onCancel={handleCancelEdit}
      />

      {paywallSource ? (
        <div className="fixed inset-0 z-50 flex items-end justify-center p-4 sm:items-center">
          <button
            type="button"
            aria-label={copy.modal.closeAriaLabel}
            onClick={() => setPaywallSource(null)}
            className="absolute inset-0 bg-slate-950/48 backdrop-blur-[2px]"
          />
          <div className="relative z-10 w-full max-w-md rounded-3xl border border-white/12 bg-[linear-gradient(165deg,rgba(15,23,42,0.94)_0%,rgba(2,6,23,0.98)_100%)] p-5 shadow-[0_24px_60px_rgba(2,6,23,0.36)]">
            <p className="mb-3 text-[11px] uppercase tracking-[0.16em] text-white/42">
              {focusEntryCopy.paywallLead}
            </p>
            <p className="mb-4 text-sm text-white/62">
              {focusEntryCopy.paywallBody}
            </p>
            <PaywallSheetContent
              onStartPro={() => {
                setPlan('pro');
                setPaywallSource(null);
              }}
              onClose={() => setPaywallSource(null)}
            />
          </div>
        </div>
      ) : null}
    </div>
  );
};