// Historial de reuniones — 1280x800

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 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 IcBell   = (p) => <Ic {...p}><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></Ic>;
const IcCog    = (p) => <Ic {...p}><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></Ic>;
const IcHelp   = (p) => <Ic {...p}><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></Ic>;
const IcSearch = (p) => <Ic {...p}><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></Ic>;
const IcChev   = (p) => <Ic {...p} stroke={2}><polyline points="6 9 12 15 18 9"/></Ic>;
const IcChevL  = (p) => <Ic {...p} stroke={2}><polyline points="15 18 9 12 15 6"/></Ic>;
const IcChevR  = (p) => <Ic {...p} stroke={2}><polyline points="9 18 15 12 9 6"/></Ic>;
const IcEye    = (p) => <Ic {...p}><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></Ic>;
const IcDown   = (p) => <Ic {...p}><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></Ic>;
const IcMore   = (p) => <Ic {...p}><circle cx="12" cy="12" r="1.5" fill="currentColor"/><circle cx="19" cy="12" r="1.5" fill="currentColor"/><circle cx="5" cy="12" r="1.5" fill="currentColor"/></Ic>;
const IcKbd    = (p) => <Ic {...p}><rect x="2" y="6" width="20" height="12" rx="2"/><line x1="6" y1="10" x2="6" y2="10"/><line x1="10" y1="10" x2="10" y2="10"/><line x1="14" y1="10" x2="14" y2="10"/><line x1="18" y1="10" x2="18" y2="10"/><line x1="7" y1="14" x2="17" y2="14"/></Ic>;
const IcBook   = (p) => <Ic {...p}><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></Ic>;
const IcSpark  = (p) => <Ic {...p} stroke={2}><path d="M12 3v3"/><path d="M12 18v3"/><path d="M3 12h3"/><path d="M18 12h3"/><path d="M5.6 5.6l2.1 2.1"/><path d="M16.3 16.3l2.1 2.1"/><path d="M5.6 18.4l2.1-2.1"/><path d="M16.3 7.7l2.1-2.1"/></Ic>;
const IcExt    = (p) => <Ic {...p}><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></Ic>;

const ROWS = [
  { date: "28 Abr 2026", client: "Acme IT",            mode: "Copiloto",     duration: "45 min",   questions: 12 },
  { date: "25 Abr 2026", client: "Presentación Q2",    mode: "Teleprompter", duration: "8 min",    questions: null },
  { date: "22 Abr 2026", client: "Pharma Solutions",   mode: "Copiloto",     duration: "1h 20min", questions: 18 },
  { date: "18 Abr 2026", client: "Demo producto",      mode: "Teleprompter", duration: "12 min",   questions: null },
  { date: "15 Abr 2026", client: "Consultoría Bankia", mode: "Copiloto",     duration: "55 min",   questions: 9  },
  { date: "11 Abr 2026", client: "Pitch inversores",   mode: "Teleprompter", duration: "5 min",    questions: null },
];

const Dropdown = ({ label, value, options, onSelect }) => {
  const [open, setOpen] = React.useState(false);
  return (
    <div className="hist-dd">
      <button className="hist-dd-btn" onClick={() => setOpen((v) => !v)}>
        <span className="hist-dd-lbl">{label}:</span>
        <span className="hist-dd-val">{value}</span>
        <IcChev size={11} />
      </button>
      {open && (
        <div className="hist-dd-menu" onMouseLeave={() => setOpen(false)}>
          {options.map((o) => (
            <button key={o} className={`hist-dd-item ${o === value ? "selected" : ""}`}
                    onClick={() => { onSelect(o); setOpen(false); }}>
              <span>{o}</span>
              {o === value && <span className="hist-dd-check">✓</span>}
            </button>
          ))}
        </div>
      )}
    </div>
  );
};

