import { motion } from 'motion/react';
import { Check, AlertCircle, RefreshCw, ShieldX } from 'lucide-react';
import { useAnalysisPipeline, type Phase } from '../hooks/useAnalysisPipeline';

const PHASE_STEPS: { key: Phase; label: string; labelDone: string }[] = [
  { key: 'discovering', label: 'Scanning website & discovering channels...', labelDone: 'Channels discovered' },
  { key: 'collecting', label: 'Collecting channel data & market analysis...', labelDone: 'Data collected' },
  { key: 'generating', label: 'Generating AI marketing report...', labelDone: 'Report generated' },
  { key: 'planning', label: 'Generating AI content strategy...', labelDone: 'Content plan generated' },
  { key: 'complete', label: 'Finalizing report...', labelDone: 'Complete' },
];

export default function AnalysisLoadingPage() {
  const {
    phase,
    error,
    errorCode,
    errorDomain,
    errorDetails,
    url,
    sessionUrl,
    handleRetry,
    handleAbort,
  } = useAnalysisPipeline();

  const phaseIndex = PHASE_STEPS.findIndex((s) => s.key === phase);
  const displayPhaseIndex = phase === 'resuming' ? -1 : phaseIndex;
  const displayUrl = url || sessionUrl;

  return (
    <div className="relative min-h-screen bg-primary-900 flex flex-col items-center justify-center px-6 overflow-hidden">
      <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,_rgba(79,29,161,0.25)_0%,_transparent_70%)]" />
      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[500px] h-[500px] bg-purple-600/20 rounded-full blur-[120px] pointer-events-none" />

      <div className="relative z-10 flex flex-col items-center w-full max-w-lg">
        <motion.h1
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6 }}
          className="text-4xl md:text-5xl font-serif font-bold mb-4"
          style={{
            background: 'linear-gradient(to right, #fff3eb, #e4cfff, #f5f9ff)',
            WebkitBackgroundClip: 'text',
            WebkitTextFillColor: 'transparent',
          }}
        >
          INFINITH
        </motion.h1>

        {displayUrl && (
          <motion.p
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.1 }}
            className="text-purple-300/80 text-sm font-mono mb-12 truncate max-w-full"
          >
            {displayUrl}
          </motion.p>
        )}

        {error ? (
          errorCode === 'CLINIC_NOT_REGISTERED' ? (
            <motion.div
              initial={{ opacity: 0, scale: 0.95 }}
              animate={{ opacity: 1, scale: 1 }}
              className="w-full p-6 rounded-2xl bg-purple-500/10 border border-purple-500/20 text-center"
            >
              <ShieldX className="w-10 h-10 text-purple-400 mx-auto mb-3" />
              <p className="text-white text-lg font-medium mb-2">미등록 병원</p>
              <p className="text-purple-300/80 text-sm mb-1">
                <span className="font-mono text-purple-200">{errorDomain}</span>
              </p>
              <p className="text-purple-300/60 text-sm mb-6">
                현재 분석 대상 병원 목록에 포함되지 않은 도메인입니다.
              </p>
              <button
                onClick={handleAbort}
                className="px-6 py-2 text-sm font-medium text-white bg-purple-600/30 rounded-lg hover:bg-purple-600/50 transition-colors"
              >
                돌아가기
              </button>
            </motion.div>
          ) : (
            <motion.div
              initial={{ opacity: 0, scale: 0.95 }}
              animate={{ opacity: 1, scale: 1 }}
              className="w-full p-6 rounded-2xl bg-red-500/10 border border-red-500/20 text-center"
            >
              <AlertCircle className="w-10 h-10 text-red-400 mx-auto mb-3" />
              <p className="text-red-300 text-sm mb-4">{error}</p>

              {errorDetails && (
                <div className="mb-4 text-left bg-red-500/5 rounded-lg p-3">
                  <p className="text-red-400/60 text-xs font-mono mb-1">Failed channels:</p>
                  {Object.entries(errorDetails).map(([ch, err]) => (
                    <p key={ch} className="text-red-400/80 text-xs font-mono">
                      • {ch}: {err}
                    </p>
                  ))}
                </div>
              )}

              <div className="flex gap-3 justify-center">
                <button
                  onClick={handleRetry}
                  className="px-6 py-2 text-sm font-medium text-white bg-purple-600/30 rounded-lg hover:bg-purple-600/50 transition-colors flex items-center gap-2"
                >
                  <RefreshCw className="w-4 h-4" />
                  Retry
                </button>
                <button
                  onClick={handleAbort}
                  className="px-6 py-2 text-sm font-medium text-white bg-white/10 rounded-lg hover:bg-white/20 transition-colors"
                >
                  Start Over
                </button>
              </div>
            </motion.div>
          )
        ) : phase === 'resuming' ? (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            className="flex flex-col items-center gap-4 mb-14"
          >
            <div className="w-7 h-7 rounded-full border-2 border-purple-400 border-t-transparent animate-spin" />
            <p className="text-purple-200 text-sm">Resuming analysis...</p>
          </motion.div>
        ) : (
          <>
            <div className="w-full space-y-5 mb-14">
              {PHASE_STEPS.map((step, index) => {
                const isCompleted =
                  displayPhaseIndex > index || (step.key === 'complete' && phase === 'complete');
                const isActive = displayPhaseIndex === index && phase !== 'complete';

                return (
                  <motion.div
                    key={step.key}
                    initial={{ opacity: 0, x: -20 }}
                    animate={{ opacity: isActive || isCompleted ? 1 : 0.3, x: 0 }}
                    transition={{ duration: 0.4, delay: index * 0.15 }}
                    className="flex items-center gap-4"
                  >
                    <div className="w-7 h-7 flex-shrink-0 flex items-center justify-center">
                      {isCompleted ? (
                        <motion.div
                          initial={{ scale: 0 }}
                          animate={{ scale: 1 }}
                          transition={{ type: 'spring', stiffness: 300, damping: 20 }}
                          className="w-7 h-7 rounded-full bg-gradient-to-r from-[#4F1DA1] to-[#6C5CE7] flex items-center justify-center"
                        >
                          <Check className="w-4 h-4 text-white" strokeWidth={3} />
                        </motion.div>
                      ) : isActive ? (
                        <div className="w-7 h-7 rounded-full border-2 border-purple-400 border-t-transparent animate-spin" />
                      ) : (
                        <div className="w-7 h-7 rounded-full border-2 border-white/10" />
                      )}
                    </div>
                    <span
                      className={`text-base font-sans transition-colors duration-300 ${
                        isCompleted ? 'text-white' : isActive ? 'text-purple-200' : 'text-white/30'
                      }`}
                    >
                      {isCompleted ? step.labelDone : step.label}
                    </span>
                  </motion.div>
                );
              })}
            </div>

            <div className="w-full h-2 bg-white/10 rounded-full overflow-hidden">
              <motion.div
                initial={{ width: '0%' }}
                animate={{
                  width: `${((displayPhaseIndex + (phase === 'complete' ? 1 : 0.5)) / PHASE_STEPS.length) * 100}%`,
                }}
                transition={{ duration: 0.8, ease: 'easeInOut' }}
                className="h-full bg-gradient-to-r from-[#4F1DA1] to-[#6C5CE7] rounded-full"
              />
            </div>

            <p className="text-white/40 text-xs mt-4">
              AI가 마케팅 데이터를 분석하고 있습니다. 약 1~2분 소요됩니다.
            </p>
          </>
        )}
      </div>
    </div>
  );
}
