const { useMemo } = React;

/* ---------- Bausteine ---------- */
function pct(part, whole) { return whole ? Math.round((part / whole) * 100) : 0; }
function fmt(n) { return n.toLocaleString("de-DE"); }
function fmtDate(iso) {
  const d = new Date(iso + "T00:00:00");
  return d.toLocaleDateString("de-DE", { day: "2-digit", month: "short", year: "numeric" });
}
function fmtDuration(min) {
  if (min < 60) return min + " Min";
  const h = Math.floor(min / 60), m = min % 60;
  return m ? `${h} Std ${m} Min` : `${h} Std`;
}

function Kpi({ icon, tone, value, label, sub }) {
  const tones = {
    navy: { bg: "#eef4f9", fg: "var(--dv-navy)" },
    green: { bg: "var(--dv-success-bg)", fg: "#15803d" },
    amber: { bg: "var(--dv-warning-bg)", fg: "#b45309" },
    red: { bg: "var(--dv-danger-bg)", fg: "#b91c1c" },
    slate: { bg: "var(--dv-slate-100)", fg: "var(--dv-slate-600)" },
  };
  const t = tones[tone] || tones.slate;
  return (
    <div style={{ background: "#fff", border: "1px solid var(--dv-border)", borderRadius: 12, boxShadow: "var(--dv-shadow-sm)", padding: 20 }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 14 }}>
        <div style={{ width: 38, height: 38, borderRadius: 9, background: t.bg, color: t.fg, display: "flex", alignItems: "center", justifyContent: "center" }}>
          <i data-lucide={icon} style={{ width: 20, height: 20 }}></i>
        </div>
      </div>
      <div style={{ fontSize: 30, fontWeight: 700, color: "var(--dv-slate-900)", lineHeight: 1, fontFamily: "var(--dv-font-sans)" }}>{value}</div>
      <div style={{ fontSize: 13, fontWeight: 600, color: "var(--dv-fg-muted)", margin: "9px 0 3px" }}>{label}</div>
      {sub && <div style={{ fontSize: 11.5, color: t.fg, fontFamily: "var(--dv-font-mono)" }}>{sub}</div>}
    </div>
  );
}

function Panel({ title, hint, right, children }) {
  return (
    <div style={{ background: "#fff", border: "1px solid var(--dv-border)", borderRadius: 14, boxShadow: "var(--dv-shadow-sm)", padding: 22 }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 18 }}>
        <div>
          <h3 style={{ fontSize: 16, fontWeight: 700, color: "var(--dv-navy)", margin: 0, letterSpacing: "-0.01em" }}>{title}</h3>
          {hint && <p style={{ fontSize: 12, color: "var(--dv-fg-subtle)", margin: "3px 0 0" }}>{hint}</p>}
        </div>
        {right}
      </div>
      {children}
    </div>
  );
}

/* ---------- Funnel ---------- */
function Funnel({ c }) {
  const steps = [
    { key: "sent", label: "Verschickte Mails", value: c.sent, color: "var(--dv-navy)", icon: "send" },
    { key: "opened", label: "Geöffnet", value: c.opened, color: "#3b6ea5", icon: "mail-open" },
    { key: "clicked", label: "Link geklickt", value: c.clicked, color: "var(--dv-warning)", icon: "mouse-pointer-click" },
    { key: "submitted", label: "Daten eingegeben", value: c.submitted, color: "var(--dv-danger)", icon: "key-round" },
  ];
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
      {steps.map((s) => {
        const p = pct(s.value, c.sent);
        return (
          <div key={s.key}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 5 }}>
              <span style={{ display: "inline-flex", alignItems: "center", gap: 7, fontSize: 13, fontWeight: 600, color: "var(--dv-slate-700)" }}>
                <i data-lucide={s.icon} style={{ width: 15, height: 15, color: s.color }}></i>{s.label}
              </span>
              <span style={{ fontFamily: "var(--dv-font-mono)", fontSize: 13, color: "var(--dv-slate-600)" }}>
                <b style={{ color: "var(--dv-slate-900)" }}>{fmt(s.value)}</b> · {p}%
              </span>
            </div>
            <div style={{ height: 12, background: "var(--dv-slate-100)", borderRadius: 9999, overflow: "hidden" }}>
              <div style={{ width: p + "%", height: "100%", background: s.color, borderRadius: 9999, transition: "width .6s var(--dv-ease)" }}></div>
            </div>
          </div>
        );
      })}
    </div>
  );
}

