"use client";

import { useMutation } from "@tanstack/react-query";
import { useRouter } from "next/navigation";
import { toast } from "sonner";
import * as z from "zod";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { useAppForm, useFormFields } from "@/components/ui/tanstack-form";
import { createCourseMutation, updateCourseMutation } from "../api/mutations";
import type { Course } from "../api/types";
import { getCourseCategoryOptions } from "../constants/course-options";
import { courseSchema, type CourseFormValues } from "../schemas/course";

export default function CourseForm({
  initialData,
  pageTitle,
}: {
  initialData: Course | null;
  pageTitle: string;
}) {
  const router = useRouter();
  const isEdit = Boolean(initialData);
  const categoryOptions = getCourseCategoryOptions(initialData?.category);

  const createMutation = useMutation({
    ...createCourseMutation,
    onSuccess: () => {
      toast.success("สร้างหลักสูตรเรียบร้อยแล้ว");
      router.push("/dashboard/courses");
    },
    onError: (error) => {
      toast.error(error.message || "ไม่สามารถสร้างหลักสูตรได้");
    },
  });

  const updateMutation = useMutation({
    ...updateCourseMutation,
    onSuccess: () => {
      toast.success("อัปเดตหลักสูตรเรียบร้อยแล้ว");
      router.push("/dashboard/courses");
    },
    onError: (error) => {
      toast.error(error.message || "ไม่สามารถอัปเดตหลักสูตรได้");
    },
  });

  const form = useAppForm({
    defaultValues: {
      courseCode: initialData?.course_code ?? "",
      name: initialData?.name ?? "",
      category: initialData?.category ?? "",
      organizer: initialData?.organizer ?? "",
      standardHours: initialData?.standard_hours,
      certificateValidityMonths:
        initialData?.certificate_validity_months ?? undefined,
      isRequired: initialData?.is_required ?? false,
      trainingCost: initialData?.training_cost ?? undefined,
      description: initialData?.description ?? "",
      isActive: initialData?.is_active ?? true,
    } as CourseFormValues,
    validators: {
      onSubmit: courseSchema,
    },
    onSubmit: async ({ value }) => {
      const payload = {
        courseCode: value.courseCode,
        name: value.name,
        category: value.category,
        organizer: value.organizer,
        standardHours: value.standardHours!,
        certificateValidityMonths: value.certificateValidityMonths,
        isRequired: value.isRequired,
        trainingCost: value.trainingCost,
        description: value.description,
        isActive: value.isActive,
      };

      if (isEdit && initialData) {
        updateMutation.mutate({ id: initialData.id, values: payload });
      } else {
        createMutation.mutate(payload);
      }
    },
  });

  const { FormTextField, FormSelectField, FormTextareaField, FormSwitchField } =
    useFormFields<CourseFormValues>();

  return (
    <Card className="mx-auto w-full">
      <CardHeader>
        <CardTitle className="text-left text-2xl font-bold">
          {pageTitle}
        </CardTitle>
      </CardHeader>
      <CardContent>
        <form.AppForm>
          <form.Form className="space-y-8">
            <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
              <FormTextField
                name="courseCode"
                label="รหัสหลักสูตร"
                placeholder="กรอกรหัสหลักสูตร"
                validators={{
                  onBlur: z
                    .string()
                    .max(50, "รหัสหลักสูตรต้องไม่เกิน 50 ตัวอักษร")
                    .optional(),
                }}
              />

              <FormTextField
                name="name"
                label="ชื่อหลักสูตร"
                required
                placeholder="กรอกชื่อหลักสูตร"
                validators={{
                  onBlur: z
                    .string()
                    .min(2, "ชื่อหลักสูตรต้องมีอย่างน้อย 2 ตัวอักษร"),
                }}
              />

              <FormSelectField
                name="category"
                label="หมวดหมู่"
                required
                options={categoryOptions}
                placeholder="เลือกหมวดหมู่"
                validators={{
                  onBlur: z.string().min(1, "กรุณาเลือกหมวดหมู่"),
                }}
              />

              <FormTextField
                name="standardHours"
                label="ชั่วโมงมาตรฐาน"
                required
                type="number"
                min={0}
                step={0.5}
                placeholder="กรอกจำนวนชั่วโมง"
                validators={{
                  onBlur: z
                    .number({ message: "กรุณากรอกชั่วโมงมาตรฐาน" })
                    .min(0),
                }}
              />

              <FormTextField
                name="organizer"
                label="ผู้จัดอบรม"
                placeholder="กรอกชื่อผู้จัดอบรม"
              />

              {/* <FormTextField
                name='certificateValidityMonths'
                label='อายุใบรับรอง (เดือน)'
                type='number'
                min={0}
                step={1}
                placeholder='เว้นว่างหากไม่กำหนดอายุ'
                validators={{
                  onBlur: z.number().int().min(0).optional()
                }}
              /> */}

              <FormTextField
                name="trainingCost"
                label="ค่าใช้จ่ายการอบรม"
                type="number"
                min={0}
                step={0.01}
                placeholder="กรอกค่าใช้จ่าย"
                validators={{
                  onBlur: z
                    .number()
                    .min(0, "ค่าใช้จ่ายต้องไม่ต่ำกว่า 0")
                    .optional(),
                }}
              />
            </div>

            <FormTextareaField
              name="description"
              label="รายละเอียด"
              placeholder="กรอกรายละเอียดหลักสูตร"
              maxLength={500}
              rows={4}
            />

            <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
              <FormSwitchField
                name="isRequired"
                label="หลักสูตรบังคับ"
                description="กำหนดให้หลักสูตรนี้เป็นหลักสูตรบังคับใน Course Master"
              />

              <FormSwitchField
                name="isActive"
                label="เปิดใช้งานหลักสูตร"
                description="หลักสูตรที่ปิดใช้งานจะยังคงอยู่ในประวัติ แต่จะไม่แสดงในรายการใช้งานปัจจุบัน"
              />
            </div>

            <div className="flex justify-end gap-2">
              <Button
                type="button"
                variant="outline"
                onClick={() => router.back()}
              >
                กลับ
              </Button>
              <form.SubmitButton>
                {isEdit ? "อัปเดตหลักสูตร" : "เพิ่มหลักสูตร"}
              </form.SubmitButton>
            </div>
          </form.Form>
        </form.AppForm>
      </CardContent>
    </Card>
  );
}
