"use client";
import * as React from "react";
import { useRouter } from "next/navigation";
import { setOrganizationProviderVisibility, setOrganizationSuspended, updateOrganizationLimits, type AdminActionResult } from "@/actions/admin";
import { Button } from "@/components/ui/button";
import { Input, Textarea } from "@/components/ui/input";
import { Field, Hint, Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { ResultMessage } from "./action-button";

export function OrgProviderVisibilitySwitch({ orgId, enabled }: { orgId: string; enabled: boolean }) {
  const router = useRouter();
  const [pending, start] = React.useTransition();
  const [result, setResult] = React.useState<AdminActionResult | null>(null);
  return (
    <div className="flex items-start gap-3">
      <Switch
        id={`pv-${orgId}`}
        checked={enabled}
        disabled={pending}
        aria-label="Provider visibility"
        onCheckedChange={(v) =>
          start(async () => {
            const r = await setOrganizationProviderVisibility(orgId, v);
            setResult(r);
            if (r.ok) router.refresh();
          })
        }
      />
      <div className="grid gap-0.5">
        <Label htmlFor={`pv-${orgId}`}>Provider visibility (debug)</Label>
        <Hint>When on, `debug: true` responses include real upstream provider names for this customer. Off for everyone by default.</Hint>
        <ResultMessage result={result} />
      </div>
    </div>
  );
}

export function OrgSuspendSwitch({ orgId, suspended }: { orgId: string; suspended: boolean }) {
  const router = useRouter();
  const [pending, start] = React.useTransition();
  const [open, setOpen] = React.useState(false);
  const [reason, setReason] = React.useState("");
  const [result, setResult] = React.useState<AdminActionResult | null>(null);
  const apply = (v: boolean) =>
    start(async () => {
      const r = await setOrganizationSuspended(orgId, v, reason);
      setResult(r);
      if (r.ok) {
        setOpen(false);
        setReason("");
        router.refresh();
      }
    });
  return (
    <div className="flex items-start gap-3">
      <Switch id={`sus-${orgId}`} checked={suspended} disabled={pending} aria-label="Suspended" onCheckedChange={(v) => (v ? setOpen(true) : apply(false))} />
      <div className="grid gap-0.5">
        <Label htmlFor={`sus-${orgId}`}>Suspended</Label>
        <Hint>Suspended organizations get `FORBIDDEN` on every API call and see a banner in the dashboard.</Hint>
        <ResultMessage result={result} />
      </div>
      <Dialog open={open} onOpenChange={setOpen}>
        <DialogContent size="sm">
          <DialogHeader>
            <DialogTitle>Suspend this organization?</DialogTitle>
            <DialogDescription>All API keys stop working immediately. Members can still sign in to read logs and contact support.</DialogDescription>
          </DialogHeader>
          <Field>
            <Label htmlFor="sus-reason">Reason (internal)</Label>
            <Textarea id="sus-reason" value={reason} onChange={(e) => setReason(e.target.value)} placeholder="Optional — stored in the audit log" />
          </Field>
          <DialogFooter>
            <Button variant="outline" onClick={() => setOpen(false)}>
              Cancel
            </Button>
            <Button variant="danger" loading={pending} onClick={() => apply(true)}>
              Suspend
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}

export function OrgLimitsForm({ orgId, softLimitUsd, hardLimitUsd }: { orgId: string; softLimitUsd: number | null; hardLimitUsd: number | null }) {
  const router = useRouter();
  const [pending, start] = React.useTransition();
  const [soft, setSoft] = React.useState(softLimitUsd?.toString() ?? "");
  const [hard, setHard] = React.useState(hardLimitUsd?.toString() ?? "");
  const [result, setResult] = React.useState<AdminActionResult | null>(null);
  const toNum = (s: string) => (s.trim() === "" ? null : Number(s));
  return (
    <form
      className="grid gap-3"
      onSubmit={(e) => {
        e.preventDefault();
        start(async () => {
          const r = await updateOrganizationLimits(orgId, { softLimitUsd: toNum(soft), hardLimitUsd: toNum(hard) });
          setResult(r);
          if (r.ok) router.refresh();
        });
      }}
    >
      <div className="grid gap-3 sm:grid-cols-2">
        <Field>
          <Label htmlFor="soft">Soft limit (USD / month)</Label>
          <Input id="soft" type="number" min={0} step="0.01" inputMode="decimal" value={soft} onChange={(e) => setSoft(e.target.value)} placeholder="none" className="font-mono" />
          <Hint>Sends a warning email; requests continue.</Hint>
        </Field>
        <Field>
          <Label htmlFor="hard">Hard limit (USD / month)</Label>
          <Input id="hard" type="number" min={0} step="0.01" inputMode="decimal" value={hard} onChange={(e) => setHard(e.target.value)} placeholder="none" className="font-mono" />
          <Hint>Requests fail with `USAGE_LIMIT_REACHED` once exceeded.</Hint>
        </Field>
      </div>
      <div className="flex items-center gap-3">
        <Button type="submit" size="sm" loading={pending}>
          Save limits
        </Button>
        <ResultMessage result={result} />
      </div>
    </form>
  );
}