"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { z } from "zod";
import { CalendarIcon } from "lucide-react";
import { format } from "date-fns";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Calendar } from "@/components/ui/calendar";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import { trpc } from "@/utils/trpc";
import { Header } from "@/components/layout/header";
import { Footer } from "@/components/layout/footer";

const formSchema = z.object({
  name: z.string().min(1, "Name wird benötigt"),
  birthDate: z.date({
    required_error: "Bitte wähle ein Geburtsdatum",
  }),
  birthTime: z.string().regex(/^([0-1]?[0-9]|2[0-3]):[0-5][0-9]$/, "Ungültiges Zeitformat (HH:MM)").optional(),
  gender: z.enum(["male", "female"], {
    required_error: "Bitte wähle das Geschlecht",
  }),
});

type FormValues = z.infer<typeof formSchema>;

export default function AddChildPage() {
  const router = useRouter();
  const [isLoading, setIsLoading] = useState(false);
  const [dateInputValue, setDateInputValue] = useState("");

  const form = useForm<FormValues>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      name: "",
      gender: "male",
      birthTime: "",
    },
  });

  const addChild = trpc.child.add.useMutation({
    onSuccess: () => {
      toast.success("Kind hinzugefügt", {
        description: "Das Kind wurde erfolgreich hinzugefügt."
      });
      form.reset();
      router.push("/app");
      router.refresh();
    },
    onError: (err) => {
      toast.error("Fehler", {
        description: err.message
      });
      setIsLoading(false);
    },
  });

  function onSubmit(values: FormValues) {
    setIsLoading(true);
    
    // Create a date with the selected time or default to noon
    let birthDateTime = values.birthDate;
    if (values.birthTime) {
      const [hours, minutes] = values.birthTime.split(':').map(Number);
      birthDateTime = new Date(Date.UTC(
        values.birthDate.getUTCFullYear(),
        values.birthDate.getUTCMonth(),
        values.birthDate.getUTCDate(),
        hours,
        minutes,
        0
      ));
    } else {
      // Default to noon if no time is specified
      birthDateTime = new Date(Date.UTC(
        values.birthDate.getUTCFullYear(),
        values.birthDate.getUTCMonth(),
        values.birthDate.getUTCDate(),
        12,
        0,
        0
      ));
    }
    
    addChild.mutate({
      name: values.name,
      birthDate: birthDateTime.toISOString(),
      gender: values.gender,
    });
  }

  return (
    <>
      <Header />
      <main className="min-h-[calc(100vh-160px)] px-6 py-10 bg-gradient-to-br from-rose-100 to-rose-50">
        <div className="max-w-md mx-auto">
          <h1 className="text-2xl font-bold text-zinc-800 mb-6">
            Kind hinzufügen
          </h1>

          <Form {...form}>
            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
              <FormField
                control={form.control}
                name="name"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Name</FormLabel>
                    <FormControl>
                      <Input className="bg-white" placeholder="Name des Kindes" {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

              <FormField
                control={form.control}
                name="birthDate"
                render={({ field }) => (
                  <FormItem className="flex flex-col">
                    <FormLabel>Geburtsdatum</FormLabel>
                    <Popover>
                      <PopoverTrigger asChild>
                        <FormControl>
                          <div className="flex h-9 w-full items-center rounded-md border bg-white px-3 py-1 text-sm shadow-xs transition-[color,box-shadow] focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]">
                            <Input
                              type="text"
                              className="border-0 bg-transparent p-0 focus-visible:ring-0 focus-visible:ring-offset-0 flex-1"
                              placeholder="TT.MM.JJJJ"
                              value={dateInputValue}
                              onChange={(e) => {
                                setDateInputValue(e.target.value);
                              }}
                              onBlur={(e) => {
                                const inputValue = e.target.value;
                                
                                // Allow empty input
                                if (!inputValue) {
                                  field.onChange(null);
                                  return;
                                }
                                
                                // Check if the input matches the expected format (DD.MM.YYYY)
                                const dateRegex = /^(\d{1,2})\.(\d{1,2})\.(\d{4})$/;
                                const match = inputValue.match(dateRegex);
                                
                                if (match) {
                                  const day = parseInt(match[1], 10);
                                  const month = parseInt(match[2], 10) - 1; // JavaScript months are 0-indexed
                                  const year = parseInt(match[3], 10);
                                  
                                  // Create a date object and validate it
                                  // Set the time to noon UTC to avoid timezone issues
                                  const date = new Date(Date.UTC(year, month, day, 12, 0, 0));
                                  
                                  // Check if the date is valid (e.g., not February 30th)
                                  if (
                                    date.getUTCDate() === day &&
                                    date.getUTCMonth() === month &&
                                    date.getUTCFullYear() === year &&
                                    date <= new Date() &&
                                    date >= new Date("1900-01-01")
                                  ) {
                                    field.onChange(date);
                                    setDateInputValue(format(date, "dd.MM.yyyy"));
                                  } else {
                                    // If invalid, reset to the last valid value
                                    setDateInputValue(field.value ? format(field.value, "dd.MM.yyyy") : "");
                                  }
                                } else {
                                  // If format is wrong, reset to the last valid value
                                  setDateInputValue(field.value ? format(field.value, "dd.MM.yyyy") : "");
                                }
                              }}
                            />
                            <CalendarIcon className="h-4 w-4 opacity-50" />
                          </div>
                        </FormControl>
                      </PopoverTrigger>
                      <PopoverContent className="w-auto p-0" align="start">
                        <Calendar
                          mode="single"
                          selected={field.value}
                          onSelect={(date) => {
                            field.onChange(date);
                            if (date) {
                              setDateInputValue(format(date, "dd.MM.yyyy"));
                            } else {
                              setDateInputValue("");
                            }
                          }}
                          disabled={(date) =>
                            date > new Date() || date < new Date("1900-01-01")
                          }
                          initialFocus
                        />
                      </PopoverContent>
                    </Popover>
                    <FormMessage />
                  </FormItem>
                )}
              />

              <FormField
                control={form.control}
                name="birthTime"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Geburtszeit (optional)</FormLabel>
                    <FormControl>
                      <Input
                        type="time"
                        className="bg-white"
                        placeholder="HH:MM"
                        {...field}
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

              <FormField
                control={form.control}
                name="gender"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Geschlecht</FormLabel>
                    <Select
                      onValueChange={field.onChange}
                      defaultValue={field.value}
                    >
                      <FormControl>
                        <SelectTrigger className="bg-white">
                          <SelectValue placeholder="Geschlecht auswählen" />
                        </SelectTrigger>
                      </FormControl>
                      <SelectContent>
                        <SelectItem value="male">Bub</SelectItem>
                        <SelectItem value="female">Mädchen</SelectItem>
                      </SelectContent>
                    </Select>
                    <FormMessage />
                  </FormItem>
                )}
              />

              <Button type="submit" className="w-full" disabled={isLoading}>
                {isLoading ? "Wird hinzugefügt..." : "Kind hinzufügen"}
              </Button>
            </form>
          </Form>
        </div>
      </main>
      <Footer />
    </>
  );
}