import React, { useState, useEffect } from "react";

export default function HoroscopoMemes() {
  const signos = [
    "Aries","Tauro","Géminis","Cáncer","Leo","Virgo","Libra","Escorpio","Sagitario","Capricornio","Acuario","Piscis"
  ];

  const templates = [
    "{intro} {signWord} {middle}, {punch}",
    "Atención {signWord}: {intro} y {punch}",
    "Hoy {signWord} va a {middle} — {punch}",
    "Si sos {signWord}, {intro}. {punch}",
    "No es broma: {signWord} {middle}. {punch}"
  ];

  const intros = [
    "la vida te da una oportunidad", "el universo te guiña un ojo", "tu energía explota como un meme",
    "tu ego pide permiso", "el café te entiende hoy", "la pereza se disfraza de sabiduría",
    "te aparece una excusa divina", "tu vieja intuición hace trending",
    "hoy la suerte se emborracha por vos", "el destino hace un chiste interno contigo",
    "la realidad se quiebra pero vos ni enterado", "el caos te manda un mensajito cariñoso"
  ];

  const middles = [
    "meter un cambio de actitud", "romper la rutina con estilo", "gritarle al destino que vuelva mañana",
    "hacer algo estúpido pero épico", "aceptar que sos un genio incomprendido", "cobrar revancha en silencio",
    "enamorar a la vida por accidente", "ganar sin buscarlo",
    "tomar decisiones que harían llorar a un coach", "crear problemas para sentirte vivo",
    "meterte en quilombos sólo para el plot twist", "romper corazones y tazas por igual"
  ];

  const punchlines = [
    "pero con humor y chocolate", "y la única consecuencia será la envidia ajena", "así que ponete las pilas, dormilón",
    "ni te confíes; igual hacelo", "y después vas a contar la historia como si fuera una serie", "no lo pienses, justificá después",
    "si fallás, al menos quedate con la anécdota", "perfecto para tu biografía de Instagram",
    "porque a lo dramático le ganás con sarcasmo", "y si sale mal, echale la culpa al horóscopo",
    "para después presumirlo como si fuera arte", "porque el aburrimiento es tu peor enemigo"
  ];

  const signModifiers = {
    Aries: ["Aries","el toro de fuego","capitán del impulso"],
    Tauro: ["Tauro","el de la paciencia brutal","fan del asado"],
    Géminis: ["Géminis","la doble versión","charla infinita"],
    Cáncer: ["Cáncer","corazón con GPS","emotivo profesional"],
    Leo: ["Leo","rey del drama","millonario de autoestima"],
    Virgo: ["Virgo","obsesivo con estilo","editor de la vida"],
    Libra: ["Libra","juez del balance","amante de la armonía"],
    Escorpio: ["Escorpio","misterio en botas","experto en miradas"],
    Sagitario: ["Sagitario","aventurero sin mapa","humor en mochila"],
    Capricornio: ["Capricornio","trabajador implacable","CEO de su destino"],
    Acuario: ["Acuario","visionario raro","hipster del futuro"],
    Piscis: ["Piscis","soñador profesional","poeta en construcción"]
  };

  const poolSize = templates.length * intros.length * middles.length * punchlines.length * 3;

  const [selectedSign, setSelectedSign] = useState(signos[0]);
  const [phrase, setPhrase] = useState("");
  const [history, setHistory] = useState([]);
  const [name, setName] = useState("");
  const [count, setCount] = useState(0);
  const [medal, setMedal] = useState("");
  const [firstLoad, setFirstLoad] = useState(true);

  useEffect(() => {
    const savedName = localStorage.getItem("horoscopoName");
    const savedHistory = JSON.parse(localStorage.getItem("horoscopoHistory") || "[]");
    const savedCount = parseInt(localStorage.getItem("horoscopoCount")) || 0;
    if (savedName) setName(savedName);
    if (savedHistory.length) setHistory(savedHistory);
    setCount(savedCount);
    updateMedal(savedCount);
    setFirstLoad(!savedName);
  }, []);

  useEffect(() => {
    localStorage.setItem("horoscopoHistory", JSON.stringify(history));
    localStorage.setItem("horoscopoCount", count);
  }, [history, count]);

  function updateMedal(c) {
    if (c >= 50) setMedal("Maestro motivador");
    else if (c >= 20) setMedal("Experto en sarcasmo");
    else if (c >= 5) setMedal("Aprendiz de meme");
    else setMedal("");
  }

  function generatePhrase() {
    const t = templates[Math.floor(Math.random() * templates.length)];
    const i = intros[Math.floor(Math.random() * intros.length)];
    const m = middles[Math.floor(Math.random() * middles.length)];
    const p = punchlines[Math.floor(Math.random() * punchlines.length)];
    const mods = signModifiers[selectedSign];
    const s = mods[Math.floor(Math.random() * mods.length)];

    const raw = t.replace("{intro}", i).replace("{middle}", m).replace("{punch}", p).replace(/\{signWord\}/g, s);
    const emojis = [" 😂"," 🤌"," 😒"," 🙃"," 🔥"," ✨"," 🐍"," 🦄"];
    const maybeEmoji = Math.random() > 0.5 ? emojis[Math.floor(Math.random() * emojis.length)] : "";

    const final = raw + maybeEmoji;
    setPhrase(final);
    setHistory(prev => [final, ...prev].slice(0, 20));
    const newCount = count + 1;
    setCount(newCount);
    updateMedal(newCount);
  }

  function sharePhrase() {
    if (navigator.share) {
      navigator.share({ text: phrase });
    } else {
      alert("Tu navegador no soporta compartir directo");
    }
  }

  if (firstLoad) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-black text-white">
        <div className="p-6 bg-white/5 rounded-lg">
          <h2 className="text-xl mb-4">Poné tu nombre</h2>
          <input className="p-2 rounded bg-white/10 text-white mb-4 w-full" value={name} onChange={(e) => setName(e.target.value)} />
          <button onClick={() => { if (name.trim()) { localStorage.setItem("horoscopoName", name.trim()); setFirstLoad(false); } }} className="px-4 py-2 bg-purple-500 rounded">Guardar</button>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen flex items-center justify-center p-6" style={{ background: 'linear-gradient(135deg, #000000 0%, #1a1a1a 30%, #3a0055 60%, #000000 100%)' }}>
      <div className="w-full max-w-4xl bg-[rgba(0,0,0,0.6)] backdrop-blur-md rounded-2xl p-8 shadow-2xl border border-white/10">
        <header className="flex items-center justify-between mb-6 text-white">
          <div>
            <h1 className="text-4xl font-extrabold">Horóscopo memes</h1>
            <p>@Maxi_carus</p>
            <p>Hola {name}! {medal && `🏅 ${medal}`}</p>
            <p>Frases generadas: {count}</p>
          </div>
          <div>
            <h2 className="text-lg font-bold">Ranking Global (fake)</h2>
            <ol className="text-sm">
              <li>1. @Maxi_carus</li>
              <li>2. El resto que se esfuerce</li>
              <li>3. Gente random</li>
            </ol>
          </div>
        </header>

        <main>
          <label className="block text-white mb-2">Elegí tu signo</label>
          <select value={selectedSign} onChange={(e) => setSelectedSign(e.target.value)} className="w-full p-3 rounded-lg bg-white/5 text-white mb-4">
            {signos.map(s => <option key={s} value={s}>{s}</option>)}
          </select>
          <button onClick={generatePhrase} className="w-full p-3 rounded-lg font-bold bg-gradient-to-r from-purple-500 to-red-500 text-black mb-4">Generar frase</button>
          {phrase && (
            <div className="p-4 bg-white/10 rounded text-white mb-4">
              {phrase}
              <div className="flex gap-2 mt-2">
                <button onClick={sharePhrase} className="px-3 py-1 bg-blue-500 rounded">Compartir</button>
              </div>
            </div>
          )}
          <h3 className="text-white mb-2">Historial privado</h3>
          <div className="space-y-2 text-white/80">
            {history.map((h, i) => <div key={i} className="bg-white/5 p-2 rounded">{h}</div>)}
          </div>
        </main>
      </div>
    </div>
  );
}