"use client";
import * as React from "react";
import { useRouter } from "next/navigation";
import { CheckCircle2, Plus, Undo2 } from "lucide-react";
import { createIncident, resolveIncident } 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";

const COMPONENTS = ["api", "dashboard", "residential", "datacenter", "isp", "mobile", "sessions", "billing", "website"];

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

export function NewIncidentDialog() {
  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({ component: "api", severity: "minor", title: "", body: "" });
  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" /> Open incident
      </Button>
      <Dialog open={open} onOpenChange={setOpen}>
        <DialogContent size="md">
          <DialogHeader>
            <DialogTitle>Open a status incident</DialogTitle>
            <DialogDescription>Published immediately on the public /status page. Write for customers: describe impact and workaround, never upstream provider names.</DialogDescription>
          </DialogHeader>
          <form
            className="grid gap-3"
            onSubmit={(e) => {
              e.preventDefault();
              start(async () => {
                setError(null);
                const r = await createIncident(form as Parameters<typeof createIncident>[0]);
                if (!r.ok) return setError(r.error);
                setOpen(false);
                setForm({ component: "api", severity: "minor", title: "", body: "" });
                router.refresh();
              });
            }}
          >
            <div className="grid gap-3 sm:grid-cols-2">
              <Field>
                <Label htmlFor="inc-comp">Component</Label>
                <NativeSelect id="inc-comp" value={form.component} onChange={set("component")}>
                  {COMPONENTS.map((c) => (
                    <option key={c} value={c}>
                      {c}
                    </option>
                  ))}
                </NativeSelect>
              </Field>
              <Field>
                <Label htmlFor="inc-sev">Severity</Label>
                <NativeSelect id="inc-sev" value={form.severity} onChange={set("severity")}>
                  <option value="minor">minor</option>
                  <option value="major">major</option>
                  <option value="critical">critical</option>
                  <option value="maintenance">maintenance</option>
                </NativeSelect>
              </Field>
            </div>
            <Field>
              <Label htmlFor="inc-title">Title</Label>
              <Input id="inc-title" value={form.title} onChange={set("title")} placeholder="Elevated error rates on residential network" required />
            </Field>
            <Field>
              <Label htmlFor="inc-body">Update</Label>
              <Textarea id="inc-body" value={form.body} onChange={set("body")} placeholder="We are investigating elevated TARGET_BLOCKED rates for some regions…" />
              <Hint>Public. Uses network classes 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}>
                Publish
              </Button>
            </DialogFooter>
          </form>
        </DialogContent>
      </Dialog>
    </>
  );
}