"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
// for icons
import { Eye, EyeOff, Mail, Lock, ArrowRight } from "lucide-react";

import { useRouter } from "next/navigation";
import { Controller, useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { registerSchema } from "@/validation/validation";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { useAddMember, useGetPermissions } from "@/hooks/useMember";
import { AdminLayout } from "@/components/admin/layout";
type registerFormValues = z.infer<typeof registerSchema>;
export default function page() {
  const { data: positions } = useGetPermissions();
  console.log("positions", positions);
  const [showPassword, setShowPassword] = useState(false);
  const { mutate: addMember, isPending } = useAddMember();

  const {
    register,
    control,
    handleSubmit,
    formState: { errors },
    reset,
  } = useForm<registerFormValues>({
    resolver: zodResolver(registerSchema),
    defaultValues: {
      role: "",
      gender: "",
      position: "",
      rotaryyear: "",
      status: "",
    },
  });

  const onSubmit = (data: registerFormValues) => {
    addMember(data, {
      onSuccess: () => {
        reset();
        alert("Member added successfully!");
      },
    });
    console.log("Form submitted with data:", data);
  };
  return (
    <AdminLayout>
      <div>
        <div className=" border p-6 rounded-lg shadow-md mt-16">
          <h1 className="text-3xl font-bold mb-10 border-b pb-4">
            Form to add new member
          </h1>
          <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <label className="text-sm font-medium">Select a Role</label>
                <Controller
                  name="role"
                  control={control}
                  render={({ field }) => (
                    <Select value={field.value} onValueChange={field.onChange}>
                      <SelectTrigger className="w-full ">
                        <SelectValue placeholder="Choose Role..." />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="member">Member</SelectItem>
                        <SelectItem value="bod">BOD</SelectItem>
                      </SelectContent>
                    </Select>
                  )}
                />
                {errors.role && (
                  <p className="text-sm text-destructive mt-1">
                    {errors.role.message}
                  </p>
                )}
              </div>

              <div className="space-y-2">
                <label
                  htmlFor="email"
                  className="block text-sm font-medium text-foreground"
                >
                  Email Address
                </label>
                <div className="relative">
                  <Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-muted-foreground pointer-events-none" />
                  <Input
                    {...register("email")}
                    type="email"
                    placeholder="admin@example.com"
                    className="pl-10 bg-input border border-border focus:ring-2 focus:ring-primary focus:border-primary"
                  />
                </div>
                {errors.email && (
                  <p className="text-sm text-destructive mt-1">
                    {errors.email.message}
                  </p>
                )}
              </div>
            </div>

            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <label
                  htmlFor="fname"
                  className="block text-sm font-medium text-foreground"
                >
                  First Name
                </label>
                <div className="relative">
                  <Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-muted-foreground pointer-events-none" />
                  <Input
                    {...register("fname")}
                    type="text"
                    placeholder="First Name"
                    className="pl-10 bg-input border border-border focus:ring-2 focus:ring-primary focus:border-primary"
                  />
                </div>
                {errors.fname && (
                  <p className="text-sm text-destructive mt-1">
                    {errors.fname.message}
                  </p>
                )}
              </div>

              <div className="space-y-2">
                <label
                  htmlFor="lname"
                  className="block text-sm font-medium text-foreground"
                >
                  Last Name
                </label>
                <div className="relative">
                  <Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-muted-foreground pointer-events-none" />
                  <Input
                    {...register("lname")}
                    type="text"
                    placeholder="last Name"
                    className="pl-10 bg-input border border-border focus:ring-2 focus:ring-primary focus:border-primary"
                  />
                </div>
                {errors.lname && (
                  <p className="text-sm text-destructive mt-1">
                    {errors.lname.message}
                  </p>
                )}
              </div>
            </div>

            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <label
                  htmlFor="rsufix"
                  className="block text-sm font-medium text-foreground"
                >
                  Title
                </label>
                <div className="relative">
                  <Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-muted-foreground pointer-events-none" />
                  <Input
                    {...register("rsufix")}
                    type="text"
                    placeholder="rsufix"
                    className="pl-10 bg-input border border-border focus:ring-2 focus:ring-primary focus:border-primary"
                  />
                </div>
                {errors.rsufix && (
                  <p className="text-sm text-destructive mt-1">
                    {errors.rsufix.message}
                  </p>
                )}
              </div>

              <div className="space-y-2">
                <label className="text-sm font-medium">Select a Gender</label>
                <Controller
                  name="gender"
                  control={control}
                  render={({ field }) => (
                    <Select value={field.value} onValueChange={field.onChange}>
                      <SelectTrigger className="w-full ">
                        <SelectValue placeholder="Choose Gender..." />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="male">Male</SelectItem>
                        <SelectItem value="female">Female</SelectItem>
                        <SelectItem value="others">Others</SelectItem>
                      </SelectContent>
                    </Select>
                  )}
                />
                {errors.gender && (
                  <p className="text-sm text-destructive mt-1">
                    {errors.gender.message}
                  </p>
                )}
              </div>
            </div>

            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <label
                  htmlFor="mobile"
                  className="block text-sm font-medium text-foreground"
                >
                  Phone Number
                </label>
                <div className="relative">
                  <Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-muted-foreground pointer-events-none" />
                  <Input
                    {...register("mobile")}
                    type="number"
                    placeholder="Phone Number"
                    className="pl-10 bg-input border border-border focus:ring-2 focus:ring-primary focus:border-primary"
                  />
                </div>
                {errors.mobile && (
                  <p className="text-sm text-destructive mt-1">
                    {errors.mobile.message}
                  </p>
                )}
              </div>
              <div className="space-y-2">
                <label className="text-sm font-medium">Select a Position</label>
                <Controller
                  name="position"
                  control={control}
                  render={({ field }) => (
                    <Select value={field.value} onValueChange={field.onChange}>
                      <SelectTrigger className="w-full ">
                        <SelectValue placeholder="Choose Position..." />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="member">Member</SelectItem>
                        <SelectItem value="president">President</SelectItem>
                        <SelectItem value="vice_president">
                          Vice President
                        </SelectItem>
                        <SelectItem value="secretary">Secretary</SelectItem>
                        <SelectItem value="treasurer">Treasurer</SelectItem>
                        <SelectItem value="director">Director</SelectItem>
                        <SelectItem value="chair">Chair</SelectItem>
                        <SelectItem value="sgtarms">Sgt-At-Arms</SelectItem>
                      </SelectContent>
                    </Select>
                  )}
                />
                {errors.position && (
                  <p className="text-sm text-destructive mt-1">
                    {errors.position.message}
                  </p>
                )}
              </div>
            </div>

            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <label className="text-sm font-medium">
                  Select a Rotary Year
                </label>
                <Controller
                  name="rotaryyear"
                  control={control}
                  render={({ field }) => (
                    <Select value={field.value} onValueChange={field.onChange}>
                      <SelectTrigger className="w-full ">
                        <SelectValue placeholder="Choose rotary year..." />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="2025-2026">2025-2026</SelectItem>
                        <SelectItem value="2026-2027">2026-2027</SelectItem>
                        <SelectItem value="2027-2028">2027-2028</SelectItem>
                        <SelectItem value="2028-2029">2028-2029</SelectItem>
                        <SelectItem value="2029-2030">2029-2030</SelectItem>
                        <SelectItem value="2030-2031">2030-2031</SelectItem>
                        <SelectItem value="2031-2032">2031-2032</SelectItem>
                        <SelectItem value="2032-2033">2032-2033</SelectItem>
                        <SelectItem value="2033-2034">2033-2034</SelectItem>
                        <SelectItem value="2034-2035">2034-2035</SelectItem>
                      </SelectContent>
                    </Select>
                  )}
                />
                {errors.rotaryyear && (
                  <p className="text-sm text-destructive mt-1">
                    {errors.rotaryyear.message}
                  </p>
                )}
              </div>
              <div className="space-y-2">
                <label
                  htmlFor="password"
                  className="block text-sm font-medium text-foreground"
                >
                  Password
                </label>
                <div className="relative">
                  <Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-muted-foreground pointer-events-none" />
                  <Input
                    id="password"
                    type={showPassword ? "text" : "password"}
                    placeholder="••••••••"
                    {...register("password")}
                    className="pl-10 pr-10 bg-input border border-border focus:ring-2 focus:ring-primary focus:border-primary"
                  />
                  <button
                    type="button"
                    onClick={() => setShowPassword(!showPassword)}
                    className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
                  >
                    {showPassword ? (
                      <EyeOff className="w-5 h-5" />
                    ) : (
                      <Eye className="w-5 h-5" />
                    )}
                  </button>
                </div>
                {errors.password && (
                  <p className="text-sm text-destructive mt-1">
                    {errors.password.message}
                  </p>
                )}
              </div>
            </div>

            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <label className="text-sm font-medium">Select a status</label>
                <Controller
                  name="status"
                  control={control}
                  render={({ field }) => (
                    <Select value={field.value} onValueChange={field.onChange}>
                      <SelectTrigger className="w-full ">
                        <SelectValue placeholder="Choose status..." />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="active">Active</SelectItem>
                        <SelectItem value="deactive">Deactive</SelectItem>
                        <SelectItem value="expired">Expired</SelectItem>
                      </SelectContent>
                    </Select>
                  )}
                />
                {errors.status && (
                  <p className="text-sm text-destructive mt-1">
                    {errors.status.message}
                  </p>
                )}
              </div>
            </div>

            <Button
              type="submit"
              disabled={isPending}
              className="w-full bg-primary hover:bg-primary/90 text-primary-foreground font-semibold py-2.5 gap-2"
            >
              {isPending ? (
                <>
                  <span className="inline-block animate-spin">⏳</span>
                  Add Member...
                </>
              ) : (
                <>
                  Add Member
                  <ArrowRight className="w-4 h-4" />
                </>
              )}
            </Button>
          </form>
        </div>
      </div>
    </AdminLayout>
  );
}