// ScheduleCard — V1.12.0 (Janik 2026-04-26).
// 9-Step-Slider Cadence-Picker, basierend auf Design-Bundle (scheduling.jsx
// FREQ_STEPS + scheduler-screens.jsx Inline-Toggle-Pattern).
//
// Liest profile.schedule (vom Server) + ruft window.CortexAPI.setSchedule
// um Änderungen zu persistieren. Live-Forecast: Leads/Woche basierend auf
// hardcoded LEADS_PER_QUERY=10.
//
// Replaces: alte localStorage-basierte ScheduledRunsSection in scheduling.jsx
// (die war nur Demo-State, nicht mit Server verbunden).
//
// Mount-Point: screen-profile-detail.jsx anstelle von <ScheduledRunsSection/>.

const LEADS_PER_QUERY = 10;

// V1.12.4 (Janik 2026-04-26): Reduziert auf 5 Hourly-Steps — User: "tageszeit
// und wochezeit brauchen wir nicht. nur regler von stündlich, alle 2, alle 4,
// alle 8, alle 12". Cadence ist immer 'hourly' wenn Toggle an. Toggle-OFF ist
// 'manual'. Daily/Weekly/Monthly im Backend bleiben supported (Legacy-Schedules
// in DB), werden aber im UI nicht mehr erzeugt.
const FREQ_STEPS = [
  { id: 'h1',  label: 'Stündlich',       short: 'jede Stunde', intervalHours: 1,  runsPerWeek: 168 },
  { id: 'h2',  label: 'Alle 2 Stunden',  short: 'alle 2 h',    intervalHours: 2,  runsPerWeek: 84  },
  { id: 'h4',  label: 'Alle 4 Stunden',  short: 'alle 4 h',    intervalHours: 4,  runsPerWeek: 42  },
  { id: 'h8',  label: 'Alle 8 Stunden',  short: 'alle 8 h',    intervalHours: 8,  runsPerWeek: 21  },
  { id: 'h12', label: 'Alle 12 Stunden', short: 'alle 12 h',   intervalHours: 12, runsPerWeek: 14  },
];
const DEFAULT_FREQ_IDX = 2; // alle 4 h — sinnvoller Default zwischen "spammy" und "selten"

// Map vom server-Schedule zurück auf Slider-Index. Nur hourly-cadence wird
// gemappt — alles andere (manual/daily/weekly/monthly Legacy) → Default.
function scheduleToFreqIdx(sched) {
  if (!sched || sched.cadence !== 'hourly') return DEFAULT_FREQ_IDX;
  const ih = sched.intervalHours || 1;
  const idx = FREQ_STEPS.findIndex((s) => s.intervalHours === ih);
  return idx >= 0 ? idx : DEFAULT_FREQ_IDX;
}

// Berechne human-readable "Nächster Lauf" — gleich Berlin-Zeit lokal anzeigen
function formatNextRun(nextRunAt) {
  if (!nextRunAt || nextRunAt >= Number.MAX_SAFE_INTEGER) return null;
  const now = Date.now();
  if (nextRunAt < now) return 'überfällig';
  const diffMin = Math.round((nextRunAt - now) / 60000);
  if (diffMin < 60) return `in ${diffMin} Min.`;
  const diffH = Math.round(diffMin / 60);
  if (diffH < 24) return `in ${diffH} h`;
  const diffD = Math.round(diffH / 24);
  if (diffD === 1) return 'morgen';
  if (diffD < 7) return `in ${diffD} Tagen`;
  return new Date(nextRunAt).toLocaleDateString('de-DE', { day: '2-digit', month: 'short' });
}

const WEEKDAYS = [
  { v: 1, label: 'Mo' }, { v: 2, label: 'Di' }, { v: 3, label: 'Mi' },
  { v: 4, label: 'Do' }, { v: 5, label: 'Fr' }, { v: 6, label: 'Sa' }, { v: 7, label: 'So' },
];

