"use client";
import * as React from "react";
import { useRouter } from "next/navigation";
import { updateOrganization } from "@/actions/account";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Field, Hint, Label } from "@/components/ui/label";
import { Alert } from "@/components/ui/alert";

export function OrganizationForm({ name, softLimitUsd, hardLimitUsd, canEdit }: { name: string; softLimitUsd: number | null; hardLimitUsd: number | null; canEdit: boolean }) {
  const router = useRouter();
  const [error, setError] = React.useState<string | null>(null);
  const [saved, setSaved] = React.useState(false);
  const [pending, startTransition] = React.useTransition();

  return (
    <form
      className="grid gap-4"
      onSubmit={(e) => {
        e.preventDefault();
        setError(null);
        setSaved(false);
        const fd = new FormData(e.currentTarget);
        startTransition(async () => {
          const res = await updateOrganization(fd);
          if (!res.ok) {
            setError(res.error);
            return;
          }
          setSaved(true);
          router.refresh();
        });
      }}
    >
      {!canEdit ? <Alert variant="info">Only owners, admins and billing members can change organization settings.</Alert> : null}
      {error ? <Alert variant="danger">{error}</Alert> : null}
      {saved ? <Alert variant="success">Organization updated.</Alert> : null}
      <Field>
        <Label htmlFor="org-name">Organization name</Label>
        <Input id="org-name" name="name" defaultValue={name} maxLength={80} required disabled={!canEdit} className="sm:max-w-sm" />
      </Field>
      <div className="grid gap-4 sm:grid-cols-2 sm:max-w-lg">
        <Field>
          <Label htmlFor="org-soft">Soft limit (USD / month)</Label>
          <Input id="org-soft" name="softLimitUsd" type="number" min={0} step="0.01" inputMode="decimal" defaultValue={softLimitUsd ?? ""} placeholder="No limit" disabled={!canEdit} className="font-mono tabular" />
          <Hint>You get an email when total spend crosses this amount.</Hint>
        </Field>
        <Field>
          <Label htmlFor="org-hard">Hard limit (USD / month)</Label>
          <Input id="org-hard" name="hardLimitUsd" type="number" min={0} step="0.01" inputMode="decimal" defaultValue={hardLimitUsd ?? ""} placeholder="No limit" disabled={!canEdit} className="font-mono tabular" />
          <Hint>All projects stop with USAGE_LIMIT_REACHED until the next month.</Hint>
        </Field>
      </div>
      {canEdit ? (
        <div>
          <Button type="submit" variant="primary" loading={pending}>
            Save organization
          </Button>
        </div>
      ) : null}
    </form>
  );
}