"use client";

import { useEffect } from "react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { updateOrder } from "@/actions/orders";
import { Button } from "@/components/ui/button";
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { useRouter } from "next/navigation";
import { useAction } from "@/hooks/useAction";
import { toast } from "sonner";

const editOrderSchema = z.object({
  status: z.enum(["pending", "processing", "shipped", "delivered", "cancelled"]),
  payment_status: z.enum([
    "requires_payment_method",
    "requires_confirmation",
    "requires_action",
    "processing",
    "requires_capture",
    "canceled",
    "succeeded",
  ]),
  fulfilment_status: z.enum(["fulfilled", "unfulfilled", "partially-fulfilled"]),
});

type EditOrderFormData = z.infer<typeof editOrderSchema>;

interface EditOrderFormProps {
  orderId: string;
  initialData: {
    order_status?: any;
    payment_status?: any;
    fulfilment_status?: any;
    status?: any; // legacy field support
  };
}

export function EditOrderForm({ orderId, initialData }: EditOrderFormProps) {
  const router = useRouter();
  const { execute, isLoading, validationErrors } = useAction(updateOrder);

  const form = useForm<EditOrderFormData>({
    resolver: zodResolver(editOrderSchema),
    defaultValues: {
      status: (initialData.order_status || initialData.status || "pending") as any,
      payment_status: (initialData.payment_status || "processing") as any,
      fulfilment_status: (initialData.fulfilment_status || "unfulfilled") as any,
    },
  });

  // Sync server-side validation errors
  useEffect(() => {
    if (validationErrors) {
      Object.keys(validationErrors).forEach((key) => {
        form.setError(key as any, {
          type: "server",
          message: validationErrors[key][0],
        });
      });
    }
  }, [validationErrors, form]);

  const onSubmit = async (data: EditOrderFormData) => {
    const result = await execute({ id: orderId, data });
    if (result?.success) {
      toast.success("Bestellung erfolgreich aktualisiert");
      router.push("/dashboard/orders/overview");
    }
  };

  return (
    <Card className="max-w-2xl">
      <CardHeader>
        <CardTitle>Bestellung bearbeiten</CardTitle>
        <CardDescription>
          Aktualisieren Sie die Status der Bestellung.
        </CardDescription>
      </CardHeader>
      <CardContent>
        <Form {...form}>
          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
            <FormField
              control={form.control}
              name="status"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Bestellstatus</FormLabel>
                  <Select onValueChange={field.onChange} defaultValue={field.value}>
                    <FormControl>
                      <SelectTrigger>
                        <SelectValue placeholder="Status auswählen" />
                      </SelectTrigger>
                    </FormControl>
                    <SelectContent>
                      <SelectItem value="pending">Ausstehend</SelectItem>
                      <SelectItem value="processing">In Bearbeitung</SelectItem>
                      <SelectItem value="shipped">Versendet</SelectItem>
                      <SelectItem value="delivered">Geliefert</SelectItem>
                      <SelectItem value="cancelled">Storniert</SelectItem>
                    </SelectContent>
                  </Select>
                  <FormMessage />
                </FormItem>
              )}
            />
            <FormField
              control={form.control}
              name="payment_status"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Zahlungsstatus</FormLabel>
                  <Select onValueChange={field.onChange} defaultValue={field.value}>
                    <FormControl>
                      <SelectTrigger>
                        <SelectValue placeholder="Status auswählen" />
                      </SelectTrigger>
                    </FormControl>
                    <SelectContent>
                      <SelectItem value="requires_payment_method">Zahlungsmethode erforderlich</SelectItem>
                      <SelectItem value="requires_confirmation">Bestätigung erforderlich</SelectItem>
                      <SelectItem value="requires_action">Aktion erforderlich</SelectItem>
                      <SelectItem value="processing">Verarbeitung</SelectItem>
                      <SelectItem value="requires_capture">Erfassung erforderlich</SelectItem>
                      <SelectItem value="canceled">Storniert</SelectItem>
                      <SelectItem value="succeeded">Erfolgreich</SelectItem>
                    </SelectContent>
                  </Select>
                  <FormMessage />
                </FormItem>
              )}
            />
            <FormField
              control={form.control}
              name="fulfilment_status"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Erfüllungsstatus</FormLabel>
                  <Select onValueChange={field.onChange} defaultValue={field.value}>
                    <FormControl>
                      <SelectTrigger>
                        <SelectValue placeholder="Status auswählen" />
                      </SelectTrigger>
                    </FormControl>
                    <SelectContent>
                      <SelectItem value="unfulfilled">Nicht erfüllt</SelectItem>
                      <SelectItem value="partially-fulfilled">Teilweise erfüllt</SelectItem>
                      <SelectItem value="fulfilled">Erfüllt</SelectItem>
                    </SelectContent>
                  </Select>
                  <FormMessage />
                </FormItem>
              )}
            />
            <div className="flex justify-end gap-2">
              <Button
                type="button"
                variant="outline"
                onClick={() => router.push("/dashboard/orders/overview")}
                disabled={isLoading}
              >
                Abbrechen
              </Button>
              <Button type="submit" disabled={isLoading}>
                {isLoading ? "Aktualisieren..." : "Aktualisieren"}
              </Button>
            </div>
          </form>
        </Form>
      </CardContent>
    </Card>
  );
}