const { useState: useS, useEffect: useE, useCallback } = React;

const EVENT_ARTIST_ROLES = [
  { id: "acteur", label: "Acteur" },
  { id: "musicien", label: "Musicien" },
  { id: "metteur_en_scene", label: "Metteur en scène" },
  { id: "association", label: "Association" },
  { id: "autre", label: "Autre" },
];
const EVENTS_MAX = 200;
const EVENT_STATUS_LABEL = {
  draft: "Brouillon",
  scheduled: "À venir",
  past: "Passé",
  cancelled: "Annulé",
};

function toDatetimeLocalValue(iso) {
  if (!iso) return "";
  const d = new Date(iso);
  if (Number.isNaN(d.getTime())) return "";
  const pad = (n) => String(n).padStart(2, "0");
  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
}

function formatEventDateLabel(startsAt, endsAt) {
  const start = new Date(startsAt);
  if (Number.isNaN(start.getTime())) return "";
  const fmt = (d) =>
    d.toLocaleString("fr-FR", {
      weekday: "short",
      day: "numeric",
      month: "short",
      hour: "2-digit",
      minute: "2-digit",
    });
  if (!endsAt) return fmt(start);
  const end = new Date(endsAt);
  if (Number.isNaN(end.getTime())) return fmt(start);
  return `${fmt(start)} → ${fmt(end)}`;
}

function emptyEventDraft() {
  return {
    id: "",
    title: "",
    startsAt: "",
    endsAt: "",
    location: "",
    shortDescription: "",
    posterUrl: "",
    sourceUrl: "",
    status: "scheduled",
    artists: [],
  };
}

function eventToDraft(ev) {
  return {
    id: ev.id,
    title: ev.title || "",
    startsAt: toDatetimeLocalValue(ev.startsAt),
    endsAt: toDatetimeLocalValue(ev.endsAt),
    location: ev.location || "",
    shortDescription: ev.shortDescription || "",
    posterUrl: ev.posterUrl || "",
    sourceUrl: ev.sourceUrl || "",
    status: ev.status,
    artists: (ev.artists || []).map((a) => ({ ...a })),
  };
}

