'use client';

import { useState } from 'react';
import { cn } from '@/shared/lib/cn';
import { copy } from '@/shared/i18n';

interface FloatingGoalWidgetProps {
  goal: string;
  microStep?: string | null;
  onGoalCompleteRequest?: () => void;
  hasActiveSession?: boolean;
  sessionPhase?: 'focus' | 'break' | null;
}

export const FloatingGoalWidget = ({
  goal,
  microStep,
  onGoalCompleteRequest,
  hasActiveSession,
  sessionPhase,
}: FloatingGoalWidgetProps) => {
  const [isMicroStepCompleted, setIsMicroStepCompleted] = useState(false);
  const normalizedGoal = goal.trim().length > 0 ? goal.trim() : copy.space.timerHud.goalFallback;

  return (
    <div className="pointer-events-none fixed left-0 top-0 z-20 w-full max-w-[800px] h-48 bg-[radial-gradient(ellipse_at_top_left,rgba(0,0,0,0.6)_0%,rgba(0,0,0,0)_60%)] group">
      <div className="flex flex-col items-start gap-4 p-8 md:p-12">
        {/* Main Goal */}
        <div className="pointer-events-auto flex items-center gap-4">
          <h2 className="text-2xl md:text-[1.75rem] font-medium tracking-tight text-white drop-shadow-[0_2px_4px_rgba(0,0,0,0.8)] [text-shadow:0_4px_24px_rgba(0,0,0,0.6)]">
            {normalizedGoal}
          </h2>
          {hasActiveSession && sessionPhase === 'focus' ? (
            <button
              type="button"
              onClick={onGoalCompleteRequest}
              className="opacity-0 group-hover:opacity-100 shrink-0 rounded-full border border-white/20 bg-black/40 backdrop-blur-md px-3.5 py-1.5 text-[11px] font-medium text-white/90 shadow-lg transition-all hover:bg-black/60 hover:text-white focus-visible:opacity-100"
            >
              목표 달성
            </button>
          ) : null}
        </div>

        {/* Micro Step */}
        {microStep && !isMicroStepCompleted && (
          <div className="pointer-events-auto flex items-center gap-3.5 animate-in fade-in slide-in-from-top-2 duration-500 bg-black/10 backdrop-blur-[2px] rounded-full pr-4 py-1 -ml-1 border border-white/5">
            <button
              type="button"
              onClick={() => setIsMicroStepCompleted(true)}
              className="flex h-6 w-6 ml-1 items-center justify-center rounded-full border border-white/40 bg-black/20 shadow-inner transition-all hover:bg-white/20 hover:scale-110 active:scale-95"
              aria-label="첫 단계 완료"
            >
              <span className="sr-only">첫 단계 완료</span>
            </button>
            <span className="text-[15px] font-medium text-white/95 drop-shadow-[0_2px_4px_rgba(0,0,0,0.6)] [text-shadow:0_2px_12px_rgba(0,0,0,0.5)]">
              {microStep}
            </span>
          </div>
        )}
      </div>
    </div>
  );
};