"use client";

import { useRouter } from "next/navigation";
import { useState } from "react";
import { AdminItemForm, type ItemFormPayload } from "./AdminItemForm";

interface AdminItemCreateViewProps {
  locale: string;
  categories: string[];
  serverOptions: string[];
}

export function AdminItemCreateView({
  locale,
  categories,
  serverOptions,
}: AdminItemCreateViewProps) {
  const router = useRouter();
  const [submitting, setSubmitting] = useState(false);

  const handleSubmit = async (payload: ItemFormPayload) => {
    setSubmitting(true);
    try {
      const body = {
        name: payload.name,
        category: payload.category,
        rarity: payload.rarity,
        imageUrl: payload.imageUrl,
        imageLocalPath: payload.imageLocalPath,
        level: payload.level,
        weight: payload.weight,
        slots: payload.slots,
        skill: payload.skill,
        description: payload.description,
        servers: payload.servers,
        tags: payload.tags,
        metadata: payload.metadata,
        fields: payload.fields,
        server: payload.server ?? null,
      };

      const response = await fetch("/api/admin/items", {
        method: "POST",
        credentials: "include",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(body),
      });

      if (!response.ok) {
        const errorPayload = await response
          .json()
          .catch(() => ({ error: "Erro ao criar item" }));
        throw new Error(errorPayload?.error || "Falha ao criar item");
      }

      router.push(`/${locale}/admin?tab=items`);
      router.refresh();
    } finally {
      setSubmitting(false);
    }
  };

  const handleCancel = () => {
    router.push(`/${locale}/admin?tab=items`);
  };

  return (
    <div className="max-w-5xl mx-auto">
      <div className="rounded-2xl border border-border/60 bg-card shadow-sm">
        <AdminItemForm
          mode="create"
          categories={categories}
          serverOptions={serverOptions}
          onSubmit={handleSubmit}
          onCancel={handleCancel}
          submitting={submitting}
          className="flex flex-col"
          contentClassName="px-6 py-6"
        />
      </div>
    </div>
  );
}