"use client";

import { useState, useTransition } from "react";
import { useActionState } from "react";
import { useRouter, usePathname, useSearchParams } from "next/navigation";
import {
  createCalendarAction,
  updateCalendarAction,
  deleteCalendarAction,
  addCalendarShareAction,
  removeCalendarShareAction,
  regenerateIcsTokenAction,
  disconnectGoogleAction,
  backfillGoogleSync,
} from "@/lib/actions/calendars";

export type SidebarCalendar = {
  id: string;
  name: string;
  color: string;
  kind: "orders" | "absences" | "conventions" | "custom";
  visibility: "private" | "team";
  canManage: boolean;
  icsUrl: string | null;
  sharedWith: { id: string; name: string }[];
  googleConnected: boolean;
  publicVisible: boolean;
};

export function CalendarSidebar({
  calendars,
  visibleIds,
  allStaff,
  canCreate,
}: {
  calendars: SidebarCalendar[];
  visibleIds: string[];
  allStaff: { id: string; name: string }[];
  canCreate: boolean;
}) {
  const router = useRouter();
  const pathname = usePathname();
  const searchParams = useSearchParams();

  function toggle(id: string) {
    const next = visibleIds.includes(id) ? visibleIds.filter((v) => v !== id) : [...visibleIds, id];
    const params = new URLSearchParams(searchParams.toString());
    params.set("cals", next.join(","));
    router.push(`${pathname}?${params.toString()}`, { scroll: false });
  }

  return (
    <div className="flex flex-col gap-2">
      {calendars.map((cal) => (
        <CalendarRow key={cal.id} cal={cal} visible={visibleIds.includes(cal.id)} onToggle={() => toggle(cal.id)} allStaff={allStaff} />
      ))}
      {canCreate && <NewCalendarForm />}
    </div>
  );
}