function EventsScreen({ initialEvents = [], busy }) {
  const [events, setEvents] = useS(() => initialEvents || []);
  const [draft, setDraft] = useS(null);
  const [loading, setLoading] = useS(false);
  const [saving, setSaving] = useS(false);
  const [msg, setMsg] = useS("");
  const [err, setErr] = useS("");
  const [describeBusy, setDescribeBusy] = useS(false);
  const [posterBusy, setPosterBusy] = useS(false);
  const [importUrl, setImportUrl] = useS("");
  const [importText, setImportText] = useS("");
  const [importing, setImporting] = useS(false);

  const load = useCallback(async () => {
    setLoading(true);
    setErr("");
    try {
      const res = await GuyAPI.listEvents();
      setEvents(Array.isArray(res?.events) ? res.events : []);
    } catch (e) {
      setErr(e?.message || "Impossible de charger les événements.");
    } finally {
      setLoading(false);
    }
  }, []);

  useE(() => {
    void load();
  }, [load]);

  const upcoming = events.filter(
    (e) => e.displayStatus === "scheduled" || e.displayStatus === "draft",
  );
  const past = events.filter((e) => e.displayStatus === "past");
  const cancelled = events.filter((e) => e.displayStatus === "cancelled");

  function patchDraft(partial) {
    setDraft((prev) => (prev ? { ...prev, ...partial } : prev));
  }

  function openNew() {
    setErr("");
    setMsg("");
    setDraft(emptyEventDraft());
  }

  function openEdit(ev) {
    setErr("");
    setMsg("");
    setDraft(eventToDraft(ev));
  }

  async function saveDraft() {
    if (!draft) return;
    if (!(draft.title || "").trim() || !draft.startsAt) {
      setErr("Indiquez au moins un nom et une date de début.");
      return;
    }
    setSaving(true);
    setErr("");
    setMsg("");
    const payload = {
      title: draft.title.trim(),
      startsAt: draft.startsAt,
      endsAt: draft.endsAt || null,
      location: draft.location.trim(),
      shortDescription: draft.shortDescription.trim(),
      posterUrl: draft.posterUrl.trim() || null,
      sourceUrl: draft.sourceUrl.trim() || null,
      status: draft.status,
      artists: (draft.artists || []).filter((a) => (a.name || "").trim()),
    };
    try {
      const res = draft.id
        ? await GuyAPI.updateEvent(draft.id, payload)
        : await GuyAPI.createEvent(payload);
      const saved = res?.event;
      if (saved) {
        setEvents((prev) => {
          const others = prev.filter((e) => e.id !== saved.id);
          return [...others, saved].sort((a, b) => a.startsAt.localeCompare(b.startsAt));
        });
        setDraft(eventToDraft(saved));
      } else {
        await load();
      }
      setMsg("Événement enregistré.");
    } catch (e) {
      setErr(e?.message || "Enregistrement impossible.");
    } finally {
      setSaving(false);
    }
  }

  async function removeDraft() {
    if (!draft?.id) {
      setDraft(null);
      return;
    }
    if (!window.confirm("Supprimer cet événement ?")) return;
    setSaving(true);
    try {
      await GuyAPI.deleteEvent(draft.id);
      setEvents((prev) => prev.filter((e) => e.id !== draft.id));
      setDraft(null);
      setMsg("Événement supprimé.");
    } catch (e) {
      setErr(e?.message || "Suppression impossible.");
    } finally {
      setSaving(false);
    }
  }

  async function describeDraft() {
    if (!draft?.id) {
      setErr("Enregistrez l’événement avant de générer le descriptif.");
      return;
    }
    setDescribeBusy(true);
    setErr("");
    try {
      const res = await GuyAPI.describeEvent(draft.id);
      const saved = res?.event;
      if (saved) {
        setEvents((prev) => prev.map((e) => (e.id === saved.id ? saved : e)));
        setDraft(eventToDraft(saved));
      } else if (res?.description) {
        patchDraft({ shortDescription: res.description });
      }
      setMsg("Descriptif rédigé. Relisez-le avant de le laisser tel quel.");
    } catch (e) {
      setErr(e?.message || "Génération impossible.");
    } finally {
      setDescribeBusy(false);
    }
  }

  async function onPosterFile(file) {
    if (!file) return;
    setPosterBusy(true);
    setErr("");
    try {
      const dataUrl = await resizeProductRefFile(file);
      const res = await GuyAPI.uploadEventPoster(dataUrl);
      if (!res?.url) throw new Error("Hébergement de l’affiche impossible.");
      patchDraft({ posterUrl: res.url });
    } catch (e) {
      setErr(e?.message || "Import de l’affiche impossible.");
    } finally {
      setPosterBusy(false);
    }
  }

  async function runImport(payload) {
    setImporting(true);
    setErr("");
    setMsg("");
    try {
      const res = await GuyAPI.importEvents(payload);
      const incoming = Array.isArray(res?.events) ? res.events : [];
      if (incoming.length) {
        setEvents((prev) => {
          const byId = new Map(prev.map((e) => [e.id, e]));
          for (const ev of incoming) byId.set(ev.id, ev);
          return [...byId.values()].sort((a, b) => a.startsAt.localeCompare(b.startsAt));
        });
      } else {
        await load();
      }
      setMsg(res?.message || "Import terminé.");
      if (payload.text) setImportText("");
    } catch (e) {
      setErr(e?.message || "Import impossible.");
    } finally {
      setImporting(false);
    }
  }

  async function onImportFile(file) {
    if (!file) return;
    const text = await file.text();
    await runImport({ text, filename: file.name });
  }

  function addArtist() {
    patchDraft({
      artists: [...(draft?.artists || []), { name: "", role: "autre" }],
    });
  }

  function patchArtist(i, key, value) {
    const next = (draft?.artists || []).map((a, idx) =>
      idx === i ? { ...a, [key]: value } : a,
    );
    patchDraft({ artists: next });
  }

  function removeArtist(i) {
    patchDraft({
      artists: (draft?.artists || []).filter((_, idx) => idx !== i),
    });
  }

  function renderGroup(title, list) {
    if (!list.length) return null;
    return (
      <section className="sg-panel" style={{ marginBottom: 16 }}>
        <h3 className="sg-block-title">{title}</h3>
        <div className="sg-event-list">
          {list.map((ev) => (
            <button
              key={ev.id}
              type="button"
              className="sg-event-row"
              onClick={() => openEdit(ev)}
            >
              {ev.posterUrl ? (
                <img src={ev.posterUrl} alt="" className="sg-event-poster" />
              ) : (
                <span className="sg-event-poster sg-event-poster--empty">Affiche</span>
              )}
              <span className="sg-event-row-copy">
                <b>{ev.title}</b>
                <span>{formatEventDateLabel(ev.startsAt, ev.endsAt)}</span>
                {ev.location ? <span>{ev.location}</span> : null}
              </span>
              <Pill tone={ev.displayStatus === "scheduled" ? "published" : "draft"}>
                {EVENT_STATUS_LABEL[ev.displayStatus] || ev.displayStatus}
              </Pill>
            </button>
          ))}
        </div>
      </section>
    );
  }

  return (
    <div className="sg-screen">
      <header className="sg-billing-head">
        <div className="sg-billing-head-copy">
          <h1 className="sg-billing-title">Événements</h1>
          <p className="sg-billing-sub">
            Calendrier interne : Guy s’en sert comme des produits pour les articles et l’autopilote.
          </p>
        </div>
        <button
          type="button"
          className="sg-btn-primary sm"
          disabled={busy || saving || importing || events.length >= EVENTS_MAX}
          onClick={openNew}
        >
          Nouvel événement
        </button>
      </header>

      {err ? <p className="sg-field-error">{err}</p> : null}
      {msg ? <p className="sg-field-hint sg-sync-ok">{msg}</p> : null}
      {loading ? <p className="sg-field-hint">Chargement…</p> : null}

      {draft ? (
        <section className="sg-panel">
          <div className="sg-toolbar-inline" style={{ marginBottom: 12 }}>
            <button type="button" className="sg-btn-ghost sm" onClick={() => setDraft(null)}>
              ← Retour à la liste
            </button>
          </div>
          <div className="sg-cfg-product-card">
            <div className="sg-cfg-product-photo-wrap">
              {draft.posterUrl ? (
                <img src={draft.posterUrl} alt="" className="sg-cfg-product-photo" />
              ) : (
                <div className="sg-cfg-product-photo sg-cfg-product-photo--empty">Affiche</div>
              )}
            </div>
            <div className="sg-cfg-product-fields" style={{ gap: 10 }}>
              <input
                className="sg-cfg-input"
                placeholder="Nom de l’événement"
                value={draft.title}
                onChange={(e) => patchDraft({ title: e.target.value })}
              />
              <div className="sg-cfg-row">
                <label className="sg-field-hint">
                  Début
                  <input
                    type="datetime-local"
                    className="sg-cfg-input"
                    value={draft.startsAt}
                    onChange={(e) => patchDraft({ startsAt: e.target.value })}
                  />
                </label>
                <label className="sg-field-hint">
                  Fin (optionnel)
                  <input
                    type="datetime-local"
                    className="sg-cfg-input"
                    value={draft.endsAt}
                    onChange={(e) => patchDraft({ endsAt: e.target.value })}
                  />
                </label>
              </div>
              <input
                className="sg-cfg-input"
                placeholder="Lieu"
                value={draft.location}
                onChange={(e) => patchDraft({ location: e.target.value })}
              />
              <textarea
                className="sg-textarea"
                rows={4}
                placeholder="Descriptif court"
                value={draft.shortDescription}
                onChange={(e) => patchDraft({ shortDescription: e.target.value })}
              />
              <div className="sg-toolbar-inline" style={{ flexWrap: "wrap" }}>
                <button
                  type="button"
                  className="sg-btn-ghost sm"
                  disabled={describeBusy || saving}
                  onClick={() => void describeDraft()}
                >
                  {describeBusy ? "Rédaction…" : "Rédiger le descriptif"}
                </button>
                <label className={`sg-btn-ghost sm${posterBusy ? " is-disabled" : ""}`}>
                  {posterBusy ? "Import…" : "Importer l’affiche"}
                  <input
                    type="file"
                    accept="image/jpeg,image/png,image/webp,.jpg,.jpeg,.png,.webp"
                    hidden
                    disabled={posterBusy}
                    onChange={(e) => {
                      const file = e.target.files?.[0];
                      e.target.value = "";
                      if (file) void onPosterFile(file);
                    }}
                  />
                </label>
              </div>
              <input
                className="sg-cfg-input"
                placeholder="https://… (page ou billetterie, optionnel)"
                value={draft.sourceUrl}
                onChange={(e) => patchDraft({ sourceUrl: e.target.value })}
              />
              <div>
                <p className="sg-set-title" style={{ marginBottom: 8 }}>Artistes</p>
                {(draft.artists || []).map((artist, i) => (
                  <div key={i} className="sg-cfg-row" style={{ marginBottom: 8 }}>
                    <input
                      className="sg-cfg-input"
                      placeholder="Nom"
                      value={artist.name}
                      onChange={(e) => patchArtist(i, "name", e.target.value)}
                    />
                    <select
                      className="sg-cfg-input"
                      value={artist.role}
                      onChange={(e) => patchArtist(i, "role", e.target.value)}
                    >
                      {EVENT_ARTIST_ROLES.map((role) => (
                        <option key={role.id} value={role.id}>{role.label}</option>
                      ))}
                    </select>
                    <button type="button" className="sg-cfg-remove" onClick={() => removeArtist(i)} aria-label="Retirer">✕</button>
                  </div>
                ))}
                <button type="button" className="sg-btn-ghost sm" onClick={addArtist}>
                  Ajouter un artiste
                </button>
              </div>
              <label className="sg-field-hint">
                Statut
                <select
                  className="sg-cfg-input"
                  value={draft.status}
                  onChange={(e) => patchDraft({ status: e.target.value })}
                >
                  <option value="draft">Brouillon</option>
                  <option value="scheduled">À venir</option>
                  <option value="past">Passé</option>
                  <option value="cancelled">Annulé</option>
                </select>
              </label>
              <div className="sg-toolbar-inline" style={{ flexWrap: "wrap" }}>
                <button
                  type="button"
                  className="sg-btn-primary sm"
                  disabled={saving || busy}
                  onClick={() => void saveDraft()}
                >
                  {saving ? "Enregistrement…" : "Enregistrer"}
                </button>
                <button
                  type="button"
                  className="sg-btn-ghost sm"
                  disabled={saving}
                  onClick={() => void removeDraft()}
                >
                  {draft.id ? "Supprimer" : "Annuler"}
                </button>
              </div>
            </div>
          </div>
        </section>
      ) : (
        <>
          <section className="sg-panel sg-event-import">
            <h3 className="sg-block-title">Importer</h3>
            <p className="sg-field-hint">
              Fichier ICS / CSV, ou l’URL d’un agenda public (OpenAgenda, page OT…). Les dates d’un même titre sont fusionnées.
            </p>
            <div className="sg-event-import-url">
              <input
                className="sg-cfg-input"
                placeholder="https://…/agenda/"
                value={importUrl}
                disabled={importing || busy}
                onChange={(e) => setImportUrl(e.target.value)}
                onKeyDown={(e) => {
                  if (e.key === "Enter" && importUrl.trim()) {
                    void runImport({ url: importUrl.trim() });
                  }
                }}
              />
              <button
                type="button"
                className="sg-btn-primary sm"
                disabled={importing || busy || !importUrl.trim() || events.length >= EVENTS_MAX}
                onClick={() => void runImport({ url: importUrl.trim() })}
              >
                {importing ? "Import…" : "Importer l’URL"}
              </button>
            </div>
            <p className="sg-event-import-or">ou un fichier / un collage ICS · CSV</p>
            <div className="sg-toolbar-inline" style={{ flexWrap: "wrap", marginBottom: 10 }}>
              <label className={`sg-btn-ghost sm${importing ? " is-disabled" : ""}`}>
                Fichier ICS ou CSV
                <input
                  type="file"
                  accept=".ics,.csv,.txt,text/calendar,text/csv"
                  hidden
                  disabled={importing || busy}
                  onChange={(e) => {
                    const file = e.target.files?.[0];
                    e.target.value = "";
                    if (file) void onImportFile(file);
                  }}
                />
              </label>
            </div>
            <textarea
              className="sg-textarea"
              rows={3}
              placeholder={"BEGIN:VCALENDAR…\nou titre;debut;fin;lieu"}
              value={importText}
              disabled={importing || busy}
              onChange={(e) => setImportText(e.target.value)}
            />
            <div className="sg-toolbar-inline" style={{ marginTop: 10 }}>
              <button
                type="button"
                className="sg-btn-ghost sm"
                disabled={importing || busy || !importText.trim() || events.length >= EVENTS_MAX}
                onClick={() => void runImport({ text: importText, filename: "collage.csv" })}
              >
                {importing ? "Import…" : "Importer le texte"}
              </button>
            </div>
          </section>
          {events.length === 0 && !loading ? (
            <p className="sg-field-hint">Aucun événement. Importez un agenda ou ajoutez un rendez-vous local.</p>
          ) : null}
          {renderGroup("À venir", upcoming)}
          {renderGroup("Passés", past)}
          {renderGroup("Annulés", cancelled)}
        </>
      )}
    </div>
  );
}

window.EventsScreen = EventsScreen;