// ===== Charts (recharts) =====

const RC = window.Recharts;

const COLORS = {
  night: "#05164d",
  nightMid: "#0b2370",
  amber: "#f9b000",
  amberSoft: "#ffd066",
  cream: "#f6f0e2",
  ink: "#2a2415",
};

// ----- Tooltip helpers -----
function TT({ active, payload, label, fmt }) {
  if (!active || !payload || !payload.length) return null;
  return (
    <div className="ticket px-3 py-2 rounded-sm border border-night/15">
      <div className="font-mono text-[10px] tracking-[0.2em] uppercase text-night/55">{label}</div>
      {payload.map((p, i) => (
        <div key={i} className="font-display text-xl text-night">
          {fmt ? fmt(p.value) : p.value.toLocaleString("de-DE")}
          <span className="ml-2 text-[10px] tracking-[0.2em] uppercase text-night/60 font-mono">{p.name}</span>
        </div>
      ))}
    </div>
  );
}

// ----- Yearly bars: Flüge + km combined dual-axis -----
function YearChart() {
  const data = JAHRE.map((j) => ({
    jahr: j.jahr,
    fluege: j.fluege ?? 0,
    km: j.km ?? 0,
    missing: j.fluege === null,
  }));

  const { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, ReferenceLine, Cell } = RC;

  return (
    <div className="grid md:grid-cols-2 gap-8">
      {/* Flüge */}
      <div className="ticket rounded-sm p-5 border border-night/10">
        <div className="flex items-baseline justify-between">
          <div>
            <div className="font-mono text-[10px] tracking-[0.25em] uppercase text-amber-deep">Flüge je Jahr</div>
            <div className="font-display text-2xl text-night mt-1">Anzahl pro Kalenderjahr</div>
          </div>
          <Pill tone="night">2005 keine Aufz.</Pill>
        </div>
        <div className="mt-4 h-72">
          <ResponsiveContainer>
            <BarChart data={data} margin={{ top: 10, right: 4, bottom: 4, left: -10 }}>
              <CartesianGrid stroke={COLORS.night} strokeOpacity={0.08} vertical={false} />
              <XAxis dataKey="jahr" tick={{ fill: COLORS.night, opacity: 0.7, fontSize: 11, fontFamily: "JetBrains Mono" }} axisLine={{ stroke: COLORS.night, opacity: 0.2 }} tickLine={false} />
              <YAxis tick={{ fill: COLORS.night, opacity: 0.6, fontSize: 11 }} axisLine={false} tickLine={false} />
              <Tooltip cursor={{ fill: COLORS.amber, fillOpacity: 0.08 }} content={<TT />} />
              <Bar dataKey="fluege" name="Flüge" radius={[3,3,0,0]}>
                {data.map((d, i) => (
                  <Cell key={i} fill={d.missing ? "transparent" : COLORS.night}
                        stroke={d.missing ? COLORS.night : "none"}
                        strokeDasharray={d.missing ? "3 3" : "0"}
                        strokeOpacity={d.missing ? 0.45 : 0} />
                ))}
              </Bar>
            </BarChart>
          </ResponsiveContainer>
        </div>
      </div>

      {/* Kilometer */}
      <div className="ticket rounded-sm p-5 border border-night/10">
        <div className="flex items-baseline justify-between">
          <div>
            <div className="font-mono text-[10px] tracking-[0.25em] uppercase text-amber-deep">Kilometer je Jahr</div>
            <div className="font-display text-2xl text-night mt-1">Geflogene Strecke</div>
          </div>
          <Pill tone="night">in km</Pill>
        </div>
        <div className="mt-4 h-72">
          <ResponsiveContainer>
            <BarChart data={data} margin={{ top: 10, right: 4, bottom: 4, left: -10 }}>
              <CartesianGrid stroke={COLORS.night} strokeOpacity={0.08} vertical={false} />
              <XAxis dataKey="jahr" tick={{ fill: COLORS.night, opacity: 0.7, fontSize: 11, fontFamily: "JetBrains Mono" }} axisLine={{ stroke: COLORS.night, opacity: 0.2 }} tickLine={false} />
              <YAxis tick={{ fill: COLORS.night, opacity: 0.6, fontSize: 11 }} axisLine={false} tickLine={false}
                     tickFormatter={(v) => v >= 1000 ? (v/1000).toFixed(0)+"k" : v} />
              <Tooltip cursor={{ fill: COLORS.amber, fillOpacity: 0.08 }} content={<TT fmt={(v)=>v.toLocaleString("de-DE")+" km"} />} />
              <Bar dataKey="km" name="Kilometer" radius={[3,3,0,0]}>
                {data.map((d, i) => (
                  <Cell key={i} fill={d.missing ? "transparent" : COLORS.amber}
                        stroke={d.missing ? COLORS.amber : "none"}
                        strokeDasharray={d.missing ? "3 3" : "0"}
                        strokeOpacity={d.missing ? 0.6 : 0} />
                ))}
              </Bar>
            </BarChart>
          </ResponsiveContainer>
        </div>
      </div>
    </div>
  );
}

