"use client";

import { useState } from "react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { updateManufacturer } from "@/actions/catalog";
import { Button } from "@/components/ui/button";
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { useRouter } from "next/navigation";
import { toast } from "sonner";

const editManufacturerSchema = z.object({
  companyName: z.string().min(1, "Firmenname ist erforderlich"),
  address: z.string().optional(),
  email: z.string().email("Ungültige E-Mail-Adresse"),
  phoneNumber: z.string().optional(),
});

type EditManufacturerFormData = z.infer<typeof editManufacturerSchema>;

interface EditManufacturerFormProps {
  manufacturerId: string;
  initialData: {
    companyName?: string;
    address?: string | null;
    email: string;
    phoneNumber?: string | null;
  };
}

export function EditManufacturerForm({ manufacturerId, initialData }: EditManufacturerFormProps) {
  const [isSubmitting, setIsSubmitting] = useState(false);
  const router = useRouter();

  const form = useForm<EditManufacturerFormData>({
    resolver: zodResolver(editManufacturerSchema),
    defaultValues: {
      companyName: initialData.companyName || "",
      address: initialData.address || "",
      email: initialData.email,
      phoneNumber: initialData.phoneNumber || "",
    },
  });

  const onSubmit = async (data: EditManufacturerFormData) => {
    setIsSubmitting(true);
    try {
      const result = await updateManufacturer({ id: manufacturerId, data });
      if (!result.success) {
        toast.error(result.error || "Fehler beim Aktualisieren des Herstellers");
        return;
      }
      toast.success("Hersteller erfolgreich aktualisiert");
      router.push("/dashboard/manufacturers/overview");
    } catch (error) {
      toast.error("Fehler beim Aktualisieren des Herstellers");
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <Card className="max-w-2xl">
      <CardHeader>
        <CardTitle>Hersteller bearbeiten</CardTitle>
        <CardDescription>
          Aktualisieren Sie die Informationen des Herstellers.
        </CardDescription>
      </CardHeader>
      <CardContent>
        <Form {...form}>
          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
            <FormField
              control={form.control}
              name="companyName"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Firmenname</FormLabel>
                  <FormControl>
                    <Input placeholder="Firmenname eingeben" {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
            <FormField
              control={form.control}
              name="address"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Adresse</FormLabel>
                  <FormControl>
                    <Input placeholder="Adresse eingeben" {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
            <FormField
              control={form.control}
              name="email"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>E-Mail</FormLabel>
                  <FormControl>
                    <Input type="email" placeholder="E-Mail eingeben" {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
            <FormField
              control={form.control}
              name="phoneNumber"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Telefonnummer</FormLabel>
                  <FormControl>
                    <Input placeholder="Telefonnummer eingeben" {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
            <div className="flex justify-end gap-2">
              <Button
                type="button"
                variant="outline"
                onClick={() => router.push("/dashboard/manufacturers/overview")}
                disabled={isSubmitting}
              >
                Abbrechen
              </Button>
              <Button type="submit" disabled={isSubmitting}>
                {isSubmitting ? "Aktualisieren..." : "Aktualisieren"}
              </Button>
            </div>
          </form>
        </Form>
      </CardContent>
    </Card>
  );
}