const Historial = () => {
  const [helpOpen, setHelpOpen] = React.useState(false);
  const [mode, setMode]   = React.useState("Todos");
  const [period, setPer]  = React.useState("Último mes");

  return (
    <div className="hist-root" data-screen-label="11 Historial Reuniones">
      <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">/ Historial</span>
        </div>
        <div className="dash-h-spacer" />
        <div className="dash-h-actions">
          {/* Help */}
          <div className="hist-help">
            <button className={`dash-icon-btn ${helpOpen ? "on" : ""}`}
                    onClick={() => setHelpOpen((v) => !v)} title="Ayuda">
              <IcHelp size={15} />
            </button>
            {helpOpen && (
              <div className="hist-help-menu" onMouseLeave={() => setHelpOpen(false)}>
                <button className="hist-help-item">
                  <IcSpark size={14} />
                  <div>
                    <span className="hist-help-name">Tutorial rápido</span>
                    <span className="hist-help-desc">3 minutos para empezar</span>
                  </div>
                </button>
                <button className="hist-help-item">
                  <IcBook size={14} />
                  <div>
                    <span className="hist-help-name">Documentación <IcExt size={9} /></span>
                    <span className="hist-help-desc">Guías y referencias</span>
                  </div>
                </button>
                <button className="hist-help-item">
                  <IcKbd size={14} />
                  <div>
                    <span className="hist-help-name">Atajos de teclado</span>
                    <span className="hist-help-desc">Acelera tu flujo</span>
                  </div>
                  <kbd className="hist-help-kbd">?</kbd>
                </button>
                <button className="hist-help-item">
                  <IcSpark size={14} />
                  <div>
                    <span className="hist-help-name">
                      Novedades <span className="hist-help-pill">v1.0</span>
                    </span>
                    <span className="hist-help-desc">Changelog y mejoras</span>
                  </div>
                </button>
              </div>
            )}
          </div>
          <button className="dash-icon-btn" title="Notificaciones">
            <IcBell size={15} />
            <span className="dot-violet" />
          </button>
          <button className="dash-icon-btn" title="Configuración"><IcCog size={15} /></button>
          <div className="avatar">JM</div>
        </div>
      </header>

      <main className="hist-main">
        <div className="hist-page">
          <div className="hist-head">
            <h1>Historial de reuniones</h1>
            <p>{47} reuniones registradas en total.</p>
          </div>

          <div className="hist-toolbar">
            <div className="hist-search">
              <IcSearch size={14} />
              <input placeholder="Buscar por cliente, tema o fecha…" />
            </div>
            <div className="hist-filters">
              <Dropdown label="Modo" value={mode}
                        options={["Todos", "Copiloto", "Teleprompter"]}
                        onSelect={setMode} />
              <Dropdown label="Fecha" value={period}
                        options={["Última semana", "Último mes", "Últimos 3 meses", "Este año", "Todo"]}
                        onSelect={setPer} />
            </div>
          </div>

          <div className="hist-table">
            <div className="hist-row hist-headrow">
              <span>Fecha</span>
              <span>Cliente / Sesión</span>
              <span>Modo</span>
              <span>Duración</span>
              <span>Preguntas</span>
              <span className="hist-th-actions">Acciones</span>
            </div>
            {ROWS.map((r, i) => (
              <div key={i} className="hist-row hist-datarow">
                <span className="hist-date">{r.date}</span>
                <span className="hist-client">{r.client}</span>
                <span>
                  <span className={`mode-pill ${r.mode === "Copiloto" ? "violet" : "blue"}`}>
                    {r.mode}
                  </span>
                </span>
                <span className="hist-dur">{r.duration}</span>
                <span>
                  {r.questions !== null
                    ? <span className="hist-qpill">{r.questions} preguntas</span>
                    : <span className="hist-empty">—</span>}
                </span>
                <span className="hist-actions">
                  <button className="hist-act" title={r.mode === "Copiloto" ? "Ver resumen" : "Ver guion"}>
                    <IcEye size={13} />
                  </button>
                  <button className="hist-act" title="Descargar">
                    <IcDown size={13} />
                  </button>
                  <button className="hist-act" title="Más">
                    <IcMore size={13} />
                  </button>
                </span>
              </div>
            ))}
          </div>

          <div className="hist-pager">
            <span className="hist-pager-info">Mostrando <b>1–10</b> de <b>47</b> reuniones</span>
            <div className="hist-pager-ctrls">
              <button className="hist-page-btn" disabled>
                <IcChevL size={12} />
                <span>Anterior</span>
              </button>
              <button className="hist-page-num active">1</button>
              <button className="hist-page-num">2</button>
              <button className="hist-page-num">3</button>
              <span className="hist-page-dots">…</span>
              <button className="hist-page-num">5</button>
              <button className="hist-page-btn">
                <span>Siguiente</span>
                <IcChevR size={12} />
              </button>
            </div>
          </div>
        </div>
      </main>
    </div>
  );
};

window.Historial = Historial;