import React, { useState, useEffect, useRef, useMemo } from 'react';
import { 
  Utensils, Sparkles, ChefHat, Timer, Flame, Wine, Code, 
  CheckCircle2, Circle, Play, Pause, RotateCcw, Copy, Check, 
  Dices, Award, Heart, BookOpen, ChevronRight, Sliders, RefreshCw, 
  Info, ShoppingBag, Zap, ShieldAlert, Sparkle, Download, Star, ExternalLink
} from 'lucide-react';

// Pre-loaded sample recipe to ensure immediate interactivity
const SAMPLE_RECIPE = {
  titel: "Krämig Kantarellpasta med Vitlök & Västerbottensost",
  beskrivning: "En lyxig och doftande svensk pastarätt med smörstekta kantareller, färsk timjan, vitlök och fyllig Västerbottensost.",
  kök: "Svensk husmanskost / Italienskt fusion",
  diet: "Vegetarisk",
  tillagningstid_min: 25,
  portionsstorlek: 2,
  svårighetsgrad: "Medel",
  näringsvärde: {
    kalorier: 640,
    protein: 22,
    kolhydrater: 68,
    fett: 31
  },
  ingredienser: [
    { namn: "Tagliatelle eller Pappardelle", mängd: 250, enhet: "g" },
    { namn: "Färska eller frysta kantareller", mängd: 300, enhet: "g" },
    { namn: "Schalottenlök (finhackad)", mängd: 2, enhet: "st" },
    { namn: "Vitlöksklyftor (pressade)", mängd: 2, enhet: "st" },
    { namn: "Vispgrädde", mängd: 2, enhet: "dl" },
    { namn: "Riven Västerbottensost", mängd: 1.5, enhet: "dl" },
    { namn: "Smör till stekning", mängd: 2, enhet: "msk" },
    { namn: "Färsk timjan", mängd: 2, enhet: "kvistar" },
    { namn: "Flingsalt & nymalen svartpeppar", mängd: 1, enhet: "nypa" }
  ],
  instruktioner: [
    {
      steg_nummer: 1,
      rubrik: "Rensa och förbered kantarellerna",
      beskrivning: "Rensa svampen noga. Dela större kantareller i mindre bitar. Finhacka schalottenlöken och vitlöken.",
      timer_minuter: 5
    },
    {
      steg_nummer: 2,
      rubrik: "Torrstek svampen & tillsätt smör",
      beskrivning: "Lägg kantarellerna i en varm torr panna så att vätskan ångar bort. Tillsätt sedan smör, lök och vitlök. Fräs tills löken är mjuk och svampen fått fin gyllene färg.",
      timer_minuter: 7
    },
    {
      steg_nummer: 3,
      rubrik: "Koka pastan",
      beskrivning: "Koka pastan i rikligt med välsaltat vatten enligt anvisning på förpackningen tills den är 'al dente'. Spara 1 dl pastavatten innan du häller av.",
      timer_minuter: 9
    },
    {
      steg_nummer: 4,
      rubrik: "Skapa såsen och montera",
      beskrivning: "Häll i grädde och repad timjan i svamppannan. Låt sjuda ihop 2-3 minuter. Rör ner pastan tillsammans med riven Västerbottensost och lite pastavatten för perfekt krämighet.",
      timer_minuter: 3
    },
    {
      steg_nummer: 5,
      rubrik: "Smaka av och servera",
      beskrivning: "Smaka av med flingsalt och rikligt med nymalen svartpeppar. Garnera med färsk timjan och extra ost vid servering.",
      timer_minuter: 0
    }
  ],
  kockens_tips: "För extra djup i smaken, tillsätt en skvätt torrt vitt vin i svampfräset precis innan grädden hälls på!",
  dryckestips: "Ett kylt glas torrt vitt vin som Chardonnay med fatkaraktär, eller en ljus svensk hantverksöl."
};

// Helper to play notification sound for active step timer
const playAlarmSound = () => {
  try {
    const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
    const osc = audioCtx.createOscillator();
    const gain = audioCtx.createGain();
    osc.type = 'sine';
    osc.frequency.setValueAtTime(587.33, audioCtx.currentTime); // D5
    osc.frequency.setValueAtTime(880, audioCtx.currentTime + 0.15); // A5
    gain.gain.setValueAtTime(0.3, audioCtx.currentTime);
    gain.gain.exponentialRampToValueAtTime(0.01, audioCtx.currentTime + 0.6);
    osc.connect(gain);
    gain.connect(audioCtx.destination);
    osc.start();
    osc.stop(audioCtx.currentTime + 0.6);
  } catch (e) {
    console.log("Audio play blocked or unsupported");
  }
};

// Exponential backoff API fetch helper
async function fetchWithRetry(url, options, retries = 3, backoff = 1000) {
  for (let i = 0; i < retries; i++) {
    try {
      const res = await fetch(url, options);
      if (res.ok) return res;
      const errText = await res.text();
      console.warn(`Attempt ${i + 1} failed: ${res.status}`, errText);
    } catch (err) {
      if (i === retries - 1) throw err;
    }
    await new Promise(r => setTimeout(r, backoff * Math.pow(2, i)));
  }
  throw new Error("Kunde inte ansluta till AI-tjänsten. Kontrollera nätverket och försök igen.");
}