/* ---------- Timeline ---------- */
function Timeline({ c }) {
  const series = c.timeline || [];
  const dates = c.timelineDates || [];
  const max = Math.max(...series, 1);
  const label = (i) => {
    if (dates[i]) { const d = new Date(dates[i] + "T00:00:00"); return d.toLocaleDateString("de-DE", { day: "2-digit", month: "short" }); }
    return `Tag ${i + 1}`;
  };
  if (series.length === 0) {
    return <div style={{ fontSize: 13, color: "var(--dv-fg-subtle)", padding: "24px 0" }}>Kein Klickverlauf verfügbar.</div>;
  }
  return (
    <div>
      <div style={{ display: "flex", alignItems: "flex-end", gap: 6, height: 150 }}>
        {series.map((v, i) => (
          <div key={i} title={`${label(i)}: ${v} Klicks`} style={{ flex: 1, display: "flex", flexDirection: "column", justifyContent: "flex-end", height: "100%" }}>
            <div style={{ height: (v / max) * 100 + "%", minHeight: v ? 3 : 0, background: v ? "var(--dv-green)" : "var(--dv-slate-100)", borderRadius: "4px 4px 2px 2px" }}></div>
          </div>
        ))}
      </div>
      <div style={{ display: "flex", justifyContent: "space-between", marginTop: 8, fontFamily: "var(--dv-font-mono)", fontSize: 10.5, color: "var(--dv-fg-subtle)" }}>
        <span>{label(0)}</span><span>Verlauf der Klicks über die Kampagnenlaufzeit</span><span>{label(series.length - 1)}</span>
      </div>
    </div>
  );
}

/* ---------- Abteilungen / Standorte (k-anonym) ---------- */
function Departments({ c }) {
  const rows = [...(c.departments || [])].sort((a, b) => b.clickRate - a.clickRate);
  const unit = c.departmentsLabel || "Abteilung";
  return (
    <div>
      <div style={{ display: "grid", gridTemplateColumns: "1.4fr 0.7fr 1.3fr 0.9fr", gap: 12, padding: "0 4px 10px", fontSize: 10.5, textTransform: "uppercase", letterSpacing: ".05em", color: "var(--dv-fg-subtle)", fontWeight: 700 }}>
        <span>{unit}</span><span style={{ textAlign: "right" }}>Empfänger</span><span>Klickrate</span><span style={{ textAlign: "right" }}>Meldequote</span>
      </div>
      {rows.map((d) => (
        <div key={d.name} style={{ display: "grid", gridTemplateColumns: "1.4fr 0.7fr 1.3fr 0.9fr", gap: 12, alignItems: "center", padding: "11px 4px", borderTop: "1px solid var(--dv-slate-100)" }}>
          <span style={{ fontSize: 13.5, fontWeight: 600, color: "var(--dv-slate-800)" }}>{d.name}</span>
          <span style={{ textAlign: "right", fontFamily: "var(--dv-font-mono)", fontSize: 13, color: "var(--dv-slate-500)" }}>{fmt(d.sent)}</span>
          <span style={{ display: "flex", alignItems: "center", gap: 9 }}>
            <span style={{ flex: 1, height: 8, background: "var(--dv-slate-100)", borderRadius: 9999, overflow: "hidden" }}>
              <i style={{ display: "block", height: "100%", width: Math.min(d.clickRate * 2.2, 100) + "%", background: d.clickRate >= 25 ? "var(--dv-danger)" : d.clickRate >= 15 ? "var(--dv-warning)" : "var(--dv-success)", borderRadius: 9999 }}></i>
            </span>
            <span style={{ fontFamily: "var(--dv-font-mono)", fontSize: 13, fontWeight: 700, color: "var(--dv-slate-800)", width: 34, textAlign: "right" }}>{d.clickRate}%</span>
          </span>
          <span style={{ textAlign: "right", fontFamily: "var(--dv-font-mono)", fontSize: 13, color: "#15803d", fontWeight: 600 }}>{d.reportRate}%</span>
        </div>
      ))}
      <div style={{ display: "flex", gap: 7, alignItems: "flex-start", marginTop: 14, fontSize: 11.5, color: "var(--dv-fg-subtle)", lineHeight: 1.5 }}>
        <i data-lucide="info" style={{ width: 14, height: 14, flex: "none", marginTop: 1 }}></i>
        Nur Gruppen mit mindestens 8 Empfängern werden ausgewiesen (k-Anonymität). Keine Rückschlüsse auf Einzelpersonen möglich.
      </div>
    </div>
  );
}

