import React, { useState } from 'react';
import { Copy, RefreshCw, Sparkles, Camera, Clapperboard, Music, Sun, Film, ChevronDown, Video, Layout, Hammer, ZoomIn, Info } from 'lucide-react';

// --- DATA PRESETS ---
const PRESETS = {
  subjects: [
    "Traditional Japanese Ramen Shop", "New York City Newsstand", "Parisian Corner Bakery", "Vintage 1950s Gas Station", "Cluttered Artist Studio",
    "Cozy Log Cabin Living Room", "Busy Laundromat at Night", "Old School Boxing Gym", "Modern Minimalist Coffee Shop", "Rusty Car Mechanic Garage",
    "Traditional Indonesian 'Warteg' Stall", "Classic 'Bakso' Cart on Street Corner", "Busy 'Pasar Malam' (Night Market)", "Old Dutch Colonial House", "Balinese Temple Entrance",
    "Subway Train Car Interior", "Street Food Taco Truck", "Classic American Diner", "Quiet Library Reading Nook", "Greenhouse filled with Plants",
    "Fish Market Stall", "Antique Watchmaker Shop", "Jazz Club Stage", "Camping Tent by the Lake", "Urban Rooftop Garden"
  ],
  locations: [
    "a busy intersection in Tokyo", "a quiet rainy street in London", "a sun-drenched Italian piazza", "a snowy sidewalk in New York", "a dusty highway in Arizona",
    "a lush backyard garden", "a gritty industrial alleyway", "a peaceful forest trail", "a crowded market in Marrakech", "a foggy harbor dock",
    "a roadside in rural Java", "a narrow alley in Jakarta", "a clean suburban driveway", "a mountain hiking path", "a wet cobblestone road"
  ],
  materials: [
    "hand-painted polymer clay", "weathered reclaimed wood", "crystal clear epoxy resin water", "distressed rusted metal", "fine textured miniature grass",
    "intricately carved balsa wood", "miniature bricks and real mortar", "delicate papercraft details", "soft felt and fabric textures", "glossy ceramic-like finish"
  ],
  scales: [
    "1:12 Standard Scale", "1:24 Half Scale", "1:48 Quarter Scale", "1:87 HO Scale (Hyper Micro)", "Microscopic 1:144 Scale"
  ],
  interiors: [
    "chef chopping vegetables rapidly", "mechanic tightening bolts on an engine", "barista pouring latte art", "artist painting on a canvas", "tailor sewing fabric on a machine",
    "musicians playing saxophone and bass", "customers eating hot food", "students reading books quietly", "barber cutting hair", "florist arranging bouquets"
  ],
  exteriors: [
    "rain dripping from awnings", "pigeons flying off the roof", "autumn leaves blowing in the wind", "steam rising from manholes", "street cats sleeping on a bench",
    "bicycles parked against a wall", "traffic lights changing colors", "neon signs flickering softly", "wet pavement reflecting lights", "dust motes dancing in sunbeams"
  ],
  moods: [
    "golden hour, warm and nostalgic", "overcast, soft diffused light", "rainy night, cinematic noir", "harsh high-noon sunlight", "misty morning, cool tones",
    "cozy candlelight, warm interior", "fluorescent office lighting", "blue hour, twilight city", "snowy white, bright and clean", "neon cyberpunk, pink and blue"
  ],
  sequences: [
    { label: "Morning Routine", value: "Scene 1: The shop is closed, streets are empty.\nScene 2: Owner arrives and unlocks the door.\nScene 3: Interior lights flicker on, prep begins.\nScene 4: 'Open' sign flips, first customer enters." },
    { label: "Weather Shift", value: "Scene 1: Sunny day, people walking.\nScene 2: Clouds gather, lighting turns grey.\nScene 3: Rain starts falling, umbrellas open.\nScene 4: Heavy downpour, puddles forming." },
    { label: "Crafting Process", value: "Scene 1: Wide shot of artisan workshop.\nScene 2: Extreme close-up of raw materials.\nScene 3: Hands working with miniature tools.\nScene 4: Finished diorama displayed on a shelf." },
    { label: "Indonesian Life", value: "Scene 1: Early morning mist over the warung.\nScene 2: Bubur ayam vendor preparing bowls.\nScene 3: Motorbikes passing with motion blur.\nScene 4: Night falls, warm bulbs glow dimly." }
  ],
  ratios: [
    { label: "16:9 (Cinematic)", value: "16:9" }, { label: "9:16 (TikTok)", value: "9:16" }, { label: "1:1 (Square)", value: "1:1" }, { label: "21:9 (Ultrawide)", value: "21:9" }
  ]
};