export default function App() {
  const [activeTab, setActiveTab] = useState('generator'); // 'generator', 'recipe', 'inspector', 'game', 'saved'
  const [recipeMode, setRecipeMode] = useState('visual'); // 'visual' | 'json'
  
  // Generator Form States
  const [cuisines, setCuisines] = useState(['Italienskt']);
  const [diet, setDiet] = useState('Alla (Ingen specifik)');
  const [cookingTime, setCookingTime] = useState('30 minuter');
  const [difficulty, setDifficulty] = useState('Medel');
  const [servings, setServings] = useState(2);
  const [fridgeItems, setFridgeItems] = useState(['Vitlök', 'Grädde', 'Kantareller']);
  const [newFridgeItem, setNewFridgeItem] = useState('');
  const [allergies, setAllergies] = useState('');
  const [customPrompt, setCustomPrompt] = useState('');

  // Generated Recipe & Meta State
  const [currentRecipe, setCurrentRecipe] = useState(SAMPLE_RECIPE);
  const [recipeImage, setRecipeImage] = useState(null);
  const [isGenerating, setIsGenerating] = useState(false);
  const [isGeneratingImage, setIsGeneratingImage] = useState(false);
  const [generatorError, setGeneratorError] = useState(null);
  const [rawJsonResponse, setRawJsonResponse] = useState(JSON.stringify(SAMPLE_RECIPE, null, 2));
  const [lastApiPayload, setLastApiPayload] = useState(null);

  // Active Cooking Interactive State
  const [portionMultiplier, setPortionMultiplier] = useState(1);
  const [checkedIngredients, setCheckedIngredients] = useState({});
  const [activeTimers, setActiveTimers] = useState({}); // { stepNum: { secondsLeft, isRunning } }

  // Saved Recipes Collection
  const [savedRecipes, setSavedRecipes] = useState(() => {
    try {
      const local = localStorage.getItem('gourmet_saved_recipes');
      return local ? JSON.parse(local) : [SAMPLE_RECIPE];
    } catch (e) {
      return [SAMPLE_RECIPE];
    }
  });

  // UI Toast State
  const [toastMessage, setToastMessage] = useState(null);

  const showToast = (msg) => {
    setToastMessage(msg);
    setTimeout(() => setToastMessage(null), 3000);
  };

  useEffect(() => {
    const interval = setInterval(() => {
      setActiveTimers(prevTimers => {
        let updated = false;
        const newTimers = { ...prevTimers };

        Object.keys(newTimers).forEach(stepKey => {
          const timer = newTimers[stepKey];
          if (timer.isRunning && timer.secondsLeft > 0) {
            updated = true;
            newTimers[stepKey] = {
              ...timer,
              secondsLeft: timer.secondsLeft - 1
            };
            if (timer.secondsLeft - 1 === 0) {
              playAlarmSound();
              showToast(` Timern för Steg ${stepKey} har slutat!`);
            }
          }
        });

        return updated ? newTimers : prevTimers;
      });
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  const handleAddFridgeItem = (e) => {
    if (e) e.preventDefault();
    if (!newFridgeItem.trim()) return;
    if (!fridgeItems.includes(newFridgeItem.trim())) {
      setFridgeItems([...fridgeItems, newFridgeItem.trim()]);
    }
    setNewFridgeItem('');
  };

  const handleRemoveFridgeItem = (item) => {
    setFridgeItems(fridgeItems.filter(i => i !== item));
  };

  const handleGenerateRecipe = async () => {
    setIsGenerating(true);
    setGeneratorError(null);
    setRecipeImage(null);

    const systemPrompt = `Du är en backend-tjänst för en recept-app. Din uppgift är att generera ett recept baserat på användarens inställningar och returnera det i exakt JSON-format.

REGLER:
1. Svara ENBART med giltig JSON enligt angivet schema. Ingen extra text före eller efter.
2. Alla textfält ska vara på svenska.
3. Anpassa råvaror och tillagning strikt efter valda näringsmål och kök.
4. Generera aptitretande, realistiska och kulinariskt korrekta recept med tydliga steg.`;

    const userInstructions = `
Önskat Kök: ${cuisines.join(', ')}
Näringsmål/Diet: ${diet}
Tillagningstid max: ${cookingTime}
Svårighetsgrad: ${difficulty}
Antal portioner: ${servings}
Råvaror i kylskåpet att prioritera: ${fridgeItems.length > 0 ? fridgeItems.join(', ') : 'Valfritt'}
Allergier/Undvik: ${allergies || 'Inga'}
Övrigt önskemål: ${customPrompt || 'Inget'}
`;

    const jsonSchema = {
      type: "OBJECT",
      properties: {
        titel: { type: "STRING" },
        beskrivning: { type: "STRING" },
        kök: { type: "STRING" },
        diet: { type: "STRING" },
        tillagningstid_min: { type: "INTEGER" },
        portionsstorlek: { type: "INTEGER" },
        svårighetsgrad: { type: "STRING" },
        näringsvärde: {
          type: "OBJECT",
          properties: {
            kalorier: { type: "INTEGER" },
            protein: { type: "INTEGER" },
            kolhydrater: { type: "INTEGER" },
            fett: { type: "INTEGER" }
          },
          required: ["kalorier", "protein", "kolhydrater", "fett"]
        },
        ingredienser: {
          type: "ARRAY",
          items: {
            type: "OBJECT",
            properties: {
              namn: { type: "STRING" },
              mängd: { type: "NUMBER" },
              enhet: { type: "STRING" }
            },
            required: ["namn", "mängd", "enhet"]
          }
        },
        instruktioner: {
          type: "ARRAY",
          items: {
            type: "OBJECT",
            properties: {
              steg_nummer: { type: "INTEGER" },
              rubrik: { type: "STRING" },
              beskrivning: { type: "STRING" },
              timer_minuter: { type: "INTEGER" }
            },
            required: ["steg_nummer", "rubrik", "beskrivning"]
          }
        },
        kockens_tips: { type: "STRING" },
        dryckestips: { type: "STRING" }
      },
      required: [
        "titel", "beskrivning", "kök", "diet", "tillagningstid_min",
        "portionsstorlek", "svårighetsgrad", "näringsvärde",
        "ingredienser", "instruktioner", "kockens_tips", "dryckestips"
      ]
    };

    const apiKey = "";
    const apiUrl = `https://generativelanguage.googleapis.com/v1beta/models/gemini-3-flash-preview:generateContent?key=${apiKey}`;

    const payload = {
      contents: [{ parts: [{ text: userInstructions }] }],
      systemInstruction: {
        parts: [{ text: systemPrompt }]
      },
      generationConfig: {
        responseMimeType: "application/json",
        responseSchema: jsonSchema
      }
    };

    setLastApiPayload(payload);

    try {
      const response = await fetchWithRetry(apiUrl, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload)
      });

      const data = await response.json();
      const rawText = data?.candidates?.[0]?.content?.parts?.[0]?.text;

      if (!rawText) {
        throw new Error("Inget svar mottogs från AI backend-tjänsten.");
      }

      const parsedRecipe = JSON.parse(rawText);
      setCurrentRecipe(parsedRecipe);
      setRawJsonResponse(JSON.stringify(parsedRecipe, null, 2));
      setCheckedIngredients({});
      setPortionMultiplier(1);
      setActiveTimers({});
      setActiveTab('recipe');
      showToast(" Nytt recept skapat av AI Backend!");

      // Trigger parallel Image Generation
      generateDishImage(parsedRecipe.titel, parsedRecipe.beskrivning);

    } catch (err) {
      console.error("Receptgenerering misslyckades:", err);
      setGeneratorError(err.message || "Ett fel uppstod vid kommunikation med Gemini API.");
    } finally {
      setIsGenerating(false);
    }
  };

  const generateDishImage = async (title, desc) => {
    setIsGeneratingImage(true);
    const apiKey = "";
    const apiUrl = `https://generativelanguage.googleapis.com/v1beta/models/gemini-3.1-flash-lite-image:generateContent?key=${apiKey}`;

    const imagePrompt = `A high quality, professional gourmet food photograph of ${title}: ${desc}. Elegant plating, realistic lighting, appetizing food photography on a dark rustic table background, cinematic resolution.`;

    const payload = {
      contents: [{ parts: [{ text: imagePrompt }] }],
      generationConfig: {
        responseModalities: ["IMAGE"],
        imageConfig: {
          aspectRatio: "16:9"
        }
      }
    };

    try {
      const response = await fetchWithRetry(apiUrl, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload)
      });
      const result = await response.json();
      const base64Data = result?.candidates?.[0]?.content?.parts?.find(p => p.inlineData)?.inlineData?.data;
      if (base64Data) {
        setRecipeImage(`data:image/png;base64,${base64Data}`);
      }
    } catch (e) {
      console.warn("Matbildgenerering misslyckades eller stöds ej i offline-läge:", e);
    } finally {
      setIsGeneratingImage(false);
    }
  };

  const toggleTimer = (stepNum, defaultMinutes) => {
    setActiveTimers(prev => {
      const current = prev[stepNum];
      if (!current) {
        return {
          ...prev,
          [stepNum]: {
            secondsLeft: defaultMinutes * 60,
            isRunning: true,
            totalSeconds: defaultMinutes * 60
          }
        };
      }
      return {
        ...prev,
        [stepNum]: {
          ...current,
          isRunning: !current.isRunning
        }
      };
    });
  };

  const resetTimer = (stepNum, defaultMinutes) => {
    setActiveTimers(prev => ({
      ...prev,
      [stepNum]: {
        secondsLeft: defaultMinutes * 60,
        isRunning: false,
        totalSeconds: defaultMinutes * 60
      }
    }));
  };

  const handleSaveRecipe = () => {
    if (savedRecipes.some(r => r.titel === currentRecipe.titel)) {
      showToast(" Receptet finns redan i din receptbok!");
      return;
    }
    const updated = [currentRecipe, ...savedRecipes];
    setSavedRecipes(updated);
    try {
      localStorage.setItem('gourmet_saved_recipes', JSON.stringify(updated));
    } catch (e) { }
    showToast(" Sparat i din Receptbok!");
  };

  const copyToClipboard = (text, label = "Kopierat") => {
    navigator.clipboard.writeText(text);
    showToast(` ${label} till urklipp!`);
  };

  return (
    <div className="min-h-screen bg-slate-950 text-slate-100 flex flex-col font-sans selection:bg-amber-500 selection:text-slate-950">
      
      {/* Toast Notification Banner */}
      {toastMessage && (
        <div className="fixed top-5 right-5 z-50 bg-amber-500 text-slate-950 px-4 py-3 rounded-xl shadow-2xl font-bold flex items-center gap-2 animate-bounce">
          <Sparkles className="w-5 h-5" />
          {toastMessage}
        </div>
      )}

      {/* Top Application Header */}
      <header className="border-b border-slate-800 bg-slate-900/80 backdrop-blur-md sticky top-0 z-40">
        <div className="max-w-7xl mx-auto px-4 py-3 flex flex-wrap items-center justify-between gap-4">
          
          <div className="flex items-center gap-3 cursor-pointer" onClick={() => setActiveTab('generator')}>
            <div className="bg-gradient-to-tr from-amber-500 to-orange-600 p-2.5 rounded-2xl shadow-lg shadow-amber-500/20">
              <ChefHat className="w-6 h-6 text-slate-950" />
            </div>
            <div>
              <div className="flex items-center gap-2">
                <h1 className="text-xl font-extrabold tracking-tight bg-gradient-to-r from-amber-400 via-orange-300 to-amber-200 bg-clip-text text-transparent">
                  GourmetAI
                </h1>
                <span className="text-[10px] bg-amber-500/10 text-amber-400 border border-amber-500/20 px-2 py-0.5 rounded-full font-mono uppercase tracking-wider">
                  JSON Backend v3.1
                </span>
              </div>
              <p className="text-xs text-slate-400 hidden sm:block">
                Interaktiv Svensk Receptgenerator & Kockutmaning
              </p>
            </div>
          </div>

          {/* Navigation Bar */}
          <nav className="flex items-center gap-1 sm:gap-2 bg-slate-950/60 p-1.5 rounded-2xl border border-slate-800/80 overflow-x-auto">
            <button
              onClick={() => setActiveTab('generator')}
              className={`flex items-center gap-2 px-3 py-2 rounded-xl text-xs sm:text-sm font-medium transition-all ${
                activeTab === 'generator'
                  ? 'bg-amber-500 text-slate-950 font-bold shadow-md shadow-amber-500/20'
                  : 'text-slate-400 hover:text-slate-200 hover:bg-slate-800/50'
              }`}
            >
              <Sparkles className="w-4 h-4" />
              <span>Skapa Recept</span>
            </button>

            <button
              onClick={() => setActiveTab('recipe')}
              className={`flex items-center gap-2 px-3 py-2 rounded-xl text-xs sm:text-sm font-medium transition-all ${
                activeTab === 'recipe'
                  ? 'bg-amber-500 text-slate-950 font-bold shadow-md shadow-amber-500/20'
                  : 'text-slate-400 hover:text-slate-200 hover:bg-slate-800/50'
              }`}
            >
              <Utensils className="w-4 h-4" />
              <span>Matlagningsvy</span>
            </button>

            <button
              onClick={() => setActiveTab('game')}
              className={`flex items-center gap-2 px-3 py-2 rounded-xl text-xs sm:text-sm font-medium transition-all ${
                activeTab === 'game'
                  ? 'bg-gradient-to-r from-orange-500 to-amber-500 text-slate-950 font-bold shadow-md'
                  : 'text-slate-400 hover:text-slate-200 hover:bg-slate-800/50'
              }`}
            >
              <Dices className="w-4 h-4" />
              <span className="hidden sm:inline">Kockutmaningen</span>
              <span className="sm:hidden">Spel</span>
            </button>

            <button
              onClick={() => setActiveTab('saved')}
              className={`flex items-center gap-2 px-3 py-2 rounded-xl text-xs sm:text-sm font-medium transition-all ${
                activeTab === 'saved'
                  ? 'bg-amber-500 text-slate-950 font-bold shadow-md shadow-amber-500/20'
                  : 'text-slate-400 hover:text-slate-200 hover:bg-slate-800/50'
              }`}
            >
              <BookOpen className="w-4 h-4" />
              <span>Receptbok ({savedRecipes.length})</span>
            </button>

            <button
              onClick={() => setActiveTab('inspector')}
              className={`flex items-center gap-2 px-3 py-2 rounded-xl text-xs sm:text-sm font-medium transition-all ${
                activeTab === 'inspector'
                  ? 'bg-slate-800 text-amber-400 border border-amber-500/30 font-bold'
                  : 'text-slate-400 hover:text-slate-200 hover:bg-slate-800/50'
              }`}
            >
              <Code className="w-4 h-4" />
              <span className="hidden md:inline">JSON Inspector</span>
            </button>
          </nav>

        </div>
      </header>

      {/* Main Body Content View Router */}
      <main className="flex-1 max-w-7xl w-full mx-auto p-4 sm:p-6 md:p-8">

        {/* ========================================================================= */}
        {/* TAB 1: AI RECIPE GENERATOR FORM                                           */}
        {/* ========================================================================= */}
        {activeTab === 'generator' && (
          <div className="max-w-4xl mx-auto space-y-8 animate-fadeIn">
            
            <div className="text-center space-y-3">
              <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-amber-500/10 border border-amber-500/20 text-amber-400 text-xs font-semibold">
                <Zap className="w-3.5 h-3.5" />
                Drivs av Gemini 3 Flash & JSON Schema
              </div>
              <h2 className="text-3xl sm:text-4xl font-extrabold text-slate-100 tracking-tight">
                Designa ditt skräddarsydda recept
              </h2>
              <p className="text-slate-400 max-w-xl mx-auto text-sm sm:text-base">
                Välj dina preferenser, vad du har i kylskåpet och låt backend-AI:n komponera ett perfekt recept med exakt näringsinnehåll och tider.
              </p>
            </div>

            <div className="bg-slate-900/90 border border-slate-800 rounded-3xl p-6 sm:p-8 shadow-2xl backdrop-blur-md space-y-8">
              
              {/* Cuisine Selection */}
              {}
              <div className="space-y-3">
                <label className="text-sm font-bold text-slate-200 flex items-center gap-2">
                  <Utensils className="w-4 h-4 text-amber-400" />
                  Välj Kök / Matstil
                </label>
                <div className="flex flex-wrap gap-2">
                  {[
                    'Italienskt', 'Asiatiskt', 'Svensk husmanskost', 'Mexikanskt', 
                    'Indiskt', 'Medelhavet', 'Franskt Gourmet', 'Street Food', 'Mellanöstern'
                  ].map(c => {
                    const isSelected = cuisines.includes(c);
                    return (
                      <button
                        key={c}
                        type="button"
                        onClick={() => {
                          if (isSelected && cuisines.length > 1) {
                            setCuisines(cuisines.filter(item => item !== c));
                          } else if (!isSelected) {
                            setCuisines([...cuisines, c]);
                          }
                        }}
                        className={`px-3.5 py-2 rounded-xl text-xs sm:text-sm font-medium transition-all ${
                          isSelected
                            ? 'bg-amber-500 text-slate-950 font-bold border border-amber-400 shadow-md shadow-amber-500/20 scale-105'
                            : 'bg-slate-800/80 text-slate-300 hover:bg-slate-800 border border-slate-700/60'
                        }`}
                      >
                        {c}
                      </button>
                    );
                  })}
                </div>
              </div>

              {/* Diet & Goal */}
              {}
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div className="space-y-3">
                  <label className="text-sm font-bold text-slate-200 flex items-center gap-2">
                    <Flame className="w-4 h-4 text-orange-400" />
                    Näringsmål & Diet
                  </label>
                  <select
                    value={diet}
                    onChange={(e) => setDiet(e.target.value)}
                    className="w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-3 text-sm text-slate-200 focus:outline-none focus:border-amber-500 transition-colors"
                  >
                    <option value="Alla (Ingen specifik)">Alla (Ingen specifik)</option>
                    <option value="Proteinrik (Fitness)">Proteinrik (Fitness)</option>
                    <option value="Vegetarisk">Vegetarisk</option>
                    <option value="Vegansk">Vegansk</option>
                    <option value="Keto / Lågkolhydrat">Keto / Lågkolhydrat</option>
                    <option value="Kalorisnål (&lt; 500 kcal)">Kalorisnål (&lt; 500 kcal)</option>
                    <option value="Snabb & Enkel Vardagsmat">Snabb & Enkel Vardagsmat</option>
                    <option value="Lyxig Helgmiddag">Lyxig Helgmiddag</option>
                  </select>
                </div>

                {/* Cooking Time & Difficulty */}
                <div className="grid grid-cols-2 gap-4">
                  <div className="space-y-3">
                    <label className="text-sm font-bold text-slate-200 flex items-center gap-2">
                      <Timer className="w-4 h-4 text-amber-400" />
                      Tillagningstid
                    </label>
                    <select
                      value={cookingTime}
                      onChange={(e) => setCookingTime(e.target.value)}
                      className="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-3 text-sm text-slate-200 focus:outline-none focus:border-amber-500"
                    >
                      <option value="15 minuter">Max 15 min</option>
                      <option value="30 minuter">Max 30 min</option>
                      <option value="45 minuter">Max 45 min</option>
                      <option value="Obegränsat">Ingen tidsgräns</option>
                    </select>
                  </div>

                  <div className="space-y-3">
                    <label className="text-sm font-bold text-slate-200 flex items-center gap-2">
                      <ChefHat className="w-4 h-4 text-emerald-400" />
                      Svårighetsgrad
                    </label>
                    <select
                      value={difficulty}
                      onChange={(e) => setDifficulty(e.target.value)}
                      className="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-3 text-sm text-slate-200 focus:outline-none focus:border-amber-500"
                    >
                      <option value="Lätt">Lätt</option>
                      <option value="Medel">Medel</option>
                      <option value="Avancerad">Avancerad</option>
                    </select>
                  </div>
                </div>
              </div>

              {/* Fridge Contents / Pantry */}
              {}
              <div className="space-y-3">
                <div className="flex items-center justify-between">
                  <label className="text-sm font-bold text-slate-200 flex items-center gap-2">
                    <ShoppingBag className="w-4 h-4 text-emerald-400" />
                    Vad finns i kylskåpet / skafferiet?
                  </label>
                  <span className="text-xs text-slate-500">
                    Slipp matsvinn! AI:n bygger receptet runt dessa.
                  </span>
                </div>

                <form onSubmit={handleAddFridgeItem} className="flex gap-2">
                  <input
                    type="text"
                    value={newFridgeItem}
                    onChange={(e) => setNewFridgeItem(e.target.value)}
                    placeholder="T.ex. Lax, Avokado, Kokosmjölk..."
                    className="flex-1 bg-slate-950 border border-slate-800 rounded-xl px-4 py-2.5 text-sm text-slate-200 placeholder-slate-600 focus:outline-none focus:border-amber-500"
                  />
                  <button
                    type="submit"
                    className="px-4 py-2.5 bg-slate-800 hover:bg-slate-700 text-amber-400 font-bold rounded-xl text-sm border border-slate-700 transition-colors"
                  >
                    + Lägg till
                  </button>
                </form>

                <div className="flex flex-wrap gap-2 pt-1">
                  {fridgeItems.map(item => (
                    <span
                      key={item}
                      className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-xl bg-slate-950 border border-slate-800 text-xs font-semibold text-slate-300 group hover:border-red-500/50 transition-colors"
                    >
                      <span>{item}</span>
                      <button
                        type="button"
                        onClick={() => handleRemoveFridgeItem(item)}
                        className="text-slate-500 group-hover:text-red-400 font-bold ml-1"
                      >
                        ×
                      </button>
                    </span>
                  ))}
                  {fridgeItems.length === 0 && (
                    <p className="text-xs text-slate-600 italic">Inga specifika råvaror valda.</p>
                  )}
                </div>
              </div>

              {/* Servings, Allergies & Extra Instructions */}
              <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div>
                  <label className="text-sm font-bold text-slate-200 block mb-2">
                    Antal portioner
                  </label>
                  <div className="flex items-center gap-3 bg-slate-950 border border-slate-800 p-2 rounded-xl justify-between">
                    <button
                      type="button"
                      onClick={() => setServings(Math.max(1, servings - 1))}
                      className="w-8 h-8 rounded-lg bg-slate-800 hover:bg-slate-700 font-bold text-slate-200"
                    >
                      -
                    </button>
                    <span className="font-mono text-sm font-bold text-amber-400">{servings} portioner</span>
                    <button
                      type="button"
                      onClick={() => setServings(servings + 1)}
                      className="w-8 h-8 rounded-lg bg-slate-800 hover:bg-slate-700 font-bold text-slate-200"
                    >
                      +
                    </button>
                  </div>
                </div>

                <div>
                  <label className="text-sm font-bold text-slate-200 block mb-2">
                    Allergier / Undvik
                  </label>
                  <input
                    type="text"
                    value={allergies}
                    onChange={(e) => setAllergies(e.target.value)}
                    placeholder="T.ex. Gluten, Laktos, Nötter"
                    className="w-full bg-slate-950 border border-slate-800 rounded-xl px-3.5 py-2.5 text-sm text-slate-200 focus:outline-none focus:border-amber-500"
                  />
                </div>

                <div>
                  <label className="text-sm font-bold text-slate-200 block mb-2">
                    Speciella önskemål (valfritt)
                  </label>
                  <input
                    type="text"
                    value={customPrompt}
                    onChange={(e) => setCustomPrompt(e.target.value)}
                    placeholder="T.ex. 'Extra såsigt', 'Ugnstillagad'"
                    className="w-full bg-slate-950 border border-slate-800 rounded-xl px-3.5 py-2.5 text-sm text-slate-200 focus:outline-none focus:border-amber-500"
                  />
                </div>
              </div>

              {/* Error Message if Generation Fails */}
              {generatorError && (
                <div className="bg-red-500/10 border border-red-500/30 text-red-400 p-4 rounded-2xl flex items-start gap-3 text-sm">
                  <ShieldAlert className="w-5 h-5 text-red-400 shrink-0 mt-0.5" />
                  <div>
                    <strong className="font-bold block">Kunde inte skapa receptet:</strong>
                    <span>{generatorError}</span>
                  </div>
                </div>
              )}

              {/* Submit / Generate Button */}
              {}
              <div className="pt-2">
                <button
                  type="button"
                  disabled={isGenerating}
                  onClick={handleGenerateRecipe}
                  className="w-full py-4 px-6 rounded-2xl bg-gradient-to-r from-amber-500 via-orange-500 to-amber-600 hover:from-amber-400 hover:to-orange-500 text-slate-950 font-black text-base sm:text-lg shadow-xl shadow-amber-500/25 transition-all transform active:scale-[0.99] flex items-center justify-center gap-3 disabled:opacity-50 cursor-pointer"
                >
                  {isGenerating ? (
                    <>
                      <RefreshCw className="w-6 h-6 animate-spin" />
                      <span>Genererar recept i JSON-format (Gemini AI)...</span>
                    </>
                  ) : (
                    <>
                      <Sparkles className="w-6 h-6" />
                      <span>Generera mitt unika recept nu</span>
                    </>
                  )}
                </button>
              </div>

            </div>

          </div>
        )}

        {/* ========================================================================= */}
        {/* TAB 2: RECIPE VIEW (VISUAL & STEP-BY-STEP COOKING MODE)                  */}
        {/* ========================================================================= */}
        {activeTab === 'recipe' && (
          <div className="max-w-5xl mx-auto space-y-6 animate-fadeIn">
            
            {/* Top Toolbar */}
            <div className="flex flex-wrap items-center justify-between gap-4 bg-slate-900 p-3 rounded-2xl border border-slate-800">
              <div className="flex items-center gap-2">
                <button
                  onClick={() => setRecipeMode('visual')}
                  className={`px-4 py-2 rounded-xl text-xs sm:text-sm font-bold transition-all ${
                    recipeMode === 'visual'
                      ? 'bg-amber-500 text-slate-950 shadow-md'
                      : 'text-slate-400 hover:text-slate-200'
                  }`}
                >
                   Visuell Matlagningsvy
                </button>
                <button
                  onClick={() => setRecipeMode('json')}
                  className={`px-4 py-2 rounded-xl text-xs sm:text-sm font-bold transition-all ${
                    recipeMode === 'json'
                      ? 'bg-amber-500 text-slate-950 shadow-md'
                      : 'text-slate-400 hover:text-slate-200'
                  }`}
                >
                   JSON Backend Resultat
                </button>
              </div>

              <div className="flex items-center gap-2">
                <button
                  onClick={handleSaveRecipe}
                  className="px-3.5 py-2 bg-slate-800 hover:bg-slate-700 text-slate-200 rounded-xl text-xs sm:text-sm font-semibold flex items-center gap-2 transition-colors border border-slate-700"
                >
                  <Heart className="w-4 h-4 text-red-400" />
                  <span>Spara</span>
                </button>
                <button
                  onClick={() => copyToClipboard(rawJsonResponse, "Recept JSON")}
                  className="px-3.5 py-2 bg-slate-800 hover:bg-slate-700 text-slate-200 rounded-xl text-xs sm:text-sm font-semibold flex items-center gap-2 transition-colors border border-slate-700"
                >
                  <Copy className="w-4 h-4 text-amber-400" />
                  <span>Kopiera JSON</span>
                </button>
              </div>
            </div>

            {/* VISUAL RECIPE CARD */}
            {recipeMode === 'visual' ? (
              <div className="bg-slate-900 border border-slate-800 rounded-3xl overflow-hidden shadow-2xl">
                
                {/* Hero Header Banner */}
                {}
                <div className="relative min-h-[220px] sm:min-h-[280px] bg-slate-950 flex items-end p-6 sm:p-8 border-b border-slate-800 overflow-hidden">
                  {recipeImage ? (
                    <img 
                      src={recipeImage} 
                      alt={currentRecipe.titel} 
                      className="absolute inset-0 w-full h-full object-cover opacity-60 mix-blend-luminosity hover:opacity-80 transition-opacity duration-700"
                    />
                  ) : (
                    <div className="absolute inset-0 bg-gradient-to-r from-amber-950/40 via-orange-950/30 to-slate-950 opacity-90" />
                  )}
                  <div className="absolute inset-0 bg-gradient-to-t from-slate-950 via-slate-950/70 to-transparent" />

                  <div className="relative z-10 space-y-3 w-full">
                    <div className="flex flex-wrap items-center gap-2 text-xs">
                      <span className="px-3 py-1 rounded-full bg-amber-500 text-slate-950 font-black uppercase tracking-wider">
                        {currentRecipe.kök}
                      </span>
                      <span className="px-3 py-1 rounded-full bg-slate-800/90 text-amber-300 font-semibold border border-amber-500/30">
                        {currentRecipe.diet}
                      </span>
                      <span className="px-3 py-1 rounded-full bg-slate-800/90 text-slate-300 font-semibold border border-slate-700">
                        Svårighet: {currentRecipe.svårighetsgrad}
                      </span>
                      {isGeneratingImage && (
                        <span className="px-3 py-1 rounded-full bg-amber-500/20 text-amber-400 font-semibold text-xs animate-pulse">
                          Genererar matbild med AI...
                        </span>
                      )}
                    </div>

                    <h2 className="text-2xl sm:text-4xl font-extrabold text-slate-100 tracking-tight leading-tight">
                      {currentRecipe.titel}
                    </h2>

                    <p className="text-slate-300 text-sm sm:text-base max-w-3xl leading-relaxed">
                      {currentRecipe.beskrivning}
                    </p>

                    {/* Meta stats bar */}
                    <div className="flex flex-wrap items-center gap-6 pt-2 text-xs sm:text-sm text-slate-300 border-t border-slate-800/80">
                      <div className="flex items-center gap-2">
                        <Timer className="w-4 h-4 text-amber-400" />
                        <span><strong>{currentRecipe.tillagningstid_min}</strong> min tillagning</span>
                      </div>
                      <div className="flex items-center gap-2">
                        <Flame className="w-4 h-4 text-orange-400" />
                        <span><strong>{currentRecipe.näringsvärde?.kalorier}</strong> kcal / portion</span>
                      </div>
                      <div className="flex items-center gap-2">
                        <ChefHat className="w-4 h-4 text-emerald-400" />
                        <span>Standard: <strong>{currentRecipe.portionsstorlek}</strong> portioner</span>
                      </div>
                    </div>
                  </div>
                </div>

                {/* Recipe Body Split */}
                <div className="p-6 sm:p-8 grid grid-cols-1 lg:grid-cols-12 gap-8">
                  
                  {/* LEFT COLUMN: Ingredients Checklist & Portion Scaler */}
                  {}
                  <div className="lg:col-span-5 space-y-6">
                    <div className="bg-slate-950 p-5 rounded-2xl border border-slate-800/80 space-y-4">
                      
                      <div className="flex items-center justify-between">
                        <h3 className="font-bold text-slate-100 text-base flex items-center gap-2">
                          <ShoppingBag className="w-5 h-5 text-amber-400" />
                          Ingredienser
                        </h3>

                        {/* Portion Multiplier */}
                        <div className="flex items-center gap-1.5 bg-slate-900 border border-slate-800 p-1 rounded-xl text-xs font-semibold">
                          <span className="text-slate-400 px-1">Portioner:</span>
                          <button
                            onClick={() => setPortionMultiplier(Math.max(0.5, portionMultiplier - 0.5))}
                            className="w-6 h-6 bg-slate-800 hover:bg-slate-700 text-amber-400 rounded-lg flex items-center justify-center font-bold"
                          >
                            -
                          </button>
                          <span className="font-mono text-amber-300 w-6 text-center">
                            {(currentRecipe.portionsstorlek * portionMultiplier).toFixed(1).replace('.0', '')}
                          </span>
                          <button
                            onClick={() => setPortionMultiplier(portionMultiplier + 0.5)}
                            className="w-6 h-6 bg-slate-800 hover:bg-slate-700 text-amber-400 rounded-lg flex items-center justify-center font-bold"
                          >
                            +
                          </button>
                        </div>
                      </div>

                      <div className="space-y-2">
                        {currentRecipe.ingredienser?.map((ing, idx) => {
                          const scaledAmount = (ing.mängd * portionMultiplier).toFixed(1).replace('.0', '');
                          const isChecked = checkedIngredients[idx];

                          return (
                            <div
                              key={idx}
                              onClick={() => setCheckedIngredients({ ...checkedIngredients, [idx]: !isChecked })}
                              className={`flex items-center justify-between p-3 rounded-xl border transition-all cursor-pointer select-none ${
                                isChecked
                                  ? 'bg-emerald-950/20 border-emerald-500/30 text-slate-500 line-through'
                                  : 'bg-slate-900/60 border-slate-800 text-slate-200 hover:border-slate-700'
                              }`}
                            >
                              <div className="flex items-center gap-3">
                                {isChecked ? (
                                  <CheckCircle2 className="w-5 h-5 text-emerald-400 shrink-0" />
                                ) : (
                                  <Circle className="w-5 h-5 text-slate-600 shrink-0" />
                                )}
                                <span className="text-sm font-medium">{ing.namn}</span>
                              </div>
                              <span className="font-mono text-xs font-bold text-amber-400 bg-slate-950 px-2.5 py-1 rounded-lg border border-slate-800 shrink-0">
                                {scaledAmount} {ing.enhet}
                              </span>
                            </div>
                          );
                        })}
                      </div>

                    </div>

                    {/* Nutrition Breakdown Graphic */}
                    {}
                    <div className="bg-slate-950 p-5 rounded-2xl border border-slate-800/80 space-y-4">
                      <h4 className="font-bold text-slate-200 text-sm flex items-center gap-2">
                        <Flame className="w-4 h-4 text-orange-400" />
                        Näringsvärde per portion
                      </h4>

                      <div className="grid grid-cols-4 gap-2 text-center">
                        <div className="bg-slate-900 p-2.5 rounded-xl border border-slate-800">
                          <span className="text-[10px] text-slate-400 uppercase tracking-wider block">Kcal</span>
                          <span className="font-mono font-bold text-slate-100 text-sm">{currentRecipe.näringsvärde?.kalorier}</span>
                        </div>
                        <div className="bg-slate-900 p-2.5 rounded-xl border border-slate-800">
                          <span className="text-[10px] text-slate-400 uppercase tracking-wider block">Protein</span>
                          <span className="font-mono font-bold text-amber-400 text-sm">{currentRecipe.näringsvärde?.protein}g</span>
                        </div>
                        <div className="bg-slate-900 p-2.5 rounded-xl border border-slate-800">
                          <span className="text-[10px] text-slate-400 uppercase tracking-wider block">Kolhydr.</span>
                          <span className="font-mono font-bold text-sky-400 text-sm">{currentRecipe.näringsvärde?.kolhydrater}g</span>
                        </div>
                        <div className="bg-slate-900 p-2.5 rounded-xl border border-slate-800">
                          <span className="text-[10px] text-slate-400 uppercase tracking-wider block">Fett</span>
                          <span className="font-mono font-bold text-orange-400 text-sm">{currentRecipe.näringsvärde?.fett}g</span>
                        </div>
                      </div>

                      {/* Macro Bar Visual */}
                      <div className="space-y-1 pt-1">
                        <div className="h-2 rounded-full bg-slate-800 overflow-hidden flex">
                          <div 
                            style={{ width: `${Math.min(100, (currentRecipe.näringsvärde?.protein * 4 / currentRecipe.näringsvärde?.kalorier) * 100)}%` }} 
                            className="bg-amber-400 h-full" 
                            title="Protein"
                          />
                          <div 
                            style={{ width: `${Math.min(100, (currentRecipe.näringsvärde?.kolhydrater * 4 / currentRecipe.näringsvärde?.kalorier) * 100)}%` }} 
                            className="bg-sky-400 h-full" 
                            title="Kolhydrater"
                          />
                          <div 
                            style={{ width: `${Math.min(100, (currentRecipe.näringsvärde?.fett * 9 / currentRecipe.näringsvärde?.kalorier) * 100)}%` }} 
                            className="bg-orange-500 h-full" 
                            title="Fett"
                          />
                        </div>
                      </div>
                    </div>

                    {/* Wine & Beverage Pairing Box */}
                    <div className="bg-gradient-to-br from-amber-950/30 to-slate-950 p-5 rounded-2xl border border-amber-500/20 space-y-2">
                      <h4 className="font-bold text-amber-300 text-sm flex items-center gap-2">
                        <Wine className="w-4 h-4 text-amber-400" />
                        Sommelierens Dryckestips
                      </h4>
                      <p className="text-xs text-slate-300 italic leading-relaxed">
                        "{currentRecipe.dryckestips}"
                      </p>
                    </div>

                  </div>

                  {/* RIGHT COLUMN: Step-by-Step Instructions & Interactive Timers */}
                  {}
                  <div className="lg:col-span-7 space-y-6">
                    <h3 className="font-bold text-slate-100 text-xl flex items-center gap-2">
                      <ChefHat className="w-6 h-6 text-amber-400" />
                      Tillagning & Instruktioner
                    </h3>

                    <div className="space-y-4">
                      {currentRecipe.instruktioner?.map((steg) => {
                        const stepNum = steg.steg_nummer;
                        const timer = activeTimers[stepNum];
                        const defaultMin = steg.timer_minuter || 0;

                        return (
                          <div
                            key={stepNum}
                            className="bg-slate-950 p-5 rounded-2xl border border-slate-800 space-y-3 relative overflow-hidden group hover:border-slate-700 transition-colors"
                          >
                            <div className="flex items-start justify-between gap-4">
                              <div className="flex items-center gap-3">
                                <span className="w-8 h-8 rounded-xl bg-amber-500/10 border border-amber-500/30 text-amber-400 font-mono font-black flex items-center justify-center shrink-0">
                                  {stepNum}
                                </span>
                                <h4 className="font-bold text-slate-100 text-base">
                                  {steg.rubrik}
                                </h4>
                              </div>

                              {/* Step Timer Trigger if minutes specified */}
                              {defaultMin > 0 && (
                                <div className="flex items-center gap-2 shrink-0">
                                  {timer ? (
                                    <div className="flex items-center gap-1.5 bg-slate-900 border border-amber-500/40 px-3 py-1.5 rounded-xl">
                                      <Timer className={`w-4 h-4 ${timer.isRunning ? 'text-amber-400 animate-spin' : 'text-slate-400'}`} />
                                      <span className="font-mono text-xs font-bold text-amber-300">
                                        {Math.floor(timer.secondsLeft / 60)}:{(timer.secondsLeft % 60).toString().padStart(2, '0')}
                                      </span>
                                      <button
                                        onClick={() => toggleTimer(stepNum, defaultMin)}
                                        className="p-1 text-slate-300 hover:text-amber-400 font-bold ml-1"
                                      >
                                        {timer.isRunning ? <Pause className="w-3.5 h-3.5" /> : <Play className="w-3.5 h-3.5" />}
                                      </button>
                                      <button
                                        onClick={() => resetTimer(stepNum, defaultMin)}
                                        className="p-1 text-slate-400 hover:text-red-400 font-bold"
                                      >
                                        <RotateCcw className="w-3.5 h-3.5" />
                                      </button>
                                    </div>
                                  ) : (
                                    <button
                                      onClick={() => toggleTimer(stepNum, defaultMin)}
                                      className="px-3 py-1.5 bg-slate-900 hover:bg-slate-800 border border-slate-700 text-slate-300 rounded-xl text-xs font-semibold flex items-center gap-1.5 transition-colors"
                                    >
                                      <Timer className="w-3.5 h-3.5 text-amber-400" />
                                      <span>Starta timer ({defaultMin} min)</span>
                                    </button>
                                  )}
                                </div>
                              )}
                            </div>

                            <p className="text-slate-300 text-sm leading-relaxed pl-11">
                              {steg.beskrivning}
                            </p>
                          </div>
                        );
                      })}
                    </div>

                    {/* Chef's Pro Tip */}
                    {currentRecipe.kockens_tips && (
                      <div className="bg-amber-500/10 border border-amber-500/30 p-5 rounded-2xl flex items-start gap-4">
                        <Sparkles className="w-6 h-6 text-amber-400 shrink-0 mt-0.5" />
                        <div>
                          <strong className="font-bold text-amber-300 block text-sm mb-1">
                            Kockens Hemliga Knep
                          </strong>
                          <p className="text-xs sm:text-sm text-slate-300 leading-relaxed">
                            {currentRecipe.kockens_tips}
                          </p>
                        </div>
                      </div>
                    )}

                  </div>

                </div>

              </div>
            ) : (
              /* RAW JSON MODE VIEW */
              <div className="bg-slate-900 border border-slate-800 rounded-3xl p-6 space-y-4 shadow-2xl">
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-2 text-slate-300 font-mono text-sm">
                    <Code className="w-4 h-4 text-amber-400" />
                    <span>Gemini API Backend Return Payload (JSON)</span>
                  </div>
                  <button
                    onClick={() => copyToClipboard(rawJsonResponse, "Giltig JSON")}
                    className="px-3 py-1.5 bg-amber-500 hover:bg-amber-400 text-slate-950 font-bold rounded-xl text-xs flex items-center gap-2"
                  >
                    <Copy className="w-3.5 h-3.5" />
                    Kopiera JSON
                  </button>
                </div>

                <pre className="bg-slate-950 p-5 rounded-2xl border border-slate-800 text-amber-300 font-mono text-xs overflow-x-auto leading-relaxed max-h-[600px]">
                  {rawJsonResponse}
                </pre>
              </div>
            )}

          </div>
        )}

        {/* ========================================================================= */}
        {/* TAB 3: MINIGAME - KOCKUTMANINGEN (MYSTERY BOX)                            */}
        {/* ========================================================================= */}
        {activeTab === 'game' && (
          <MysteryBoxGame showToast={showToast} />
        )}

        {/* ========================================================================= */}
        {/* TAB 4: SAVED RECIPES BOOK                                                */}
        {/* ========================================================================= */}
        {activeTab === 'saved' && (
          <div className="max-w-5xl mx-auto space-y-6 animate-fadeIn">
            <div className="flex items-center justify-between">
              <div>
                <h2 className="text-2xl font-extrabold text-slate-100">Din Receptbok</h2>
                <p className="text-slate-400 text-sm">Sparade AI-genererade recept</p>
              </div>
              <button
                onClick={() => setActiveTab('generator')}
                className="px-4 py-2 bg-amber-500 text-slate-950 font-bold rounded-xl text-xs sm:text-sm flex items-center gap-2"
              >
                <Sparkles className="w-4 h-4" />
                Skapa nytt recept
              </button>
            </div>

            {savedRecipes.length === 0 ? (
              <div className="bg-slate-900 border border-slate-800 rounded-3xl p-12 text-center space-y-4">
                <BookOpen className="w-12 h-12 text-slate-600 mx-auto" />
                <h3 className="text-lg font-bold text-slate-300">Inga sparade recept ännu</h3>
                <p className="text-slate-500 text-sm max-w-md mx-auto">
                  Generera ett recept i skaparläget och klicka på "Spara" för att bygga din personliga kokbok.
                </p>
              </div>
            ) : (
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                {savedRecipes.map((rec, i) => (
                  <div
                    key={i}
                    className="bg-slate-900 border border-slate-800 rounded-3xl p-6 space-y-4 hover:border-slate-700 transition-all shadow-xl flex flex-col justify-between"
                  >
                    <div className="space-y-2">
                      <div className="flex items-center justify-between gap-2">
                        <span className="px-2.5 py-0.5 rounded-full bg-amber-500/10 text-amber-400 text-xs font-bold border border-amber-500/20">
                          {rec.kök}
                        </span>
                        <span className="text-xs font-mono text-slate-500">
                          {rec.tillagningstid_min} min
                        </span>
                      </div>
                      <h3 className="font-extrabold text-slate-100 text-lg">
                        {rec.titel}
                      </h3>
                      <p className="text-slate-400 text-xs line-clamp-2 leading-relaxed">
                        {rec.beskrivning}
                      </p>
                    </div>

                    <div className="flex items-center justify-between pt-4 border-t border-slate-800">
                      <span className="text-xs text-slate-500 font-mono">
                        {rec.ingredienser?.length} ingredienser
                      </span>
                      <button
                        onClick={() => {
                          setCurrentRecipe(rec);
                          setRawJsonResponse(JSON.stringify(rec, null, 2));
                          setActiveTab('recipe');
                        }}
                        className="px-3.5 py-1.5 bg-slate-800 hover:bg-slate-700 text-amber-300 text-xs font-bold rounded-xl flex items-center gap-1.5 transition-colors border border-slate-700"
                      >
                        <span>Laga nu</span>
                        <ChevronRight className="w-3.5 h-3.5" />
                      </button>
                    </div>
                  </div>
                ))}
              </div>
            )}
          </div>
        )}

        {/* ========================================================================= */}
        {/* TAB 5: BACKEND JSON INSPECTOR                                             */}
        {/* ========================================================================= */}
        {activeTab === 'inspector' && (
          <div className="max-w-4xl mx-auto space-y-6 animate-fadeIn">
            <div className="space-y-2">
              <h2 className="text-2xl font-extrabold text-slate-100 flex items-center gap-2">
                <Code className="w-6 h-6 text-amber-400" />
                Backend JSON Developer Inspector
              </h2>
              <p className="text-slate-400 text-sm">
                Inspektera den råa datastrukturen och Gemini API-anropet. Perfekt för utvecklare och testning.
              </p>
            </div>

            <div className="bg-slate-900 border border-slate-800 rounded-3xl p-6 space-y-6 shadow-2xl">
              
              {/* Validation Badge */}
              <div className="flex flex-wrap items-center justify-between gap-4 bg-slate-950 p-4 rounded-2xl border border-slate-800">
                <div className="flex items-center gap-3">
                  <div className="w-3 h-3 rounded-full bg-emerald-500 animate-pulse" />
                  <div>
                    <span className="text-xs font-bold text-slate-200 block">JSON Schema Validering: PASS</span>
                    <span className="text-[10px] text-slate-500 font-mono">Schema: gemini-3-flash-preview strict mode</span>
                  </div>
                </div>

                <div className="flex gap-2">
                  <button
                    onClick={() => copyToClipboard(rawJsonResponse, "JSON Payload")}
                    className="px-3 py-1.5 bg-slate-800 hover:bg-slate-700 text-slate-200 text-xs font-bold rounded-xl border border-slate-700 flex items-center gap-1.5"
                  >
                    <Copy className="w-3 h-3 text-amber-400" />
                    Kopiera Svar
                  </button>
                </div>
              </div>

              {/* JSON Payload Viewer */}
              <div className="space-y-2">
                <label className="text-xs font-bold text-slate-400 uppercase tracking-wider block">
                  Senaste AI Svars-JSON:
                </label>
                <pre className="bg-slate-950 p-5 rounded-2xl border border-slate-800 text-amber-300 font-mono text-xs overflow-x-auto leading-relaxed max-h-[400px]">
                  {rawJsonResponse}
                </pre>
              </div>

              {/* Request Config Viewer */}
              {lastApiPayload && (
                <div className="space-y-2">
                  <label className="text-xs font-bold text-slate-400 uppercase tracking-wider block">
                    Senaste API Anrops-Payload:
                  </label>
                  <pre className="bg-slate-950 p-5 rounded-2xl border border-slate-800 text-slate-400 font-mono text-xs overflow-x-auto leading-relaxed max-h-[250px]">
                    {JSON.stringify(lastApiPayload, null, 2)}
                  </pre>
                </div>
              )}

            </div>
          </div>
        )}

      </main>

      {/* Footer */}
      <footer className="border-t border-slate-900 bg-slate-950/80 py-6 mt-12 text-center text-xs text-slate-600">
        <div className="max-w-7xl mx-auto px-4 flex flex-col sm:flex-row items-center justify-between gap-4">
          <div className="flex items-center gap-2">
            <ChefHat className="w-4 h-4 text-amber-500" />
            <span className="font-bold text-slate-400">GourmetAI Studio</span>
            <span>- Genererad ren svensk JSON via Gemini API</span>
          </div>
          <p>© 2026 Interaktiv Recept-App. Alla koder self-contained.</p>
        </div>
      </footer>

    </div>
  );
}

