'use client';

import { useEffect, useState } from 'react';
import { cn } from '@/shared/lib/cn';

type EndSessionStage = 'decision' | 'success' | 'unfinished';

interface EndSessionConfirmModalProps {
  open: boolean;
  currentGoal: string;
  onClose: () => void;
  onAdvanceGoal: (nextGoal: string) => Promise<boolean> | boolean; // kept for compatibility if needed
  onFinishHere: () => Promise<boolean> | boolean; // User achieved goal -> exit
  onEndSession: () => Promise<boolean> | boolean; // User did not achieve -> exit
}

export const EndSessionConfirmModal = ({
  open,
  currentGoal,
  onClose,
  onFinishHere,
  onEndSession,
}: EndSessionConfirmModalProps) => {
  const [stage, setStage] = useState<EndSessionStage>('decision');
  const [isSubmitting, setIsSubmitting] = useState(false);

  const trimmedGoal = currentGoal.trim() || '목표 없음';

  useEffect(() => {
    if (!open) {
      setTimeout(() => setStage('decision'), 300); // Reset after close animation
      setIsSubmitting(false);
    }
  }, [open]);

  const handleFinish = async () => {
    if (isSubmitting) return;
    setIsSubmitting(true);
    try {
      const didFinish = await onFinishHere();
      if (didFinish) onClose();
    } finally {
      setIsSubmitting(false);
    }
  };

  const handleEnd = async () => {
    if (isSubmitting) return;
    setIsSubmitting(true);
    try {
      const didEnd = await onEndSession();
      if (didEnd) onClose();
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <div
      className={cn(
        'pointer-events-none fixed inset-0 z-[70] flex items-center justify-center px-4 transition-all duration-500 ease-[cubic-bezier(0.16,1,0.3,1)]',
        open ? 'opacity-100' : 'opacity-0',
      )}
      aria-hidden={!open}
    >
      <div
        className={cn(
          'absolute inset-0 bg-[radial-gradient(circle_at_center,rgba(0,0,0,0.6)_0%,rgba(0,0,0,0.95)_100%)] backdrop-blur-2xl transition-opacity duration-500',
          open ? 'opacity-100' : 'opacity-0',
        )}
      />

      <div
        className={cn(
          'relative flex w-full max-w-2xl flex-col items-center text-center transition-all duration-700 ease-[cubic-bezier(0.16,1,0.3,1)]',
          open ? 'pointer-events-auto translate-y-0 scale-100' : 'pointer-events-none translate-y-8 scale-95',
        )}
      >
        <button
          type="button"
          onClick={onClose}
          disabled={isSubmitting}
          className="absolute right-0 top-0 p-2 text-white/40 hover:text-white transition-colors"
          aria-label="닫기"
        >
          ✕
        </button>

        {stage === 'decision' && (
          <div className="flex flex-col items-center animate-fade-in-up w-full">
            <p className="text-[12px] font-bold uppercase tracking-[0.3em] text-white/50 mb-6 drop-shadow-md">
              Session Review
            </p>
            <h3 className="text-3xl md:text-5xl font-light tracking-tight text-white mb-10 leading-tight">
              이번 세션의 목표를<br/>달성하셨나요?
            </h3>

            <div className="w-full max-w-lg rounded-3xl border border-white/10 bg-white/5 p-6 mb-12 backdrop-blur-md shadow-2xl">
              <p className="text-[10px] font-semibold uppercase tracking-widest text-white/40 mb-3">
                현재 목표
              </p>
              <p className="text-xl font-medium text-white/90">
                {trimmedGoal}
              </p>
            </div>

            <div className="flex flex-col sm:flex-row w-full max-w-md gap-4">
              <button
                type="button"
                onClick={() => setStage('success')}
                className="flex-1 rounded-full bg-white text-black px-6 py-4 text-[15px] font-semibold shadow-[0_0_30px_rgba(255,255,255,0.3)] transition-all hover:scale-105 active:scale-95"
              >
                네, 해냈습니다
              </button>
              <button
                type="button"
                onClick={() => setStage('unfinished')}
                className="flex-1 rounded-full border border-white/20 bg-black/40 text-white px-6 py-4 text-[15px] font-medium backdrop-blur-md transition-all hover:bg-white/10 hover:border-white/40 active:scale-95"
              >
                아뇨, 아직입니다
              </button>
            </div>
          </div>
        )}

        {stage === 'success' && (
          <div className="flex flex-col items-center animate-fade-in-up w-full">
            <div className="mb-8 inline-flex h-20 w-20 items-center justify-center rounded-full bg-[radial-gradient(circle_at_top,rgba(255,255,255,0.2),transparent)] border border-white/20 shadow-[0_0_50px_rgba(255,255,255,0.2)]">
              <span className="text-4xl">✨</span>
            </div>
            <h3 className="text-4xl md:text-5xl font-light tracking-tight text-white mb-6">
              완벽합니다.
            </h3>
            <p className="text-lg text-white/60 font-light mb-12 max-w-md leading-relaxed">
              성공적으로 목표를 완수했습니다.<br/>스스로에게 보상을 줄 시간입니다.
            </p>
            <button
              type="button"
              onClick={handleFinish}
              disabled={isSubmitting}
              className="rounded-full bg-white text-black px-10 py-4 text-[15px] font-semibold shadow-[0_0_30px_rgba(255,255,255,0.3)] transition-all hover:scale-105 active:scale-95 disabled:opacity-50"
            >
              {isSubmitting ? '저장 중...' : '로비로 돌아가기'}
            </button>
          </div>
        )}

        {stage === 'unfinished' && (
          <div className="flex flex-col items-center animate-fade-in-up w-full">
            <div className="mb-8 inline-flex h-20 w-20 items-center justify-center rounded-full bg-[radial-gradient(circle_at_top,rgba(255,255,255,0.1),transparent)] border border-white/10">
              <span className="text-4xl opacity-80">🌱</span>
            </div>
            <h3 className="text-3xl md:text-4xl font-light tracking-tight text-white mb-6">
              괜찮습니다.<br/>집중은 근육이니까요.
            </h3>
            <p className="text-[16px] text-white/60 font-light mb-12 max-w-md leading-relaxed">
              조금씩 단련해나가면 됩니다.<br/>이 흐름을 다음 세션에 이어서 해볼까요?
            </p>
            <button
              type="button"
              onClick={handleEnd}
              disabled={isSubmitting}
              className="rounded-full border border-white/20 bg-white/10 text-white px-10 py-4 text-[15px] font-medium backdrop-blur-md transition-all hover:bg-white/20 active:scale-95 disabled:opacity-50"
            >
              {isSubmitting ? '저장 중...' : '저장하고 로비로 돌아가기'}
            </button>
          </div>
        )}
      </div>
    </div>
  );
};