"use client";

import Link from "next/link";
import { useCallback, useEffect, useRef, useState } from "react";

type PreviewSize = "desktop" | "tablet" | "mobile";
type LandingTarget = "home" | "key" | "volunteer" | "event";
type EventOption = { slug: string; title: string };
function isLandingTarget(value: string): value is LandingTarget {
  return value === "home" || value === "key" || value === "volunteer" || value === "event";
}
type EditorState = {
  editing: boolean;
  dirty: boolean;
  loading: boolean;
  saving: boolean;
  sectionPanelOpen: boolean;
  sectionCount: number;
  message: string;
};

const previewSizes: Array<{ id: PreviewSize; label: string; icon: string }> = [
  { id: "desktop", label: "Desktop", icon: "▰" },
  { id: "tablet", label: "Tablet", icon: "▭" },
  { id: "mobile", label: "Mobile", icon: "▯" },
];

const initialEditorState: EditorState = {
  editing: false,
  dirty: false,
  loading: true,
  saving: false,
  sectionPanelOpen: false,
  sectionCount: 0,
  message: "",
};

export default function LandingVisualEditor() {
  const [previewSize, setPreviewSize] = useState<PreviewSize>("desktop");
  const [target, setTarget] = useState<LandingTarget>("home");
  const [eventSlug, setEventSlug] = useState("");
  const [events, setEvents] = useState<EventOption[]>([]);
  const [eventsLoading, setEventsLoading] = useState(true);
  const [targetLoadError, setTargetLoadError] = useState("");
  const [volunteerPath, setVolunteerPath] = useState("gabung-volunteer");
  const [editorState, setEditorState] = useState(initialEditorState);
  const [loggingOut, setLoggingOut] = useState(false);
  const [logoutError, setLogoutError] = useState("");
  const iframeRef = useRef<HTMLIFrameElement>(null);
  const selectedEvent = events.find((event) => event.slug === eventSlug);
  const targetPath = target === "home"
    ? "/"
    : target === "key"
      ? "/kegiatan/key"
      : target === "volunteer"
        ? `/${encodeURIComponent(volunteerPath)}`
        : selectedEvent
          ? `/kegiatan/${encodeURIComponent(selectedEvent.slug)}`
          : "";
  const previewUrl = targetPath
    ? `${targetPath}${targetPath.includes("?") ? "&" : "?"}landingEditor=1&landingEditorEmbedded=1`
    : "about:blank";
  const targetTitle = target === "home"
    ? "Beranda"
    : target === "key"
      ? "Landing KEY"
      : target === "volunteer"
        ? "Landing Volunteer"
        : selectedEvent?.title || "Pilih event";

  const sendCommand = useCallback((command: string) => {
    iframeRef.current?.contentWindow?.postMessage(
      { source: "yn-landing-studio", type: "command", command },
      window.location.origin,
    );
  }, []);

  useEffect(() => {
    let active = true;
    async function loadTargets() {
      setEventsLoading(true);
      setTargetLoadError("");
      try {
        const response = await fetch("/api/cms/events", { cache: "no-store" });
        const result = await response.json();
        if (!response.ok || !result.success || !Array.isArray(result.data)) {
          throw new Error(result.error || "Gagal memuat daftar event.");
        }
        if (active) {
          setEvents(result.data.filter((item: unknown): item is EventOption =>
            typeof item === "object" &&
            item !== null &&
            typeof (item as Record<string, unknown>).slug === "string" &&
            typeof (item as Record<string, unknown>).title === "string",
          ));
        }
      } catch (error) {
        if (active) setTargetLoadError(error instanceof Error ? error.message : "Gagal memuat daftar event.");
      } finally {
        if (active) setEventsLoading(false);
      }

      try {
        const response = await fetch("/api/cms/volunteer-landing", { cache: "no-store" });
        const result = await response.json();
        if (!response.ok || !result.success) {
          throw new Error(result.error || "Gagal memuat path landing volunteer.");
        }
        const path = result.data?.customPath;
        if (active && typeof path === "string" && path.trim()) {
          setVolunteerPath(path.trim().replace(/^\/+|\/+$/g, ""));
        }
      } catch (error) {
        if (active) setTargetLoadError((current) => current || (error instanceof Error ? error.message : "Gagal memuat path landing volunteer."));
      }
    }
    void loadTargets();
    return () => { active = false; };
  }, []);

  useEffect(() => {
    const handleMessage = (event: MessageEvent) => {
      if (
        event.origin !== window.location.origin ||
        event.source !== iframeRef.current?.contentWindow ||
        event.data?.source !== "yn-landing-preview" ||
        event.data?.type !== "state" ||
        typeof event.data.state !== "object" ||
        event.data.state === null
      ) {
        return;
      }
      setEditorState({ ...initialEditorState, ...event.data.state });
    };

    window.addEventListener("message", handleMessage);
    return () => window.removeEventListener("message", handleMessage);
  }, []);

  const statusText = editorState.loading
    ? "Menyiapkan studio..."
    : editorState.saving
      ? "Menyimpan perubahan..."
      : editorState.message ||
        (editorState.dirty
          ? "Perubahan belum disimpan"
          : editorState.editing
            ? "Mode edit aktif"
            : "Pratinjau siap");

  async function logout() {
    if (loggingOut) return;
    setLoggingOut(true);
    setLogoutError("");
    try {
      const response = await fetch("/api/auth/logout", { method: "POST" });
      if (!response.ok) throw new Error("Logout gagal.");
      window.location.replace("/masuk");
    } catch (error) {
      setLogoutError(error instanceof Error ? error.message : "Gagal keluar. Coba lagi.");
      setLoggingOut(false);
    }
  }

  function changeTarget(nextTarget: LandingTarget) {
    if (nextTarget === target) return;
    if (editorState.editing && editorState.dirty && !window.confirm("Perubahan belum disimpan. Ganti halaman dan buang perubahan?")) return;
    if (editorState.editing) sendCommand("cancel");
    setTarget(nextTarget);
    setEditorState(initialEditorState);
  }

  function changeEvent(slug: string) {
    if (slug === eventSlug) return;
    if (editorState.editing && editorState.dirty && !window.confirm("Perubahan belum disimpan. Ganti event dan buang perubahan?")) return;
    if (editorState.editing) sendCommand("cancel");
    setEventSlug(slug);
    setEditorState(initialEditorState);
  }

  return (
    <main className="landing-studio">
      <header className="landing-studio-heading">
        <div className="landing-studio-brand">
          <span className="landing-studio-mark" aria-hidden="true">Y</span>
          <div>
            <p>YUKNGAJI BSD <span>/</span> STUDIO LANDING PAGE</p>
            <h1>Ruang untuk merapikan cerita.</h1>
            <span className="landing-studio-intro">
              Pilih halaman, lalu atur section dengan pratinjau langsung dan grid 12 kolom.
            </span>
          </div>
        </div>
        <div className="landing-studio-heading-actions">
          <Link href="/admin/landing/content">Pengaturan konten</Link>
          <a href={targetPath || undefined} target="_blank" rel="noreferrer" aria-disabled={!targetPath}>
            Lihat halaman publik <span aria-hidden="true">↗</span>
          </a>
          <button type="button" onClick={() => void logout()} disabled={loggingOut}>
            {loggingOut ? "Keluar..." : "Keluar"}
          </button>
        </div>
      </header>

      {logoutError && <p className="landing-studio-logout-error" role="alert">{logoutError}</p>}

      <section className="landing-studio-workspace" aria-label="Studio editor landing page">
        <div className="landing-studio-workbar">
          <div className="landing-studio-targets">
            <label>
              Landing page
              <select value={target} onChange={(event) => {
                if (isLandingTarget(event.target.value)) changeTarget(event.target.value);
              }}>
                <option value="home">Beranda</option>
                <option value="key">KEY</option>
                <option value="volunteer">Volunteer</option>
                <option value="event">Event</option>
              </select>
            </label>
            {target === "event" && (
              <label>
                Pilih event
                <select
                  value={eventSlug}
                  onChange={(event) => changeEvent(event.target.value)}
                  disabled={eventsLoading || events.length === 0}
                >
                  <option value="">{eventsLoading ? "Memuat event..." : "Pilih event"}</option>
                  {events.map((event) => <option key={event.slug} value={event.slug}>{event.title}</option>)}
                </select>
              </label>
            )}
            <div className="landing-studio-location">
              <span className="landing-studio-live-dot" aria-hidden="true" />
              <span>{targetTitle}</span>
              <span className="landing-studio-location-divider">/</span>
              <span>Pratinjau langsung</span>
            </div>
          </div>

          <div className="landing-studio-devices" role="group" aria-label="Ukuran pratinjau">
            {previewSizes.map((size) => (
              <button
                key={size.id}
                type="button"
                aria-pressed={previewSize === size.id}
                onClick={() => setPreviewSize(size.id)}
              >
                <span aria-hidden="true">{size.icon}</span>
                {size.label}
              </button>
            ))}
          </div>
        </div>

        <div className="landing-studio-canvas">
          <div className="landing-studio-page-label">
            <span>{targetTitle}</span>
            <span>YukNgaji BSD</span>
          </div>
          <div className={`landing-studio-frame landing-studio-frame-${previewSize}`}>
            <iframe
              key={previewUrl}
              ref={iframeRef}
              title={`Pratinjau ${targetTitle} YukNgaji BSD ukuran ${previewSize}`}
              src={previewUrl}
            />
          </div>
        </div>

        <footer className="landing-studio-footer">
          <div className="landing-studio-status" role="status" aria-live="polite">
            <span className={editorState.dirty ? "landing-studio-status-mark is-dirty" : "landing-studio-status-mark"} aria-hidden="true" />
            <span>{statusText}</span>
          </div>
          <div className="landing-studio-actions">
            {editorState.editing ? (
              <>
                <button
                  type="button"
                  className={editorState.sectionPanelOpen ? "landing-studio-button is-selected" : "landing-studio-button"}
                  disabled={editorState.loading || editorState.saving}
                  aria-expanded={editorState.sectionPanelOpen}
                  onClick={() => sendCommand("toggle-sections")}
                >
                  <span aria-hidden="true">+</span>
                  {editorState.sectionPanelOpen ? "Tutup susunan" : `Susun section${editorState.sectionCount ? ` · ${editorState.sectionCount}` : ""}`}
                </button>
                <button
                  type="button"
                  className="landing-studio-button"
                  disabled={editorState.loading || editorState.saving}
                  onClick={() => sendCommand("cancel")}
                >
                  Batalkan
                </button>
                <button
                  type="button"
                  className="landing-studio-button landing-studio-button-primary"
                  disabled={!editorState.dirty || editorState.loading || editorState.saving}
                  onClick={() => sendCommand("save")}
                >
                  {editorState.saving ? "Menyimpan..." : "Simpan perubahan"}
                </button>
                <button
                  type="button"
                  className="landing-studio-finish"
                  disabled={editorState.dirty || editorState.loading || editorState.saving}
                  title={editorState.dirty ? "Simpan atau batalkan perubahan terlebih dahulu" : undefined}
                  onClick={() => sendCommand("finish")}
                >
                  Selesai
                </button>
              </>
            ) : (
              <button
                type="button"
                className="landing-studio-button landing-studio-button-primary"
                disabled={editorState.loading}
                onClick={() => sendCommand("start")}
              >
                Mulai edit halaman <span aria-hidden="true">→</span>
              </button>
            )}
          </div>
        </footer>
      </section>

      <p className="landing-studio-hint">
        <span aria-hidden="true">i</span>
        <span>{targetLoadError ? `${targetLoadError} ` : ""}{target === "event" && !eventsLoading && events.length === 0 ? "Tidak ada event yang dapat dikelola untuk akun ini. " : ""}Perubahan hanya terlihat di pratinjau sampai disimpan. Tambahkan dan atur section pada grid 12 kolom; di ponsel, section otomatis ditumpuk.</span>
      </p>

      <style jsx>{`
        .landing-studio {
          --studio-ink: #102033;
          --studio-muted: #627386;
          --studio-line: #d7e0e7;
          --studio-cyan: #00bfff;
          --studio-teal: #087f83;
          display: grid;
          gap: 18px;
          color: var(--studio-ink);
        }
        .landing-studio-heading {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 24px;
        }
        .landing-studio-brand {
          display: flex;
          min-width: 0;
          align-items: center;
          gap: 15px;
        }
        .landing-studio-mark {
          display: grid;
          width: 48px;
          height: 48px;
          flex: 0 0 48px;
          place-items: center;
          border-radius: 13px;
          background: var(--studio-cyan);
          color: #102033;
          font-size: 26px;
          font-weight: 900;
          box-shadow: inset 0 -3px 0 #10203320;
        }
        .landing-studio-brand p {
          margin: 0 0 5px;
          color: var(--studio-teal);
          font-size: 10px;
          font-weight: 850;
          letter-spacing: .12em;
        }
        .landing-studio-brand p span { padding: 0 3px; color: #97a6b3; }
        .landing-studio-brand h1 {
          margin: 0;
          font-size: clamp(22px, 2.4vw, 30px);
          line-height: 1.18;
          letter-spacing: -.04em;
        }
        .landing-studio-intro {
          display: block;
          margin-top: 5px;
          color: var(--studio-muted);
          font-size: 13px;
          line-height: 1.45;
        }
        .landing-studio-heading-actions {
          display: flex;
          flex: 0 0 auto;
          align-items: center;
          gap: 8px;
        }
        .landing-studio-heading-actions a {
          display: inline-flex;
          min-height: 40px;
          align-items: center;
          padding: 8px 12px;
          border: 1px solid var(--studio-line);
          border-radius: 8px;
          background: #fff;
          color: var(--studio-ink);
          font-size: 12px;
          font-weight: 750;
          text-decoration: none;
        }
        .landing-studio-heading-actions button {
          min-height: 40px;
          padding: 8px 11px;
          border: 1px solid #f0c5c5;
          border-radius: 8px;
          background: #fff;
          color: #a12a2a;
          font: inherit;
          font-size: 12px;
          font-weight: 750;
          cursor: pointer;
        }
        .landing-studio-heading-actions button:disabled { opacity: .6; cursor: wait; }
        .landing-studio-heading-actions a:first-child {
          border-color: transparent;
          background: transparent;
          color: var(--studio-muted);
        }
        .landing-studio-heading-actions a:hover { border-color: var(--studio-teal); color: var(--studio-teal); }
        .landing-studio-heading-actions a[aria-disabled="true"] { opacity: .5; pointer-events: none; }
        .landing-studio-heading-actions button:hover:not(:disabled) { background: #fff4f4; }
        .landing-studio-logout-error { margin: -8px 0 0; color: #a12a2a; font-size: 13px; }
        .landing-studio-heading-actions a:focus-visible,
        .landing-studio-heading-actions button:focus-visible,
        .landing-studio-devices button:focus-visible,
        .landing-studio-actions button:focus-visible {
          outline: 2px solid var(--studio-teal);
          outline-offset: 2px;
        }
        .landing-studio-workspace {
          overflow: hidden;
          border: 1px solid #cbd7e0;
          border-radius: 13px;
          background: #fff;
          box-shadow: 0 6px 22px #1020330c;
        }
        .landing-studio-workbar {
          display: flex;
          min-height: 58px;
          align-items: center;
          justify-content: space-between;
          gap: 12px;
          padding: 8px 14px;
          border-bottom: 1px solid var(--studio-line);
          background: #fff;
        }
        .landing-studio-location {
          display: flex;
          min-width: 0;
          align-items: center;
          gap: 9px;
          color: var(--studio-ink);
          font-size: 12px;
          font-weight: 750;
        }
        .landing-studio-location > span:last-child {
          overflow: hidden;
          color: var(--studio-muted);
          font-weight: 500;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .landing-studio-location-divider { color: #a8b4be; }
        .landing-studio-targets { display: flex; min-width: 0; align-items: center; gap: 12px; }
        .landing-studio-targets > label {
          display: grid;
          gap: 3px;
          color: var(--studio-muted);
          font-size: 9px;
          font-weight: 800;
          letter-spacing: .04em;
          text-transform: uppercase;
        }
        .landing-studio-targets select {
          min-width: 130px;
          min-height: 36px;
          padding: 6px 28px 6px 9px;
          border: 1px solid var(--studio-line);
          border-radius: 7px;
          background: #fff;
          color: var(--studio-ink);
          font: 700 12px/1.2 "DM Sans", "Segoe UI", sans-serif;
          text-transform: none;
        }
        .landing-studio-targets select:disabled { color: #8797a5; }
        .landing-studio-targets select:focus-visible {
          outline: 2px solid var(--studio-teal);
          outline-offset: 2px;
        }
        .landing-studio-live-dot,
        .landing-studio-status-mark {
          width: 8px;
          height: 8px;
          flex: 0 0 8px;
          border-radius: 50%;
          background: #2ba777;
          box-shadow: 0 0 0 3px #2ba7771a;
        }
        .landing-studio-devices {
          display: flex;
          flex: 0 0 auto;
          gap: 3px;
          padding: 3px;
          border: 1px solid #e0e6eb;
          border-radius: 9px;
          background: #f3f6f8;
        }
        .landing-studio-devices button {
          display: inline-flex;
          min-height: 34px;
          align-items: center;
          justify-content: center;
          gap: 6px;
          padding: 6px 10px;
          border: 1px solid transparent;
          border-radius: 6px;
          background: transparent;
          color: var(--studio-muted);
          font: inherit;
          font-size: 12px;
          cursor: pointer;
        }
        .landing-studio-devices button > span {
          color: #3e6577;
          font-size: 15px;
          line-height: 1;
        }
        .landing-studio-devices button[aria-pressed="true"] {
          border-color: #c7dce3;
          background: #fff;
          color: var(--studio-ink);
          font-weight: 800;
          box-shadow: 0 1px 3px #10203312;
        }
        .landing-studio-canvas {
          display: grid;
          min-height: 500px;
          justify-items: center;
          gap: 10px;
          overflow: auto;
          padding: 16px;
          background-color: #edf2f5;
          background-image: radial-gradient(#9badb922 .7px, transparent .7px);
          background-size: 13px 13px;
        }
        .landing-studio-page-label {
          display: flex;
          width: 100%;
          align-items: center;
          justify-content: space-between;
          color: #617384;
          font-size: 10px;
          font-weight: 800;
          letter-spacing: .08em;
          text-transform: uppercase;
        }
        .landing-studio-page-label span:last-child {
          color: #8a99a7;
          font-weight: 600;
          letter-spacing: 0;
          text-transform: none;
        }
        .landing-studio-frame {
          width: 100%;
          height: min(68vh, 760px);
          min-height: 420px;
          overflow: hidden;
          border: 1px solid #b8c6d0;
          border-radius: 7px;
          background: #fff;
          box-shadow: 0 8px 24px #10203318, 0 1px 2px #1020330d;
          transition: width .2s ease;
        }
        .landing-studio-frame-tablet { width: min(768px, 100%); }
        .landing-studio-frame-mobile {
          width: min(390px, 100%);
          border: 5px solid #172a3c;
          border-radius: 23px;
          box-shadow: 0 8px 24px #10203320, inset 0 0 0 1px #fff;
        }
        .landing-studio-frame iframe {
          display: block;
          width: 100%;
          height: 100%;
          border: 0;
          background: #fff;
        }
        .landing-studio-footer {
          display: flex;
          min-height: 68px;
          align-items: center;
          justify-content: space-between;
          gap: 14px;
          padding: 10px 14px;
          border-top: 1px solid var(--studio-line);
          background: #fff;
        }
        .landing-studio-status {
          display: flex;
          min-width: 0;
          align-items: center;
          gap: 9px;
          color: var(--studio-muted);
          font-size: 12px;
        }
        .landing-studio-status-mark { background: #7f94a3; box-shadow: none; }
        .landing-studio-status-mark.is-dirty { background: #e6a33c; box-shadow: 0 0 0 3px #e6a33c1a; }
        .landing-studio-actions {
          display: flex;
          flex-wrap: wrap;
          justify-content: flex-end;
          gap: 7px;
        }
        .landing-studio-actions button {
          display: inline-flex;
          min-height: 38px;
          align-items: center;
          justify-content: center;
          gap: 7px;
          padding: 8px 12px;
          border: 1px solid #d3dde5;
          border-radius: 7px;
          background: #fff;
          color: var(--studio-ink);
          font: inherit;
          font-size: 12px;
          font-weight: 700;
          cursor: pointer;
        }
        .landing-studio-actions .landing-studio-button-primary {
          border-color: #00a8d5;
          background: var(--studio-cyan);
          color: #082331;
          font-weight: 850;
        }
        .landing-studio-actions .landing-studio-button-primary:disabled {
          border-color: #d5e2e7;
          background: #dce7eb;
          color: #778b98;
          cursor: not-allowed;
        }
        .landing-studio-actions .landing-studio-button.is-selected {
          border-color: #9acbca;
          background: #e8f4f3;
          color: #075e62;
        }
        .landing-studio-actions .landing-studio-finish {
          border-color: transparent;
          color: var(--studio-teal);
        }
        .landing-studio-actions button:disabled:not(.landing-studio-button-primary) {
          opacity: .5;
          cursor: not-allowed;
        }
        .landing-studio-hint {
          display: flex;
          align-items: flex-start;
          gap: 9px;
          margin: 0;
          color: #627386;
          font-size: 12px;
          line-height: 1.55;
        }
        .landing-studio-hint > span:first-child {
          display: grid;
          width: 17px;
          height: 17px;
          flex: 0 0 17px;
          place-items: center;
          border: 1px solid #b8cbd2;
          border-radius: 50%;
          color: #087f83;
          font-size: 11px;
          font-weight: 800;
        }
        @media (max-width: 900px) {
          .landing-studio-heading { align-items: flex-start; flex-direction: column; gap: 13px; }
          .landing-studio-heading-actions { padding-left: 63px; }
        }
        @media (max-width: 640px) {
          .landing-studio { gap: 13px; }
          .landing-studio-brand { align-items: flex-start; gap: 11px; }
          .landing-studio-mark { width: 40px; height: 40px; flex-basis: 40px; border-radius: 11px; font-size: 21px; }
          .landing-studio-brand p { font-size: 9px; }
          .landing-studio-intro { font-size: 12px; }
          .landing-studio-heading-actions { flex-wrap: wrap; padding-left: 51px; }
          .landing-studio-heading-actions a { min-height: 36px; padding: 7px 9px; font-size: 11px; }
          .landing-studio-workbar { align-items: stretch; flex-direction: column; padding: 10px; }
          .landing-studio-targets { align-items: stretch; flex-direction: column; }
          .landing-studio-targets select { width: 100%; }
          .landing-studio-devices { width: 100%; }
          .landing-studio-devices button { flex: 1; }
          .landing-studio-canvas { min-height: 420px; padding: 10px; }
          .landing-studio-frame { height: 62vh; min-height: 380px; }
          .landing-studio-footer { align-items: stretch; flex-direction: column; }
          .landing-studio-actions { justify-content: flex-start; }
        }
        @media (prefers-reduced-motion: reduce) {
          .landing-studio-frame { transition: none; }
        }
      `}</style>
    </main>
  );
}