/* ============================================================
   Hub — internal tools launcher (app.mesper.de/)
   One login, one shell; each tool lives under its own path.
   ============================================================ */
const { useState, useEffect } = React;

function ToolTile({ tool, onOpen }) {
  const [hover, setHover] = useState(false);
  const ready = tool.ready;
  return (
    <button type="button"
      onClick={() => ready && onOpen(tool.path)}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      className="vp-focusable"
      style={{
        textAlign: "left", cursor: ready ? "pointer" : "default", border: "1px solid var(--line)",
        background: "var(--surface)", borderRadius: "var(--r-lg)", padding: "22px 22px 20px",
        boxShadow: hover && ready ? "var(--sh-md)" : "var(--sh-sm)",
        transform: hover && ready ? "translateY(-2px)" : "none",
        transition: "all 0.16s ease", opacity: ready ? 1 : 0.66,
        display: "flex", flexDirection: "column", gap: 14, minHeight: 150,
      }}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <div style={{
          width: 46, height: 46, borderRadius: "var(--r-md)", display: "grid", placeItems: "center",
          background: ready ? "var(--accent-soft)" : "var(--paper-2)", color: ready ? "var(--accent)" : "var(--ink-4)",
        }}>
          <Icon name={tool.icon} size={24} stroke={1.9} />
        </div>
        {ready
          ? <Icon name="arrowRight" size={20} style={{ color: hover ? "var(--accent)" : "var(--ink-4)", transition: "color .15s" }} />
          : <span style={{ fontSize: 11.5, fontWeight: 700, letterSpacing: "0.04em", textTransform: "uppercase", color: "var(--ink-4)", background: "var(--paper-2)", padding: "4px 9px", borderRadius: "var(--r-pill)" }}>Coming soon</span>}
      </div>
      <div>
        <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 19, color: "var(--ink)" }}>{tool.label}</div>
        <div style={{ fontSize: 13.5, color: "var(--ink-3)", marginTop: 4, lineHeight: 1.45 }}>{tool.desc}</div>
      </div>
    </button>
  );
}

function Hub({ user, onOpen, onLogout }) {
  const narrow = useIsNarrow(820);
  const tools = [
    { id: "leave",  path: "/leave",     label: "Leave",  desc: "Vacation, sick days, special leave & the team calendar.", icon: "calendar", ready: true },
    { id: "tasks",  path: "/approvals", label: "Tasks",  desc: "Projects & tasks across board, list and timeline.",       icon: "inbox",    ready: true },
  ];
  return (
    <div style={{ minHeight: "100%", display: "flex", flexDirection: "column" }}>
      <header style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 14, padding: narrow ? "12px 16px" : "14px 30px", borderBottom: "1px solid var(--line)", background: "var(--surface)" }}>
        <BrandLockup height={24} sub="" />
        <AccountMenu user={user} onLogout={onLogout} />
      </header>

      <main style={{ flex: 1, width: "100%", maxWidth: 860, margin: "0 auto", padding: narrow ? "32px 16px 56px" : "56px 36px 72px" }}>
        <div className="vp-fade-up">
          <Eyebrow>Mesper internal</Eyebrow>
          <h1 style={{ fontSize: narrow ? 28 : 34, margin: "8px 0 6px" }}>Hi {user.first}</h1>
          <p style={{ color: "var(--ink-3)", fontSize: 15.5, margin: "0 0 30px" }}>Pick a tool to get started.</p>
          <div style={{ display: "grid", gridTemplateColumns: narrow ? "1fr" : "1fr 1fr", gap: 18 }}>
            {tools.map((tool) => <ToolTile key={tool.id} tool={tool} onOpen={onOpen} />)}
          </div>
        </div>
      </main>
    </div>
  );
}

Object.assign(window, { Hub, ToolTile });