import React, { useState, useEffect, useRef } from 'react';
import { Download, Wind, Sun, PenTool, Plus, Share2, Sparkles, Sprout, Image as ImageIcon } from 'lucide-react';
import { motion, AnimatePresence } from 'framer-motion';

// --- Constants & Data ---

const FLOWERS = [
  {
    id: 'sunflower',
    name: 'Sunflower',
    mood: 'Energetic',
    meaning: 'Adoration, Loyalty, and Longevity',
    quote: 'Keep your face to the sunshine and you cannot see the shadow.',
    color: '#FBBF24',
    bg: 'bg-yellow-50',
    icon: '🌻',
    illustration: 'https://images.unsplash.com/photo-1597848212624-a19eb35e2651?auto=format&fit=crop&q=80&w=400'
  },
  {
    id: 'blue-salvia',
    name: 'Blue Salvia',
    mood: 'Peaceful',
    meaning: 'I am thinking of you; Wisdom and Purity',
    quote: 'Peace is the beauty of a soul at rest with itself.',
    color: '#6366F1',
    bg: 'bg-indigo-50',
    icon: '🪻',
    illustration: 'https://images.unsplash.com/photo-1508610048659-a06b669e3321?auto=format&fit=crop&q=80&w=400'
  },
  {
    id: 'red-camellia',
    name: 'Red Camellia',
    mood: 'Resilient',
    meaning: 'Unpretentious Excellence; Deep Passion',
    quote: 'The flower that blooms in adversity is the most rare and beautiful of all.',
    color: '#EF4444',
    bg: 'bg-red-50',
    icon: '🌺',
    illustration: 'https://images.unsplash.com/photo-1518709268805-4e9042af9f23?auto=format&fit=crop&q=80&w=400'
  },
  {
    id: 'white-lily',
    name: 'White Lily',
    mood: 'Reflective',
    meaning: 'Purity, Rebirth, and Virtue',
    quote: 'In the silence of the garden, the heart finds its own song.',
    color: '#94a3b8',
    bg: 'bg-slate-50',
    icon: '🪷',
    illustration: 'https://images.unsplash.com/photo-1508182314998-3bd49473002f?auto=format&fit=crop&q=80&w=400'
  },
  {
    id: 'mimosa',
    name: 'Mimosa',
    mood: 'Playful',
    meaning: 'Sensitivity, Secret Love, and Joy',
    quote: 'Happiness is a butterfly which, when pursued, is always beyond our grasp.',
    color: '#fbbf24',
    bg: 'bg-orange-50',
    icon: '🌼',
    illustration: 'https://images.unsplash.com/photo-1554631221-f9603e6808be?auto=format&fit=crop&q=80&w=400'
  }
];

const SEEDS = [
  "Find a patch of sunlight and stand in it for 60 seconds.",
  "Describe the texture of a nearby leaf in your mind.",
  "Take three deep breaths, smelling the imaginary scent of rain.",
  "Close your eyes and listen for the furthest sound you can hear.",
  "Stretch your arms up like branches reaching for the sky."
];

// --- Sub-Components ---

const Petal = ({ color, rotation }) => (
  <motion.div
    initial={{ scale: 0, opacity: 0 }}
    animate={{ scale: 1, opacity: 0.8 }}
    style={{
      position: 'absolute',
      width: '24px',
      height: '32px',
      backgroundColor: color,
      borderRadius: '50% 50% 50% 50% / 80% 80% 20% 20%',
      transform: `rotate(${rotation}deg) translateY(-18px)`,
      transformOrigin: 'bottom center',
      border: '1px solid rgba(255,255,255,0.4)',
    }}
  />
);