// V1.12.1 (Janik 2026-04-26): ScheduleCard operiert jetzt auf LeadQuery-Level
// statt Profile-Level. Wird im QueryDetailOverlay gemountet.
//
// Props:
//   - profile: { id, ... } — für API-Call
//   - leadQuery: { id, schedule? } — die konkrete Query die getimt wird
//   - onUpdate?: callback wenn save erfolgreich (für Re-Fetch im Parent)
//   - toast: { push } | function
//
// Wenn leadQuery NICHT übergeben wird, fällt die Komponente auf profile.schedule
// zurück (Legacy-Path für Profile-Detail). Bei leadQuery → API ruft
// setLeadQuerySchedule statt setSchedule.
function ScheduleCard({ profile, leadQuery, onUpdate, toast }) {
  // Source-of-truth: leadQuery.schedule wenn LeadQuery, sonst profile.schedule
  const sched = (leadQuery?.schedule) || profile?.schedule || null;
  const isLeadQueryMode = !!leadQuery;
  const initialFreqIdx = scheduleToFreqIdx(sched);
  const initialPaused = !!(sched?.pausedReason);
  // V1.12.4 (Janik 2026-04-26): scheduled-default = false wenn keine Schedule
  // und auch false wenn cadence!='hourly' (Legacy-daily/weekly/monthly werden
  // beim ersten Save automatisch auf hourly migriert sobald der User toggled).
  const [freqIdx, setFreqIdx] = React.useState(initialFreqIdx);
  const [scheduled, setScheduled] = React.useState(sched?.cadence === 'hourly' && !initialPaused);
  const [saving, setSaving] = React.useState(false);
  const [dirty, setDirty] = React.useState(false);

  React.useEffect(() => {
    if (!sched) {
      setFreqIdx(DEFAULT_FREQ_IDX);
      setScheduled(false);
      setDirty(false);
      return;
    }
    setFreqIdx(scheduleToFreqIdx(sched));
    setScheduled(sched.cadence === 'hourly' && !sched.pausedReason);
    setDirty(false);
  }, [profile?.id, leadQuery?.id, sched?.cadence, sched?.intervalHours, sched?.pausedReason]);

  const f = FREQ_STEPS[freqIdx];
  const weeklyLeads = Math.round(f.runsPerWeek * LEADS_PER_QUERY);
  const weeklyCredits = weeklyLeads;
  const nextRunLabel = scheduled && sched ? formatNextRun(sched.nextRunAt) : null;

  const updateFreq = (newIdx) => {
    setFreqIdx(newIdx);
    setDirty(true);
  };

  const save = async () => {
    if (!profile?.id) return;
    setSaving(true);
    try {
      // V1.12.4: nur noch hourly-cadence (mit intervalHours) oder manual.
      // preferredHourUtc/weekday/dayOfMonth gibt es im UI nicht mehr.
      const body = scheduled
        ? { cadence: 'hourly', paused: false, intervalHours: f.intervalHours }
        : { cadence: 'manual', paused: false };
      if (isLeadQueryMode) {
        await window.CortexAPI.setLeadQuerySchedule(profile.id, leadQuery.id, body);
      } else {
        await window.CortexAPI.setSchedule(profile.id, body);
      }
      const msg = 'Zeitplan gespeichert.';
      toast?.push?.(msg, 'positive') ?? (typeof toast === 'function' && toast(msg));
      setDirty(false);
      onUpdate?.();
    } catch (err) {
      console.warn('[schedule-card] save failed', err);
      const msg = `Speichern fehlgeschlagen: ${err?.message || 'Unbekannter Fehler'}`;
      toast?.push?.(msg, 'negative') ?? (typeof toast === 'function' && toast(msg));
    } finally {
      setSaving(false);
    }
  };

  return (
    // V1.12.5 (Janik 2026-04-26): "das sieht immer noch bisschen weird,
    // undclean und nicht minimalistisch und clean aus". Komplett entcardifiziert.
    // Vorher: 4-fach verschachtelte Cards (outer-Modal → inner-Card →
    // Frequenz-Display-Box → Forecast-Box). Jetzt: flacher Layout direkt
    // im Modal-Content, nur typografische Hierarchie + 1 sehr dezenter
    // Slider-Background. Save-Button minimal in der Toolbar-Linie.
    <div className="space-y-5">
      {/* Header-Zeile: Toggle + Titel + Live-Chip */}
      <div className="flex items-start gap-3">
        <button
          type="button"
          onClick={() => { setScheduled((v) => !v); setDirty(true); }}
          aria-label="Wiederholen an/aus"
          className={`relative w-[40px] h-[22px] rounded-full transition-colors flex-shrink-0 mt-0.5 ${
            scheduled
              ? 'bg-gradient-to-r from-[#1479FC] to-[#B880FC]'
              : 'bg-[#E6ECF5]'
          }`}
        >
          <span
            className="absolute top-[2px] w-[18px] h-[18px] rounded-full bg-white transition-transform shadow-sm"
            style={{ left: '2px', transform: scheduled ? 'translateX(18px)' : 'translateX(0)' }}
          />
        </button>

        <div className="flex-1 min-w-0">
          <div className="flex items-center gap-2 flex-wrap">
            <span className="text-[14px] font-medium text-ink">Diese Suche wiederholen</span>
            {nextRunLabel && (
              <span className="inline-flex items-center gap-1.5 text-[11.5px] text-[#1558C9]">
                <span className="w-1.5 h-1.5 rounded-full bg-[#1479FC] pulse-dot"/>
                nächster Lauf {nextRunLabel}
              </span>
            )}
          </div>
          <div className="text-[12.5px] text-ink-muted mt-0.5">
            {scheduled
              ? 'Läuft im Hintergrund. Neue Treffer landen automatisch in deiner Lead-Liste.'
              : 'Einmalig — du startest selbst, wann du willst.'}
          </div>
        </div>

        {dirty && (
          <button
            type="button"
            onClick={save}
            disabled={saving}
            className="px-3.5 h-[30px] rounded-md text-[12.5px] font-medium text-white bg-[#3465E3] hover:bg-[#2A55C9] transition-colors disabled:opacity-60 flex-shrink-0"
          >
            {saving ? 'Speichere…' : 'Speichern'}
          </button>
        )}
      </div>

      {/* Slider-Block: nur wenn aktiv. Großes Frequenz-Display als reine
          Typografie (kein border, kein bg-card mehr). */}
      {scheduled && (
        <div className="fade-in">
          <div className="text-center mb-3">
            <div className="text-[28px] font-semibold text-[#3465E3] tracking-tight leading-none">
              {f.label}
            </div>
            <div className="text-[12px] text-ink-muted mt-1.5">
              ≈ {Math.round(f.runsPerWeek * LEADS_PER_QUERY).toLocaleString('de-DE')} neue Leads / Woche · {Math.round(f.runsPerWeek)} Läufe · {weeklyCredits.toLocaleString('de-DE')} Credits
              {f.intervalHours <= 2 && <span className="text-amber-700"> · ⚠ Hot-Hunting</span>}
            </div>
          </div>

          <input
            type="range"
            min={0}
            max={FREQ_STEPS.length - 1}
            step={1}
            value={freqIdx}
            onChange={(e) => updateFreq(parseInt(e.target.value, 10))}
            className="repeat-slider w-full"
            style={{
              background: `linear-gradient(to right, #3465E3 0%, #3465E3 ${(freqIdx / (FREQ_STEPS.length - 1)) * 100}%, #E6ECF5 ${(freqIdx / (FREQ_STEPS.length - 1)) * 100}%, #E6ECF5 100%)`,
            }}
          />

          <div className="flex justify-between mt-2 px-1">
            {FREQ_STEPS.map((ff, i) => (
              <button
                key={ff.id}
                type="button"
                onClick={() => updateFreq(i)}
                className={`text-[10.5px] font-medium tabular-nums transition-colors ${
                  i === freqIdx ? 'text-[#3465E3]' : 'text-ink-soft hover:text-ink-muted'
                }`}
                title={ff.label}
              >
                {ff.intervalHours}h
              </button>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}

function FreqOption({ freq, selected, onClick }) {
  const leadsPerWeek = Math.round(freq.runsPerWeek * LEADS_PER_QUERY);
  return (
    <button
      type="button"
      onClick={onClick}
      className={`text-left px-3 py-2.5 rounded-lg border-2 transition-colors ${
        selected
          ? 'border-[#3465E3] bg-[#F4F7FD]/60'
          : 'border-line bg-white hover:border-[#C5D2EC]'
      }`}
    >
      <div className="flex items-center gap-2">
        <div className={`w-3.5 h-3.5 rounded-full border-2 flex items-center justify-center flex-shrink-0 ${
          selected ? 'border-[#3465E3] bg-[#3465E3]' : 'border-[#D5DDEA] bg-white'
        }`}>
          {selected && <div className="w-1 h-1 rounded-full bg-white"/>}
        </div>
        <div className="text-[12.5px] font-semibold text-ink">{freq.label}</div>
      </div>
      <div className="text-[10.5px] text-ink-muted mt-1 ml-[22px] tabular-nums">
        {freq.runsPerWeek > 0
          ? `≈ ${leadsPerWeek.toLocaleString('de-DE')} / Woche`
          : 'Keine Wiederholung'}
      </div>
    </button>
  );
}

Object.assign(window, { ScheduleCard });