import { useState } from "react";
import { createFileRoute, Link } from "@tanstack/react-router";
import { Exit } from "effect";
import { useAtomValue, useAtomSet } from "@effect/atom-react";
import { trackEvent } from "@executor-js/react/api/analytics";
import * as AsyncResult from "effect/unstable/reactivity/AsyncResult";
import { useCustomer } from "autumn-js/react";
import { toast } from "sonner";
import { orgDomainWriteKeys, authWriteKeys } from "@executor-js/react/api/reactivity-keys";
import { Button } from "@executor-js/react/components/button";
import { Badge } from "@executor-js/react/components/badge";
import { Input } from "@executor-js/react/components/input";
import { Label } from "@executor-js/react/components/label";
import { CopyButton } from "@executor-js/react/components/copy-button";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
  DialogClose,
} from "@executor-js/react/components/dialog";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@executor-js/react/components/dropdown-menu";
import { orgMembersAtom } from "@executor-js/react/api/account-atoms";
import { OrgPage as SharedOrgPage } from "@executor-js/react/pages/org";
import { orgDomainsAtom, getDomainVerificationLink, deleteDomain } from "../../web/org-atoms";
import { deleteOrganization, useAuth } from "../../web/auth";

// ---------------------------------------------------------------------------
// Cloud organization page. The members / roles / invite / org-name surface is
// the SHARED `@executor-js/react` OrgPage over the provider-neutral
// `/account/*` atoms — identical to self-host. Cloud composes its WorkOS-only
// extras AROUND that page:
//   - a seat/billing banner (Autumn member-limit upsell)
//   - the WorkOS domain-verification section (over the surviving cloud-local
//     `/org/domains` endpoints)
// These are cloud additions, not a fork of the shared page.
// ---------------------------------------------------------------------------

export const Route = createFileRoute("/{-$orgSlug}/org")({
  component: OrgPage,
});

type DomainData = {
  id: string;
  domain: string;
  state: string;
  verificationToken?: string;
  verificationPrefix?: string;
};

function OrgPage() {
  return (
    <div className="min-h-0 flex-1 overflow-y-auto">
      {/* Shared members / roles / invite / org-name surface. */}
      <SharedOrgPage
        domainsSection={<DomainsSection />}
        upgradeAction={
          <Link to="/{-$orgSlug}/billing/plans">
            <Button size="sm">Upgrade plan</Button>
          </Link>
        }
        dangerZoneSection={<DangerZoneSection />}
      />
    </div>
  );
}

