// E-Auto-Rechner — Live-Vergleich Betriebskosten E-Auto vs. Verbrenner.
const { Card, Slider, Button, StatusDot, Tooltip } = window.GoodDesignRamsDesignSystem_019e30;

function SavingsChart({ evSeries, iceSeries, evColor = "#1F9D55", iceColor = "#FF6A00" }) {
  const width = 560, height = 220;
  const pad = { top: 16, right: 16, bottom: 28, left: 56 };
  const plotW = width - pad.left - pad.right;
  const plotH = height - pad.top - pad.bottom;
  const maxYear = iceSeries[iceSeries.length - 1].year || 1;
  const allValues = [...evSeries.map((p) => p.cum), ...iceSeries.map((p) => p.cum)];
  const maxV = Math.max(...allValues, 1);
  const minV = Math.min(...allValues, 0);
  const range = maxV - minV || 1;
  const xFor = (year) => pad.left + (year / maxYear) * plotW;
  const yFor = (v) => pad.top + (1 - (v - minV) / range) * plotH;

  const lineFor = (series) => series.map((p) => `${xFor(p.year)},${yFor(p.cum)}`).join(" ");

  const gridSteps = [0, 0.5, 1];
  const wholeYears = Math.floor(maxYear);
  const xLabelYears = wholeYears <= 8
    ? Array.from({ length: wholeYears + 1 }, (_, i) => i)
    : [0, Math.round(wholeYears / 2), wholeYears];

  return (
    <svg viewBox={`0 0 ${width} ${height}`} style={{ width: "100%", height: "auto", overflow: "visible" }}>
      {gridSteps.map((s) => {
        const v = minV + s * range;
        const y = yFor(v);
        return (
          <g key={s}>
            <line x1={pad.left} x2={width - pad.right} y1={y} y2={y} stroke="var(--border-hairline)" strokeWidth="1" />
            <text x={pad.left - 8} y={y + 4} textAnchor="end" fontSize="10" fontFamily="var(--font-mono)" fill="var(--text-tertiary)">
              {Math.round(v).toLocaleString("de-DE")} €
            </text>
          </g>
        );
      })}
      <polyline points={lineFor(iceSeries)} fill="none" stroke={iceColor} strokeWidth="2.5" strokeLinejoin="round" strokeLinecap="round" />
      <polyline points={lineFor(evSeries)} fill="none" stroke={evColor} strokeWidth="2.5" strokeLinejoin="round" strokeLinecap="round" />
      {iceSeries.map((p) => <circle key={"i" + p.year} cx={xFor(p.year)} cy={yFor(p.cum)} r="3" fill={iceColor} />)}
      {evSeries.map((p) => <circle key={"e" + p.year} cx={xFor(p.year)} cy={yFor(p.cum)} r="3" fill={evColor} />)}
      {xLabelYears.map((y) => (
        <text key={y} x={xFor(y)} y={height - 6} textAnchor="middle" fontSize="10" fontFamily="var(--font-mono)" fill="var(--text-tertiary)">
          jahr {y}
        </text>
      ))}
    </svg>
  );
}

function Stat({ label, value }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
      <span style={{ font: "var(--font-data)", fontSize: 20, fontWeight: 500, fontVariantNumeric: "tabular-nums", color: "var(--text-primary)" }}>{value}</span>
      <span style={{ font: "var(--font-label)", letterSpacing: "var(--text-label-tracking)", color: "var(--text-tertiary)" }}>{label}</span>
    </div>
  );
}

function SliderRow({ label, value, min, max, unit, info, onChange }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
      <div style={{ flex: 1 }}>
        <Slider label={label} value={value} min={min} max={max} step="any" unit={unit} onChange={onChange} />
      </div>
      <input
        type="number" value={value} min={min} max={max} step="any" onChange={onChange}
        style={{
          width: 76, height: 32, padding: "0 8px", boxSizing: "border-box",
          border: "var(--hairline-strong)", borderRadius: "var(--radius-2)",
          font: "var(--font-data)", fontSize: 12, textAlign: "right",
          background: "var(--surface-card)", color: "var(--text-primary)", outline: "none",
        }}
      />
      {info && (
        <Tooltip content={info} side="top">
          <span style={{
            width: 18, height: 18, borderRadius: 999, border: "var(--hairline-strong)",
            display: "inline-flex", alignItems: "center", justifyContent: "center",
            font: "var(--font-data)", fontSize: 10, color: "var(--text-secondary)",
            flexShrink: 0, cursor: "default",
          }}>i</span>
        </Tooltip>
      )}
    </div>
  );
}

