/* AppPreview — fake dashboard used mid-page: list of hits + detail drawer + the Map.
   Interactive: user can click a pin / row to reveal details. */

const { useState: useStateAP } = React;

const AppPreview = () => {
  const [filter, setFilter] = useState("all"); // all | pv | trafo
  const [selectedId, setSelectedId] = useState(3);
  const [tab, setTab] = useState("list");

  const filtered = window.HITS_DATA.filter(
    (h) => filter === "all" || h.kind === filter,
  );
  const selected =
    window.HITS_DATA.find((h) => h.id === selectedId) || filtered[0];

  const kpis = [
    {
      label: "Dächer",
      value: window.HITS_DATA.filter((h) => h.kind === "pv").length,
      sub: "gefunden",
    },
    {
      label: "Trafos",
      value: window.HITS_DATA.filter((h) => h.kind === "trafo").length,
      sub: "im 50m-Radius",
    },
    { label: "kWp", value: "7.2k", sub: "Potenzial" },
    { label: "Firmen", value: "42", sub: "im Gebäude" },
  ];

  return (
    <div className="app-frame" style={{ overflow: "hidden" }}>
      {/* Top chrome */}
      <div className="app-header">
        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <div className="app-dots">
            <div className="app-dot" />
            <div className="app-dot" />
            <div className="app-dot" />
          </div>
          <div
            style={{
              display: "flex",
              alignItems: "center",
              gap: 8,
              marginLeft: 8,
            }}
          >
            <div
              style={{
                width: 22,
                height: 22,
                borderRadius: 6,
                background: "var(--ink)",
                color: "var(--y-400)",
                display: "inline-flex",
                alignItems: "center",
                justifyContent: "center",
              }}
            >
              <Icon name="logo-lightning" size={14} />
            </div>
            <span
              style={{
                fontFamily: "var(--font-display)",
                fontWeight: 600,
                fontSize: 14,
              }}
            >
              energieschmie.de
            </span>
            <span style={{ color: "var(--ink-5)" }}>/</span>
            <span style={{ fontSize: 13, color: "var(--ink-3)" }}>
              Scan · Deutschland · Gewerbe
            </span>
          </div>
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <span className="badge-live">LIVE</span>
          <div
            style={{
              width: 28,
              height: 28,
              borderRadius: 999,
              background: "var(--y-100)",
              color: "var(--y-700)",
              display: "inline-flex",
              alignItems: "center",
              justifyContent: "center",
              fontSize: 11,
              fontWeight: 600,
            }}
          >
            MS
          </div>
        </div>
      </div>

      {/* Filter bar */}
      <div
        style={{
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
          padding: "12px 18px",
          borderBottom: "1px solid var(--line)",
          background: "var(--bg-alt)",
          gap: 12,
          flexWrap: "wrap",
        }}
      >
        <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
          {[
            { k: "all", l: "Alle Treffer", n: window.HITS_DATA.length },
            {
              k: "pv",
              l: "Dachflächen ≥ 500m²",
              n: window.HITS_DATA.filter((h) => h.kind === "pv").length,
            },
            {
              k: "trafo",
              l: "Trafostationen",
              n: window.HITS_DATA.filter((h) => h.kind === "trafo").length,
            },
          ].map((f) => (
            <button
              key={f.k}
              onClick={() => setFilter(f.k)}
              style={{
                padding: "7px 14px",
                borderRadius: 999,
                fontSize: 13,
                fontWeight: 500,
                background: filter === f.k ? "var(--ink)" : "#fff",
                color: filter === f.k ? "var(--y-300)" : "var(--ink-2)",
                border: `1px solid ${filter === f.k ? "var(--ink)" : "var(--line-2)"}`,
                transition: "all 0.2s var(--ease)",
              }}
            >
              {f.l} <span style={{ opacity: 0.55, marginLeft: 4 }}>{f.n}</span>
            </button>
          ))}
        </div>
        <div
          style={{
            display: "flex",
            gap: 8,
            alignItems: "center",
            color: "var(--ink-4)",
            fontSize: 12,
          }}
        >
          <Icon name="filter" size={14} />
          <span>Branche · Stromverbrauch · Bundesland</span>
        </div>
      </div>

      {/* Body */}
      <div
        className="grid-app-body"
        style={{
          display: "grid",
          gridTemplateColumns: "1fr 1.2fr",
          minHeight: 520,
        }}
      >
        {/* Left: list */}
        <div
          style={{
            borderRight: "1px solid var(--line)",
            padding: "14px 14px 18px",
          }}
        >
          {/* KPI row */}
          <div
            style={{
              display: "grid",
              gridTemplateColumns: "repeat(4, 1fr)",
              gap: 8,
              marginBottom: 14,
            }}
          >
            {kpis.map((k) => (
              <div
                key={k.label}
                style={{
                  background: "var(--bg-alt)",
                  borderRadius: 10,
                  padding: "10px 12px",
                }}
              >
                <div
                  style={{
                    fontFamily: "var(--font-stat)",
                    fontSize: 20,
                    fontWeight: 600,
                    letterSpacing: "-0.02em",
                    color: "var(--ink)",
                  }}
                >
                  {k.value}
                </div>
                <div
                  style={{
                    fontSize: 10,
                    textTransform: "uppercase",
                    letterSpacing: "0.08em",
                    color: "var(--ink-4)",
                    fontWeight: 600,
                  }}
                >
                  {k.label}{" "}
                  <span
                    style={{
                      color: "var(--ink-5)",
                      textTransform: "none",
                      letterSpacing: 0,
                      fontWeight: 400,
                    }}
                  >
                    · {k.sub}
                  </span>
                </div>
              </div>
            ))}
          </div>

          {/* List */}
          <div
            style={{
              fontSize: 11,
              color: "var(--ink-4)",
              fontWeight: 600,
              textTransform: "uppercase",
              letterSpacing: "0.08em",
              padding: "6px 4px 10px",
            }}
          >
            {filtered.length} Treffer · sortiert nach Potenzial
          </div>
          <div
            style={{
              display: "flex",
              flexDirection: "column",
              gap: 6,
              maxHeight: 340,
              overflowY: "auto",
            }}
          >
            {filtered.map((h) => {
              const active = h.id === selected?.id;
              return (
                <button
                  key={h.id}
                  onClick={() => setSelectedId(h.id)}
                  style={{
                    textAlign: "left",
                    padding: "10px 12px",
                    borderRadius: 10,
                    background: active ? "var(--y-50)" : "transparent",
                    border: `1px solid ${active ? "rgba(251,194,42,0.5)" : "transparent"}`,
                    display: "flex",
                    gap: 10,
                    alignItems: "center",
                    transition: "background 0.15s",
                  }}
                  onMouseEnter={(e) => {
                    if (!active)
                      e.currentTarget.style.background = "var(--bg-alt)";
                  }}
                  onMouseLeave={(e) => {
                    if (!active)
                      e.currentTarget.style.background = "transparent";
                  }}
                >
                  <div
                    style={{
                      width: 32,
                      height: 32,
                      borderRadius: 8,
                      background:
                        h.kind === "pv" ? "var(--y-100)" : "var(--ink)",
                      color: h.kind === "pv" ? "var(--y-700)" : "var(--y-300)",
                      display: "inline-flex",
                      alignItems: "center",
                      justifyContent: "center",
                      flexShrink: 0,
                    }}
                  >
                    <Icon name={h.kind === "pv" ? "sun" : "bolt"} size={16} />
                  </div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div
                      style={{
                        fontSize: 13,
                        fontWeight: 600,
                        color: "var(--ink)",
                        overflow: "hidden",
                        textOverflow: "ellipsis",
                        whiteSpace: "nowrap",
                      }}
                      dangerouslySetInnerHTML={{ __html: h.company }}
                    />
                    <div style={{ fontSize: 11, color: "var(--ink-4)" }}>
                      {h.branch}
                      {h.size
                        ? ` · ${h.size.toLocaleString("de-DE")} m²`
                        : " · Trafo 630 kVA"}
                    </div>
                  </div>
                  {h.kwp > 0 && (
                    <div
                      style={{
                        fontFamily: "var(--font-stat)",
                        fontSize: 13,
                        fontWeight: 600,
                        color: "var(--ink)",
                        flexShrink: 0,
                      }}
                    >
                      {h.kwp}{" "}
                      <span
                        style={{
                          fontSize: 10,
                          color: "var(--ink-4)",
                          fontWeight: 500,
                        }}
                      >
                        kWp
                      </span>
                    </div>
                  )}
                </button>
              );
            })}
          </div>
        </div>

        {/* Right: map + detail */}
        <div style={{ display: "flex", flexDirection: "column" }}>
          <div
            style={{
              padding: 16,
              background: "var(--bg-alt)",
              borderBottom: "1px solid var(--line)",
            }}
          >
            <MapPreview variant="app" filterKind={filter} />
          </div>
          {selected && (
            <div style={{ padding: 18, background: "#fff", flex: 1 }}>
              <div
                style={{
                  display: "flex",
                  gap: 12,
                  alignItems: "flex-start",
                  marginBottom: 14,
                }}
              >
                <div
                  style={{
                    width: 42,
                    height: 42,
                    borderRadius: 10,
                    background:
                      selected.kind === "pv" ? "var(--y-100)" : "var(--ink)",
                    color:
                      selected.kind === "pv" ? "var(--y-700)" : "var(--y-300)",
                    display: "inline-flex",
                    alignItems: "center",
                    justifyContent: "center",
                  }}
                >
                  <Icon
                    name={selected.kind === "pv" ? "building" : "bolt"}
                    size={22}
                  />
                </div>
                <div style={{ flex: 1 }}>
                  <div
                    style={{
                      fontFamily: "var(--font-display)",
                      fontSize: 16,
                      fontWeight: 600,
                    }}
                    dangerouslySetInnerHTML={{ __html: selected.company }}
                  />
                  <div
                    style={{
                      fontSize: 12,
                      color: "var(--ink-4)",
                      marginTop: 2,
                    }}
                  >
                    {selected.branch} ·{" "}
                    {selected.kind === "pv"
                      ? `Dach ${selected.size?.toLocaleString("de-DE")} m²`
                      : "Trafostation 630 kVA"}
                  </div>
                </div>
                <span className="chip yellow" style={{ fontSize: 11 }}>
                  <Icon name="target" size={11} /> Lead-Score 92
                </span>
              </div>

              {/* Data grid */}
              <div
                style={{
                  display: "grid",
                  gridTemplateColumns: "1fr 1fr",
                  gap: 8,
                  marginBottom: 14,
                }}
              >
                {[
                  { l: "PV vorhanden", v: "Nein", ok: true },
                  { l: "Stromverbrauch", v: "≈ 1.8 GWh/a", ok: true },
                  {
                    l: "Eigentümer",
                    v: selected.company.split(" ")[0] + "-Gruppe",
                    ok: true,
                  },
                  { l: "Genehmigung", v: "Standard", ok: true },
                ].map((d) => (
                  <div
                    key={d.l}
                    style={{
                      padding: "10px 12px",
                      background: "var(--bg-alt)",
                      borderRadius: 8,
                      display: "flex",
                      flexDirection: "column",
                      gap: 2,
                    }}
                  >
                    <span
                      style={{
                        fontSize: 10,
                        color: "var(--ink-4)",
                        textTransform: "uppercase",
                        letterSpacing: "0.06em",
                        fontWeight: 600,
                      }}
                    >
                      {d.l}
                    </span>
                    <span
                      style={{
                        fontSize: 13,
                        fontWeight: 500,
                        color: "var(--ink)",
                      }}
                      dangerouslySetInnerHTML={{ __html: d.v }}
                    />
                  </div>
                ))}
              </div>

              {/* Firmen im Gebäude */}
              <div
                style={{
                  borderTop: "1px dashed var(--line-2)",
                  paddingTop: 14,
                }}
              >
                <div
                  style={{
                    fontSize: 11,
                    color: "var(--ink-4)",
                    fontWeight: 600,
                    textTransform: "uppercase",
                    letterSpacing: "0.08em",
                    marginBottom: 8,
                  }}
                >
                  Firmen im Gebäude · 2
                </div>
                <div
                  style={{ display: "flex", flexDirection: "column", gap: 8 }}
                >
                  <div
                    style={{ display: "flex", alignItems: "center", gap: 10 }}
                  >
                    <div
                      style={{
                        width: 32,
                        height: 32,
                        borderRadius: 8,
                        background: "var(--ink)",
                        color: "var(--y-300)",
                        display: "inline-flex",
                        alignItems: "center",
                        justifyContent: "center",
                        fontSize: 11,
                        fontWeight: 600,
                      }}
                    >
                      MK
                    </div>
                    <div style={{ flex: 1 }}>
                      <div style={{ fontSize: 13, fontWeight: 600 }}>
                        Kessler Metallbau GmbH
                      </div>
                      <div style={{ fontSize: 11, color: "var(--ink-4)" }}>
                        Hauptsitz · Industriestraße 12
                      </div>
                    </div>
                  </div>
                  <div
                    style={{ display: "flex", alignItems: "center", gap: 10 }}
                  >
                    <div
                      style={{
                        width: 32,
                        height: 32,
                        borderRadius: 8,
                        background: "var(--bg-alt)",
                        color: "var(--ink)",
                        display: "inline-flex",
                        alignItems: "center",
                        justifyContent: "center",
                        fontSize: 11,
                        fontWeight: 600,
                      }}
                    >
                      LT
                    </div>
                    <div style={{ flex: 1 }}>
                      <div style={{ fontSize: 13, fontWeight: 600 }}>
                        Logitrans Spedition
                      </div>
                      <div style={{ fontSize: 11, color: "var(--ink-4)" }}>
                        Hauptsitz · Industriestraße 12
                      </div>
                    </div>
                  </div>
                  <button
                    className="btn btn-primary btn-sm"
                    style={{
                      padding: "10px 14px",
                      marginTop: 6,
                      justifyContent: "center",
                    }}
                  >
                    <Icon name="mail" size={14} /> Firmen anschreiben
                  </button>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

window.AppPreview = AppPreview;