/* ---------- Risiko-Bewertung ---------- */
function riskLevel(clickRate) {
  if (clickRate >= 25) return { label: "Erhöht", color: "var(--dv-danger)", bg: "var(--dv-danger-bg)", note: "Handlungsbedarf: gezielte Schulung empfohlen." };
  if (clickRate >= 12) return { label: "Moderat", color: "var(--dv-warning)", bg: "var(--dv-warning-bg)", note: "Im Branchenmittel — Awareness weiter festigen." };
  return { label: "Gering", color: "#15803d", bg: "var(--dv-success-bg)", note: "Starke Resilienz — Niveau halten." };
}

function CampaignDashboard({ campaign }) {
  const c = campaign;
  const openRate = pct(c.opened, c.sent);
  const clickRate = pct(c.clicked, c.sent);
  const clickOfOpen = pct(c.clicked, c.opened);
  const submitRate = pct(c.submitted, c.sent);
  const reportRate = pct(c.reported, c.sent);
  const risk = useMemo(() => riskLevel(clickRate), [clickRate]);
  const BENCH = 18; // Branchen-Benchmark Klickrate %
  const delta = clickRate - BENCH;

  return (
    <div style={{ maxWidth: 1180, margin: "0 auto" }}>
      {/* Kampagnen-Kopf */}
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 20, marginBottom: 8 }}>
        <div>
          <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 8 }}>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 6, fontSize: 11, fontWeight: 700, textTransform: "uppercase", letterSpacing: ".05em", padding: "4px 10px", borderRadius: 9999, background: c.status === "laufend" ? "rgba(0,208,132,.15)" : "var(--dv-slate-100)", color: c.status === "laufend" ? "#0a8a5a" : "var(--dv-slate-500)" }}>
              {c.status === "laufend" && <span style={{ width: 7, height: 7, borderRadius: "50%", background: "var(--dv-green)" }}></span>}
              {c.status}
            </span>
            {c.difficulty && <span style={{ fontFamily: "var(--dv-font-mono)", fontSize: 12, color: "var(--dv-fg-subtle)" }}>Schwierigkeit: {c.difficulty}</span>}
          </div>
          <h1 style={{ fontSize: 27, fontWeight: 700, color: "var(--dv-navy)", letterSpacing: "-0.02em", margin: "0 0 6px" }}>{c.name}</h1>
          {c.pretext && <p style={{ fontSize: 14, color: "var(--dv-fg-muted)", margin: 0 }}>{c.pretext}</p>}
        </div>
        <div style={{ textAlign: "right", flex: "none" }}>
          <div style={{ fontFamily: "var(--dv-font-mono)", fontSize: 12.5, color: "var(--dv-slate-600)" }}>{fmtDate(c.start)} — {c.end ? fmtDate(c.end) : "läuft"}</div>
          <div style={{ fontSize: 12, color: "var(--dv-fg-subtle)", marginTop: 3 }}>Laufzeit {(c.timeline || []).length} Tage</div>
        </div>
      </div>

      {/* KPI-Reihe */}
      <div style={{ display: "grid", gridTemplateColumns: "repeat(5,1fr)", gap: 16, margin: "22px 0" }}>
        <Kpi icon="send" tone="navy" value={fmt(c.sent)} label="Verschickte Mails" sub={`${fmt(c.opened)} geöffnet`} />
        <Kpi icon="mail-open" tone="slate" value={openRate + "%"} label="Öffnungsrate" sub={`${fmt(c.opened)} von ${fmt(c.sent)}`} />
        <Kpi icon="mouse-pointer-click" tone="amber" value={clickRate + "%"} label="Klickrate" sub={`${fmt(c.clicked)} Klicks`} />
        <Kpi icon="key-round" tone="red" value={submitRate + "%"} label="Daten eingegeben" sub={`${fmt(c.submitted)} kritisch`} />
        {c.reportingAvailable
          ? <Kpi icon="shield-check" tone="green" value={reportRate + "%"} label="Meldequote" sub={`${fmt(c.reported)} gemeldet`} />
          : <Kpi icon="shield-check" tone="slate" value="–" label="Meldequote" sub="nicht erfasst" />}
      </div>

      {/* Funnel + Risiko */}
      <div style={{ display: "grid", gridTemplateColumns: "1.5fr 1fr", gap: 16, marginBottom: 16 }}>
        <Panel title="Angriffs-Funnel" hint="Vom Versand bis zur Dateneingabe — Anteil an allen verschickten Mails.">
          <Funnel c={c} />
        </Panel>
        <Panel title="Risiko-Einschätzung">
          <div style={{ display: "flex", alignItems: "baseline", gap: 10 }}>
            <span style={{ fontSize: 44, fontWeight: 700, color: risk.color, lineHeight: 1 }}>{clickRate}%</span>
            <span style={{ fontSize: 13, fontWeight: 700, color: risk.color, background: risk.bg, padding: "4px 10px", borderRadius: 9999 }}>{risk.label}</span>
          </div>
          <p style={{ fontSize: 13, color: "var(--dv-fg-muted)", margin: "10px 0 16px", lineHeight: 1.5 }}>{risk.note}</p>
          <div style={{ borderTop: "1px solid var(--dv-slate-100)", paddingTop: 14, display: "flex", flexDirection: "column", gap: 11 }}>
            <Row label="Klickrate vs. Branche" value={`${delta > 0 ? "+" : ""}${delta} pp`} tone={delta > 0 ? "red" : "green"} icon={delta > 0 ? "trending-up" : "trending-down"} />
            <Row label="Klick nach Öffnung" value={clickOfOpen + "%"} />
            <Row label="Zeit bis Klick (Median)" value={c.medianTimeToClickMin != null ? fmtDuration(c.medianTimeToClickMin) : "–"} />
            <Row label="Mehrfach-Klicker" value={fmt(c.repeatClickers)} />
          </div>
        </Panel>
      </div>

      {/* Timeline + Abteilungen/Standorte */}
      {(c.departments && c.departments.length > 0) ? (
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.25fr", gap: 16 }}>
          <Panel title="Zeitlicher Verlauf" hint="Wann wurde geklickt?"><Timeline c={c} /></Panel>
          <Panel title={`Ergebnis nach ${c.departmentsLabel || "Abteilung"}`} hint="Aggregiert & anonymisiert."><Departments c={c} /></Panel>
        </div>
      ) : (
        <Panel title="Zeitlicher Verlauf" hint="Wann wurde geklickt?"><Timeline c={c} /></Panel>
      )}

      <p style={{ textAlign: "center", fontSize: 11.5, color: "var(--dv-fg-subtle)", fontFamily: "var(--dv-font-mono)", margin: "26px 0 8px" }}>
        Datenquelle: Datavise Awareness-Plattform · Alle Werte anonymisiert & aggregiert · Art. 5 & 32 DSGVO
      </p>
    </div>
  );
}

function Row({ label, value, tone, icon }) {
  const col = tone === "red" ? "var(--dv-danger)" : tone === "green" ? "#15803d" : "var(--dv-slate-800)";
  return (
    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
      <span style={{ fontSize: 13, color: "var(--dv-fg-muted)" }}>{label}</span>
      <span style={{ display: "inline-flex", alignItems: "center", gap: 5, fontFamily: "var(--dv-font-mono)", fontSize: 13.5, fontWeight: 700, color: col }}>
        {icon && <i data-lucide={icon} style={{ width: 14, height: 14 }}></i>}{value}
      </span>
    </div>
  );
}

window.CampaignDashboard = CampaignDashboard;