"use client";

import { useState } from "react";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";

interface UserEditorProps {
  userId: string;
  currentRole: "user" | "moderator" | "admin";
  currentTier: "free" | "pro" | "family";
  currentIsDeveloper: boolean;
  currentIsByokEnabled: boolean;
}

export function UserEditor({ userId, currentRole, currentTier, currentIsDeveloper, currentIsByokEnabled }: UserEditorProps) {
  const [role, setRole] = useState<"user" | "moderator" | "admin">(currentRole);
  const [tier, setTier] = useState<"free" | "pro" | "family">(currentTier);
  const [isDeveloper, setIsDeveloper] = useState(currentIsDeveloper);
  const [isByokEnabled, setIsByokEnabled] = useState(currentIsByokEnabled);
  const [saving, setSaving] = useState(false);

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

  return (
    <div className="flex flex-col gap-4">
      <div className="grid grid-cols-2 gap-4">
        <div className="space-y-2">
          <Label htmlFor="role-select">Role</Label>
          <Select value={role} onValueChange={(v) => setRole(v as typeof role)}>
            <SelectTrigger id="role-select">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="user">User</SelectItem>
              <SelectItem value="moderator">Moderator</SelectItem>
              <SelectItem value="admin">Admin</SelectItem>
            </SelectContent>
          </Select>
        </div>
        <div className="space-y-2">
          <Label htmlFor="tier-select">Tier</Label>
          <Select value={tier} onValueChange={(v) => setTier(v as typeof tier)}>
            <SelectTrigger id="tier-select">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="free">Free</SelectItem>
              <SelectItem value="pro">Pro</SelectItem>
              <SelectItem value="family">Family</SelectItem>
            </SelectContent>
          </Select>
        </div>
      </div>
      <div className="flex items-center justify-between gap-3 rounded-lg border p-3 max-w-md">
        <div>
          <Label htmlFor="developer-switch">Developer access</Label>
          <p className="text-xs text-muted-foreground">Enables webhooks and self-serve API keys. Users on a paid tier can also self-enable this.</p>
        </div>
        <Switch id="developer-switch" checked={isDeveloper} onCheckedChange={setIsDeveloper} />
      </div>
      <div className="flex items-center justify-between gap-3 rounded-lg border p-3 max-w-md">
        <div>
          <Label htmlFor="byok-switch">BYOK access</Label>
          <p className="text-xs text-muted-foreground">Enables bring-your-own AI provider keys. Admin-only, no self-serve.</p>
        </div>
        <Switch id="byok-switch" checked={isByokEnabled} onCheckedChange={setIsByokEnabled} />
      </div>
      <div>
        <Button onClick={handleSave} disabled={saving}>
          {saving ? "Saving…" : "Save Changes"}
        </Button>
      </div>
    </div>
  );
}