"use client";
import * as React from "react";
import { useRouter } from "next/navigation";
import { Check, Plus, Undo2 } from "lucide-react";
import { recordAbuseEvent, resolveAbuseEvent } from "@/actions/admin";
import { Button } from "@/components/ui/button";
import { Input, NativeSelect, Textarea } from "@/components/ui/input";
import { Field, Hint, Label } from "@/components/ui/label";
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { ActionButton } from "./action-button";

export function ResolveAbuseButton({ id, resolved }: { id: string; resolved: boolean }) {
  return resolved ? (
    <ActionButton variant="ghost" size="xs" action={() => resolveAbuseEvent(id, false)}>
      <Undo2 className="size-3" /> Reopen
    </ActionButton>
  ) : (
    <ActionButton variant="outline" size="xs" action={() => resolveAbuseEvent(id, true)}>
      <Check className="size-3" /> Resolve
    </ActionButton>
  );
}

export function RecordAbuseDialog({ defaultOrgId }: { defaultOrgId?: string }) {
  const router = useRouter();
  const [open, setOpen] = React.useState(false);
  const [pending, start] = React.useTransition();
  const [error, setError] = React.useState<string | null>(null);
  const [form, setForm] = React.useState({ kind: "manual", severity: "medium", organizationId: defaultOrgId ?? "", projectId: "", requestId: "", detail: "" });
  const set = (k: keyof typeof form) => (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => setForm((f) => ({ ...f, [k]: e.target.value }));
  return (
    <>
      <Button variant="primary" size="sm" onClick={() => setOpen(true)}>
        <Plus className="size-3.5" /> Record abuse event
      </Button>
      <Dialog open={open} onOpenChange={setOpen}>
        <DialogContent size="md">
          <DialogHeader>
            <DialogTitle>Record an abuse event</DialogTitle>
            <DialogDescription>Manual entries appear alongside automatically detected events and are linked to the organization when an id is given.</DialogDescription>
          </DialogHeader>
          <form
            className="grid gap-3"
            onSubmit={(e) => {
              e.preventDefault();
              start(async () => {
                setError(null);
                const r = await recordAbuseEvent(form as Parameters<typeof recordAbuseEvent>[0]);
                if (!r.ok) return setError(r.error);
                setOpen(false);
                setForm({ kind: "manual", severity: "medium", organizationId: defaultOrgId ?? "", projectId: "", requestId: "", detail: "" });
                router.refresh();
              });
            }}
          >
            <div className="grid gap-3 sm:grid-cols-2">
              <Field>
                <Label htmlFor="ab-kind">Kind</Label>
                <NativeSelect id="ab-kind" value={form.kind} onChange={set("kind")}>
                  <option value="manual">manual</option>
                  <option value="ssrf_attempt">ssrf_attempt</option>
                  <option value="prohibited_target">prohibited_target</option>
                  <option value="rate_abuse">rate_abuse</option>
                  <option value="credential_abuse">credential_abuse</option>
                </NativeSelect>
              </Field>
              <Field>
                <Label htmlFor="ab-sev">Severity</Label>
                <NativeSelect id="ab-sev" value={form.severity} onChange={set("severity")}>
                  <option value="low">low</option>
                  <option value="medium">medium</option>
                  <option value="high">high</option>
                  <option value="critical">critical</option>
                </NativeSelect>
              </Field>
            </div>
            <Field>
              <Label htmlFor="ab-org">Organization id</Label>
              <Input id="ab-org" value={form.organizationId} onChange={set("organizationId")} placeholder="org_…" className="font-mono" />
            </Field>
            <div className="grid gap-3 sm:grid-cols-2">
              <Field>
                <Label htmlFor="ab-proj">Project id</Label>
                <Input id="ab-proj" value={form.projectId} onChange={set("projectId")} placeholder="proj_… (optional)" className="font-mono" />
              </Field>
              <Field>
                <Label htmlFor="ab-req">Request id</Label>
                <Input id="ab-req" value={form.requestId} onChange={set("requestId")} placeholder="req_… (optional)" className="font-mono" />
              </Field>
            </div>
            <Field>
              <Label htmlFor="ab-detail">Detail</Label>
              <Textarea id="ab-detail" value={form.detail} onChange={set("detail")} placeholder="What happened, evidence, links to requests…" required />
              <Hint>Internal only.</Hint>
            </Field>
            {error ? (
              <p role="alert" className="text-[13px] text-danger">
                {error}
              </p>
            ) : null}
            <DialogFooter>
              <Button type="button" variant="outline" onClick={() => setOpen(false)}>
                Cancel
              </Button>
              <Button type="submit" variant="primary" loading={pending}>
                Record
              </Button>
            </DialogFooter>
          </form>
        </DialogContent>
      </Dialog>
    </>
  );
}