// ----- Monthly seasonality -----
function MonthChart() {
  const data = MONATE;
  const max = Math.max(...data.map((d) => d.n));
  const min = Math.min(...data.map((d) => d.n));
  const { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Cell, LabelList } = RC;

  return (
    <div className="ticket rounded-sm p-5 border border-night/10">
      <div className="flex items-baseline justify-between flex-wrap gap-2">
        <div>
          <div className="font-mono text-[10px] tracking-[0.25em] uppercase text-amber-deep">Reisejahr</div>
          <div className="font-display text-2xl text-night mt-1">Monatsverteilung aller Flüge</div>
        </div>
        <div className="flex gap-2">
          <Pill tone="amber">Spitze Juli</Pill>
          <Pill tone="night">ruhigster März</Pill>
        </div>
      </div>
      <div className="mt-4 h-72">
        <ResponsiveContainer>
          <BarChart data={data} margin={{ top: 18, right: 8, bottom: 4, left: -10 }}>
            <CartesianGrid stroke={COLORS.night} strokeOpacity={0.08} vertical={false} />
            <XAxis dataKey="m" tick={{ fill: COLORS.night, opacity: 0.7, fontSize: 11, fontFamily: "JetBrains Mono" }} axisLine={{ stroke: COLORS.night, opacity: 0.2 }} tickLine={false} />
            <YAxis tick={{ fill: COLORS.night, opacity: 0.6, fontSize: 11 }} axisLine={false} tickLine={false} />
            <Tooltip cursor={{ fill: COLORS.amber, fillOpacity: 0.08 }} content={<TT />} />
            <Bar dataKey="n" name="Flüge" radius={[3,3,0,0]}>
              {data.map((d, i) => {
                let fill = COLORS.night;
                if (d.n === max) fill = COLORS.amber;
                else if (d.n === min) fill = COLORS.nightMid;
                return <Cell key={i} fill={fill} fillOpacity={d.n === max ? 1 : 0.85} />;
              })}
              <LabelList dataKey="n" position="top" style={{ fill: COLORS.night, fontSize: 10, fontFamily: "JetBrains Mono", opacity: 0.55 }} />
            </Bar>
          </BarChart>
        </ResponsiveContainer>
      </div>
    </div>
  );
}

// ----- Fleet share -----
function FleetChart() {
  const data = FLOTTE.map((f) => ({
    name: f.typ,
    Flüge: f.fluege,
    km: f.km,
    era: f.era,
    hinweis: f.hinweis,
  }));
  const totalFluege = data.reduce((s, d) => s + d.Flüge, 0);
  const totalKm = data.reduce((s, d) => s + d.km, 0);
  const { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, LabelList, Cell } = RC;
  const fleetColors = [COLORS.amber, COLORS.night, COLORS.nightMid];

  return (
    <div className="grid md:grid-cols-2 gap-8">
      <div className="ticket rounded-sm p-5 border border-night/10">
        <div className="font-mono text-[10px] tracking-[0.25em] uppercase text-amber-deep">Flotte · Flüge</div>
        <div className="font-display text-2xl text-night mt-1">Welches Muster, wie oft</div>
        <div className="mt-4 h-64">
          <ResponsiveContainer>
            <BarChart data={data} layout="vertical" margin={{ top: 6, right: 30, bottom: 4, left: 30 }}>
              <CartesianGrid stroke={COLORS.night} strokeOpacity={0.06} horizontal={false} />
              <XAxis type="number" tick={{ fill: COLORS.night, opacity: 0.6, fontSize: 11 }} axisLine={false} tickLine={false} />
              <YAxis type="category" dataKey="name" tick={{ fill: COLORS.night, opacity: 0.85, fontSize: 12, fontFamily: "JetBrains Mono" }} axisLine={false} tickLine={false} width={110} />
              <Tooltip cursor={{ fill: COLORS.amber, fillOpacity: 0.06 }} content={<TT />} />
              <Bar dataKey="Flüge" radius={[0,4,4,0]}>
                {data.map((_, i) => <Cell key={i} fill={fleetColors[i]} />)}
                <LabelList dataKey="Flüge" position="right" style={{ fill: COLORS.night, fontSize: 12, fontFamily: "JetBrains Mono" }} />
              </Bar>
            </BarChart>
          </ResponsiveContainer>
        </div>
        <div className="mt-2 text-xs text-night/60 font-mono">Σ {totalFluege.toLocaleString("de-DE")} Flüge</div>
      </div>

      <div className="ticket rounded-sm p-5 border border-night/10">
        <div className="font-mono text-[10px] tracking-[0.25em] uppercase text-amber-deep">Flotte · Kilometer</div>
        <div className="font-display text-2xl text-night mt-1">Welches Muster, wie weit</div>
        <div className="mt-4 h-64">
          <ResponsiveContainer>
            <BarChart data={data} layout="vertical" margin={{ top: 6, right: 30, bottom: 4, left: 30 }}>
              <CartesianGrid stroke={COLORS.night} strokeOpacity={0.06} horizontal={false} />
              <XAxis type="number" tick={{ fill: COLORS.night, opacity: 0.6, fontSize: 11 }} axisLine={false} tickLine={false}
                     tickFormatter={(v) => v >= 1000 ? (v/1000).toFixed(0)+"k" : v} />
              <YAxis type="category" dataKey="name" tick={{ fill: COLORS.night, opacity: 0.85, fontSize: 12, fontFamily: "JetBrains Mono" }} axisLine={false} tickLine={false} width={110} />
              <Tooltip cursor={{ fill: COLORS.amber, fillOpacity: 0.06 }} content={<TT fmt={(v)=>v.toLocaleString("de-DE")+" km"} />} />
              <Bar dataKey="km" radius={[0,4,4,0]}>
                {data.map((_, i) => <Cell key={i} fill={fleetColors[i]} fillOpacity={0.85} />)}
                <LabelList dataKey="km" position="right"
                           formatter={(v) => v.toLocaleString("de-DE")}
                           style={{ fill: COLORS.night, fontSize: 11, fontFamily: "JetBrains Mono" }} />
              </Bar>
            </BarChart>
          </ResponsiveContainer>
        </div>
        <div className="mt-2 text-xs text-night/60 font-mono">Σ {totalKm.toLocaleString("de-DE")} km</div>
      </div>
    </div>
  );
}

Object.assign(window, { YearChart, MonthChart, FleetChart });