const FlowerStalk = ({ log }) => {
  return (
    <div 
      className="absolute bottom-0 group cursor-help transition-transform hover:scale-110"
      style={{ left: `${log.x}%`, zIndex: Math.floor(log.y) }}
    >
      {/* The Stem */}
      <div 
        className="w-1 bg-[#4a5d4e] rounded-full relative" 
        style={{ height: `${log.height}px` }}
      >
        {/* Leaves on stem */}
        <div className="absolute top-1/2 -left-2 w-3 h-2 bg-[#3A5A40] rounded-full rotate-[-30deg]" />
        <div className="absolute top-1/3 -right-2 w-3 h-2 bg-[#3A5A40] rounded-full rotate-[30deg]" />
        
        {/* The Flower Head */}
        <div className="absolute -top-1 left-1/2 -translate-x-1/2 flex items-center justify-center">
          {/* Petals only appear if entry exists */}
          {[0, 60, 120, 180, 240, 300].map((deg) => (
            <Petal key={deg} color={log.color} rotation={deg} />
          ))}
          {/* Flower Center */}
          <div className="w-3 h-3 bg-[#5c4033] rounded-full z-10 border border-[#3A5A40]/20" />
        </div>
      </div>

      {/* Hover Info Tag */}
      <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-4 bg-white/95 backdrop-blur-sm px-3 py-2 rounded-xl shadow-xl opacity-0 group-hover:opacity-100 transition-all whitespace-nowrap z-50 pointer-events-none border border-stone-100 scale-90 group-hover:scale-100">
        <p className="text-[10px] font-bold text-[#3A5A40] uppercase tracking-wider">{log.place}</p>
        <p className="text-[10px] italic text-stone-500">{log.activity}</p>
      </div>
    </div>
  );
};

const PaperTexture = () => (
  <div className="fixed inset-0 pointer-events-none opacity-40 mix-blend-multiply z-50" 
       style={{ backgroundImage: `url('https://www.transparenttextures.com/patterns/cream-paper.png')` }}>
  </div>
);

