"use client";

import { useState } from "react";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

const FIELDS = [
  { key: "maxRecipes", label: "Max Recipes" },
  { key: "aiCallsPerMonth", label: "AI Calls / Month" },
  { key: "storageMb", label: "Storage (MB)" },
  { key: "maxPublicRecipes", label: "Max Public Recipes" },
] as const;

type TierDefinition = {
  tier: string;
  maxRecipes: number;
  aiCallsPerMonth: number;
  storageMb: number;
  maxPublicRecipes: number;
};

export function TierLimitsForm({ tierDefinition }: { tierDefinition: TierDefinition }) {
  const [values, setValues] = useState<Record<string, number>>({
    maxRecipes: tierDefinition.maxRecipes,
    aiCallsPerMonth: tierDefinition.aiCallsPerMonth,
    storageMb: tierDefinition.storageMb,
    maxPublicRecipes: tierDefinition.maxPublicRecipes,
  });
  const [saving, setSaving] = useState(false);

  async function handleSave() {
    setSaving(true);
    try {
      const res = await fetch(`/api/v1/admin/tiers/${tierDefinition.tier}`, {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(values),
      });
      if (!res.ok) {
        const data = await res.json().catch(() => ({}));
        throw new Error((data as { error?: string }).error ?? "Save failed");
      }
      toast.success(`${tierDefinition.tier} tier limits saved`);
    } catch (err) {
      toast.error(err instanceof Error ? err.message : "Failed to save");
    } finally {
      setSaving(false);
    }
  }

  return (
    <section className="rounded-xl border p-6 space-y-4">
      <h2 className="font-semibold text-lg capitalize">{tierDefinition.tier}</h2>

      <div className="grid grid-cols-2 gap-4">
        {FIELDS.map(({ key, label }) => (
          <div key={key} className="space-y-1.5">
            <Label htmlFor={`${tierDefinition.tier}-${key}`}>{label}</Label>
            <Input
              id={`${tierDefinition.tier}-${key}`}
              type="number"
              min={0}
              value={values[key]}
              onChange={(e) =>
                setValues((prev) => ({ ...prev, [key]: Number(e.target.value) }))
              }
            />
          </div>
        ))}
      </div>

      <Button onClick={() => { void handleSave(); }} disabled={saving} size="sm">
        {saving ? "Saving…" : "Save"}
      </Button>
    </section>
  );
}