function CalendarRow({
  cal,
  visible,
  onToggle,
  allStaff,
}: {
  cal: SidebarCalendar;
  visible: boolean;
  onToggle: () => void;
  allStaff: { id: string; name: string }[];
}) {
  const [pending, startTransition] = useTransition();
  const [copied, setCopied] = useState(false);
  const router = useRouter();
  const [shareId, setShareId] = useState("");

  const shareableStaff = allStaff.filter((s) => !cal.sharedWith.some((sh) => sh.id === s.id));

  return (
    <div className="border border-white/10 rounded-xl p-3">
      <label className="flex items-center gap-2 text-sm cursor-pointer">
        <input type="checkbox" checked={visible} onChange={onToggle} className="h-3.5 w-3.5" />
        <span className="w-2.5 h-2.5 rounded-full shrink-0" style={{ backgroundColor: cal.color }} />
        <span className="truncate">{cal.name}</span>
        <span className="ml-auto flex items-center gap-1.5">
          {cal.kind === "custom" && cal.visibility === "team" && (
            <span className="text-[0.6rem] uppercase tracking-[0.08em] text-[var(--rk-ink-muted)]">Team</span>
          )}
          {cal.publicVisible && (
            <span className="text-[0.6rem] uppercase tracking-[0.08em] text-emerald-400">Öffentlich</span>
          )}
        </span>
      </label>

      {cal.icsUrl && (
        <details className="mt-2">
          <summary className="text-[0.65rem] text-[var(--rk-ink-muted)] cursor-pointer hover:text-[var(--rk-ink)]">
            Kalender-Link (Google/Apple/Outlook) ▾
          </summary>
          <div className="mt-2 flex flex-col gap-1.5">
            <input
              readOnly
              value={cal.icsUrl}
              onFocus={(e) => e.target.select()}
              className="w-full bg-[var(--rk-bg)] border border-white/15 rounded px-2 py-1 text-[0.65rem] font-mono"
            />
            <div className="flex gap-2">
              <button
                type="button"
                onClick={async () => {
                  await navigator.clipboard.writeText(cal.icsUrl!);
                  setCopied(true);
                  setTimeout(() => setCopied(false), 1500);
                }}
                className="text-[0.65rem] border border-white/15 rounded-full px-2.5 py-1 hover:border-white/50 transition-colors"
              >
                {copied ? "Kopiert!" : "Link kopieren"}
              </button>
              {cal.canManage && (
                <button
                  type="button"
                  disabled={pending}
                  onClick={() => {
                    if (confirm("Neuen Link erzeugen? Der alte funktioniert danach nicht mehr.")) {
                      startTransition(async () => {
                        await regenerateIcsTokenAction(cal.id);
                        router.refresh();
                      });
                    }
                  }}
                  className="text-[0.65rem] border border-white/15 rounded-full px-2.5 py-1 hover:border-white/50 transition-colors disabled:opacity-50"
                >
                  Neu erzeugen
                </button>
              )}
            </div>
            <p className="text-[0.6rem] text-[var(--rk-ink-muted)]">
              In Google Kalender: „Weitere Kalender" → „Per URL" → diesen Link einfügen. Aktualisiert sich automatisch.
            </p>
          </div>
        </details>
      )}

      {cal.canManage && (
        <div className="mt-2 flex items-center gap-2 text-[0.65rem]">
          {cal.googleConnected ? (
            <>
              <span className="text-emerald-400">✓ Mit Google verbunden</span>
              <button
                disabled={pending}
                onClick={() =>
                  startTransition(async () => {
                    await backfillGoogleSync(cal.id);
                    router.refresh();
                  })
                }
                className="text-[var(--rk-ink-muted)] hover:text-[var(--rk-ink)] underline transition-colors disabled:opacity-50"
              >
                Jetzt synchronisieren
              </button>
              <button
                disabled={pending}
                onClick={() =>
                  startTransition(async () => {
                    await disconnectGoogleAction(cal.id);
                    router.refresh();
                  })
                }
                className="text-[var(--rk-ink-muted)] hover:text-[var(--rk-ink)] underline transition-colors disabled:opacity-50"
              >
                Trennen
              </button>
            </>
          ) : (
            <a
              href={`/api/auth/google/connect?calendarId=${cal.id}`}
              className="border border-white/15 rounded-full px-2.5 py-1 hover:border-white/50 transition-colors"
            >
              Mit Google verbinden
            </a>
          )}
        </div>
      )}

      {cal.canManage && cal.kind === "custom" && (
        <details className="mt-2">
          <summary className="text-[0.65rem] text-[var(--rk-ink-muted)] cursor-pointer hover:text-[var(--rk-ink)]">Verwalten ▾</summary>
          <div className="mt-2 flex flex-col gap-2">
            <form
              onSubmit={(e) => {
                e.preventDefault();
                const data = new FormData(e.currentTarget);
                startTransition(async () => {
                  await updateCalendarAction(cal.id, data);
                  router.refresh();
                });
              }}
              className="flex flex-col gap-2"
            >
              <input
                name="name"
                defaultValue={cal.name}
                className="bg-[var(--rk-bg)] border border-white/15 rounded px-2 py-1.5 text-xs focus:outline-none focus:border-white/50"
              />
              <div className="flex items-center gap-2">
                <input type="color" name="color" defaultValue={cal.color} className="h-7 w-10 bg-transparent border border-white/15 rounded" />
                <select
                  name="visibility"
                  defaultValue={cal.visibility}
                  className="flex-1 bg-[var(--rk-bg)] border border-white/15 rounded px-2 py-1.5 text-xs focus:outline-none focus:border-white/50"
                >
                  <option value="private">Privat (nur geteilte Personen)</option>
                  <option value="team">Team (alle mit Kalender-Recht)</option>
                </select>
              </div>
              <label className="flex items-center gap-2 text-[0.65rem] text-[var(--rk-ink-muted)]">
                <input type="checkbox" name="publicVisible" defaultChecked={cal.publicVisible} className="h-3.5 w-3.5" />
                Auf der Angebote-Seite öffentlich sichtbar (z. B. „Urlaub vom … bis …" für Kund:innen)
              </label>
              <button
                type="submit"
                disabled={pending}
                className="self-start text-[0.65rem] border border-white/30 rounded-full px-3 py-1 hover:border-white disabled:opacity-50"
              >
                Speichern
              </button>
            </form>

            <div className="border-t border-white/10 pt-2">
              <p className="text-[0.6rem] uppercase tracking-[0.08em] text-[var(--rk-ink-muted)] mb-1.5">Geteilt mit</p>
              {cal.sharedWith.length === 0 && <p className="text-[0.65rem] text-[var(--rk-ink-muted)] mb-1.5">Niemandem.</p>}
              <div className="flex flex-col gap-1 mb-2">
                {cal.sharedWith.map((s) => (
                  <div key={s.id} className="flex items-center justify-between text-[0.65rem]">
                    <span>{s.name}</span>
                    <button
                      disabled={pending}
                      onClick={() =>
                        startTransition(async () => {
                          await removeCalendarShareAction(cal.id, s.id);
                          router.refresh();
                        })
                      }
                      className="text-red-400/80 hover:text-red-400 transition-colors disabled:opacity-50"
                    >
                      Entfernen
                    </button>
                  </div>
                ))}
              </div>
              {shareableStaff.length > 0 && (
                <div className="flex gap-1.5">
                  <select
                    value={shareId}
                    onChange={(e) => setShareId(e.target.value)}
                    className="flex-1 bg-[var(--rk-bg)] border border-white/15 rounded px-2 py-1 text-[0.65rem] focus:outline-none focus:border-white/50"
                  >
                    <option value="">Person wählen…</option>
                    {shareableStaff.map((s) => (
                      <option key={s.id} value={s.id}>
                        {s.name}
                      </option>
                    ))}
                  </select>
                  <button
                    disabled={pending || !shareId}
                    onClick={() =>
                      startTransition(async () => {
                        await addCalendarShareAction(cal.id, shareId);
                        setShareId("");
                        router.refresh();
                      })
                    }
                    className="text-[0.65rem] border border-white/15 rounded-full px-2.5 py-1 hover:border-white/50 transition-colors disabled:opacity-50"
                  >
                    Teilen
                  </button>
                </div>
              )}
            </div>

            <button
              disabled={pending}
              onClick={() => {
                if (confirm(`Kalender „${cal.name}" wirklich löschen? Alle Termine darin gehen verloren.`)) {
                  startTransition(async () => {
                    await deleteCalendarAction(cal.id);
                    router.refresh();
                  });
                }
              }}
              className="self-start text-[0.65rem] text-red-400/80 hover:text-red-400 transition-colors disabled:opacity-50"
            >
              Kalender löschen
            </button>
          </div>
        </details>
      )}

    </div>
  );
}

function NewCalendarForm() {
  const [state, formAction, pending] = useActionState(createCalendarAction, {});
  const [open, setOpen] = useState(false);

  if (!open) {
    return (
      <button
        onClick={() => setOpen(true)}
        className="text-xs border border-white/15 rounded-full px-3.5 py-1.5 hover:border-white/50 transition-colors self-start"
      >
        + Neuer Kalender
      </button>
    );
  }

  return (
    <form action={formAction} className="border border-white/10 rounded-xl p-3 flex flex-col gap-2">
      <input
        name="name"
        placeholder="Name, z. B. Urlaub"
        required
        className="bg-[var(--rk-bg)] border border-white/15 rounded px-2 py-1.5 text-xs focus:outline-none focus:border-white/50"
      />
      <div className="flex items-center gap-2">
        <input type="color" name="color" defaultValue="#a78bfa" className="h-7 w-10 bg-transparent border border-white/15 rounded" />
        <select
          name="visibility"
          defaultValue="private"
          className="flex-1 bg-[var(--rk-bg)] border border-white/15 rounded px-2 py-1.5 text-xs focus:outline-none focus:border-white/50"
        >
          <option value="private">Privat (nur geteilte Personen)</option>
          <option value="team">Team (alle mit Kalender-Recht)</option>
        </select>
      </div>
      <div className="flex gap-2">
        <button
          type="submit"
          disabled={pending}
          className="text-xs border border-white/30 rounded-lg px-3 py-1.5 hover:border-white disabled:opacity-50"
        >
          Anlegen
        </button>
        <button type="button" onClick={() => setOpen(false)} className="text-xs text-[var(--rk-ink-muted)] hover:text-[var(--rk-ink)]">
          Abbrechen
        </button>
      </div>
      {state.error && <p className="text-xs text-red-400">{state.error}</p>}
    </form>
  );
}