const App = () => {
  const [selectedMood, setSelectedMood] = useState(null);
  const [isFlipped, setIsFlipped] = useState(false);
  const [happinessLog, setHappinessLog] = useState([]);
  const [newJoy, setNewJoy] = useState({ place: '', activity: '' });
  const [isExporting, setIsExporting] = useState(false);
  const cardRef = useRef(null);
  const herbariumRef = useRef(null);

  useEffect(() => {
    const script = document.createElement('script');
    script.src = "https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js";
    script.async = true;
    document.body.appendChild(script);
    return () => { document.body.removeChild(script); };
  }, []);

  const handleDownloadCard = async () => {
    if (cardRef.current && window.html2canvas) {
      setIsExporting(true);
      const canvas = await window.html2canvas(cardRef.current, { scale: 3, useCORS: true, backgroundColor: '#FDFBF7' });
      const link = document.createElement('a');
      link.href = canvas.toDataURL("image/jpeg", 0.9);
      link.download = `BloomCard-${selectedMood.name}.jpg`;
      link.click();
      setIsExporting(false);
    }
  };

  const handleDownloadHerbarium = async () => {
    if (herbariumRef.current && window.html2canvas) {
      const canvas = await window.html2canvas(herbariumRef.current, { scale: 2, backgroundColor: '#FDFBF7' });
      const link = document.createElement('a');
      link.href = canvas.toDataURL("image/jpeg", 0.9);
      link.download = `MyGardenOfJoy.jpg`;
      link.click();
    }
  };

  const addHappiness = (e) => {
    e.preventDefault();
    if (!newJoy.place || !newJoy.activity) return;
    
    setHappinessLog([...happinessLog, { 
      ...newJoy, 
      id: Date.now(), 
      color: FLOWERS[Math.floor(Math.random() * FLOWERS.length)].color,
      x: Math.random() * 85 + 5, // Random horizontal position
      y: Math.random() * 30, // Random vertical overlap
      height: 60 + Math.random() * 100 // Random stalk height
    }]);
    setNewJoy({ place: '', activity: '' });
  };

  return (
    <div className="min-h-screen bg-[#FDFBF7] text-[#4A3F35] font-serif selection:bg-amber-100 overflow-x-hidden pb-20 relative">
      <PaperTexture />

      <header className="pt-16 pb-8 px-6 text-center">
        <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="inline-block mb-4">
          <Sparkles className="text-amber-400 w-8 h-8 mx-auto" />
        </motion.div>
        <h1 className="text-5xl md:text-6xl font-light italic text-[#3A5A40]">The Daily Bloom</h1>
        <p className="mt-4 text-stone-500 font-sans tracking-widest uppercase text-[10px]">Digital Botanical Scrapbook</p>
      </header>

      <main className="max-w-4xl mx-auto px-6 space-y-20 relative z-10">
        
        {/* Mood Selection */}
        <section className="text-center space-y-10">
          <h2 className="text-2xl italic text-stone-600">What is blooming in your heart today?</h2>
          <div className="flex flex-wrap justify-center gap-6">
            {FLOWERS.map((flower) => (
              <motion.button
                key={flower.id}
                whileHover={{ scale: 1.1, rotate: 2 }}
                onClick={() => { setSelectedMood(flower); setIsFlipped(false); }}
                className={`flex flex-col items-center p-5 rounded-3xl transition-all group
                  ${selectedMood?.id === flower.id ? 'bg-white shadow-md' : 'bg-transparent'}`}
              >
                <span className="text-4xl mb-2">{flower.icon}</span>
                <span className="text-[9px] font-sans uppercase tracking-[0.2em] text-stone-400 group-hover:text-[#3A5A40] transition-colors">{flower.mood}</span>
              </motion.button>
            ))}
          </div>
        </section>

        {/* Flashcard */}
        <AnimatePresence mode="wait">
          {selectedMood && (
            <motion.section initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} className="flex flex-col items-center">
              <div 
                ref={cardRef}
                onClick={() => setIsFlipped(!isFlipped)}
                className={`relative w-full max-w-sm aspect-[3/4.2] cursor-pointer transition-transform duration-1000 transform-style-3d ${isFlipped ? 'rotate-y-180' : ''}`}
              >
                <div className="absolute inset-0 bg-white shadow-2xl rounded-[2rem] p-8 border-[12px] border-[#FDFBF7] backface-hidden flex flex-col items-center">
                  <div className="w-full h-3/4 rounded-2xl overflow-hidden bg-[#faf9f6]">
                    <img src={selectedMood.illustration} crossOrigin="anonymous" className="w-full h-full object-cover mix-blend-multiply opacity-80 contrast-125" />
                  </div>
                  <h3 className="text-4xl italic text-[#3A5A40] mt-6">{selectedMood.name}</h3>
                </div>
                <div 
                  className="absolute inset-0 bg-[#FDFBF7] shadow-2xl rounded-[2rem] p-10 border-[12px] border-white backface-hidden flex flex-col items-center justify-center text-center space-y-6"
                  style={{ transform: 'rotateY(180deg)', backfaceVisibility: 'hidden' }}
                >
                  <span className="text-stone-400 uppercase text-[9px] tracking-[0.3em] font-sans font-bold">The Language of Flowers</span>
                  <h3 className="text-4xl text-[#3A5A40] italic">{selectedMood.name}</h3>
                  <p className="text-2xl italic text-stone-700">"{selectedMood.meaning}"</p>
                  <p className="text-stone-500 font-sans text-xs max-w-[200px]">{selectedMood.quote}</p>
                </div>
              </div>
              <div className="mt-10 flex gap-4">
                <button onClick={handleDownloadCard} className="flex items-center gap-2 px-6 py-3 bg-[#3A5A40] text-white rounded-full text-sm font-sans tracking-wide">
                  <Download size={16} /> Collect Bloom
                </button>
              </div>
            </motion.section>
          )}
        </AnimatePresence>

        {/* Herbarium / Happiness Garden */}
        <section className="space-y-12">
          <div className="text-center space-y-3">
            <h3 className="text-3xl italic text-[#3A5A40]">The Happiness Meadow</h3>
            <p className="text-xs font-sans text-stone-400 tracking-widest uppercase italic">Every joy plants a new flower</p>
          </div>

          <form onSubmit={addHappiness} className="max-w-xl mx-auto flex flex-col md:flex-row gap-4 items-end bg-white p-6 rounded-[2rem] shadow-sm border border-stone-50">
            <div className="flex-1 w-full">
              <label className="text-[9px] uppercase font-sans tracking-[0.2em] text-stone-400 block mb-1">A Place of Joy</label>
              <input type="text" placeholder="Under the old willow..." className="w-full bg-transparent border-b border-stone-100 py-2 focus:outline-none focus:border-[#3A5A40] italic" value={newJoy.place} onChange={e => setNewJoy({...newJoy, place: e.target.value})} />
            </div>
            <div className="flex-1 w-full">
              <label className="text-[9px] uppercase font-sans tracking-[0.2em] text-stone-400 block mb-1">What happened?</label>
              <input type="text" placeholder="Watching butterflies" className="w-full bg-transparent border-b border-stone-100 py-2 focus:outline-none focus:border-[#3A5A40] italic" value={newJoy.activity} onChange={e => setNewJoy({...newJoy, activity: e.target.value})} />
            </div>
            <button type="submit" className="w-10 h-10 bg-[#3A5A40] text-white rounded-full flex items-center justify-center shadow-lg hover:bg-[#344e41] transition-colors"><Plus size={20} /></button>
          </form>

          {/* Planted Garden Canvas */}
          <div className="relative group">
            <div 
              ref={herbariumRef}
              className="relative w-full aspect-square md:aspect-[21/9] bg-white border border-stone-100 rounded-[3rem] shadow-inner overflow-hidden flex flex-col items-center justify-end bg-[#FDFBF7] pb-4"
            >
              {/* Background Art */}
              <div className="absolute inset-0 opacity-[0.03] pointer-events-none flex items-center justify-center">
                <Wind size={400} strokeWidth={0.5} />
              </div>

              {happinessLog.length === 0 && (
                <div className="absolute inset-0 flex flex-col items-center justify-center text-stone-300 italic space-y-4">
                  <Sprout size={48} className="opacity-40" />
                  <p className="text-[10px] uppercase tracking-[0.3em]">Your meadow is ready for planting</p>
                </div>
              )}

              {/* The Planted Flowers */}
              <div className="relative w-full h-[80%] px-10">
                {happinessLog.map((log) => (
                  <FlowerStalk key={log.id} log={log} />
                ))}
              </div>

              {/* Ground/Dirt line */}
              <div className="w-[90%] h-px bg-stone-200 opacity-50 mb-2"></div>
              
              {/* Label */}
              <div className="z-10 bg-white/60 backdrop-blur-sm px-6 py-1 rounded-full border border-stone-50 shadow-sm mb-4">
                <span className="text-[9px] tracking-[0.4em] font-sans uppercase text-stone-400">Meadow of Collected Joys</span>
              </div>
            </div>

            {/* Export Button */}
            {happinessLog.length > 0 && (
              <motion.button
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                onClick={handleDownloadHerbarium}
                className="absolute top-6 right-6 p-4 bg-white/90 shadow-xl border border-stone-50 rounded-full text-[#3A5A40] hover:bg-white transition-all active:scale-90"
                title="Capture Garden Snapshot"
              >
                <ImageIcon size={22} />
              </motion.button>
            )}
          </div>
        </section>

        {/* Seeds Section */}
        <section className="bg-white/40 backdrop-blur-sm rounded-[3rem] p-12 space-y-12 border border-white">
          <div className="text-center">
            <h3 className="text-2xl italic text-[#3A5A40]">Seeds of Action</h3>
            <p className="text-[9px] font-sans text-stone-400 tracking-widest uppercase mt-2">Nurturing your daily growth</p>
          </div>
          <div className="grid md:grid-cols-3 gap-8">
            {SEEDS.slice(0, 3).map((seed, i) => (
              <div key={i} className="bg-white/80 p-8 rounded-[2rem] border border-stone-50 shadow-sm italic text-stone-600 text-sm leading-relaxed hover:shadow-md transition-shadow">
                "{seed}"
              </div>
            ))}
          </div>
        </section>
      </main>

      <footer className="text-center py-20 opacity-30">
        <p className="text-[9px] font-sans tracking-[0.5em] text-stone-500 uppercase">Est. 2024 • The Daily Bloom</p>
      </footer>

      <style dangerouslySetInnerHTML={{ __html: `
        .perspective-1000 { perspective: 1500px; }
        .backface-hidden { backface-visibility: hidden; }
        .transform-style-3d { transform-style: preserve-3d; }
        .rotate-y-180 { transform: rotateY(180deg); }
      `}} />
    </div>
  );
};

export default App;