// ============ GENERATIVE PROJECT COVERS ============
// Picks a glyph based on project category, draws gradient-dark cover with chips.
// DHT11 gets a special animated mini-dashboard.

const GLYPHS = {
  ia: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="0.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
      <path d="M12 2a4 4 0 0 0-4 4v1a4 4 0 0 0-2 7 4 4 0 0 0 2 7v1a4 4 0 0 0 8 0v-1a4 4 0 0 0 2-7 4 4 0 0 0-2-7V6a4 4 0 0 0-4-4z"/>
      <path d="M12 2v20M8 7h-.5M16 7h.5M8 17h-.5M16 17h.5"/>
      <circle cx="9" cy="10" r="0.6" fill="currentColor"/>
      <circle cx="15" cy="14" r="0.6" fill="currentColor"/>
    </svg>
  ),
  robot: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="0.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
      <rect x="4" y="8" width="16" height="12" rx="2"/>
      <path d="M12 4v4M8 2v2M16 2v2"/>
      <circle cx="9" cy="13" r="1.2" fill="currentColor"/>
      <circle cx="15" cy="13" r="1.2" fill="currentColor"/>
      <path d="M9 17h6"/>
    </svg>
  ),
  iot: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="0.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
      <rect x="6" y="6" width="12" height="12" rx="1.5"/>
      <path d="M9 9h6v6H9z"/>
      <path d="M4 9h2M4 12h2M4 15h2M18 9h2M18 12h2M18 15h2M9 4v2M12 4v2M15 4v2M9 18v2M12 18v2M15 18v2"/>
    </svg>
  ),
  web: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="0.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
      <circle cx="12" cy="12" r="9"/>
      <path d="M3 12h18M12 3a13 13 0 0 1 0 18M12 3a13 13 0 0 0 0 18"/>
    </svg>
  ),
  academic: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="0.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
      <path d="M2 9l10-5 10 5-10 5z"/>
      <path d="M6 11v5c0 1 3 3 6 3s6-2 6-3v-5"/>
      <path d="M22 9v6"/>
    </svg>
  )
};

function pickGlyph(p) {
  if (p.id === 'dht11') return 'iot';
  const cats = p.cats || [];
  if (cats.includes('Robótica')) return 'robot';
  if (cats.includes('IA')) return 'ia';
  if (cats.includes('Académico')) return 'academic';
  if (cats.includes('Web')) return 'web';
  return 'web';
}

function GenericCover({ p }) {
  const key = pickGlyph(p);
  return (
    <div className="gen-cover" aria-hidden>
      <div className="gc-name">{p.id}.angelo.dev</div>
      <div className="gc-glyph">{GLYPHS[key]}</div>
      <div className="gc-chips">
        {p.stack.slice(0, 4).map((s, i) => <span key={i} className="gc-chip">{s}</span>)}
      </div>
    </div>
  );
}

// DHT11 mini-dashboard cover ----------------------------------------------------
function DHTCover({ p }) {
  const [temp, setTemp] = React.useState(24.5);
  const [hum, setHum] = React.useState(58);
  const reduce = window.useReducedMotion();
  const [pathTemp, setPathTemp] = React.useState('');
  const [pathHum, setPathHum] = React.useState('');
  const [areaTemp, setAreaTemp] = React.useState('');
  const [areaHum, setAreaHum] = React.useState('');

  React.useEffect(() => {
    let raf;
    const W = 200, H = 80;
    const N = 20;
    const tempSeries = Array.from({length: N}, (_, i) => 24 + Math.sin(i * 0.4) * 1.5 + Math.random() * 0.4);
    const humSeries = Array.from({length: N}, (_, i) => 58 + Math.cos(i * 0.35) * 4 + Math.random() * 1);
    let t = 0;
    const norm = (v, min, max) => H - ((v - min) / (max - min)) * (H - 10) - 5;
    const tick = () => {
      t += 0.06;
      // shift series each frame
      tempSeries.shift();
      tempSeries.push(24 + Math.sin(t * 0.6) * 1.8 + Math.random() * 0.3);
      humSeries.shift();
      humSeries.push(58 + Math.cos(t * 0.5) * 4 + Math.random() * 0.8);
      const dx = W / (N - 1);
      const tPts = tempSeries.map((v, i) => [i * dx, norm(v, 20, 30)]);
      const hPts = humSeries.map((v, i) => [i * dx, norm(v, 40, 70)]);
      const toPath = (pts) => 'M ' + pts.map(p => p.join(' ')).join(' L ');
      const toArea = (pts) => toPath(pts) + ` L ${W} ${H} L 0 ${H} Z`;
      setPathTemp(toPath(tPts));
      setPathHum(toPath(hPts));
      setAreaTemp(toArea(tPts));
      setAreaHum(toArea(hPts));
      const lastTemp = tempSeries[tempSeries.length - 1];
      const lastHum = humSeries[humSeries.length - 1];
      setTemp(lastTemp.toFixed(1));
      setHum(Math.round(lastHum));
      if (!reduce) raf = requestAnimationFrame(() => setTimeout(tick, 220));
    };
    tick();
    return () => { if (raf) cancelAnimationFrame(raf); };
  }, [reduce]);

  return (
    <div className="dht-cover" aria-hidden>
      <div className="dht-row">
        <div className="dht-stat">
          <div className="lbl"><span className="pulse" /> Temperatura</div>
          <div className="val temp">{temp}°C</div>
        </div>
        <div className="dht-stat">
          <div className="lbl violet"><span className="pulse" /> Humedad</div>
          <div className="val hum">{hum}% HR</div>
        </div>
      </div>
      <div className="dht-chart">
        <div className="legend">
          <span><i style={{background: 'var(--cyan)'}} /> TEMP</span>
          <span><i style={{background: 'var(--violet)'}} /> HUM</span>
        </div>
        <svg viewBox="0 0 200 80" preserveAspectRatio="none">
          <defs>
            <linearGradient id="dhtTempGrad" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stopColor="#38bdf8" stopOpacity="0.6"/>
              <stop offset="100%" stopColor="#38bdf8" stopOpacity="0"/>
            </linearGradient>
            <linearGradient id="dhtHumGrad" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stopColor="#8b5cf6" stopOpacity="0.5"/>
              <stop offset="100%" stopColor="#8b5cf6" stopOpacity="0"/>
            </linearGradient>
          </defs>
          {[0,1,2,3].map(i => (
            <line key={i} x1="0" x2="200" y1={20*i+10} y2={20*i+10} className="grid-line" />
          ))}
          <path d={areaTemp} className="area-temp" />
          <path d={areaHum} className="area-hum" />
          <path d={pathTemp} fill="none" stroke="#38bdf8" strokeWidth="1.4" style={{filter:'drop-shadow(0 0 4px rgba(56,189,248,0.7))'}} />
          <path d={pathHum} fill="none" stroke="#8b5cf6" strokeWidth="1.4" style={{filter:'drop-shadow(0 0 4px rgba(139,92,246,0.7))'}} />
        </svg>
      </div>
    </div>
  );
}

function ProjectCover({ p }) {
  if (p.id === 'dht11') return <DHTCover p={p} />;
  return <GenericCover p={p} />;
}

window.ProjectCover = ProjectCover;