// Destructive org teardown, admin-only. Hidden entirely for non-admins (the
// backend enforces admin + name-confirmation regardless). Deleting the org
// removes the workspace and all of its data for every member, cancels billing,
// and logs the caller out.
function DangerZoneSection() {
  const auth = useAuth();
  const membersResult = useAtomValue(orgMembersAtom);
  const doDelete = useAtomSet(deleteOrganization, { mode: "promiseExit" });
  const [open, setOpen] = useState(false);
  const [confirmText, setConfirmText] = useState("");
  const [deleting, setDeleting] = useState(false);

  const organizationName = auth.status === "authenticated" ? auth.organization?.name : undefined;

  // Only admins may delete. Derive the caller's role from the members list
  // (already loaded for this page); render nothing while it loads or for
  // members, so a delete control never flashes for someone who can't use it.
  const isAdmin = AsyncResult.match(membersResult, {
    onInitial: () => false,
    onFailure: () => false,
    onSuccess: ({ value }) =>
      value.members.some((m) => m.isCurrentUser && m.status === "active" && m.role === "admin"),
  });

  if (!isAdmin || !organizationName) return null;

  const confirmed = confirmText.trim() === organizationName.trim();

  const handleDelete = async () => {
    if (!confirmed || deleting) return;
    setDeleting(true);
    const exit = await doDelete({
      payload: { confirmName: confirmText.trim() },
      reactivityKeys: authWriteKeys,
    });
    trackEvent("org_deleted", { success: Exit.isSuccess(exit) });
    if (Exit.isSuccess(exit)) {
      // The org (and the caller's session) are gone. A full navigation resets
      // all app state and lets the auth gate rehydrate to another membership or
      // the create-org screen.
      toast.success(`Deleted ${organizationName}`);
      window.location.href = "/";
      return;
    }
    setDeleting(false);
    toast.error("Failed to delete organization");
  };

  return (
    <section className="mb-2 border-t border-border pt-8">
      <div className="flex items-center justify-between rounded-lg border border-destructive/30 bg-destructive/5 px-4 py-3">
        <div className="min-w-0">
          <h2 className="text-sm font-medium text-destructive">Delete organization</h2>
          <p className="mt-0.5 text-sm text-muted-foreground">
            Permanently delete this organization and all of its data for every member. This cannot
            be undone.
          </p>
        </div>
        <Button
          size="sm"
          variant="destructive"
          className="ml-4 shrink-0"
          onClick={() => {
            setConfirmText("");
            setOpen(true);
          }}
        >
          Delete
        </Button>
      </div>

      <Dialog
        open={open}
        onOpenChange={(v) => {
          if (deleting) return;
          if (!v) setConfirmText("");
          setOpen(v);
        }}
      >
        <DialogContent className="sm:max-w-[440px]">
          <DialogHeader>
            <DialogTitle className="font-display text-xl">Delete organization</DialogTitle>
            <DialogDescription className="text-sm leading-relaxed">
              This permanently deletes{" "}
              <span className="font-medium text-foreground">{organizationName}</span>, including
              every integration, connection, credential, and policy, for all members. Billing is
              canceled and everyone loses access immediately. This cannot be undone.
            </DialogDescription>
          </DialogHeader>

          <div className="grid gap-1.5 py-1">
            <Label
              htmlFor="delete-org-confirm"
              className="text-sm font-medium uppercase tracking-wider text-muted-foreground"
            >
              Type <span className="font-mono normal-case text-foreground">{organizationName}</span>{" "}
              to confirm
            </Label>
            <Input
              id="delete-org-confirm"
              autoComplete="off"
              value={confirmText}
              onChange={(e) => setConfirmText((e.target as HTMLInputElement).value)}
              onKeyDown={(e) => {
                if (e.key === "Enter") handleDelete();
              }}
              className="h-9 text-sm"
            />
          </div>

          <DialogFooter>
            <DialogClose asChild>
              <Button variant="ghost" size="sm" disabled={deleting}>
                Cancel
              </Button>
            </DialogClose>
            <Button
              size="sm"
              variant="destructive"
              onClick={handleDelete}
              disabled={!confirmed || deleting}
            >
              {deleting ? "Deleting…" : "Delete organization"}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </section>
  );
}

function DomainsSection() {
  const domainsResult = useAtomValue(orgDomainsAtom);
  const doDeleteDomain = useAtomSet(deleteDomain, { mode: "promiseExit" });
  const doGetVerificationLink = useAtomSet(getDomainVerificationLink, {
    mode: "promiseExit",
  });
  const { check, isLoading: customerLoading } = useCustomer();
  const canUseDomains = customerLoading
    ? false
    : check({ featureId: "domain-verification" }).allowed;

  const handleDeleteDomain = async (domainId: string, domain: string) => {
    const exit = await doDeleteDomain({
      params: { domainId },
      reactivityKeys: orgDomainWriteKeys,
    });
    trackEvent("org_domain_removed", { success: Exit.isSuccess(exit) });
    toast[Exit.isSuccess(exit) ? "success" : "error"](
      Exit.isSuccess(exit) ? `Removed ${domain}` : "Failed to remove domain",
    );
  };

  const handleAddDomain = async () => {
    const exit = await doGetVerificationLink({
      reactivityKeys: orgDomainWriteKeys,
    });
    trackEvent("org_domain_added", { success: Exit.isSuccess(exit) });
    if (Exit.isSuccess(exit)) {
      window.open(exit.value.link, "_blank");
    } else {
      toast.error("Failed to generate verification link");
    }
  };

  return (
    <section className="mb-2">
      <div className="flex items-center justify-between mb-4">
        <div>
          <h2 className="text-sm font-medium text-foreground">Domains</h2>
          <p className="mt-0.5 text-sm text-muted-foreground">
            Verify a domain to let anyone with a matching email join automatically.
          </p>
        </div>
        <Button size="sm" className="min-w-32" disabled={!canUseDomains} onClick={handleAddDomain}>
          Add domain
        </Button>
      </div>

      {!canUseDomains && (
        <div className="mb-3 flex items-center justify-between rounded-lg border border-border px-4 py-3">
          <p className="text-sm text-muted-foreground">
            Join by domain is available on the Team plan.
          </p>
          <Link to="/{-$orgSlug}/billing/plans">
            <Button size="sm" variant="outline">
              Upgrade
            </Button>
          </Link>
        </div>
      )}

      {AsyncResult.match(domainsResult, {
        onInitial: () => (
          <div className="space-y-3">
            {[1, 2].map((i) => (
              <div key={i} className="h-16 animate-pulse rounded-lg bg-muted/50" />
            ))}
          </div>
        ),
        onFailure: () => (
          <div className="rounded-lg border border-destructive/30 bg-destructive/5 px-4 py-3">
            <p className="text-sm text-destructive">Failed to load domains</p>
          </div>
        ),
        onSuccess: ({ value }) => {
          if (value.domains.length === 0) {
            if (!canUseDomains) return null;
            return (
              <p className="py-6 text-center text-sm text-muted-foreground">
                No domains yet. Add your company domain so members can join without an invite.
              </p>
            );
          }

          return (
            <div className="space-y-2">
              {value.domains.map((d: DomainData) => (
                <DomainCard
                  key={d.id}
                  domain={d}
                  onDelete={() => handleDeleteDomain(d.id, d.domain)}
                />
              ))}
            </div>
          );
        },
      })}
    </section>
  );
}

