import React, { useState, useRef, useEffect } from 'react';
import confetti from 'canvas-confetti';
import { 
  Brush, 
  Trash2, 
  Download, 
  Sparkles, 
  Heart, 
  Wind, 
  HelpCircle, 
  Shuffle, 
  Check
} from 'lucide-react';
import { KINDNESS_CHALLENGES, DISCUSSION_PROMPTS, COLOR_PALETTE } from '../data/storyData';
import { soundManager } from '../utils/audio';

interface ActivityCornerProps {
  isBedtimeMode: boolean;
}

export const ActivityCorner: React.FC<ActivityCornerProps> = ({ isBedtimeMode }) => {
  // Canvas State
  const canvasRef = useRef<HTMLCanvasElement | null>(null);
  const [isDrawing, setIsDrawing] = useState<boolean>(false);
  const [brushColor, setBrushColor] = useState<string>('#60a5fa');
  const [brushSize, setBrushSize] = useState<number>(18);
  const [activeTab, setActiveTab] = useState<'canvas' | 'kindness' | 'breathing' | 'discussion'>('canvas');

  // Kindness State
  const [challengeIndex, setChallengeIndex] = useState<number>(0);
  const [completedChallenges, setCompletedChallenges] = useState<number[]>([]);

  // Breathing State
  const [breathPhase, setBreathPhase] = useState<'Inhale (Gather Soft Mist)' | 'Hold (Glow with Warmth)' | 'Exhale (Rain Gentle Kindness)'>('Inhale (Gather Soft Mist)');
  const [isBreathingActive, setIsBreathingActive] = useState<boolean>(false);

  // Initialize Canvas background
  useEffect(() => {
    const canvas = canvasRef.current;
    if (canvas) {
      const ctx = canvas.getContext('2d');
      if (ctx) {
        ctx.fillStyle = isBedtimeMode ? '#1e1b4b' : '#f0f9ff';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
      }
    }
  }, [isBedtimeMode, activeTab]);

  // Breathing Cycle loop
  useEffect(() => {
    let timer: ReturnType<typeof setInterval>;
    if (isBreathingActive) {
      const phases: ('Inhale (Gather Soft Mist)' | 'Hold (Glow with Warmth)' | 'Exhale (Rain Gentle Kindness)')[] = [
        'Inhale (Gather Soft Mist)',
        'Hold (Glow with Warmth)',
        'Exhale (Rain Gentle Kindness)'
      ];
      let idx = 0;
      setBreathPhase(phases[0]);

      timer = setInterval(() => {
        idx = (idx + 1) % phases.length;
        setBreathPhase(phases[idx]);
        if (idx === 0) soundManager.playChime();
        if (idx === 2) soundManager.playRain();
      }, 4000);
    }
    return () => clearInterval(timer);
  }, [isBreathingActive]);

  // Canvas drawing handlers
  const startDrawing = (e: React.MouseEvent<HTMLCanvasElement> | React.TouchEvent<HTMLCanvasElement>) => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    if (!ctx) return;

    setIsDrawing(true);
    const rect = canvas.getBoundingClientRect();
    const clientX = 'touches' in e ? e.touches[0].clientX : e.clientX;
    const clientY = 'touches' in e ? e.touches[0].clientY : e.clientY;

    const x = (clientX - rect.left) * (canvas.width / rect.width);
    const y = (clientY - rect.top) * (canvas.height / rect.height);

    ctx.beginPath();
    ctx.moveTo(x, y);
    ctx.lineCap = 'round';
    ctx.lineJoin = 'round';
    ctx.strokeStyle = brushColor;
    ctx.lineWidth = brushSize;
  };

  const draw = (e: React.MouseEvent<HTMLCanvasElement> | React.TouchEvent<HTMLCanvasElement>) => {
    if (!isDrawing) return;
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    if (!ctx) return;

    const rect = canvas.getBoundingClientRect();
    const clientX = 'touches' in e ? e.touches[0].clientX : e.clientX;
    const clientY = 'touches' in e ? e.touches[0].clientY : e.clientY;

    const x = (clientX - rect.left) * (canvas.width / rect.width);
    const y = (clientY - rect.top) * (canvas.height / rect.height);

    ctx.lineTo(x, y);
    ctx.stroke();
  };

  const stopDrawing = () => {
    setIsDrawing(false);
  };

  const clearCanvas = () => {
    soundManager.playFlutter();
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    if (!ctx) return;
    ctx.fillStyle = isBedtimeMode ? '#1e1b4b' : '#f0f9ff';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
  };

  const downloadCanvas = () => {
    soundManager.playPop();
    const canvas = canvasRef.current;
    if (!canvas) return;
    const link = document.createElement('a');
    link.download = 'pip-cloud-creation.png';
    link.href = canvas.toDataURL();
    link.click();
  };

  // Kindness handlers
  const handleShuffleKindness = () => {
    soundManager.playPop();
    setChallengeIndex((prev) => (prev + 1) % KINDNESS_CHALLENGES.length);
  };

  const handleCompleteChallenge = (id: number) => {
    soundManager.playStarCelebration();
    setCompletedChallenges((prev) => [...prev, id]);
    confetti({
      particleCount: 50,
      spread: 60,
      origin: { y: 0.6 }
    });
  };

  const currentChallenge = KINDNESS_CHALLENGES[challengeIndex];
  const isChallengeDone = completedChallenges.includes(currentChallenge.id);

  return (
    <div className={`min-h-[calc(100vh-7rem)] py-8 px-4 sm:px-6 lg:px-8 transition-colors duration-300 ${
      isBedtimeMode 
        ? 'bg-gradient-to-b from-indigo-950 via-slate-900 to-indigo-950 text-indigo-100' 
        : 'bg-[#faf6ee] text-stone-900'
    }`}>
      <div className="max-w-7xl mx-auto space-y-8">
        {/* Header */}
        <div className={`p-6 sm:p-8 rounded-3xl border shadow-sm ${
          isBedtimeMode 
            ? 'bg-slate-900/90 border-indigo-800' 
            : 'bg-white border-amber-200/90'
        }`}>
          <div className="flex items-center gap-2 mb-2">
            <span className="px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider bg-amber-500/10 text-amber-700 dark:text-amber-400 border border-amber-300/40">
              Interactive Activity Studio
            </span>
            <span className="text-xs text-stone-500 dark:text-indigo-300">
              Creativity • Kindness • Mindfulness • Family Discussion
            </span>
          </div>
          <h2 className="text-2xl sm:text-3xl font-heading font-bold text-amber-950 dark:text-white">
            Pip & Caelum's Creative Meadow
          </h2>
          <p className="mt-1 text-sm sm:text-base text-stone-600 dark:text-indigo-200 max-w-3xl leading-relaxed">
            Hands-on interactive experiences designed to extend the storybook's lessons of kindness, self-acceptance, and imaginative problem-solving into real-world family life.
          </p>

          {/* Activity Category Tabs */}
          <div className="mt-6 flex flex-wrap gap-2">
            <button
              onClick={() => { soundManager.playPop(); setActiveTab('canvas'); }}
              className={`flex items-center gap-2 px-4 py-2 rounded-2xl text-xs sm:text-sm font-bold transition-all ${
                activeTab === 'canvas'
                  ? 'bg-amber-500 text-white shadow-md'
                  : 'bg-stone-100 dark:bg-indigo-900 text-stone-700 dark:text-indigo-200 hover:bg-stone-200'
              }`}
            >
              <Brush className="w-4 h-4" />
              <span>Paint Your Cloud</span>
            </button>
            <button
              onClick={() => { soundManager.playPop(); setActiveTab('kindness'); }}
              className={`flex items-center gap-2 px-4 py-2 rounded-2xl text-xs sm:text-sm font-bold transition-all ${
                activeTab === 'kindness'
                  ? 'bg-rose-500 text-white shadow-md'
                  : 'bg-stone-100 dark:bg-indigo-900 text-stone-700 dark:text-indigo-200 hover:bg-stone-200'
              }`}
            >
              <Heart className="w-4 h-4" />
              <span>Kindness Challenge</span>
            </button>
            <button
              onClick={() => { soundManager.playPop(); setActiveTab('breathing'); }}
              className={`flex items-center gap-2 px-4 py-2 rounded-2xl text-xs sm:text-sm font-bold transition-all ${
                activeTab === 'breathing'
                  ? 'bg-sky-500 text-white shadow-md'
                  : 'bg-stone-100 dark:bg-indigo-900 text-stone-700 dark:text-indigo-200 hover:bg-stone-200'
              }`}
            >
              <Wind className="w-4 h-4" />
              <span>Bedtime Cloud Breathing</span>
            </button>
            <button
              onClick={() => { soundManager.playPop(); setActiveTab('discussion'); }}
              className={`flex items-center gap-2 px-4 py-2 rounded-2xl text-xs sm:text-sm font-bold transition-all ${
                activeTab === 'discussion'
                  ? 'bg-purple-500 text-white shadow-md'
                  : 'bg-stone-100 dark:bg-indigo-900 text-stone-700 dark:text-indigo-200 hover:bg-stone-200'
              }`}
            >
              <HelpCircle className="w-4 h-4" />
              <span>Family Discussion Guide</span>
            </button>
          </div>
        </div>

        {/* TAB 1: Paint Your Cloud Canvas */}
        {activeTab === 'canvas' && (
          <div className={`p-6 sm:p-8 rounded-3xl border shadow-xl ${
            isBedtimeMode ? 'bg-slate-900 border-indigo-800' : 'bg-white border-amber-200/90'
          }`}>
            <div className="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-4">
              <div>
                <h3 className="text-xl font-heading font-bold text-stone-900 dark:text-white flex items-center gap-2">
                  <span>🎨</span> Paint Your Whispering Cloud Creature
                </h3>
                <p className="text-xs text-stone-500 dark:text-indigo-300">
                  Use Pip's berry pigments to swirl fluffy clouds, raindrops, and flowers!
                </p>
              </div>

              {/* Canvas Controls */}
              <div className="flex items-center gap-2 flex-wrap">
                {/* Palette picker */}
                <div className="flex items-center gap-1.5 bg-stone-100 dark:bg-indigo-950 p-1.5 rounded-2xl border border-stone-200 dark:border-indigo-800">
                  {COLOR_PALETTE.map((c) => (
                    <button
                      key={c.hex}
                      onClick={() => { soundManager.playPop(); setBrushColor(c.hex); }}
                      style={{ backgroundColor: c.hex }}
                      className={`w-7 h-7 rounded-xl transition-transform ${
                        brushColor === c.hex ? 'scale-125 ring-2 ring-amber-500 shadow-md' : 'hover:scale-110'
                      }`}
                      title={c.name}
                    />
                  ))}
                  {/* White for fluffy cloud */}
                  <button
                    onClick={() => { soundManager.playPop(); setBrushColor('#ffffff'); }}
                    className={`w-7 h-7 rounded-xl bg-white border border-stone-300 transition-transform ${
                      brushColor === '#ffffff' ? 'scale-125 ring-2 ring-amber-500 shadow-md' : 'hover:scale-110'
                    }`}
                    title="Fluffy White Cloud"
                  />
                </div>

                {/* Brush Size */}
                <div className="flex items-center gap-1 bg-stone-100 dark:bg-indigo-950 px-3 py-1.5 rounded-2xl border border-stone-200 dark:border-indigo-800 text-xs font-semibold">
                  <span>Size:</span>
                  <input
                    type="range"
                    min="6"
                    max="45"
                    value={brushSize}
                    onChange={(e) => setBrushSize(parseInt(e.target.value))}
                    className="w-20 accent-amber-500"
                  />
                </div>

                {/* Clear */}
                <button
                  onClick={clearCanvas}
                  className="p-2 rounded-xl border border-stone-200 dark:border-indigo-800 hover:bg-rose-50 text-stone-600 dark:text-indigo-300 hover:text-rose-600 transition-colors"
                  title="Clear Canvas"
                >
                  <Trash2 className="w-4 h-4" />
                </button>

                {/* Download */}
                <button
                  onClick={downloadCanvas}
                  className="flex items-center gap-1 px-3 py-1.5 rounded-xl bg-amber-500 hover:bg-amber-600 text-white font-bold text-xs shadow-sm transition-all"
                  title="Save Picture"
                >
                  <Download className="w-3.5 h-3.5" />
                  <span>Save</span>
                </button>
              </div>
            </div>

            {/* Drawing Canvas Board */}
            <div className="relative rounded-2xl overflow-hidden border-2 border-stone-300 dark:border-indigo-800 shadow-inner bg-sky-50 dark:bg-indigo-950 touch-none">
              <canvas
                ref={canvasRef}
                width={800}
                height={480}
                onMouseDown={startDrawing}
                onMouseMove={draw}
                onMouseUp={stopDrawing}
                onMouseLeave={stopDrawing}
                onTouchStart={startDrawing}
                onTouchMove={draw}
                onTouchEnd={stopDrawing}
                className="w-full h-[360px] sm:h-[480px] cursor-crosshair block"
              />
            </div>
            <p className="mt-2 text-center text-xs text-stone-400 dark:text-indigo-400 italic">
              Tip: Draw a cloud body, then paint little blushing pink cheeks and golden rainbow drops!
            </p>
          </div>
        )}

        {/* TAB 2: Kindness Challenge */}
        {activeTab === 'kindness' && (
          <div className={`p-6 sm:p-8 rounded-3xl border shadow-xl ${
            isBedtimeMode ? 'bg-slate-900 border-indigo-800' : 'bg-white border-amber-200/90'
          }`}>
            <div className="max-w-2xl mx-auto text-center space-y-6">
              <div className="w-20 h-20 mx-auto rounded-3xl bg-rose-100 dark:bg-rose-950/60 border border-rose-300 dark:border-rose-700 flex items-center justify-center text-4xl shadow-md">
                {currentChallenge.icon}
              </div>

              <div>
                <span className="text-xs font-bold uppercase tracking-wider text-rose-600 dark:text-rose-400 px-3 py-1 rounded-full bg-rose-50 dark:bg-rose-950 border border-rose-200 dark:border-rose-800">
                  Daily Mission • {currentChallenge.difficulty}
                </span>
                <h3 className="text-2xl sm:text-3xl font-heading font-bold text-stone-900 dark:text-white mt-3">
                  {currentChallenge.title}
                </h3>
                <p className="mt-3 text-base sm:text-lg font-reading leading-relaxed text-stone-700 dark:text-stone-200">
                  "{currentChallenge.description}"
                </p>
              </div>

              <div className="flex items-center justify-center gap-3 pt-2">
                <button
                  onClick={handleShuffleKindness}
                  className="flex items-center gap-2 px-4 py-2.5 rounded-2xl bg-stone-100 hover:bg-stone-200 dark:bg-indigo-900 dark:hover:bg-indigo-800 text-stone-800 dark:text-indigo-100 font-heading font-bold text-sm transition-all"
                >
                  <Shuffle className="w-4 h-4" />
                  <span>Try Another Challenge</span>
                </button>

                <button
                  onClick={() => handleCompleteChallenge(currentChallenge.id)}
                  disabled={isChallengeDone}
                  className={`flex items-center gap-2 px-6 py-2.5 rounded-2xl font-heading font-bold text-sm shadow-md transition-all ${
                    isChallengeDone
                      ? 'bg-emerald-600 text-white cursor-default'
                      : 'bg-rose-500 hover:bg-rose-600 text-white'
                  }`}
                >
                  {isChallengeDone ? (
                    <>
                      <Check className="w-4 h-4" />
                      <span>Completed! ⭐</span>
                    </>
                  ) : (
                    <>
                      <Sparkles className="w-4 h-4" />
                      <span>I Did This Today!</span>
                    </>
                  )}
                </button>
              </div>

              <div className="text-xs text-stone-500 dark:text-indigo-300">
                You have completed {completedChallenges.length} of {KINDNESS_CHALLENGES.length} kindness challenges!
              </div>
            </div>
          </div>
        )}

        {/* TAB 3: Bedtime Cloud Breathing */}
        {activeTab === 'breathing' && (
          <div className={`p-6 sm:p-8 rounded-3xl border shadow-xl ${
            isBedtimeMode ? 'bg-slate-900 border-indigo-800' : 'bg-white border-amber-200/90'
          }`}>
            <div className="max-w-xl mx-auto text-center space-y-6">
              <div>
                <span className="text-xs font-bold uppercase tracking-wider text-sky-600 dark:text-sky-400 px-3 py-1 rounded-full bg-sky-50 dark:bg-sky-950 border border-sky-200 dark:border-sky-800">
                  Mindfulness & Bedtime Regulation
                </span>
                <h3 className="text-2xl sm:text-3xl font-heading font-bold text-stone-900 dark:text-white mt-2">
                  Caelum's Gentle Cloud Breath
                </h3>
                <p className="text-sm text-stone-600 dark:text-indigo-200 mt-1">
                  Help little bodies settle for sleep or calm down after high-energy emotions.
                </p>
              </div>

              {/* Rhythmic Expanding/Contracting Breathing Ring */}
              <div className="relative py-12 flex items-center justify-center">
                <div className={`w-56 h-56 sm:w-64 sm:h-64 rounded-full flex items-center justify-center transition-all duration-1000 ${
                  isBreathingActive 
                    ? breathPhase.startsWith('Inhale')
                      ? 'scale-125 bg-gradient-to-tr from-sky-400 via-rose-300 to-amber-200 shadow-2xl shadow-sky-400/40'
                      : breathPhase.startsWith('Hold')
                        ? 'scale-125 bg-amber-200/90 ring-8 ring-amber-300/50 shadow-2xl shadow-amber-300/40'
                        : 'scale-90 bg-gradient-to-br from-indigo-400 via-purple-300 to-sky-300 shadow-lg'
                    : 'scale-100 bg-sky-100 dark:bg-indigo-900'
                }`}>
                  <div className="w-40 h-40 rounded-full bg-white/90 dark:bg-slate-900/90 shadow-inner flex flex-col items-center justify-center p-4 text-center">
                    <span className="text-4xl mb-1">☁️</span>
                    <span className="font-heading font-bold text-xs sm:text-sm text-stone-800 dark:text-white leading-tight">
                      {isBreathingActive ? breathPhase : 'Ready to Breathe'}
                    </span>
                  </div>
                </div>
              </div>

              <div>
                <button
                  onClick={() => {
                    soundManager.playPop();
                    setIsBreathingActive(!isBreathingActive);
                  }}
                  className={`px-6 py-3 rounded-2xl font-heading font-bold text-sm shadow-md transition-all ${
                    isBreathingActive
                      ? 'bg-stone-700 text-white hover:bg-stone-800'
                      : 'bg-sky-500 hover:bg-sky-600 text-white'
                  }`}
                >
                  {isBreathingActive ? 'Pause Exercise' : 'Start 4-4-4 Cloud Breathing'}
                </button>
              </div>

              <p className="text-xs text-stone-500 dark:text-indigo-300">
                Follow the cloud: Breathe in peace, hold warm love, breathe out gentle rain.
              </p>
            </div>
          </div>
        )}

        {/* TAB 4: Family & Educator Discussion Prompts */}
        {activeTab === 'discussion' && (
          <div className={`p-6 sm:p-8 rounded-3xl border shadow-xl ${
            isBedtimeMode ? 'bg-slate-900 border-indigo-800' : 'bg-white border-amber-200/90'
          }`}>
            <div className="flex items-center gap-2 mb-6">
              <HelpCircle className="w-5 h-5 text-purple-600 dark:text-purple-400" />
              <div>
                <h3 className="text-xl font-heading font-bold text-stone-900 dark:text-white">
                  Parent, Caregiver & Teacher Circle-Time Guide
                </h3>
                <p className="text-xs text-stone-500 dark:text-indigo-300">
                  Open-ended questions to deepen comprehension and emotional connection
                </p>
              </div>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              {DISCUSSION_PROMPTS.map((prompt, i) => (
                <div
                  key={i}
                  className="p-5 rounded-2xl border border-stone-200 dark:border-indigo-800 bg-stone-50/70 dark:bg-indigo-950/40 space-y-3"
                >
                  <div className="flex items-center justify-between">
                    <span className="text-xs font-bold uppercase tracking-wider text-purple-700 dark:text-purple-300 px-2.5 py-0.5 rounded-full bg-purple-100 dark:bg-purple-950 border border-purple-200 dark:border-purple-800">
                      {prompt.category}
                    </span>
                    <span className="text-xs font-bold text-stone-400">
                      Q{i + 1}
                    </span>
                  </div>

                  <h4 className="font-heading font-bold text-base text-stone-900 dark:text-white">
                    "{prompt.question}"
                  </h4>

                  <div className="p-3 rounded-xl bg-white/80 dark:bg-slate-900/60 border border-stone-200/70 dark:border-indigo-800/80 text-xs text-stone-700 dark:text-stone-300">
                    <strong className="text-purple-800 dark:text-purple-300 block mb-0.5">
                      Caregiver Guidance:
                    </strong>
                    {prompt.guide}
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}
      </div>
    </div>
  );
};