"use client";
import * as React from "react";
import { useRouter } from "next/navigation";
import { Plus, Trash2 } from "lucide-react";
import { deleteFeatureFlag, setFeatureFlag, upsertFeatureFlag, type AdminActionResult } from "@/actions/admin";
import { Button } from "@/components/ui/button";
import { Input } 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 { ActionButton, ResultMessage } from "./action-button";

export function FlagSwitch({ flagKey, enabled }: { flagKey: string; enabled: boolean }) {
  const router = useRouter();
  const [pending, start] = React.useTransition();
  const [result, setResult] = React.useState<AdminActionResult | null>(null);
  return (
    <div className="flex items-center gap-2">
      <Switch
        checked={enabled}
        disabled={pending}
        aria-label={`Toggle ${flagKey}`}
        onCheckedChange={(v) =>
          start(async () => {
            const r = await setFeatureFlag(flagKey, v);
            setResult(r);
            if (r.ok) router.refresh();
          })
        }
      />
      {result && !result.ok ? <ResultMessage result={result} /> : null}
    </div>
  );
}

export function DeleteFlagButton({ flagKey }: { flagKey: string }) {
  return (
    <ActionButton variant="ghost" size="icon-sm" aria-label={`Delete ${flagKey}`} action={() => deleteFeatureFlag(flagKey)} confirm={{ title: `Delete flag ${flagKey}?`, description: "Code that reads this flag will treat it as disabled.", confirmLabel: "Delete" }}>
      <Trash2 className="size-3.5 text-fg-subtle" />
    </ActionButton>
  );
}

export function NewFlagDialog() {
  const router = useRouter();
  const [open, setOpen] = React.useState(false);
  const [pending, start] = React.useTransition();
  const [key, setKey] = React.useState("");
  const [description, setDescription] = React.useState("");
  const [plans, setPlans] = React.useState("");
  const [orgIds, setOrgIds] = React.useState("");
  const [result, setResult] = React.useState<AdminActionResult | null>(null);
  return (
    <>
      <Button variant="primary" size="sm" onClick={() => setOpen(true)}>
        <Plus className="size-3.5" /> New flag
      </Button>
      <Dialog open={open} onOpenChange={setOpen}>
        <DialogContent size="md">
          <DialogHeader>
            <DialogTitle>Create a feature flag</DialogTitle>
            <DialogDescription>Flags start disabled. Optional targeting by plan or organization id narrows who sees the feature when enabled.</DialogDescription>
          </DialogHeader>
          <form
            className="grid gap-3"
            onSubmit={(e) => {
              e.preventDefault();
              start(async () => {
                const r = await upsertFeatureFlag({
                  key: key.trim(),
                  description,
                  enabled: false,
                  plans: plans.split(",").map((s) => s.trim()).filter(Boolean) as never,
                  organizationIds: orgIds.split(/[\s,]+/).map((s) => s.trim()).filter(Boolean),
                });
                setResult(r);
                if (r.ok) {
                  setOpen(false);
                  setKey("");
                  setDescription("");
                  setPlans("");
                  setOrgIds("");
                  router.refresh();
                }
              });
            }}
          >
            <Field>
              <Label htmlFor="flag-key">Key</Label>
              <Input id="flag-key" value={key} onChange={(e) => setKey(e.target.value)} placeholder="e.g. browser.beta" className="font-mono" required />
              <Hint>Lowercase letters, digits, `.` `_` `-`.</Hint>
            </Field>
            <Field>
              <Label htmlFor="flag-desc">Description</Label>
              <Input id="flag-desc" value={description} onChange={(e) => setDescription(e.target.value)} placeholder="What this flag gates" />
            </Field>
            <div className="grid gap-3 sm:grid-cols-2">
              <Field>
                <Label htmlFor="flag-plans">Plans (comma-separated)</Label>
                <Input id="flag-plans" value={plans} onChange={(e) => setPlans(e.target.value)} placeholder="growth, business" className="font-mono" />
              </Field>
              <Field>
                <Label htmlFor="flag-orgs">Organization ids</Label>
                <Input id="flag-orgs" value={orgIds} onChange={(e) => setOrgIds(e.target.value)} placeholder="org_a, org_b" className="font-mono" />
              </Field>
            </div>
            <ResultMessage result={result && !result.ok ? result : null} />
            <DialogFooter>
              <Button type="button" variant="outline" onClick={() => setOpen(false)}>
                Cancel
              </Button>
              <Button type="submit" variant="primary" loading={pending}>
                Create flag
              </Button>
            </DialogFooter>
          </form>
        </DialogContent>
      </Dialog>
    </>
  );
}