"use client";

import { useState } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import type { ProfileStatus } from "@/lib/types";
import OrganizerPasswordDialog from "./organizer-password-dialog";

export default function OrganizerActions({
  organizerId,
  organizerName,
  hasEmail,
  status,
  hasPayoutAccount,
  payoutVerified,
}: {
  organizerId: string;
  organizerName: string | null;
  hasEmail: boolean;
  status: ProfileStatus;
  hasPayoutAccount: boolean;
  payoutVerified: boolean;
}) {
  const router = useRouter();
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [passwordOpen, setPasswordOpen] = useState(false);

  async function post(url: string, body: Record<string, unknown>, confirmMsg?: string) {
    if (confirmMsg && !confirm(confirmMsg)) return;
    setError(null);
    setLoading(true);
    const res = await fetch(url, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(body),
    });
    const data = await res.json().catch(() => ({}));
    setLoading(false);
    if (!res.ok) {
      setError(data.error || "Action failed");
      return;
    }
    router.refresh();
  }

  const setStatus = (next: ProfileStatus, confirmMsg?: string) =>
    post("/api/admin/organizers/status", { organizerId, status: next }, confirmMsg);

  async function viewAs() {
    setError(null);
    setLoading(true);
    const res = await fetch("/api/admin/view-as", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ organizerId }),
    }).catch(() => null);
    if (!res || !res.ok) {
      const data = res ? await res.json().catch(() => ({})) : {};
      setLoading(false);
      setError(data.error || "Couldn't open their dashboard");
      return;
    }
    // Full navigation so the dashboard renders fresh as this organizer.
    window.location.href = "/dashboard";
  }

  const setVerified = (verified: boolean) =>
    post("/api/admin/payout-accounts/verify", { organizerId, verified });

  return (
    <div className="flex flex-col items-end gap-1">
      <div className="flex flex-wrap justify-end gap-1.5">
        <Btn onClick={viewAs} disabled={loading} tone="ghost">
          View as
        </Btn>
        <Link href={`/admin/orders?organizer=${organizerId}`} className="be-act be-act-ghost">
          Orders
        </Link>
        {hasEmail && (
          <Btn onClick={() => setPasswordOpen(true)} disabled={loading} tone="ghost">
            Password
          </Btn>
        )}
        {hasPayoutAccount &&
          (payoutVerified ? (
            <Btn onClick={() => setVerified(false)} disabled={loading} tone="ghost">
              Unverify
            </Btn>
          ) : (
            <Btn onClick={() => setVerified(true)} disabled={loading} tone="primary">
              Verify payout
            </Btn>
          ))}

        {status !== "active" && (
          <Btn
            onClick={() => setStatus("active")}
            disabled={loading}
            tone="ghost"
          >
            Reactivate
          </Btn>
        )}
        {status === "active" && (
          <Btn
            onClick={() => setStatus("suspended", "Suspend this organizer? They can't edit or publish events while suspended.")}
            disabled={loading}
            tone="warn"
          >
            Suspend
          </Btn>
        )}
        {status !== "banned" && (
          <Btn
            onClick={() => setStatus("banned", "Ban this organizer? Their published events are hidden from the public site.")}
            disabled={loading}
            tone="danger"
          >
            Ban
          </Btn>
        )}
      </div>
      {error && <span className="text-xs text-[color:var(--pill-danger-fg)]">{error}</span>}
      {passwordOpen && (
        <OrganizerPasswordDialog
          organizerId={organizerId}
          organizerName={organizerName}
          onClose={() => setPasswordOpen(false)}
        />
      )}
    </div>
  );
}

function Btn({
  children,
  onClick,
  disabled,
  tone,
}: {
  children: React.ReactNode;
  onClick: () => void;
  disabled: boolean;
  tone: "primary" | "ghost" | "warn" | "danger";
}) {
  return (
    <button type="button" onClick={onClick} disabled={disabled} className={`be-act be-act-${tone}`}>
      {children}
    </button>
  );
}