// Teleprompter Editor — 1280x800, 3-column layout

const Ic = ({ size = 16, stroke = 1.75, children }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
       stroke="currentColor" strokeWidth={stroke}
       strokeLinecap="round" strokeLinejoin="round">{children}</svg>
);
const IcFile     = (p) => <Ic {...p}><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></Ic>;
const IcChev     = (p) => <Ic {...p} stroke={2}><polyline points="6 9 12 15 18 9"/></Ic>;
const IcClipPst  = (p) => <Ic {...p}><rect x="8" y="2" width="8" height="4" rx="1"/><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/></Ic>;
const IcTrash2   = (p) => <Ic {...p}><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/></Ic>;
const IcSave     = (p) => <Ic {...p}><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/></Ic>;
const IcArrR2    = (p) => <Ic {...p} stroke={2}><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></Ic>;
const IcPlus     = (p) => <Ic {...p} stroke={2}><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></Ic>;
const IcDot      = (p) => <Ic {...p}><circle cx="12" cy="12" r="3" fill="currentColor"/></Ic>;
const IcText     = (p) => <Ic {...p}><polyline points="4 7 4 4 20 4 20 7"/><line x1="9" y1="20" x2="15" y2="20"/><line x1="12" y1="4" x2="12" y2="20"/></Ic>;
const IcClock    = (p) => <Ic {...p}><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></Ic>;
const IcLogoSm   = (p) => <Ic {...p} stroke={2}><path d="M12 2v4"/><path d="M12 18v4"/><path d="M4.93 4.93l2.83 2.83"/><path d="M16.24 16.24l2.83 2.83"/><path d="M2 12h4"/><path d="M18 12h4"/><path d="M4.93 19.07l2.83-2.83"/><path d="M16.24 7.76l2.83-2.83"/></Ic>;

const SCRIPTS = [
  { id: "q2", title: "Presentación Q2", duration: "8 min", active: true },
  { id: "demo", title: "Demo producto", duration: "12 min" },
  { id: "pitch", title: "Pitch inversores", duration: "5 min" },
];

const MARKERS = [
  { label: "Introducción", time: "0:00" },
  { label: "Problema",     time: "0:45" },
  { label: "Solución",     time: "1:30" },
  { label: "Demo",         time: "2:15" },
];

const SAMPLE = `Buenas tardes a todos, gracias por acompañarnos en esta sesión.

Hoy quiero presentaros los resultados del segundo trimestre y la dirección que vamos a tomar en los próximos meses.

Hemos cerrado el trimestre con un crecimiento del 23% respecto al periodo anterior, impulsado principalmente por la adopción de nuestro nuevo módulo de copiloto en reuniones técnicas.

El reto que identificamos hace seis meses era claro: los consultores IT autónomos pierden negocio cuando no saben responder con suficiente claridad a las preguntas técnicas de sus clientes en tiempo real.

Nuestra solución parte de tres pilares: escucha en tiempo real, detección de preguntas y sugerencia contextual.`;

const Editor = () => {
  const [openLoad, setOpenLoad] = React.useState(false);
  const [text, setText] = React.useState(SAMPLE);
  const [active, setActive] = React.useState("q2");
  const wordCount = text.trim() ? text.trim().split(/\s+/).length : 0;
  const charCount = text.length;
  const minutes = Math.floor(wordCount / 220);
  const seconds = Math.round(((wordCount / 220) - minutes) * 60);
  const dur = `${minutes}:${String(seconds).padStart(2, "0")}`;

  return (
    <div className="tp-root" data-screen-label="06 Teleprompter Editor">
      {/* Top header */}
      <header className="dash-header">
        <div className="dash-brand">
          <div className="dash-mark"><IcLogoSm size={14} /></div>
          <span className="dash-brand-name">Copilotoprompter</span>
          <span className="bcrumb">/ Teleprompter</span>
        </div>
        <div className="dash-h-spacer" />
        <div className="avatar">JM</div>
      </header>

      <div className="tp-body">
        {/* LEFT — Sidebar */}
        <aside className="tp-side">
          <div className="tp-side-head">
            <span>Guiones guardados</span>
          </div>
          <div className="tp-script-list">
            {SCRIPTS.map((s) => (
              <button
                key={s.id}
                className={`tp-script ${active === s.id ? "active" : ""}`}
                onClick={() => setActive(s.id)}
              >
                <span className="tp-script-title">{s.title}</span>
                <span className="tp-script-meta">{s.duration}</span>
              </button>
            ))}
          </div>
          <button className="tp-side-add">
            <IcPlus size={14} />
            <span>Nuevo guion</span>
          </button>
        </aside>

        {/* CENTER — Editor */}
        <section className="tp-center">
          <div className="tp-toolbar">
            <div className="tp-tb-group">
              <div className="tp-tb-wrap">
                <button className="tp-tb-btn" onClick={() => setOpenLoad((v) => !v)}>
                  <IcFile size={14} />
                  <span>Cargar archivo</span>
                  <IcChev size={12} />
                </button>
                {openLoad && (
                  <div className="tp-tb-menu" onMouseLeave={() => setOpenLoad(false)}>
                    {["PDF", "DOCX", "TXT"].map((f) => (
                      <button key={f} className="tp-tb-menu-item" onClick={() => setOpenLoad(false)}>
                        <IcFile size={12} />
                        <span>Importar {f}</span>
                      </button>
                    ))}
                  </div>
                )}
              </div>
              <button className="tp-tb-btn">
                <IcClipPst size={14} />
                <span>Pegar</span>
              </button>
              <button className="tp-tb-btn" onClick={() => setText("")}>
                <IcTrash2 size={14} />
                <span>Limpiar</span>
              </button>
            </div>

            <span className="tp-tb-sep" />

            <div className="tp-tb-group">
              <button className="tp-tb-btn">
                <IcSave size={14} />
                <span>Guardar guion</span>
              </button>
              <span className="tp-tb-info">
                <IcClock size={12} /> Duración estimada: <b>{dur}</b>
              </span>
            </div>

            <span className="tp-tb-sep" />

            <button className="btn-primary tp-go">
              <span>Ir al prompter</span>
              <IcArrR2 size={14} />
            </button>
          </div>

          <div className="tp-editor">
            <textarea
              className="tp-textarea"
              value={text}
              onChange={(e) => setText(e.target.value)}
              placeholder="Pega aquí tu guion o cárgalo desde un archivo PDF, DOCX o TXT…"
              spellCheck={false}
            />
          </div>

          <div className="tp-foot">
            <span>{wordCount.toLocaleString("es-ES")} palabras · {charCount.toLocaleString("es-ES")} caracteres</span>
            <span>Tiempo estimado: {dur}</span>
          </div>
        </section>

        {/* RIGHT — Markers */}
        <aside className="tp-right">
          <div className="tp-side-head">
            <span>Marcadores</span>
            <span className="tp-marker-count">{MARKERS.length}</span>
          </div>
          <div className="tp-marker-list">
            {MARKERS.map((m, i) => (
              <button className="tp-marker" key={i}>
                <span className="tp-marker-dot"><IcDot size={10} /></span>
                <span className="tp-marker-label">{m.label}</span>
                <span className="tp-marker-time">{m.time}</span>
              </button>
            ))}
          </div>
          <button className="tp-side-add">
            <IcPlus size={14} />
            <span>Añadir marcador</span>
          </button>
        </aside>
      </div>
    </div>
  );
};

window.TeleprompterEditor = Editor;