// SOLCOM Website-Abnahme · Dashboard
// Hinweis: window.SOLCOM wird von der Shell erst NACH dem Daten-Fetch gesetzt —
// daher Zugriff ausschließlich innerhalb der Komponenten-Renderfunktionen.
(function () {
  const DS = window.AdessoPlaybooksDesignSystem_29634e;
  const { Badge, Button, OutcomeCallout, MetaChip } = DS;

  function StatusBadge({ status }) {
    const S = window.SOLCOM;
    const s = S.STATUS[status];
    return <Badge tone={s.tone} icon={s.icon}>{s.label}</Badge>;
  }

  function AreaCard({ area, onOpen, isMobile }) {
    const S = window.SOLCOM;
    const [hover, setHover] = React.useState(false);
    const p = S.areaProgress(area);

    return (
      <button
        onClick={() => onOpen(area)}
        onMouseEnter={() => setHover(true)}
        onMouseLeave={() => setHover(false)}
        style={{
          textAlign: "left", cursor: "pointer", font: "inherit",
          display: "flex", flexDirection: "column", gap: 18,
          padding: "26px 26px 22px", background: "#fff",
          border: "1px solid var(--ink-200)", borderRadius: "var(--radius-xl)",
          boxShadow: hover ? "var(--shadow-2)" : "var(--shadow-1)",
          transform: hover ? "translateY(-2px)" : "none",
          transition: "box-shadow .15s ease, transform .15s ease",
        }}
      >
        <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 16 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
            <span style={{ width: 48, height: 48, borderRadius: "var(--radius-lg)", background: "var(--blue-50)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
              <i className={area.icon} style={{ fontSize: 26, color: "var(--blue-500)" }} />
            </span>
            <div>
              <h3 style={{ fontFamily: "var(--font-cond)", fontSize: 26, fontWeight: 500, letterSpacing: "-.01em", lineHeight: 1.05, margin: 0, color: "var(--ink-1000)" }}>{area.name}</h3>
              <div style={{ fontSize: 13, color: "var(--ink-600)", marginTop: 3 }}>{area.subtitle}</div>
            </div>
          </div>
        </div>

        {/* progress */}
        <div>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 8 }}>
            <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, textTransform: "uppercase", letterSpacing: ".08em", color: "var(--ink-500)" }}>
              {p.reviewed} von {p.total} Testfällen geprüft
            </span>
            <span style={{ fontFamily: "var(--font-mono)", fontSize: 13, fontWeight: 600, color: "var(--blue-500)" }}>{p.pct}%</span>
          </div>
          <div style={{ height: 8, background: "var(--ink-200)", borderRadius: "var(--radius-full)", overflow: "hidden" }}>
            <span style={{ display: "block", height: "100%", width: p.pct + "%", background: "var(--blue-500)", transition: "width .3s ease" }} />
          </div>
        </div>

        {/* mini counts */}
        <div style={{ display: "flex", gap: 18, paddingTop: 16, borderTop: "1px solid var(--ink-100)" }}>
          <MetaChip icon="ph-bold ph-check"><span style={{ color: "var(--success)" }}>{p.passed}</span>&nbsp;abgenommen</MetaChip>
          <MetaChip icon="ph-bold ph-warning"><span style={{ color: p.failed ? "var(--danger)" : "var(--ink-600)" }}>{p.failed}</span>&nbsp;Fehler</MetaChip>
          <span style={{ marginLeft: "auto", display: "inline-flex", alignItems: "center", gap: 6, fontSize: 13, color: "var(--blue-500)", fontWeight: 500 }}>
            Öffnen <i className="ph-bold ph-arrow-right" style={{ fontSize: 13 }} />
          </span>
        </div>
      </button>
    );
  }

  function DashboardScreen({ onOpenArea, onOpenTickets }) {
    const S = window.SOLCOM;
    const o = S.overallProgress(S.areas);
    const open = o.total - o.reviewed;
    const { isMobile } = window.SC_useViewport();

    return (
      <div style={{ background: "var(--ink-50)", minHeight: 560 }}>
        <div style={{ maxWidth: 1080, margin: "0 auto", padding: isMobile ? "28px 18px 56px" : "44px 40px 64px" }}>
          {/* heading */}
          <div style={{ display: "flex", flexDirection: isMobile ? "column" : "row", alignItems: isMobile ? "flex-start" : "flex-end", justifyContent: "space-between", gap: isMobile ? 18 : 24, marginBottom: 28 }}>
            <div>
              <h1 style={{ fontFamily: "var(--font-cond)", fontSize: isMobile ? 34 : 52, fontWeight: 500, letterSpacing: "-.02em", lineHeight: 1, margin: 0, color: "var(--ink-1000)" }}>
                SOLCOM Website-Abnahme
              </h1>
              <p style={{ margin: "14px 0 0", fontSize: isMobile ? 15 : 16, color: "var(--ink-600)", maxWidth: "60ch" }}>
                Prüfen Sie die vier Bereiche der neuen Website Schritt für Schritt. Haken Sie ab, was funktioniert — und hinterlassen Sie Feedback, wo etwas fehlt.
              </p>
            </div>
            <div style={{ textAlign: isMobile ? "left" : "right", flexShrink: 0 }}>
              <div style={{ fontFamily: "var(--font-sans)", fontSize: 11, fontWeight: 600, textTransform: "uppercase", letterSpacing: ".08em", color: "var(--ink-500)" }}>Go-Live</div>
              <div style={{ fontFamily: "var(--font-cond)", fontSize: 30, fontWeight: 500, color: "var(--ink-1000)" }}>{S.meta.goLive}</div>
            </div>
          </div>

          {/* overall acceptance callout */}
          <OutcomeCallout
            variant="blue"
            label="Gesamtfortschritt der Abnahme"
            icon="ph-duotone ph-seal-check"
            progressLabel="Geprüft"
            value={o.pct}
            count={o.reviewed + " / " + o.total + " Testfälle"}
          >
            {o.failed > 0
              ? `${o.passed} Testfälle sind abgenommen, ${o.failed} weisen Fehler auf und ${open} sind noch offen. Aus den Fehlern lassen sich direkt Jira-Tickets ableiten.`
              : `${o.passed} Testfälle sind abgenommen, ${open} sind noch offen. Ziel: alle vier Bereiche vor dem Go-Live am ${S.meta.goLive} vollständig prüfen.`}
          </OutcomeCallout>

          {/* tickets shortcut */}
          <div style={{ display: "flex", gap: 12, alignItems: "center", margin: "20px 0 32px", flexWrap: "wrap" }}>
            <span style={{ marginLeft: "auto" }}>
              <Button variant="ghost" icon="ph ph-kanban" onClick={onOpenTickets} style={{ background: "#fff" }}>Ticket-Ableitung ({o.failed})</Button>
            </span>
          </div>

          {/* area cards */}
          <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "repeat(2, 1fr)", gap: 18 }}>
            {S.areas.map((a) => <AreaCard key={a.id} area={a} onOpen={onOpenArea} isMobile={isMobile} />)}
          </div>
        </div>
      </div>
    );
  }

  function StatPill({ icon, tone, n, label }) {
    return (
      <span style={{ display: "inline-flex", alignItems: "center", gap: 8, padding: "8px 14px", background: "#fff", border: "1px solid var(--ink-200)", borderRadius: "var(--radius-full)" }}>
        <i className={icon} style={{ fontSize: 13, color: tone }} />
        <b style={{ fontFamily: "var(--font-mono)", fontSize: 13, color: "var(--ink-1000)" }}>{n}</b>
        <span style={{ fontSize: 13, color: "var(--ink-600)" }}>{label}</span>
      </span>
    );
  }

  window.SC_DashboardScreen = DashboardScreen;
  window.SC_StatusBadge = StatusBadge;
})();