const App = () => {
  const [formData, setFormData] = useState({
    subject: '',
    location: '',
    material: 'hand-painted polymer clay',
    scale: '1:12 Standard Scale',
    interiorDetails: '',
    exteriorDetails: '',
    mood: 'golden hour, warm and nostalgic',
    sequenceLogic: '',
    aspectRatio: '16:9'
  });

  const [generatedPrompt, setGeneratedPrompt] = useState(null);
  const [isCopied, setIsCopied] = useState(false);
  const [activeTab, setActiveTab] = useState('standard');

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
  };

  const handlePresetSelect = (field, value) => {
    setFormData(prev => ({ ...prev, [field]: value }));
  };

  const randomizeAll = () => {
    const random = (arr) => arr[Math.floor(Math.random() * arr.length)];
    setFormData({
      subject: random(PRESETS.subjects),
      location: random(PRESETS.locations),
      material: random(PRESETS.materials),
      scale: random(PRESETS.scales),
      interiorDetails: random(PRESETS.interiors),
      exteriorDetails: random(PRESETS.exteriors),
      mood: random(PRESETS.moods),
      sequenceLogic: random(PRESETS.sequences).value,
      aspectRatio: random(PRESETS.ratios).value
    });
  };

  const generatePrompt = () => {
    const { subject, location, material, scale, interiorDetails, exteriorDetails, mood, sequenceLogic, aspectRatio } = formData;
    
    const s = subject || "Miniature Scene";
    const l = location || "a detailed environment";
    const mtr = material || "handcrafted materials";
    const sc = scale || "1:12 scale";
    const id = interiorDetails || "tiny life-like details";
    const ed = exteriorDetails || "intricate landscape elements";
    const m = mood || "atmospheric lighting";
    const ar = aspectRatio || "16:9";

    const promptStructure = {
      visuals: `Hyper-realistic ${sc} miniature diorama of ${s} at ${l}. Handcrafted using ${mtr} with realistic weathering. Open-back cutaway reveals ${id}. Exterior environment shows ${ed}. 8K resolution, macro photography style, extreme depth of field, handcrafted artisan aesthetic.`,
      camera: `Slow, cinematic macro dolly-zoom orbit around the diorama. Smooth tilt-shift focus transition between the foreground ${ed} and background interior.`,
      animation: `Subtle stop-motion style movement: figures blinking or shifting slightly, ${ed} moving in the breeze, interior lights flickering warmly.`,
      sound: `Macro-audio soundscape: the tiny click of wood, rustle of miniature fabric, muffled ambient sounds of ${l}, zero dialogue.`,
      lighting: `${m}, high-contrast cinematic shadows, tiny warm LEDs glowing inside the cutaway.`,
      parameter: `--ar ${ar} --v 6.0 --stylize 300`,
      sequence: sequenceLogic ? `STORYBOARD SEQUENCE:\n${sequenceLogic}` : null,
      veo: ""
    };

    // VEO Consistency Logic
    const veoBase = `Cinematic 8K video (${ar}) of a ${sc} miniature ${s} diorama in ${l}. Material: ${mtr}. Style: Macro photography, handcrafted artisan. Lighting: ${m}.`;

    if (sequenceLogic) {
      const scenes = sequenceLogic.split('\n').filter(line => line.trim().length > 0);
      promptStructure.veo = scenes.map((sceneLine) => {
        const splitIndex = sceneLine.indexOf(':');
        const sceneLabel = splitIndex !== -1 ? sceneLine.substring(0, splitIndex) : "SCENE";
        const sceneAction = splitIndex !== -1 ? sceneLine.substring(splitIndex + 1).trim() : sceneLine;
        return `[PROMPT FOR ${sceneLabel.toUpperCase()}]\n${veoBase}\nFOCUS ACTION & DETAILS: ${sceneAction}. Interior shows ${id}.`;
      }).join('\n\n' + '-'.repeat(30) + '\n\n');
    } else {
      promptStructure.veo = `${veoBase} The scene features ${ed} and a cutaway revealing ${id}. Slow orbit camera motion.`;
    }

    setGeneratedPrompt(promptStructure);
    setIsCopied(false);
  };

  const copyToClipboard = () => {
    if (!generatedPrompt) return;
    
    let textToCopy = "";
    if (activeTab === 'veo') {
      textToCopy = generatedPrompt.veo;
    } else {
      textToCopy = `--- MINIATURE DIORAMA PROMPT ---\n\n` +
                   `VISUALS: ${generatedPrompt.visuals}\n\n` +
                   `CAMERA: ${generatedPrompt.camera}\n\n` +
                   `ANIMATION: ${generatedPrompt.animation}\n\n` +
                   `SOUND: ${generatedPrompt.sound}\n\n` +
                   `LIGHTING: ${generatedPrompt.lighting}\n\n` +
                   `PARAMETERS: ${generatedPrompt.parameter}`;
      if (generatedPrompt.sequence) {
        textToCopy += `\n\n${generatedPrompt.sequence}`;
      }
    }
    
    const textArea = document.createElement("textarea");
    textArea.value = textToCopy;
    document.body.appendChild(textArea);
    textArea.select();
    try {
      document.execCommand('copy');
      setIsCopied(true);
      setTimeout(() => setIsCopied(false), 2000);
    } catch (err) {
      console.error("Gagal menyalin", err);
    }
    document.body.removeChild(textArea);
  };

  const InputGroup = ({ label, name, value, options, icon: Icon, isTextArea = false }) => (
    <div className="relative space-y-1">
      <div className="flex justify-between items-center">
        <label className="text-[10px] uppercase font-bold text-slate-500 flex items-center gap-1">
          {Icon && <Icon className="w-3 h-3 text-amber-500" />} {label}
        </label>
        <div className="relative group">
          <select 
            onChange={(e) => handlePresetSelect(name, e.target.value)}
            className="bg-slate-800 text-[10px] text-slate-400 px-2 py-0.5 rounded border border-slate-700 outline-none w-24 md:w-32 hover:border-amber-500 transition-colors appearance-none cursor-pointer"
            value=""
          >
            <option value="" disabled>Presets</option>
            {options.map((opt, i) => <option key={i} value={typeof opt === 'string' ? opt : opt.value}>{typeof opt === 'string' ? opt : opt.label}</option>)}
          </select>
          <ChevronDown className="w-2 h-2 absolute right-1.5 top-1.5 pointer-events-none text-slate-500" />
        </div>
      </div>
      {isTextArea ? (
        <textarea name={name} value={value} onChange={handleInputChange} placeholder="..." className="w-full bg-slate-900 border border-slate-800 rounded-xl p-3 text-sm h-20 resize-none focus:border-amber-500 focus:ring-1 focus:ring-amber-500/20 outline-none transition-all placeholder:text-slate-700" />
      ) : (
        <input type="text" name={name} value={value} onChange={handleInputChange} placeholder="..." className="w-full bg-slate-900 border border-slate-800 rounded-xl p-3 text-sm focus:border-amber-500 focus:ring-1 focus:ring-amber-500/20 outline-none transition-all placeholder:text-slate-700" />
      )}
    </div>
  );

  return (
    <div className="min-h-screen bg-[#050505] text-slate-100 p-4 md:p-10 flex flex-col items-center font-sans">
      <div className="max-w-6xl w-full">
        
        {/* Header Section */}
        <div className="text-center mb-12 relative">
          <div className="absolute top-0 left-1/2 -translate-x-1/2 w-64 h-64 bg-amber-500/10 blur-[100px] -z-10"></div>
          <h1 className="text-4xl md:text-6xl font-black tracking-tighter text-white mb-2">
            DIORAMA<span className="text-amber-500 italic">GEN</span> PRO
          </h1>
          <p className="text-slate-500 text-sm tracking-[0.3em] font-medium uppercase">Mastering Miniature Prompts for VEO 3.1</p>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-10">
          
          {/* Controls Panel */}
          <div className="bg-[#0f0f0f] border border-slate-800/50 p-8 rounded-[2rem] shadow-2xl space-y-6">
            <div className="flex justify-between items-center pb-4 border-b border-slate-800/50">
              <h2 className="font-bold text-slate-300 flex items-center gap-2"><Sparkles className="w-4 h-4 text-amber-500"/> BUILDER</h2>
              <button 
                onClick={randomizeAll} 
                className="text-[10px] bg-amber-500/10 text-amber-500 hover:bg-amber-500 hover:text-black px-4 py-1.5 rounded-full border border-amber-500/20 flex items-center gap-2 transition-all font-bold"
              >
                <RefreshCw className="w-3 h-3"/> RANDOMIZE ALL
              </button>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <InputGroup label="Subject" name="subject" value={formData.subject} options={PRESETS.subjects} />
              <InputGroup label="Location" name="location" value={formData.location} options={PRESETS.locations} />
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <InputGroup label="Materials" name="material" value={formData.material} options={PRESETS.materials} icon={Hammer} />
              <InputGroup label="Scale" name="scale" value={formData.scale} options={PRESETS.scales} icon={ZoomIn} />
            </div>

            <InputGroup label="Interior Cutaway Life" name="interiorDetails" value={formData.interiorDetails} options={PRESETS.interiors} isTextArea={true} />
            <InputGroup label="Atmosphere & VFX" name="exteriorDetails" value={formData.exteriorDetails} options={PRESETS.exteriors} isTextArea={true} />
            
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <InputGroup label="Mood & Light" name="mood" value={formData.mood} options={PRESETS.moods} />
              <div className="space-y-1">
                <label className="text-[10px] uppercase font-bold text-slate-500 flex items-center gap-1"><Layout className="w-3 h-3 text-amber-500"/> Aspect Ratio</label>
                <select name="aspectRatio" value={formData.aspectRatio} onChange={handleInputChange} className="w-full bg-slate-900 border border-slate-800 rounded-xl p-3 text-sm focus:border-amber-500 outline-none appearance-none cursor-pointer">
                  {PRESETS.ratios.map((r, i) => <option key={i} value={r.value}>{r.label}</option>)}
                </select>
              </div>
            </div>

            <InputGroup label="Story Sequence (Auto-Block)" name="sequenceLogic" value={formData.sequenceLogic} options={PRESETS.sequences} icon={Film} isTextArea={true} />

            <button 
              onClick={generatePrompt} 
              className="w-full bg-gradient-to-br from-amber-400 to-orange-600 py-5 rounded-2xl font-black text-black tracking-widest shadow-[0_10px_30px_rgba(245,158,11,0.2)] hover:shadow-[0_15px_40px_rgba(245,158,11,0.3)] hover:-translate-y-0.5 active:scale-95 transition-all uppercase"
            >
              Generate Magic Prompt
            </button>
          </div>

          {/* Result Panel */}
          <div className="flex flex-col gap-6">
            {!generatedPrompt ? (
              <div className="flex-1 bg-[#0f0f0f]/30 border-2 border-dashed border-slate-800 rounded-[2rem] flex flex-col items-center justify-center p-12 text-slate-600 group">
                <div className="w-20 h-20 bg-slate-900 rounded-3xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-500">
                  <Sparkles className="w-10 h-10 opacity-20"/>
                </div>
                <p className="text-sm font-medium tracking-wide">Waiting for your creativity...</p>
                <p className="text-[10px] mt-2 opacity-50 italic text-center">Fill the config on the left to start generating diorama prompts.</p>
              </div>
            ) : (
              <div className="bg-[#0f0f0f] border border-slate-800 rounded-[2rem] overflow-hidden flex flex-col flex-1 shadow-2xl animate-fade-in">
                
                {/* Tab Switcher */}
                <div className="bg-slate-900/50 p-2 flex gap-2 border-b border-slate-800">
                  <button 
                    onClick={() => setActiveTab('standard')} 
                    className={`flex-1 py-3 text-[10px] font-black uppercase tracking-[0.2em] transition-all rounded-xl ${activeTab === 'standard' ? 'text-amber-500 bg-black border border-amber-500/30' : 'text-slate-500 hover:text-slate-300'}`}
                  >
                    Standard Logic
                  </button>
                  <button 
                    onClick={() => setActiveTab('veo')} 
                    className={`flex-1 py-3 text-[10px] font-black uppercase tracking-[0.2em] transition-all rounded-xl ${activeTab === 'veo' ? 'text-pink-500 bg-black border border-pink-500/30' : 'text-slate-500 hover:text-slate-300'}`}
                  >
                    VEO 3.1 Consistency
                  </button>
                </div>

                <div className="p-8 overflow-y-auto max-h-[600px] space-y-8 custom-scrollbar">
                  {activeTab === 'standard' ? (
                    <div className="space-y-6 animate-slide-up">
                      <section>
                        <h4 className="text-amber-500 text-[10px] font-black mb-2 tracking-widest flex items-center gap-2"><Sparkles className="w-3 h-3"/> VISUAL DESCRIPTION</h4>
                        <div className="bg-black/50 p-5 rounded-2xl border border-slate-800 text-sm text-slate-300 leading-relaxed font-medium italic select-all">
                          "{generatedPrompt.visuals}"
                        </div>
                      </section>
                      
                      {generatedPrompt.sequence && (
                        <section>
                          <h4 className="text-pink-500 text-[10px] font-black mb-2 tracking-widest flex items-center gap-2"><Film className="w-3 h-3"/> STORYBOARD</h4>
                          <div className="bg-black/50 p-5 rounded-2xl border border-pink-900/20 text-xs text-slate-400 font-mono whitespace-pre-wrap leading-loose">
                            {generatedPrompt.sequence}
                          </div>
                        </section>
                      )}

                      <div className="grid grid-cols-2 gap-6">
                        <section>
                          <h4 className="text-blue-400 text-[10px] font-black mb-1 tracking-widest">CAMERA</h4>
                          <p className="text-[11px] text-slate-500 leading-relaxed">{generatedPrompt.camera}</p>
                        </section>
                        <section>
                          <h4 className="text-orange-400 text-[10px] font-black mb-1 tracking-widest">LIGHTING</h4>
                          <p className="text-[11px] text-slate-500 leading-relaxed">{generatedPrompt.lighting}</p>
                        </section>
                      </div>

                      <section className="pt-4 border-t border-slate-800">
                        <h4 className="text-slate-600 text-[10px] font-black mb-2 tracking-widest">PARAMETERS</h4>
                        <code className="bg-amber-500/5 text-amber-600 p-3 block rounded-xl text-xs border border-amber-500/10 font-mono">{generatedPrompt.parameter}</code>
                      </section>
                    </div>
                  ) : (
                    <div className="animate-slide-up space-y-4">
                      <div className="flex items-center gap-2 mb-4 bg-pink-500/5 p-3 rounded-xl border border-pink-500/10">
                        <Info className="w-4 h-4 text-pink-500"/>
                        <p className="text-[10px] text-pink-500/80 font-medium">Model video (VEO) membutuhkan pengulangan deskripsi dasar untuk menjaga konsistensi objek di setiap klip.</p>
                      </div>
                      <section>
                        <h4 className="text-pink-500 text-[10px] font-black mb-3 flex items-center gap-2 tracking-widest uppercase"><Video className="w-4 h-4"/> Sequenced Blocks</h4>
                        <div className="bg-black p-6 rounded-2xl border border-pink-900/30 text-xs text-slate-400 font-mono whitespace-pre-wrap leading-[1.8] select-all">
                          {generatedPrompt.veo}
                        </div>
                      </section>
                    </div>
                  )}
                </div>

                {/* Copy Button */}
                <div className="p-6 bg-[#0a0a0a] border-t border-slate-800">
                  <button 
                    onClick={copyToClipboard} 
                    className={`w-full py-5 rounded-2xl font-black text-sm tracking-widest flex items-center justify-center gap-3 transition-all transform active:scale-[0.98] ${isCopied ? 'bg-green-600 text-white' : 'bg-white text-black hover:bg-slate-200'}`}
                  >
                    {isCopied ? (
                      <>COPIED TO CLIPBOARD!</>
                    ) : (
                      <><Copy className="w-4 h-4"/> COPY {activeTab === 'veo' ? 'VEO BLOCKS' : 'FULL PROMPT'}</>
                    )}
                  </button>
                </div>
              </div>
            )}
          </div>
        </div>

        {/* Footer Info */}
        <div className="mt-16 text-center text-[10px] text-slate-600 font-medium tracking-[0.2em] uppercase">
          Build for Midjourney v6.0 & Google VEO 3.1 • 2024 Specialized Tool
        </div>
      </div>

      <style>{`
        @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
        @keyframes slide-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
        .animate-fade-in { animation: fade-in 0.5s ease-out forwards; }
        .animate-slide-up { animation: slide-up 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
        .custom-scrollbar::-webkit-scrollbar { width: 4px; }
        .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
        .custom-scrollbar::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 10px; }
        .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #334155; }
      `}</style>
    </div>
  );
};

export default App;