/* Tab: Create — landing con la cabecera de saludo y los 4 modos de creación de vídeo.
   Cada modo se representa con una imagen (screenshot). Al pulsar uno se abre el
   creador correspondiente ya en ese modo. */

const CREATE_LANDING_MODES = [
  { id: "video_avatar", target: "video_avatar", Icon: IconUser, img: "/assets/asset_avatar-thumbnail.png",
    label: "Video Avatar",       desc: "Sube tu vídeo de avatar y monta con B-Roll e imágenes." },
  { id: "personaje",   target: "personaje",   Icon: IconUser,
    label: "Imágenes Personaje", desc: "Sube tu audio y el personaje del canal aparece en las imágenes." },
  { id: "imagenes_ia", target: "imagenes_ia", Icon: IconSparkle, img: "/assets/asset_imagenes-ia.jpg",
    label: "Imágenes IA",        desc: "Guion generado con IA o propio, ilustrado con imágenes." },
  { id: "stock_clips", target: "stock_clips", Icon: IconClap, badge: "BETA",
    label: "Clips de stock",     desc: "Montado con clips de Pexels y Pixabay, con fotos opcionales." },
];

function _landingGreeting() {
  const h = new Date().getHours();
  if (h >= 6 && h < 14) return "Buenos días";
  if (h >= 14 && h < 21) return "Buenas tardes";
  return "Buenas noches";
}

function _landingDateLabel() {
  const WD = ["DOMINGO", "LUNES", "MARTES", "MIÉRCOLES", "JUEVES", "VIERNES", "SÁBADO"];
  const MO = ["ENERO", "FEBRERO", "MARZO", "ABRIL", "MAYO", "JUNIO", "JULIO", "AGOSTO",
              "SEPTIEMBRE", "OCTUBRE", "NOVIEMBRE", "DICIEMBRE"];
  const d = new Date();
  return `${WD[d.getDay()]} · ${d.getDate()} ${MO[d.getMonth()]} · ${d.getFullYear()}`;
}

function CreateLandingTab({ currentUser, onPickMode }) {
  const name = currentUser?.username || "";

  return (
    <div className="tab-enter">
      <div className="col" style={{ gap: 28, width: "100%" }}>

        {/* ── Cabecera ── */}
        <div>
          <div style={{
            fontSize: 11, fontWeight: 700, letterSpacing: "0.14em",
            color: "var(--text-4)", textTransform: "uppercase",
          }}>
            {_landingDateLabel()}
          </div>
          <h1 style={{ margin: "10px 0 0", fontSize: 30, fontWeight: 700, color: "var(--text)" }}>
            {_landingGreeting()},{" "}
            <span style={{ color: "var(--accent)", fontStyle: "italic" }}>{name}</span>.
          </h1>
          <p style={{ margin: "8px 0 0", fontSize: 14, color: "var(--text-3)" }}>
            Retoma donde lo dejaste, o empieza algo nuevo.
          </p>
        </div>

        {/* ── Los 4 modos de creación ── */}
        <div>
          <div style={{
            fontSize: 12, fontWeight: 600, color: "var(--text-4)",
            textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 14,
          }}>
            Formas de crear vídeo
          </div>
          <div style={{
            display: "grid", gap: 16,
            gridTemplateColumns: "repeat(4, minmax(0, 1fr))",
          }}>
            {CREATE_LANDING_MODES.map((m) => (
              <button key={m.id} onClick={() => onPickMode && onPickMode(m)} className="card"
                style={{
                  padding: 0, overflow: "hidden", textAlign: "left", cursor: "pointer",
                  border: "1px solid var(--border)", display: "block",
                }}>
                <div style={{ position: "relative", aspectRatio: "16 / 9", background: "var(--bg-card-2)" }}>
                  {/* Placeholder detrás — visible mientras no exista el screenshot */}
                  <div style={{
                    position: "absolute", inset: 0, display: "flex", flexDirection: "column",
                    alignItems: "center", justifyContent: "center", gap: 8, color: "var(--text-4)",
                  }}>
                    <m.Icon size={30}/>
                    <span style={{ fontSize: 11 }}>Screenshot pendiente</span>
                  </div>
                  {/* Screenshot del modo — `img` explícito o /static/create_modes/<id>.jpg */}
                  <img src={m.img || `/static/create_modes/${m.id}.jpg`} alt={m.label}
                    style={{
                      position: "absolute", inset: 0, width: "100%", height: "100%",
                      objectFit: "cover", background: "var(--bg-card-2)",
                    }}
                    onError={(e) => { e.currentTarget.style.display = "none"; }}/>
                </div>
                <div style={{ padding: "13px 15px" }}>
                  <div style={{ fontSize: 14.5, fontWeight: 600, color: "var(--text)", display: "flex", alignItems: "center", gap: 6 }}>
                    {m.label}
                    {m.badge && <span style={{ fontSize: 9, fontWeight: 700, letterSpacing: "0.06em", padding: "1px 5px", borderRadius: 4, background: "var(--accent-soft)", color: "var(--accent-2)" }}>{m.badge}</span>}
                  </div>
                  <div style={{ fontSize: 12, color: "var(--text-4)", marginTop: 3, lineHeight: 1.5 }}>{m.desc}</div>
                </div>
              </button>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { CreateLandingTab });