// ============================================================================
// MINIGAME COMPONENT: KOCKUTMANINGEN - MYSTERY BOX & FLAVOR BALANCER
// ============================================================================
function MysteryBoxGame({ showToast }) {
  const MYSTERY_DISHES = [
    {
      title: "Glacerad Anka med Apelsin & Rödvin",
      ingredients: ["Ankbröst", "Färsk Apelsin", "Timjan", "Rödvin", "Salladslök"],
      targetFlavors: { salta: 60, syra: 75, sotma: 70, hetta: 20, umami: 85 }
    },
    {
      title: "Rökig Mexikansk Mole med Kyckling",
      ingredients: ["Kycklinglår", "Mörk Choklad (85%)", "Chili Chipotle", "Spiskummin", "Lime"],
      targetFlavors: { salta: 55, syra: 50, sotma: 40, hetta: 80, umami: 90 }
    },
    {
      title: "Svensk Smörstekt Gös med Sandefjordsås & Forellrom",
      ingredients: ["Gösfilé", "Vispgrädde", "Citron", "Dill", "Forellrom"],
      targetFlavors: { salta: 70, syra: 80, sotma: 25, hetta: 10, umami: 75 }
    }
  ];

  const [currentDishIndex, setCurrentDishIndex] = useState(0);
  const dish = MYSTERY_DISHES[currentDishIndex];

  // Player Flavor Sliders (0 - 100)
  const [flavors, setFlavors] = useState({
    salta: 40,
    syra: 30,
    sotma: 30,
    hetta: 20,
    umami: 50
  });

  const [isJudging, setIsJudging] = useState(false);
  const [criticReview, setCriticReview] = useState(null);

  const handleNewMysteryBox = () => {
    const nextIdx = (currentDishIndex + 1) % MYSTERY_DISHES.length;
    setCurrentDishIndex(nextIdx);
    setFlavors({
      salta: 30 + Math.floor(Math.random() * 30),
      syra: 20 + Math.floor(Math.random() * 30),
      sotma: 20 + Math.floor(Math.random() * 30),
      hetta: 10 + Math.floor(Math.random() * 30),
      umami: 40 + Math.floor(Math.random() * 30)
    });
    setCriticReview(null);
    showToast(" Ny Mysterielåda öppnad!");
  };

  const applySeasoning = (type, delta) => {
    setFlavors(prev => ({
      ...prev,
      [type]: Math.min(100, Math.max(0, prev[type] + delta))
    }));
  };

  const handleJudgeDish = async () => {
    setIsJudging(true);
    setCriticReview(null);

    const apiKey = "";
    const apiUrl = `https://generativelanguage.googleapis.com/v1beta/models/gemini-3-flash-preview:generateContent?key=${apiKey}`;

    const prompt = `Du är den hårda men underhållande stjärnkrogen-matkritikern "Monsieur Gusteau". 
Kocken har tillagat rätten "${dish.title}" med ingredienserna: ${dish.ingredients.join(', ')}.

Kockens Smakbalans (0-100):
- Sälta: ${flavors.salta} (Mål: ${dish.targetFlavors.salta})
- Syra: ${flavors.syra} (Mål: ${dish.targetFlavors.syra})
- Sötma: ${flavors.sotma} (Mål: ${dish.targetFlavors.sotma})
- Hetta: ${flavors.hetta} (Mål: ${dish.targetFlavors.hetta})
- Umami: ${flavors.umami} (Mål: ${dish.targetFlavors.umami})

Generera ett betyg i exakt JSON-format med följande felder:
- "score": heltal 0-100 baserat på hur nära smakbalansen är målet
- "michelinStars": heltal 0 till 3
- "title": en dramatisk rubrik på svensk gourmet-franska/svenska
- "quote": ett underhållande citat från kritikern
- "feedback": en kort förklaring vad som var bra eller saknades i smakerna`;

    const jsonSchema = {
      type: "OBJECT",
      properties: {
        score: { type: "INTEGER" },
        michelinStars: { type: "INTEGER" },
        title: { type: "STRING" },
        quote: { type: "STRING" },
        feedback: { type: "STRING" }
      },
      required: ["score", "michelinStars", "title", "quote", "feedback"]
    };

    const payload = {
      contents: [{ parts: [{ text: prompt }] }],
      generationConfig: {
        responseMimeType: "application/json",
        responseSchema: jsonSchema
      }
    };

    try {
      const response = await fetchWithRetry(apiUrl, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload)
      });
      const data = await response.json();
      const rawText = data?.candidates?.[0]?.content?.parts?.[0]?.text;
      if (rawText) {
        setCriticReview(JSON.parse(rawText));
      }
    } catch (e) {
      // Fallback offline critique math
      const diff = Math.abs(flavors.salta - dish.targetFlavors.salta) +
                   Math.abs(flavors.syra - dish.targetFlavors.syra) +
                   Math.abs(flavors.sotma - dish.targetFlavors.sotma);
      const calculatedScore = Math.max(20, 100 - Math.round(diff / 3));
      setCriticReview({
        score: calculatedScore,
        michelinStars: calculatedScore > 85 ? 3 : calculatedScore > 65 ? 2 : 1,
        title: "Kritikerns Omdöme",
        quote: calculatedScore > 80 ? "Magnifique! En symfoni i gommen." : "Bra försök, men balansen behöver finjusteras.",
        feedback: "En fin insats med mysterielådans råvaror."
      });
    } finally {
      setIsJudging(false);
    }
  };

  return (
    <div className="max-w-4xl mx-auto space-y-8 animate-fadeIn">
      
      {/* Game Header */}
      <div className="text-center space-y-3">
        <div className="inline-flex items-center gap-2 px-3.5 py-1 rounded-full bg-gradient-to-r from-orange-500/20 to-amber-500/20 border border-orange-500/30 text-orange-400 text-xs font-bold">
          <Dices className="w-4 h-4" />
          Mini-spel: Kockutmaningen
        </div>
        <h2 className="text-3xl sm:text-4xl font-black text-slate-100">
          Mysterielådan & Smakbalansen
        </h2>
        <p className="text-slate-400 text-sm max-w-lg mx-auto">
          Öppna mysterielådan, använd kryddstängerna för att balansera de 5 grundsmakerna och imponera på AI-kritikern Gusteau!
        </p>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-12 gap-8">
        
        {/* LEFT COLUMN: Mystery Box Dish & Ingredients */}
        <div className="md:col-span-5 space-y-6">
          <div className="bg-slate-900 border border-slate-800 p-6 rounded-3xl space-y-4 shadow-xl">
            <div className="flex items-center justify-between">
              <span className="text-xs font-mono text-amber-400 font-bold uppercase tracking-wider">
                Mysterielåda #{currentDishIndex + 1}
              </span>
              <button
                onClick={handleNewMysteryBox}
                className="px-3 py-1 bg-slate-800 hover:bg-slate-700 text-slate-300 rounded-xl text-xs font-bold border border-slate-700 flex items-center gap-1.5 transition-colors"
              >
                <RefreshCw className="w-3 h-3" />
                Ny Låda
              </button>
            </div>

            <h3 className="text-xl font-extrabold text-slate-100">
              {dish.title}
            </h3>

            <div className="space-y-2 pt-2">
              <label className="text-xs font-bold text-slate-400 uppercase tracking-wider">
                Hemliga Råvaror i lådan:
              </label>
              <div className="flex flex-wrap gap-2">
                {dish.ingredients.map(ing => (
                  <span key={ing} className="px-3 py-1.5 bg-slate-950 border border-slate-800 rounded-xl text-xs font-semibold text-amber-300">
                     {ing}
                  </span>
                ))}
              </div>
            </div>
          </div>

          {/* Quick Seasoning Action Buttons */}
          <div className="bg-slate-900 border border-slate-800 p-6 rounded-3xl space-y-3 shadow-xl">
            <label className="text-xs font-bold text-slate-300 uppercase tracking-wider block">
              Snabbkryddning vid spisen:
            </label>
            <div className="grid grid-cols-2 gap-2 text-xs font-bold">
              <button onClick={() => applySeasoning('salta', +10)} className="p-2.5 bg-slate-950 hover:bg-slate-800 border border-slate-800 rounded-xl text-slate-200">
                + Flingsalt
              </button>
              <button onClick={() => applySeasoning('syra', +10)} className="p-2.5 bg-slate-950 hover:bg-slate-800 border border-slate-800 rounded-xl text-amber-300">
                + Citronsaft
              </button>
              <button onClick={() => applySeasoning('sotma', +10)} className="p-2.5 bg-slate-950 hover:bg-slate-800 border border-slate-800 rounded-xl text-orange-300">
                + En klick honung
              </button>
              <button onClick={() => applySeasoning('hetta', +10)} className="p-2.5 bg-slate-950 hover:bg-slate-800 border border-slate-800 rounded-xl text-red-400">
                + Hackad chili
              </button>
            </div>
          </div>
        </div>

        {/* RIGHT COLUMN: Flavor Sliders & Critic Evaluation */}
        {}
        <div className="md:col-span-7 space-y-6">
          <div className="bg-slate-900 border border-slate-800 p-6 rounded-3xl space-y-5 shadow-xl">
            <h3 className="font-bold text-slate-100 text-lg flex items-center gap-2">
              <Sliders className="w-5 h-5 text-amber-400" />
              Balansera de 5 Grundsmakerna
            </h3>

            {/* Flavor Sliders */}
            <div className="space-y-4">
              {[
                { key: 'salta', label: 'Sälta', color: 'bg-slate-300', text: 'text-slate-300' },
                { key: 'syra', label: 'Syra', color: 'bg-amber-400', text: 'text-amber-400' },
                { key: 'sotma', label: 'Sötma', color: 'bg-orange-400', text: 'text-orange-400' },
                { key: 'hetta', label: 'Hetta', color: 'bg-red-500', text: 'text-red-400' },
                { key: 'umami', label: 'Umami', color: 'bg-amber-600', text: 'text-amber-500' },
              ].map(item => (
                <div key={item.key} className="space-y-1.5">
                  <div className="flex justify-between text-xs font-bold">
                    <span className={item.text}>{item.label}</span>
                    <span className="font-mono text-slate-400">{flavors[item.key]} / 100</span>
                  </div>
                  <input
                    type="range"
                    min="0"
                    max="100"
                    value={flavors[item.key]}
                    onChange={(e) => setFlavors({ ...flavors, [item.key]: parseInt(e.target.value) })}
                    className="w-full accent-amber-500 bg-slate-950 h-2 rounded-lg cursor-pointer"
                  />
                </div>
              ))}
            </div>

            {/* Submit to Critic Button */}
            <button
              onClick={handleJudgeDish}
              disabled={isJudging}
              className="w-full py-3.5 px-6 rounded-2xl bg-gradient-to-r from-orange-500 via-amber-500 to-orange-600 hover:from-orange-400 hover:to-amber-400 text-slate-950 font-black text-sm sm:text-base shadow-lg transition-all flex items-center justify-center gap-2 cursor-pointer disabled:opacity-50"
            >
              {isJudging ? (
                <>
                  <RefreshCw className="w-5 h-5 animate-spin" />
                  <span>Monsieur Gusteau smakar av rätten...</span>
                </>
              ) : (
                <>
                  <Award className="w-5 h-5" />
                  <span>Servera & Få Kritikerns Betyg</span>
                </>
              )}
            </button>
          </div>

          {/* Critic Review Output */}
          {criticReview && (
            <div className="bg-gradient-to-br from-slate-900 via-slate-900 to-amber-950/40 border border-amber-500/30 p-6 rounded-3xl space-y-4 shadow-2xl animate-fadeIn">
              <div className="flex items-center justify-between">
                <div>
                  <span className="text-xs font-mono text-amber-400 uppercase tracking-widest font-bold">
                    Monsieur Gusteaus Betyg
                  </span>
                  <h4 className="text-xl font-extrabold text-slate-100">
                    {criticReview.title}
                  </h4>
                </div>
                
                {/* Score Circle */}
                <div className="w-14 h-14 rounded-2xl bg-amber-500 text-slate-950 font-black text-xl flex items-center justify-center shadow-lg shadow-amber-500/20 shrink-0">
                  {criticReview.score}
                </div>
              </div>

              {/* Michelin Stars */}
              <div className="flex items-center gap-1">
                {[...Array(3)].map((_, i) => (
                  <Star
                    key={i}
                    className={`w-6 h-6 ${
                      i < criticReview.michelinStars
                        ? 'text-amber-400 fill-amber-400'
                        : 'text-slate-700'
                    }`}
                  />
                ))}
                <span className="text-xs text-slate-400 font-mono ml-2">
                  ({criticReview.michelinStars} Michelin-stjärnor)
                </span>
              </div>

              <blockquote className="text-sm italic text-amber-200/90 border-l-2 border-amber-500 pl-4 py-1">
                "{criticReview.quote}"
              </blockquote>

              <p className="text-xs sm:text-sm text-slate-300 leading-relaxed">
                {criticReview.feedback}
              </p>
            </div>
          )}

        </div>

      </div>

    </div>
  );
}