import React from 'react';
import { 
  X, 
  Printer, 
  Award, 
  Heart, 
  BookOpen, 
  Palette, 
  Smile
} from 'lucide-react';
import { BOOK_METADATA, CHARACTERS, COLOR_PALETTE } from '../data/storyData';
import { soundManager } from '../utils/audio';

interface PitchDeckModalProps {
  isOpen: boolean;
  onClose: () => void;
}

export const PitchDeckModal: React.FC<PitchDeckModalProps> = ({ isOpen, onClose }) => {
  if (!isOpen) return null;

  const handlePrint = () => {
    soundManager.playPop();
    window.print();
  };

  return (
    <div className="fixed inset-0 z-50 overflow-y-auto bg-black/70 backdrop-blur-sm flex items-center justify-center p-4 sm:p-6">
      <div className="relative w-full max-w-4xl bg-white text-stone-900 rounded-3xl shadow-2xl overflow-hidden border border-amber-200 print:border-none print:shadow-none print:max-w-full">
        {/* Modal Top Bar */}
        <div className="sticky top-0 z-10 bg-[#fffdfa] border-b border-amber-200/80 px-6 py-4 flex items-center justify-between print:hidden">
          <div className="flex items-center gap-2">
            <span className="p-1.5 rounded-xl bg-amber-500 text-white text-lg">🦔</span>
            <div>
              <h3 className="font-heading font-bold text-base text-stone-900">
                Children's Picture Book Concept & Editorial Pitch Deck
              </h3>
              <p className="text-xs text-stone-500">
                Ready for literary agent submission, publisher pitch, or team review
              </p>
            </div>
          </div>

          <div className="flex items-center gap-2">
            <button
              onClick={handlePrint}
              className="flex items-center gap-1.5 px-3 py-1.5 rounded-xl bg-amber-100 hover:bg-amber-200 text-amber-900 font-heading font-bold text-xs transition-colors"
            >
              <Printer className="w-3.5 h-3.5" />
              <span>Print / Save PDF</span>
            </button>
            <button
              onClick={() => { soundManager.playPop(); onClose(); }}
              className="p-1.5 rounded-xl hover:bg-stone-100 text-stone-500 transition-colors"
            >
              <X className="w-5 h-5" />
            </button>
          </div>
        </div>

        {/* Printable Pitch Content */}
        <div className="p-6 sm:p-10 space-y-8 bg-[#fffdfa] print:p-0">
          {/* Header Banner */}
          <div className="text-center space-y-3 border-b border-amber-200/70 pb-6">
            <span className="inline-block text-xs font-bold uppercase tracking-widest px-3 py-1 rounded-full bg-amber-100 text-amber-800 border border-amber-300">
              Children's Picture Book Concept Pitch
            </span>
            <h1 className="text-3xl sm:text-4xl font-heading font-bold text-amber-950">
              {BOOK_METADATA.title}
            </h1>
            <p className="text-lg font-heading text-amber-700 italic">
              "{BOOK_METADATA.subtitle}"
            </p>
            <p className="max-w-2xl mx-auto text-sm sm:text-base font-reading leading-relaxed text-stone-700">
              {BOOK_METADATA.logline}
            </p>

            <div className="flex flex-wrap justify-center gap-3 pt-2 text-xs font-semibold text-stone-600">
              <span className="px-3 py-1 rounded-lg bg-stone-100 border border-stone-200">
                🎯 Target Age: {BOOK_METADATA.targetAge}
              </span>
              <span className="px-3 py-1 rounded-lg bg-stone-100 border border-stone-200">
                📄 Format: {BOOK_METADATA.pageCount}
              </span>
              <span className="px-3 py-1 rounded-lg bg-stone-100 border border-stone-200">
                📝 Word Count: ~{BOOK_METADATA.wordCountPictureBook}
              </span>
            </div>
          </div>

          {/* Core Themes */}
          <div className="space-y-3">
            <h3 className="font-heading font-bold text-lg text-stone-900 flex items-center gap-2">
              <Heart className="w-5 h-5 text-rose-500" />
              Core Thematic Pillars
            </h3>
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
              {BOOK_METADATA.primaryThemes.map((th, i) => (
                <div key={i} className="p-3.5 rounded-2xl bg-amber-50/60 border border-amber-200/80">
                  <h4 className="font-heading font-bold text-sm text-amber-900">
                    {th.title}
                  </h4>
                  <p className="text-xs font-reading text-stone-600 mt-0.5">
                    {th.desc}
                  </p>
                </div>
              ))}
            </div>
          </div>

          {/* Storyboard Synopsis: Beginning, Middle, End */}
          <div className="space-y-4">
            <h3 className="font-heading font-bold text-lg text-stone-900 flex items-center gap-2">
              <BookOpen className="w-5 h-5 text-amber-600" />
              Storyboard Narrative Arc (3-Act Structure)
            </h3>

            <div className="space-y-3">
              <div className="p-4 rounded-2xl bg-stone-50 border border-stone-200">
                <span className="text-xs font-bold uppercase text-amber-700 tracking-wider">
                  Act I: The Beginning (Scenes 1–2)
                </span>
                <h4 className="font-heading font-bold text-sm text-stone-900 mt-1">
                  The Hollow Oak Workshop & Meeting Caelum on Clover Hill
                </h4>
                <p className="text-xs font-reading text-stone-600 mt-1 leading-relaxed">
                  Pip, a gentle hedgehog who captures nature's pigments in acorn cups, follows a curious whisper of mist to Clover Hill. He meets Caelum, an adorable baby cloud drooping close to the clover, ashamed because he can only make quiet murmurs instead of grand storm thunder. Pip validates Caelum's feelings and promises they will find his purpose together.
                </p>
              </div>

              <div className="p-4 rounded-2xl bg-stone-50 border border-stone-200">
                <span className="text-xs font-bold uppercase text-sky-700 tracking-wider">
                  Act II: The Middle & Climax (Scenes 3–4)
                </span>
                <h4 className="font-heading font-bold text-sm text-stone-900 mt-1">
                  The Meadow Art Trials & The Rainbow Blossom Shower
                </h4>
                <p className="text-xs font-reading text-stone-600 mt-1 leading-relaxed">
                  Joined by wise old Barnaby Bear and spirited Squeak the bluebird, Pip tries creative thinking. When force and noise don't work, Pip paints colorful berry pigments directly onto the cloud's vapor. Caelum giggles, the gray knot of worry dissolves, and he releases not a scary downpour, but a warm, shimmering rainbow shower that revives the thirsty wildflowers.
                </p>
              </div>

              <div className="p-4 rounded-2xl bg-stone-50 border border-stone-200">
                <span className="text-xs font-bold uppercase text-purple-700 tracking-wider">
                  Act III: The End & Resolution (Scene 5)
                </span>
                <h4 className="font-heading font-bold text-sm text-stone-900 mt-1">
                  Twilight Constellations & Sweet Dreams
                </h4>
                <p className="text-xs font-reading text-stone-600 mt-1 leading-relaxed">
                  Night descends in velvet indigo. Pip drinks honey chamomile tea on his treehouse porch while Caelum curves gently around the crescent moon as a silver scarf of mist. Safe, accepted, and deeply loved, both friends settle into peaceful sleep, knowing true kindness doesn't need to roar.
                </p>
              </div>
            </div>
          </div>

          {/* Character Ensemble */}
          <div className="space-y-3">
            <h3 className="font-heading font-bold text-lg text-stone-900 flex items-center gap-2">
              <Smile className="w-5 h-5 text-amber-600" />
              Core Character Cast
            </h3>
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 text-xs">
              {CHARACTERS.map((char) => (
                <div key={char.name} className="p-3.5 rounded-2xl bg-stone-50 border border-stone-200 space-y-1">
                  <div className="flex items-center gap-2">
                    <span className="text-xl">{char.avatarEmoji}</span>
                    <strong className="font-heading font-bold text-stone-900 text-sm">{char.name}</strong>
                    <span className="text-stone-500">({char.role})</span>
                  </div>
                  <p className="text-stone-600 leading-snug">
                    {char.tagline}
                  </p>
                </div>
              ))}
            </div>
          </div>

          {/* Art Direction & Color Palette Summary */}
          <div className="space-y-3">
            <h3 className="font-heading font-bold text-lg text-stone-900 flex items-center gap-2">
              <Palette className="w-5 h-5 text-rose-500" />
              Visual Art Direction & Color Palette
            </h3>
            <p className="text-xs font-reading text-stone-600">
              Medium: Soft digital gouache and watercolor texture with visible paper tooth grain, friendly rounded contours, and glowing golden-hour lighting keys.
            </p>
            <div className="flex flex-wrap gap-2 pt-1">
              {COLOR_PALETTE.map((c) => (
                <div key={c.hex} className="flex items-center gap-1.5 px-2.5 py-1 rounded-xl bg-stone-100 border border-stone-200 text-xs">
                  <span style={{ backgroundColor: c.hex }} className="w-3.5 h-3.5 rounded-full border border-stone-300" />
                  <span className="font-medium text-stone-800">{c.name}</span>
                </div>
              ))}
            </div>
          </div>

          {/* Publishing Recommendation */}
          <div className="p-5 rounded-2xl bg-amber-500/10 border-2 border-amber-400 space-y-2">
            <h4 className="font-heading font-bold text-base text-amber-950 flex items-center gap-2">
              <Award className="w-5 h-5 text-amber-600" />
              Publisher Recommendation & Commercial Strategy
            </h4>
            <p className="text-xs sm:text-sm font-reading text-stone-800 leading-relaxed">
              Recommended as a <strong>32-page premium hardcover picture book (10x10 inches)</strong> with spot-UV varnish on rain droplets, paired with a companion <strong>Interactive Audio App edition</strong> for accessible tablet read-alouds. High franchise potential for early reader spin-offs (<em>The Bramblewood Chronicles</em>) and sensory board book editions for toddlers.
            </p>
          </div>

          {/* Footer sign-off */}
          <div className="text-center pt-4 border-t border-amber-200/60 text-xs text-stone-500">
            Concept created with thoughtful children's literature pacing, Social-Emotional Learning integration, and warm humanized storytelling.
          </div>
        </div>
      </div>
    </div>
  );
};