import {
  useActionMutation,
  useActionQuery,
} from "@agent-native/core/client/hooks";
import { useOrg } from "@agent-native/core/client/org";
import { IconChevronRight } from "@tabler/icons-react";
import { useMemo, useState } from "react";
import { toast } from "sonner";

import { ActionQueryError } from "../../components/action-query-error";
import { DispatchShell } from "../../components/dispatch-shell";
import { Button } from "../../components/ui/button";
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "../../components/ui/collapsible";
import { Input } from "../../components/ui/input";
import { Switch } from "../../components/ui/switch";

export function meta() {
  return [{ title: "Approvals — Dispatch" }];
}

export default function ApprovalsRoute() {
  const settingsQuery = useActionQuery("get-dispatch-settings", {});
  const approvalsQuery = useActionQuery("list-dispatch-approvals", {});
  const { data: settings } = settingsQuery;
  const { data: approvals } = approvalsQuery;
  const { data: org } = useOrg();
  const hasOrg = !!org?.orgId;
  const [emails, setEmails] = useState("");

  const approverList = useMemo(
    () =>
      emails
        .split(",")
        .map((value) => value.trim())
        .filter(Boolean),
    [emails],
  );

  const savePolicy = useActionMutation("set-dispatch-approval-policy", {
    onSuccess: () => toast.success("Approval policy updated"),
    onError: (err) => toast.error(String(err)),
  });
  const approve = useActionMutation("approve-dispatch-change", {
    onSuccess: () => toast.success("Change approved"),
    onError: (err) => toast.error(String(err)),
  });
  const reject = useActionMutation("reject-dispatch-change", {
    onSuccess: () => toast.success("Change rejected"),
    onError: (err) => toast.error(String(err)),
  });

  return (
    <DispatchShell
      title="Approvals"
      description="Review durable dispatch changes before they apply."
    >
      <div className="grid gap-4 xl:grid-cols-[minmax(0,0.9fr)_minmax(0,1.1fr)]">
        <Collapsible className="rounded-2xl bg-card">
          <CollapsibleTrigger className="group flex w-full cursor-pointer items-center justify-between gap-3 p-5 text-left hover:bg-muted/20">
            <span>
              <span className="block text-lg font-semibold text-foreground">
                Approval policy
              </span>
              <span className="mt-1 block text-sm text-muted-foreground">
                {settings?.enabled
                  ? "Durable changes require approval."
                  : "Durable changes do not require approval."}
              </span>
            </span>
            <IconChevronRight className="h-5 w-5 shrink-0 text-muted-foreground transition-transform group-data-[state=open]:rotate-90" />
          </CollapsibleTrigger>
          <CollapsibleContent className="border-t px-5 pb-5 pt-4">
            {settingsQuery.isError ? (
              <ActionQueryError
                error={settingsQuery.error}
                onRetry={() => void settingsQuery.refetch()}
              />
            ) : (
              <div className="space-y-4">
                <label className="flex items-center justify-between rounded-xl border px-4 py-3">
                  <div>
                    <div className="text-sm font-medium text-foreground">
                      Require approval for durable changes
                    </div>
                    <div className="mt-1 text-xs text-muted-foreground">
                      {hasOrg
                        ? "Applies to saved destinations, shared dream proposals, All-app agent resources, and dispatch settings."
                        : "Requires a team workspace. Set one up on the Team page."}
                    </div>
                  </div>
                  <Switch
                    checked={settings?.enabled || false}
                    disabled={!hasOrg || savePolicy.isPending}
                    onCheckedChange={(checked) =>
                      savePolicy.mutate({
                        enabled: checked,
                        approverEmails:
                          settings?.approverEmails || approverList,
                      })
                    }
                  />
                </label>
                <div className="space-y-2">
                  <div className="text-sm font-medium text-foreground">
                    Approver emails
                  </div>
                  <Input
                    value={emails}
                    onChange={(event) => setEmails(event.target.value)}
                    placeholder={(settings?.approverEmails || []).join(", ")}
                    disabled={!hasOrg}
                  />
                  <Button
                    className="w-full"
                    variant="outline"
                    disabled={!hasOrg || savePolicy.isPending}
                    onClick={() =>
                      savePolicy.mutate({
                        enabled: settings?.enabled || false,
                        approverEmails: approverList,
                      })
                    }
                  >
                    Save approvers
                  </Button>
                </div>
              </div>
            )}
          </CollapsibleContent>
        </Collapsible>

        <section className="rounded-2xl bg-card p-5">
          <h2 className="text-lg font-semibold text-foreground">
            Pending and recent requests
          </h2>
          {approvalsQuery.isError ? (
            <ActionQueryError
              className="mt-4"
              error={approvalsQuery.error}
              onRetry={() => void approvalsQuery.refetch()}
            />
          ) : (
            <div className="mt-4 space-y-3">
              {(approvals || []).map((approval: any) => (
                <div
                  key={approval.id}
                  className="rounded-xl border bg-muted/30 px-4 py-3"
                >
                  <div className="flex items-start justify-between gap-3">
                    <div>
                      <div className="text-sm font-medium text-foreground">
                        {approval.summary}
                      </div>
                      <div className="mt-1 text-xs text-muted-foreground">
                        {approval.status} · requested by {approval.requestedBy}
                      </div>
                    </div>
                    {approval.status === "pending" && (
                      <div className="flex gap-2">
                        <Button
                          size="sm"
                          onClick={() => approve.mutate({ id: approval.id })}
                        >
                          Approve
                        </Button>
                        <Button
                          size="sm"
                          variant="outline"
                          onClick={() =>
                            reject.mutate({
                              id: approval.id,
                              reason: "Rejected in dispatch UI",
                            })
                          }
                        >
                          Reject
                        </Button>
                      </div>
                    )}
                  </div>
                </div>
              ))}
              {(approvals?.length || 0) === 0 && (
                <div className="rounded-xl border border-dashed px-4 py-8 text-sm text-muted-foreground">
                  No approval requests yet.
                </div>
              )}
            </div>
          )}
        </section>
      </div>
    </DispatchShell>
  );
}