// Main Dashboard — entry point after onboarding
// 1280x800. Header + greeting + 2 mode cards + recent activity + footer bar.

const IconBell = ({ size = 18 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
       stroke="currentColor" strokeWidth="1.75" strokeLinecap="round"
       strokeLinejoin="round">
    <path d="M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9" />
    <path d="M13.73 21a2 2 0 0 1-3.46 0" />
  </svg>
);
const IconGear2 = ({ size = 18 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
       stroke="currentColor" strokeWidth="1.75" strokeLinecap="round"
       strokeLinejoin="round">
    <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 1 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 4.6 15a1.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 9 4.6 1.65 1.65 0 0 0 10 3.09V3a2 2 0 0 1 4 0v.09A1.65 1.65 0 0 0 15 4.6a1.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 19.4 9c.16.39.25.81.25 1.24" />
  </svg>
);
const IconMessage = ({ size = 32 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
       stroke="currentColor" strokeWidth="1.75" strokeLinecap="round"
       strokeLinejoin="round">
    <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
  </svg>
);
const IconScroll = ({ size = 32 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
       stroke="currentColor" strokeWidth="1.75" strokeLinecap="round"
       strokeLinejoin="round">
    <path d="M15 12h-5" />
    <path d="M15 8h-5" />
    <path d="M19 17V5a2 2 0 0 0-2-2H4" />
    <path d="M8 21h12a2 2 0 0 0 2-2v-1a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v3" />
    <path d="M2 3h6v18" />
  </svg>
);
const IconArr = ({ size = 14 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
       stroke="currentColor" strokeWidth="2" strokeLinecap="round"
       strokeLinejoin="round">
    <line x1="5" y1="12" x2="19" y2="12" />
    <polyline points="12 5 19 12 12 19" />
  </svg>
);
const IconLogo = ({ size = 18 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
       stroke="currentColor" strokeWidth="2" strokeLinecap="round"
       strokeLinejoin="round">
    <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" />
  </svg>
);

const ACTIVITY = [
  { title: "Reunión con Acme IT", mode: "Copiloto", when: "Hace 2 días", chip: "12 preguntas", chipKind: "primary" },
  { title: "Presentación Q2", mode: "Teleprompter", when: "Hace 5 días", chip: "8 min", chipKind: "info" },
  { title: "Demo cliente Pharma", mode: "Copiloto", when: "Hace 1 semana", chip: "7 preguntas", chipKind: "primary" },
];

const Dashboard = () => {
  const [hovered, setHovered] = React.useState(null);
  return (
    <div className="dash-root" data-screen-label="05 Main Dashboard">
      {/* Header */}
      <header className="dash-header">
        <div className="dash-brand">
          <div className="dash-mark"><IconLogo size={16} /></div>
          <span className="dash-brand-name">Copilotoprompter</span>
        </div>
        <div className="dash-h-spacer" />
        <div className="dash-h-actions">
          <button className="icon-btn" title="Notificaciones">
            <IconBell size={16} />
            <span className="bell-dot" />
          </button>
          <button className="icon-btn" title="Configuración"><IconGear2 size={16} /></button>
          <div className="avatar">JM</div>
        </div>
      </header>

      {/* Main */}
      <main className="dash-main">
        <div className="dash-greeting">
          <h1 className="dash-h1">Buenas tardes, Jordi</h1>
          <p className="dash-sub">¿Qué necesitas hoy?</p>
        </div>

        <div className="mode-grid">
          <article
            className={`mode-card ${hovered === "copilot" ? "is-hover" : ""}`}
            onMouseEnter={() => setHovered("copilot")}
            onMouseLeave={() => setHovered(null)}
          >
            <div className="mode-icon"><IconMessage size={28} /></div>
            <h2 className="mode-title">Copiloto IA</h2>
            <p className="mode-desc">Asistente en tiempo real para reuniones con clientes.</p>
            <div className="mode-meta">Última sesión: hace 2 días</div>
            <button className="btn-primary mode-cta">
              <span>Iniciar reunión</span>
              <IconArr size={14} />
            </button>
          </article>

          <article
            className={`mode-card ${hovered === "tele" ? "is-hover" : ""}`}
            onMouseEnter={() => setHovered("tele")}
            onMouseLeave={() => setHovered(null)}
          >
            <div className="mode-icon"><IconScroll size={28} /></div>
            <h2 className="mode-title">Teleprompter</h2>
            <p className="mode-desc">Lectura de guiones para presentaciones y vídeos.</p>
            <div className="mode-meta">3 guiones guardados</div>
            <button className="btn-secondary mode-cta">
              <span>Abrir teleprompter</span>
              <IconArr size={14} />
            </button>
          </article>
        </div>

        <section className="activity">
          <div className="activity-head">
            <h3 className="activity-title">Actividad reciente</h3>
            <a href="#" className="activity-link">Ver todo el historial →</a>
          </div>
          <div className="activity-table">
            {ACTIVITY.map((row, i) => (
              <div className="activity-row" key={i}>
                <span className="act-title">{row.title}</span>
                <span className={`act-mode mode-${row.mode === "Copiloto" ? "co" : "te"}`}>
                  {row.mode}
                </span>
                <span className="act-when">{row.when}</span>
                <span className={`act-chip chip-${row.chipKind}`}>{row.chip}</span>
              </div>
            ))}
          </div>
        </section>
      </main>

      {/* Bottom bar */}
      <footer className="dash-footbar">
        <div className="dash-footbar-l">
          <span className="plan-badge">Plan: Pro</span>
          <span className="dash-fb-meta">Cloud: Claude Haiku</span>
        </div>
        <div className="dash-fb-meta dim">v1.0.0</div>
      </footer>
    </div>
  );
};

window.Dashboard = Dashboard;