"use client";

import { useEffect, useMemo, useState } from "react";

type AccessStatus = {
  enabled: boolean;
  allowed: boolean;
};

type OrgRow = {
  id: string;
  name: string;
  description: string;
  admin_email: string;
  krs: string | null;
  nip: string | null;
  address: string | null;
  website: string | null;
  phone: string | null;
  created_at: string;
};

type OrgEditForm = {
  name: string;
  description: string;
  email: string;
  krs: string;
  nip: string;
  address: string;
  website: string;
  phone: string;
};

type CreateResponse = {
  ok: boolean;
  message?: string;
  moderator?: {
    email: string;
    tempPassword: string;
    loginUrl: string;
    resetUrl: string | null;
  };
  organization?: {
    id: string;
    name: string;
  };
};

type SavedPackage = {
  orgId: string;
  orgName: string;
  email: string;
  tempPassword: string;
  loginUrl: string;
  resetUrl: string | null;
  savedAt: string;
};

const OWNER_PACKAGES_STORAGE_KEY = "owner_org_packages_v1";
const OWNER_LAST_LOGIN_PACKAGE_KEY = "owner_last_login_package_v1";

export default function OwnerPage() {
  const IDLE_TIMEOUT_MS = 20 * 60 * 1000;
  const AUTO_REFRESH_MS = 30 * 1000;
  const [access, setAccess] = useState<AccessStatus | null>(null);
  const [ownerCode, setOwnerCode] = useState("");
  const [unlockMsg, setUnlockMsg] = useState<string | null>(null);

  const [name, setName] = useState("");
  const [description, setDescription] = useState("");
  const [email, setEmail] = useState("");
  const [krs, setKrs] = useState("");
  const [nip, setNip] = useState("");
  const [address, setAddress] = useState("");
  const [website, setWebsite] = useState("");
  const [phone, setPhone] = useState("");

  const [saving, setSaving] = useState(false);
  const [result, setResult] = useState<CreateResponse | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [orgs, setOrgs] = useState<OrgRow[]>([]);
  const [editOrgId, setEditOrgId] = useState<string | null>(null);
  const [editForm, setEditForm] = useState<OrgEditForm | null>(null);
  const [editBusy, setEditBusy] = useState(false);
  const [deleteBusyId, setDeleteBusyId] = useState<string | null>(null);
  const [copiedEmail, setCopiedEmail] = useState<string | null>(null);
  const [savedPackages, setSavedPackages] = useState<Record<string, SavedPackage>>({});
  const [regenBusyId, setRegenBusyId] = useState<string | null>(null);
  const [ownerLogoutLoading, setOwnerLogoutLoading] = useState(false);
  const [autoRefreshEnabled, setAutoRefreshEnabled] = useState(true);
  const [lastAutoRefreshAt, setLastAutoRefreshAt] = useState<string | null>(null);

  const baseOrigin = useMemo(() => {
    if (typeof window === "undefined") return "/admin/login";
    return window.location.origin;
  }, []);

  const loginUrl = useMemo(() => {
    if (baseOrigin.startsWith("http")) return `${baseOrigin}/admin/login`;
    return "/admin/login";
  }, [baseOrigin]);

  function goTo(path: string) {
    window.location.assign(path);
  }

  async function refreshAccess() {
    const res = await fetch("/api/owner/access");
    const data = await res.json();
    setAccess(data);
  }

  async function loadOrganizations() {
    const res = await fetch("/api/owner/organizations");
    const data = await res.json();
    if (res.ok && data?.ok) {
      setOrgs(Array.isArray(data.organizations) ? data.organizations : []);
    }
  }

  useEffect(() => {
    refreshAccess().catch(() => {
      setAccess({ enabled: false, allowed: false });
    });
  }, []);

  useEffect(() => {
    if (typeof window === "undefined") return;
    try {
      const raw = window.localStorage.getItem(OWNER_PACKAGES_STORAGE_KEY);
      if (!raw) return;
      const parsed = JSON.parse(raw) as Record<string, SavedPackage>;
      if (parsed && typeof parsed === "object") {
        setSavedPackages(parsed);
      }
    } catch {
      setSavedPackages({});
    }
  }, []);

  useEffect(() => {
    if (access?.allowed) {
      loadOrganizations().catch(() => {});
    }
  }, [access?.allowed]);

  useEffect(() => {
    if (!access?.allowed) return;
    if (!autoRefreshEnabled) return;

    const tick = async () => {
      if (typeof document !== "undefined" && document.visibilityState !== "visible") return;
      await refreshAccess().catch(() => {});
      await loadOrganizations().catch(() => {});
      setLastAutoRefreshAt(new Date().toISOString());
    };

    const heartbeat = setInterval(() => {
      tick().catch(() => {});
    }, AUTO_REFRESH_MS);

    return () => clearInterval(heartbeat);
  }, [access?.allowed, autoRefreshEnabled]);

  async function unlockOwner(e: React.FormEvent) {
    e.preventDefault();
    setUnlockMsg(null);
    const res = await fetch("/api/owner/access", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ code: ownerCode }),
    });
    const data = await res.json();
    if (!res.ok || !data?.ok) {
      setUnlockMsg(data?.message || "Nieprawidlowy kod wlasciciela.");
      return;
    }
    setOwnerCode("");
    setUnlockMsg("Dostep wlasciciela aktywny.");
    await refreshAccess();
  }

  async function createOrg(e: React.FormEvent) {
    e.preventDefault();
    setError(null);
    setResult(null);
    setSaving(true);

    try {
      const res = await fetch("/api/owner/organizations", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          name,
          description,
          email,
          krs,
          nip,
          address,
          website,
          phone,
        }),
      });
      const data = await res.json();
      if (!res.ok || !data?.ok) {
        setError(data?.message || "Nie udalo sie utworzyc organizacji.");
        return;
      }
      const response = data as CreateResponse;
      setResult(response);
      if (response.organization && response.moderator) {
        savePackage({
          orgId: response.organization.id,
          orgName: response.organization.name,
          email: response.moderator.email,
          tempPassword: response.moderator.tempPassword,
          loginUrl: response.moderator.loginUrl,
          resetUrl: response.moderator.resetUrl,
          savedAt: new Date().toISOString(),
        });
      }
      setName("");
      setDescription("");
      setEmail("");
      setKrs("");
      setNip("");
      setAddress("");
      setWebsite("");
      setPhone("");
      await loadOrganizations();
    } catch {
      setError("Blad polaczenia z serwerem.");
    } finally {
      setSaving(false);
    }
  }

  async function copyModeratorEmail(emailToCopy: string) {
    try {
      await navigator.clipboard.writeText(emailToCopy);
      setCopiedEmail(emailToCopy);
      setTimeout(() => setCopiedEmail(null), 1500);
    } catch {
      setCopiedEmail(null);
    }
  }

  function savePackage(pkg: SavedPackage) {
    setSavedPackages((prev) => {
      const next = { ...prev, [pkg.orgId]: pkg };
      if (typeof window !== "undefined") {
        window.localStorage.setItem(OWNER_PACKAGES_STORAGE_KEY, JSON.stringify(next));
      }
      return next;
    });
  }

  function buildPackageText(pkg: SavedPackage) {
    const login = pkg.loginUrl.startsWith("http") ? pkg.loginUrl : `${baseOrigin}${pkg.loginUrl}`;
    const reset = pkg.resetUrl
      ? (pkg.resetUrl.startsWith("http") ? pkg.resetUrl : `${baseOrigin}${pkg.resetUrl}`)
      : "brak";
    return [
      "PAKIET_DOSTEPU_V1",
      `Organizacja: ${pkg.orgName} (${pkg.orgId})`,
      `Email moderatora: ${pkg.email}`,
      `Haslo tymczasowe: ${pkg.tempPassword}`,
      `Logowanie: ${login}`,
      `Reset hasla: ${reset}`,
      `Zapisano: ${new Date(pkg.savedAt).toLocaleString("pl-PL")}`,
      `LOGIN_PACKAGE:${pkg.email}|${pkg.tempPassword}`,
    ].join("\n");
  }

  async function copyPackage(pkg: SavedPackage) {
    if (typeof window !== "undefined") {
      window.localStorage.setItem(
        OWNER_LAST_LOGIN_PACKAGE_KEY,
        JSON.stringify({
          email: pkg.email,
          tempPassword: pkg.tempPassword,
          orgId: pkg.orgId,
          orgName: pkg.orgName,
          savedAt: new Date().toISOString(),
        })
      );
    }
    await navigator.clipboard.writeText(buildPackageText(pkg));
  }

  async function regenerateAccess(org: OrgRow) {
    setError(null);
    setRegenBusyId(org.id);
    try {
      const res = await fetch("/api/owner/organizations", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          action: "regenerate-access",
          orgId: org.id,
        }),
      });
      const data = await res.json();
      if (!res.ok || !data?.ok) {
        setError(data?.message || "Nie udalo sie wygenerowac nowych danych dostepu.");
        return;
      }

      const response = data as CreateResponse;
      setResult(response);
      if (response.organization && response.moderator) {
        const pkg: SavedPackage = {
          orgId: response.organization.id,
          orgName: response.organization.name,
          email: response.moderator.email,
          tempPassword: response.moderator.tempPassword,
          loginUrl: response.moderator.loginUrl,
          resetUrl: response.moderator.resetUrl,
          savedAt: new Date().toISOString(),
        };
        savePackage(pkg);
        await copyPackage(pkg).catch(() => {});
      }
    } catch {
      setError("Blad polaczenia z serwerem.");
    } finally {
      setRegenBusyId(null);
    }
  }

  function beginEditOrganization(org: OrgRow) {
    setError(null);
    setResult(null);
    setEditOrgId(org.id);
    setEditForm({
      name: org.name || "",
      description: org.description || "",
      email: org.admin_email || "",
      krs: org.krs || "",
      nip: org.nip || "",
      address: org.address || "",
      website: org.website || "",
      phone: org.phone || "",
    });
  }

  function cancelEditOrganization() {
    setEditOrgId(null);
    setEditForm(null);
  }

  function updateEditField(field: keyof OrgEditForm, value: string) {
    setEditForm((prev) => (prev ? { ...prev, [field]: value } : prev));
  }

  async function saveOrganizationChanges() {
    if (!editOrgId || !editForm) return;
    setEditBusy(true);
    setError(null);
    setResult(null);
    try {
      const res = await fetch("/api/owner/organizations", {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          orgId: editOrgId,
          name: editForm.name,
          description: editForm.description,
          email: editForm.email,
          krs: editForm.krs,
          nip: editForm.nip,
          address: editForm.address,
          website: editForm.website,
          phone: editForm.phone,
        }),
      });
      const data = await res.json();
      if (!res.ok || !data?.ok) {
        setError(data?.message || "Nie udalo sie zapisac zmian organizacji.");
        return;
      }
      await loadOrganizations();
      cancelEditOrganization();
      setUnlockMsg("Dane organizacji zostaly zaktualizowane.");
    } catch {
      setError("Blad polaczenia z serwerem.");
    } finally {
      setEditBusy(false);
    }
  }

  async function deleteOrganization(org: OrgRow) {
    const accepted = window.confirm(
      `Czy na pewno usunac organizacje "${org.name}" (${org.id})?\nTo usunie jej dane, tematy, glosy, kody i konto moderatora.`
    );
    if (!accepted) {
      return;
    }

    setDeleteBusyId(org.id);
    setError(null);
    setResult(null);
    try {
      const res = await fetch(`/api/owner/organizations?orgId=${encodeURIComponent(org.id)}`, {
        method: "DELETE",
      });
      const data = await res.json();
      if (!res.ok || !data?.ok) {
        setError(data?.message || "Nie udalo sie usunac organizacji.");
        return;
      }
      setSavedPackages((prev) => {
        const next = { ...prev };
        delete next[org.id];
        if (typeof window !== "undefined") {
          window.localStorage.setItem(OWNER_PACKAGES_STORAGE_KEY, JSON.stringify(next));
        }
        return next;
      });
      await loadOrganizations();
      if (editOrgId === org.id) {
        cancelEditOrganization();
      }
      setUnlockMsg(`Usunieto organizacje: ${org.name}.`);
    } catch {
      setError("Blad polaczenia z serwerem.");
    } finally {
      setDeleteBusyId(null);
    }
  }

  async function logoutOwner() {
    setOwnerLogoutLoading(true);
    try {
      await fetch("/api/owner/access", { method: "DELETE", cache: "no-store" });
    } finally {
      window.location.href = "/";
    }
  }

  useEffect(() => {
    if (!access?.allowed) return;

    let timeout: ReturnType<typeof setTimeout> | null = null;
    let idleLoggedOut = false;

    const runIdleLogout = async () => {
      if (idleLoggedOut) return;
      idleLoggedOut = true;
      try {
        await fetch("/api/owner/access", { method: "DELETE", keepalive: true, cache: "no-store" });
      } catch {}
      window.location.href = "/owner?expired=1";
    };

    const resetIdleTimer = () => {
      if (idleLoggedOut) return;
      if (timeout) clearTimeout(timeout);
      timeout = setTimeout(() => {
        runIdleLogout().catch(() => {});
      }, IDLE_TIMEOUT_MS);
    };

    const activityEvents: Array<keyof WindowEventMap> = ["mousemove", "keydown", "click", "scroll", "touchstart"];

    activityEvents.forEach((eventName) => {
      window.addEventListener(eventName, resetIdleTimer, { passive: true });
    });
    resetIdleTimer();

    return () => {
      if (timeout) clearTimeout(timeout);
      activityEvents.forEach((eventName) => {
        window.removeEventListener(eventName, resetIdleTimer);
      });
    };
  }, [access?.allowed]);

  if (!access) {
    return <div className="mx-auto max-w-3xl py-10 px-4">Ladowanie panelu wlasciciela...</div>;
  }

  if (!access.enabled) {
    return (
      <div className="mx-auto max-w-3xl py-10 px-4">
        <h1 className="text-2xl font-bold">Panel wlasciciela</h1>
        <p className="mt-3 rounded-xl border border-amber-200 bg-amber-50 p-4 text-amber-900">
          Funkcja wylaczona. Ustaw zmienna srodowiskowa <code>OWNER_MASTER_CODE</code> na serwerze.
        </p>
      </div>
    );
  }

  if (!access.allowed) {
    return (
      <div className="mx-auto max-w-md py-10 px-4">
        <h1 className="text-2xl font-bold">Panel wlasciciela</h1>
        <p className="mt-2 text-gray-700">Podaj kod wlasciciela, aby odblokowac tworzenie organizacji.</p>
        <form onSubmit={unlockOwner} className="mt-6 rounded-2xl border p-6 space-y-4">
          <label className="block">
            <span className="text-sm font-medium">Kod wlasciciela</span>
            <input
              type="password"
              className="mt-1 w-full rounded-xl border p-3 outline-none focus:ring-2 focus:ring-gray-900"
              value={ownerCode}
              onChange={(e) => setOwnerCode(e.target.value)}
              required
            />
          </label>
          <button
            type="submit"
            className="w-full rounded-full bg-gray-900 px-5 py-3 text-sm font-medium text-white hover:opacity-90"
          >
            Odblokuj
          </button>
          {unlockMsg && <p className="text-sm text-red-600">{unlockMsg}</p>}
        </form>
      </div>
    );
  }

  const resultPackage =
    result?.ok && result.moderator && result.organization
      ? {
          orgId: result.organization.id,
          orgName: result.organization.name,
          email: result.moderator.email,
          tempPassword: result.moderator.tempPassword,
          loginUrl: result.moderator.loginUrl,
          resetUrl: result.moderator.resetUrl,
          savedAt: new Date().toISOString(),
        }
      : null;

  return (
    <div className="mx-auto max-w-4xl py-10 px-4 space-y-6">
      <div className="flex flex-wrap items-center justify-end gap-2">
        <button
          type="button"
          onClick={() => setAutoRefreshEnabled((v) => !v)}
          className={`rounded-full border px-4 py-2 text-xs font-medium ${
            autoRefreshEnabled
              ? "border-green-300 bg-green-50 text-green-700 hover:bg-green-100"
              : "border-gray-300 text-gray-700 hover:bg-gray-50"
          }`}
        >
          {autoRefreshEnabled ? "Auto-odswiezanie: ON" : "Auto-odswiezanie: OFF"}
        </button>
        <span className="text-xs text-gray-500">
          Co 30s{lastAutoRefreshAt ? ` • Ostatnie: ${new Date(lastAutoRefreshAt).toLocaleTimeString("pl-PL")}` : ""}
        </span>
        <button
          type="button"
          onClick={() => goTo("/admin")}
          className="rounded-full border px-4 py-2 text-xs font-medium hover:bg-gray-50"
        >
          Panel moderatora
        </button>
        <button
          type="button"
          onClick={() => goTo("/owner")}
          className="rounded-full border border-gray-900 bg-gray-900 px-4 py-2 text-xs font-medium text-white hover:opacity-90"
        >
          Panel wlasciciela
        </button>
        <button
          type="button"
          onClick={logoutOwner}
          disabled={ownerLogoutLoading}
          className="rounded-full border border-red-300 px-4 py-2 text-xs font-medium text-red-700 hover:bg-red-50 disabled:opacity-50"
        >
          {ownerLogoutLoading ? "Wylogowuje..." : "Wyloguj wlasciciela"}
        </button>
      </div>
      <div>
        <h1 className="text-3xl font-bold">Panel wlasciciela</h1>
        <p className="mt-2 text-gray-700">
          Tylko tutaj tworzysz nowe organizacje i dane startowe moderatora.
        </p>
        {unlockMsg && <p className="mt-2 text-sm text-green-700">{unlockMsg}</p>}
      </div>

      <form onSubmit={createOrg} className="rounded-2xl border p-6 space-y-4">
        <h2 className="text-lg font-semibold">Nowa organizacja</h2>
        <div className="grid md:grid-cols-2 gap-4">
          <label className="block">
            <span className="text-sm font-medium">Nazwa organizacji</span>
            <input
              className="mt-1 w-full rounded-xl border p-3 outline-none focus:ring-2 focus:ring-gray-900"
              value={name}
              onChange={(e) => setName(e.target.value)}
              required
            />
          </label>
          <label className="block">
            <span className="text-sm font-medium">Email moderatora</span>
            <input
              type="email"
              className="mt-1 w-full rounded-xl border p-3 outline-none focus:ring-2 focus:ring-gray-900"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              required
            />
          </label>
          <label className="block md:col-span-2">
            <span className="text-sm font-medium">Opis</span>
            <textarea
              className="mt-1 w-full rounded-xl border p-3 outline-none focus:ring-2 focus:ring-gray-900"
              rows={3}
              value={description}
              onChange={(e) => setDescription(e.target.value)}
            />
          </label>
          <label className="block">
            <span className="text-sm font-medium">KRS</span>
            <input className="mt-1 w-full rounded-xl border p-3" value={krs} onChange={(e) => setKrs(e.target.value)} />
          </label>
          <label className="block">
            <span className="text-sm font-medium">NIP</span>
            <input className="mt-1 w-full rounded-xl border p-3" value={nip} onChange={(e) => setNip(e.target.value)} />
          </label>
          <label className="block">
            <span className="text-sm font-medium">Adres</span>
            <input className="mt-1 w-full rounded-xl border p-3" value={address} onChange={(e) => setAddress(e.target.value)} />
          </label>
          <label className="block">
            <span className="text-sm font-medium">Telefon</span>
            <input className="mt-1 w-full rounded-xl border p-3" value={phone} onChange={(e) => setPhone(e.target.value)} />
          </label>
          <label className="block md:col-span-2">
            <span className="text-sm font-medium">Strona WWW</span>
            <input className="mt-1 w-full rounded-xl border p-3" value={website} onChange={(e) => setWebsite(e.target.value)} />
          </label>
        </div>

        <button
          type="submit"
          disabled={saving}
          className="rounded-full bg-gray-900 px-5 py-3 text-sm font-medium text-white hover:opacity-90 disabled:opacity-50"
        >
          {saving ? "Tworze organizacje..." : "Utworz organizacje"}
        </button>

        {error && <p className="text-sm text-red-600">{error}</p>}
      </form>

      {resultPackage && (
        <div className="rounded-2xl border border-green-200 bg-green-50 p-6">
          <h3 className="text-lg font-semibold text-green-900">Pakiet dla moderatora gotowy</h3>
          <p className="mt-2 text-sm text-green-900">
            Organizacja: <strong>{resultPackage.orgName}</strong> ({resultPackage.orgId})
          </p>
          <p className="mt-1 text-sm text-green-900">Email moderatora: <strong>{resultPackage.email}</strong></p>
          <p className="mt-1 text-sm text-green-900">Haslo tymczasowe: <strong>{resultPackage.tempPassword}</strong></p>
          <p className="mt-1 text-sm text-green-900">Logowanie panelu: <strong>{loginUrl}</strong></p>
          {resultPackage.resetUrl && (
            <p className="mt-1 text-sm text-green-900">
              Link resetu hasla:{" "}
              <strong>
                {baseOrigin.startsWith("http") ? `${baseOrigin}${resultPackage.resetUrl}` : resultPackage.resetUrl}
              </strong>
            </p>
          )}
          <button
            type="button"
            onClick={() => copyPackage(resultPackage).catch(() => {})}
            className="mt-3 rounded-full border border-green-300 bg-white px-4 py-2 text-xs font-medium text-green-900 hover:bg-green-100"
          >
            Kopiuj pakiet dostepu
          </button>
        </div>
      )}

      <div className="rounded-2xl border p-6">
        <h2 className="text-lg font-semibold mb-3">Istniejace organizacje</h2>
        <p className="mb-3 text-sm text-gray-600">
          Wejscie do organizacji odbywa sie przez panel moderatora tej organizacji (email + haslo).
        </p>
        {orgs.length === 0 ? (
          <p className="text-sm text-gray-500">Brak danych.</p>
        ) : (
          <div className="space-y-2">
            {orgs.map((org) => (
              <div key={org.id} className="rounded-xl border px-4 py-3">
                <p className="font-medium">{org.name}</p>
                <p className="text-sm text-gray-600">ID: {org.id}</p>
                <p className="text-sm text-gray-600">Moderator: {org.admin_email}</p>
                <p className="text-sm text-gray-600">
                  Utworzono: {new Date(org.created_at).toLocaleString("pl-PL")}
                </p>
                <div className="mt-3 flex flex-wrap gap-2">
                  <button
                    type="button"
                    onClick={() => regenerateAccess(org)}
                    disabled={regenBusyId === org.id}
                    className="rounded-full border border-gray-300 px-4 py-2 text-xs font-medium hover:bg-gray-50 disabled:opacity-50"
                  >
                    {regenBusyId === org.id ? "Generuje..." : "Wygeneruj nowe dane dostepu"}
                  </button>
                  <button
                    type="button"
                    onClick={() => goTo("/admin/login")}
                    className="rounded-full bg-gray-900 px-4 py-2 text-xs font-medium text-white hover:opacity-90"
                  >
                    Wejdz do panelu moderatora
                  </button>
                  <button
                    type="button"
                    onClick={() => copyModeratorEmail(org.admin_email)}
                    className="rounded-full border px-4 py-2 text-xs font-medium hover:bg-gray-50"
                  >
                    {copiedEmail === org.admin_email ? "Skopiowano email" : "Kopiuj email moderatora"}
                  </button>
                  <button
                    type="button"
                    onClick={() => beginEditOrganization(org)}
                    className="rounded-full border px-4 py-2 text-xs font-medium hover:bg-gray-50"
                  >
                    Edytuj dane organizacji
                  </button>
                  <button
                    type="button"
                    onClick={() => deleteOrganization(org)}
                    disabled={deleteBusyId === org.id}
                    className="rounded-full border border-red-300 px-4 py-2 text-xs font-medium text-red-700 hover:bg-red-50 disabled:opacity-50"
                  >
                    {deleteBusyId === org.id ? "Usuwam..." : "Usun organizacje"}
                  </button>
                </div>
                {editOrgId === org.id && editForm && (
                  <div className="mt-4 rounded-xl border border-gray-200 bg-gray-50 p-4">
                    <p className="text-sm font-semibold mb-3">Edycja danych organizacji</p>
                    <div className="grid md:grid-cols-2 gap-3">
                      <label className="block">
                        <span className="text-xs font-medium text-gray-700">Nazwa organizacji</span>
                        <input
                          className="mt-1 w-full rounded-lg border p-2"
                          value={editForm.name}
                          onChange={(e) => updateEditField("name", e.target.value)}
                        />
                      </label>
                      <label className="block">
                        <span className="text-xs font-medium text-gray-700">Email moderatora</span>
                        <input
                          type="email"
                          className="mt-1 w-full rounded-lg border p-2"
                          value={editForm.email}
                          onChange={(e) => updateEditField("email", e.target.value)}
                        />
                      </label>
                      <label className="block md:col-span-2">
                        <span className="text-xs font-medium text-gray-700">Opis</span>
                        <textarea
                          className="mt-1 w-full rounded-lg border p-2"
                          rows={3}
                          value={editForm.description}
                          onChange={(e) => updateEditField("description", e.target.value)}
                        />
                      </label>
                      <label className="block">
                        <span className="text-xs font-medium text-gray-700">KRS</span>
                        <input
                          className="mt-1 w-full rounded-lg border p-2"
                          value={editForm.krs}
                          onChange={(e) => updateEditField("krs", e.target.value)}
                        />
                      </label>
                      <label className="block">
                        <span className="text-xs font-medium text-gray-700">NIP</span>
                        <input
                          className="mt-1 w-full rounded-lg border p-2"
                          value={editForm.nip}
                          onChange={(e) => updateEditField("nip", e.target.value)}
                        />
                      </label>
                      <label className="block">
                        <span className="text-xs font-medium text-gray-700">Adres</span>
                        <input
                          className="mt-1 w-full rounded-lg border p-2"
                          value={editForm.address}
                          onChange={(e) => updateEditField("address", e.target.value)}
                        />
                      </label>
                      <label className="block">
                        <span className="text-xs font-medium text-gray-700">Telefon</span>
                        <input
                          className="mt-1 w-full rounded-lg border p-2"
                          value={editForm.phone}
                          onChange={(e) => updateEditField("phone", e.target.value)}
                        />
                      </label>
                      <label className="block md:col-span-2">
                        <span className="text-xs font-medium text-gray-700">Strona WWW</span>
                        <input
                          className="mt-1 w-full rounded-lg border p-2"
                          value={editForm.website}
                          onChange={(e) => updateEditField("website", e.target.value)}
                        />
                      </label>
                    </div>
                    <div className="mt-3 flex flex-wrap gap-2">
                      <button
                        type="button"
                        onClick={() => saveOrganizationChanges()}
                        disabled={editBusy}
                        className="rounded-full bg-gray-900 px-4 py-2 text-xs font-medium text-white hover:opacity-90 disabled:opacity-50"
                      >
                        {editBusy ? "Zapisuje..." : "Zapisz zmiany"}
                      </button>
                      <button
                        type="button"
                        onClick={cancelEditOrganization}
                        className="rounded-full border px-4 py-2 text-xs font-medium hover:bg-gray-100"
                      >
                        Anuluj
                      </button>
                    </div>
                  </div>
                )}
                {savedPackages[org.id] && (
                  <div className="mt-3 rounded-lg border border-emerald-200 bg-emerald-50 p-3 text-xs text-emerald-900">
                    <p>
                      Pakiet moderatora zapisany:{" "}
                      {new Date(savedPackages[org.id].savedAt).toLocaleString("pl-PL")}
                    </p>
                    <p>Email: <strong>{savedPackages[org.id].email}</strong></p>
                    <p>Haslo tymczasowe: <strong>{savedPackages[org.id].tempPassword}</strong></p>
                    <button
                      type="button"
                      onClick={() => copyPackage(savedPackages[org.id]).catch(() => {})}
                      className="mt-2 rounded-full border border-emerald-300 bg-white px-3 py-1 font-medium hover:bg-emerald-100"
                    >
                      Kopiuj pakiet dostepu
                    </button>
                  </div>
                )}
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}