const DEFAULTS = {
  priceHome: 0.30,
  pricePublic: 0.50,
  publicShare: 20,
  fuelPrice: 1.90,
  evConsumption: 18,
  iceConsumption: 7.0,
  annualKm: 15000,
  years: 8,
  kfzSteuerICE: 200,
  thgQuote: 300,
};

const DECIMALS = {
  priceHome: 2, pricePublic: 2, publicShare: 0, fuelPrice: 2,
  evConsumption: 1, iceConsumption: 1, annualKm: 0, years: 1,
  kfzSteuerICE: 0, thgQuote: 0,
};

function EVCalculatorDeploy() {
  const [v, setV] = React.useState(DEFAULTS);
  const set = (key) => (e) => setV((s) => ({ ...s, [key]: roundTo(+e.target.value, DECIMALS[key]) }));
  const reset = () => setV(DEFAULTS);

  const r = computeSavings(v);
  const cheaper = r.annualSavings >= 0;

  return (
    <div style={{ display: "grid", gridTemplateColumns: "3fr 2fr", gap: 40, alignItems: "start" }}>

      {/* ---- inputs ---- */}
      <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
        <Card label="strom" title="Stromkosten" padding={24}>
          <div style={{ display: "flex", flexDirection: "column", gap: 22 }}>
            <SliderRow label="strompreis · privat (zuhause)" value={v.priceHome} min={0} max={0.50} unit="€/kwh" onChange={set("priceHome")} info="Preis für Strom aus der eigenen Wallbox oder Steckdose zuhause." />
            <SliderRow label="strompreis · öffentlich" value={v.pricePublic} min={0.25} max={0.90} unit="€/kwh" onChange={set("pricePublic")} info="Preis an öffentlichen Ladesäulen — meist teurer als Laden zuhause." />
            <SliderRow label="anteil öffentliches laden" value={v.publicShare} min={0} max={100} unit="%" onChange={set("publicShare")} info="Wie viel Prozent der Ladevorgänge öffentlich statt zuhause stattfinden." />
          </div>
        </Card>

        <Card label="kraftstoff" title="Kraftstoffkosten" padding={24}>
          <SliderRow label="benzin- / dieselpreis" value={v.fuelPrice} min={1.20} max={2.30} unit="€/l" onChange={set("fuelPrice")} info="Aktueller Preis für Benzin oder Diesel pro Liter." />
        </Card>

        <Card label="verbrauch" title="Verbrauch" padding={24}>
          <div style={{ display: "flex", flexDirection: "column", gap: 22 }}>
            <SliderRow label="verbrauch e-auto" value={v.evConsumption} min={12} max={28} unit="kwh/100km" onChange={set("evConsumption")} info="Durchschnittlicher Stromverbrauch des E-Autos pro 100 km." />
            <SliderRow label="verbrauch verbrenner" value={v.iceConsumption} min={4} max={13} unit="l/100km" onChange={set("iceConsumption")} info="Durchschnittlicher Kraftstoffverbrauch des Verbrenners pro 100 km." />
          </div>
        </Card>

        <Card label="nutzung" title="Nutzung" padding={24}>
          <div style={{ display: "flex", flexDirection: "column", gap: 22 }}>
            <SliderRow label="jährliche fahrleistung" value={v.annualKm} min={5000} max={40000} unit="km/jahr" onChange={set("annualKm")} info="Wie viele Kilometer pro Jahr gefahren werden." />
            <SliderRow label="zeithorizont" value={v.years} min={1} max={15} unit="jahre" onChange={set("years")} info="Betrachtungszeitraum für die Ersparnis-Berechnung." />
          </div>
        </Card>

        <Card label="steuern & förderung" title="Steuern & Förderung" padding={24}>
          <div style={{ display: "flex", flexDirection: "column", gap: 22 }}>
            <SliderRow label="kfz-steuer · verbrenner" value={v.kfzSteuerICE} min={50} max={400} unit="€/jahr" onChange={set("kfzSteuerICE")} info="Jährliche Kfz-Steuer für den Verbrenner, abhängig von Hubraum und Emissionen." />
            <SliderRow label="thg-quote-erlös · e-auto" value={v.thgQuote} min={0} max={500} unit="€/jahr" onChange={set("thgQuote")} info="Jährlicher Erlös aus dem Verkauf der Treibhausgasminderungs-Quote für E-Auto-Halter:innen." />
            <span style={{ font: "var(--font-caption)", color: "var(--text-tertiary)" }}>e-auto: 0 € kfz-steuer (befreit bis 2035)</span>
          </div>
        </Card>

        <Button variant="ghost" size="sm" onClick={reset} style={{ alignSelf: "flex-start" }}>Werte zurücksetzen</Button>
      </div>

      {/* ---- results ---- */}
      <div style={{ position: "sticky", top: 24, display: "flex", flexDirection: "column", gap: 20 }}>
        <Card padding={24}>
          <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 14 }}>
            <StatusDot status={cheaper ? "on" : "attention"} label={cheaper ? "e-auto günstiger" : "verbrenner günstiger"} />
          </div>
          <span style={{ font: "var(--font-data)", fontSize: 40, fontWeight: 500, fontVariantNumeric: "tabular-nums", color: cheaper ? "#1F9D55" : "var(--text-primary)" }}>
            {formatEUR(Math.abs(r.totalSavings))}
          </span>
          <div style={{ font: "var(--font-label)", letterSpacing: "var(--text-label-tracking)", color: "var(--text-tertiary)", marginTop: 6 }}>
            {cheaper ? "ersparnis" : "mehrkosten"} über {v.years} {v.years === 1 ? "jahr" : "jahre"}
          </div>
        </Card>

        <Card label="verlauf" title="Betriebskosten im Vergleich" padding={20}>
          <SavingsChart evSeries={r.evSeries} iceSeries={r.iceSeries} />
          <div style={{ display: "flex", gap: 20, marginTop: 12 }}>
            <span style={{ display: "flex", alignItems: "center", gap: 6, font: "var(--font-label)", letterSpacing: "var(--text-label-tracking)", color: "var(--text-secondary)" }}>
              <span style={{ width: 8, height: 8, borderRadius: 999, background: "#1F9D55", display: "inline-block" }}></span>e-auto
            </span>
            <span style={{ display: "flex", alignItems: "center", gap: 6, font: "var(--font-label)", letterSpacing: "var(--text-label-tracking)", color: "var(--text-secondary)" }}>
              <span style={{ width: 8, height: 8, borderRadius: 999, background: "#FF6A00", display: "inline-block" }}></span>verbrenner
            </span>
            <span style={{ marginLeft: "auto", font: "var(--font-data)", fontSize: 10, color: "var(--text-tertiary)" }}>kumulierte betriebskosten in €</span>
          </div>
        </Card>

        <Card padding={20}>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 18 }}>
            <Stat label="e-auto · €/km" value={r.costPerKmEV.toFixed(3).replace(".", ",")} />
            <Stat label="verbrenner · €/km" value={r.costPerKmICE.toFixed(3).replace(".", ",")} />
            <Stat label="günstiger" value={`${r.percentCheaper.toFixed(0)} %`} />
            <Stat label="jährliche ersparnis" value={formatEUR(r.annualSavings)} />
            <Stat label="thg-erlös / jahr" value={formatEUR(v.thgQuote)} />
            <Stat label="kfz-steuer verbrenner / jahr" value={formatEUR(v.kfzSteuerICE)} />
          </div>
        </Card>

        <p style={{ font: "var(--font-caption)", color: "var(--text-tertiary)", margin: 0 }}>
          Vereinfachtes Modell: heutige Preise linear fortgeschrieben, ohne Inflation, Anschaffungspreise, Versicherung oder Wertverlust. Berücksichtigt THG-Quote-Erlös und Kfz-Steuer (E-Auto aktuell bis 2035 befreit).
        </p>
      </div>
    </div>
  );
}

Object.assign(window, { EVCalculatorDeploy });