function DomainCard({ domain: d, onDelete }: { domain: DomainData; onDelete: () => void }) {
  const isVerified = d.state === "verified";
  const isPending = d.state === "pending";

  const recordValue = d.verificationPrefix
    ? `${d.verificationPrefix}=${d.verificationToken}`
    : (d.verificationToken ?? "");

  const copyPromptValue = `Add a DNS TXT record for domain verification:\n\nDomain: ${d.domain}\nRecord name: @\nRecord value: ${recordValue}\n\nPlease add this TXT record to my DNS configuration.`;

  return (
    <div className="rounded-lg border border-border">
      <div className="flex items-center gap-3 px-4 py-3">
        <div className="min-w-0 flex-1">
          <div className="flex items-center gap-2">
            <p className="truncate text-sm font-medium text-foreground">{d.domain}</p>
            <Badge
              className={
                isVerified
                  ? "bg-muted text-foreground"
                  : isPending
                    ? "bg-muted text-muted-foreground"
                    : "bg-destructive/10 text-destructive"
              }
            >
              {isVerified ? "Verified" : isPending ? "Pending" : "Failed"}
            </Badge>
          </div>
        </div>
        <div className="flex shrink-0 items-center gap-1.5">
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant="ghost" size="icon" className="size-7">
                <svg viewBox="0 0 16 16" className="size-3">
                  <circle cx="8" cy="3" r="1.2" fill="currentColor" />
                  <circle cx="8" cy="8" r="1.2" fill="currentColor" />
                  <circle cx="8" cy="13" r="1.2" fill="currentColor" />
                </svg>
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end" className="w-44">
              <DropdownMenuItem
                className="text-destructive focus:text-destructive text-sm"
                onClick={onDelete}
              >
                Remove domain
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
      </div>

      {!isVerified && d.verificationToken && (
        <div className="border-t border-border px-4 py-3">
          <div className="flex items-center justify-between">
            <p className="text-sm text-muted-foreground">
              Add this TXT record to your DNS provider to verify ownership.
            </p>
            <CopyButton value={copyPromptValue} label="Copy prompt" />
          </div>
          <div className="mt-3 grid grid-cols-[4rem_3.5rem_1fr] items-center gap-y-2">
            <p className="text-xs font-medium text-muted-foreground">Type</p>
            <p className="text-xs font-medium text-muted-foreground">Name</p>
            <p className="text-xs font-medium text-muted-foreground">Value</p>
            <p className="text-sm font-mono text-foreground">TXT</p>
            <p className="text-sm font-mono text-foreground">@</p>
            <span className="inline-flex min-w-0 items-center gap-1">
              <code className="truncate text-sm font-mono text-foreground">{recordValue}</code>
              <CopyButton value={recordValue} />
            </span>
          </div>
          <p className="mt-3 text-xs text-muted-foreground">
            DNS changes can take up to 72 hours to propagate, but usually complete within a few
            minutes.
          </p>
        </div>
      )}
    </div>
  );
}