"use client";

import { format } from "date-fns";
import React, { useState, useEffect } from "react";
import { useForm } from "react-hook-form";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import { useSession } from "next-auth/react";
import { toast, Flip } from "react-toastify";
import ClockLoader from "react-spinners/ClockLoader";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";

// ✅ Fix schema for date field
const formSchema = z.object({
  mobile: z.string().min(6, "Mobile number required"),
  gender: z.string().min(1, "Select a gender"),
  date_of_birth: z.string(),
});

type FormData = z.infer<typeof formSchema>;

type Profile = {
  full_name: string;
  mobile_number: string;
  picture: { file_url: string };
  gender: string;
  date_of_birth: string;
};
type Account = {
  id: string;
  userId: number;
  type: string;
  provider: string;
};
type User = {
  email: string;
  profile: Profile;
  account: Account;
};

async function getUserByUuid(params: string) {
  const res = await fetch(`/api/user/${params}`, { method: "GET" });
  return res.json();
}

const Pages = ({ params }: { params: { uuid: string } }) => {
  const { data: session } = useSession();
  const [loading, setLoading] = useState(true);
  const [user, setUser] = useState<User>();
  const [editOption, setEditOption] = useState<boolean>(false);

  const form = useForm<FormData>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      mobile: "",
      gender: "",
      date_of_birth: "",
    },
  });

  useEffect(() => {
    async function data() {
      const { User } = await getUserByUuid(params.uuid);
      if (User) {
        form.reset({
          mobile: User.profile.mobile_number,
          gender: User.profile.gender,
          date_of_birth: new Date(User.profile.date_of_birth)
            .toISOString()
            .split("T")[0], // ✅ convert date -> YYYY-MM-DD string
        });
        setUser(User);
      }
      setLoading(false);
    }
    data();
  }, [form, params.uuid]);

  async function onSubmit(data: FormData) {
    console.log("Data to submit:", data);

    const formData = new FormData();
    formData.append("mobile", data.mobile);
    formData.append("gender", data.gender);
    formData.append("date_of_birth", data.date_of_birth);
    formData.append("editedBy", session?.user.uuid || "");

    try {
      const response = await fetch(`/api/admin/customers/${params.uuid}`, {
        method: "PUT",
        body: formData,
      });
      if (response.ok && user) {
        setEditOption(false);

        const updatedUser = {
          ...user,
          profile: {
            ...user.profile,
            mobile_number: data.mobile,
            gender: data.gender,
            date_of_birth: data.date_of_birth,
          },
        };
        setUser(updatedUser);

        form.reset({
          mobile: data.mobile,
          gender: data.gender,
          date_of_birth: data.date_of_birth,
        });

        toast.success("Details Updated!", {
          position: "bottom-right",
          autoClose: 4000,
          theme: "colored",
          transition: Flip,
        });
      }
    } catch (error: any) {
      console.log("Error ▄︻デ══━一💥:", error);
    }
  }

  if (loading) {
    return (
      <div className="h-screen flex justify-center items-center">
        <ClockLoader color="#3b82f6" />
      </div>
    );
  }

  return (
    <div className="flex items-center justify-center min-h-[calc(100vh-200px)] px-4 sm:px-2">
      <div className="w-full max-w-4xl bg-white shadow-lg p-6 sm:p-10 rounded-2xl border border-gray-200">
        <p className="text-2xl sm:text-3xl font-bold mb-6 text-center text-blue-600">
          User Profile
        </p>

        {/* View Mode */}
        {!editOption && user ? (
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-y-4 gap-x-8 text-base sm:text-lg">
            <p>
              <span className="font-semibold text-gray-600">Name:</span>{" "}
              {user.profile.full_name}
            </p>
            <p>
              <span className="font-semibold text-gray-600">Gender:</span>{" "}
              {user.profile.gender}
            </p>
            <p>
              <span className="font-semibold text-gray-600">Date of Birth:</span>{" "}
              {format(new Date(user.profile.date_of_birth), "PPP")}
            </p>
            <p>
              <span className="font-semibold text-gray-600">Mobile:</span>{" "}
              {user.profile.mobile_number}
            </p>
            <p className="sm:col-span-2">
              <span className="font-semibold text-gray-600">Email:</span>{" "}
              {user.email}
            </p>
          </div>
        ) : null}

        {/* Edit Mode */}
        {editOption ? (
          <form
            onSubmit={form.handleSubmit(onSubmit)}
            className="space-y-6 mt-6"
          >
            <div>
              <label className="block mb-2 font-semibold">Mobile</label>
              <Input
                {...form.register("mobile")}
                className="w-full border-gray-300 focus:border-blue-500 focus:ring focus:ring-blue-200"
              />
            </div>

            <div>
              <label className="block mb-2 font-semibold">Gender</label>
              <select
                {...form.register("gender")}
                className="border border-gray-300 rounded-lg px-3 py-2 w-full focus:border-blue-500 focus:ring focus:ring-blue-200"
              >
                <option value="">Select Gender</option>
                <option value="MALE">Male</option>
                <option value="FEMALE">Female</option>
                <option value="OTHER">Other</option>
              </select>
            </div>

            <div>
              <label className="block mb-2 font-semibold">Date of Birth</label>
              <Input
                type="date"
                {...form.register("date_of_birth")}
                className="w-full border-gray-300 focus:border-blue-500 focus:ring focus:ring-blue-200"
              />
            </div>

            <div className="flex flex-col sm:flex-row gap-4 pt-2">
              <Button
                type="submit"
                className="bg-blue-600 hover:bg-blue-700 text-white px-6 rounded-lg w-full sm:w-auto"
              >
                Save
              </Button>
              <Button
                type="button"
                onClick={() => setEditOption(false)}
                className="bg-gray-400 hover:bg-gray-500 text-white px-6 rounded-lg w-full sm:w-auto"
              >
                Cancel
              </Button>
            </div>
          </form>
        ) : null}

        {/* Edit Button (View Mode) */}
        {!editOption && (
          <div className="flex justify-center mt-8">
            <Button
              className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-2 rounded-lg shadow-md w-full sm:w-auto"
              onClick={() => setEditOption(true)}
            >
              Edit Profile
            </Button>
          </div>
        )}
      </div>
    </div>
  );
};

export default Pages;