MIF_E31221222/sigap-website/app/(pages)/(admin)/_components/settings/profile-settings.tsx

"use client";

import type React from "react";

import type { IUserSchema } from "@/src/entities/models/users/users.model";

import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { Loader2, ImageIcon } from "lucide-react";

import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormMessage,
} from "@/app/_components/ui/form";
import { Input } from "@/app/_components/ui/input";
import { Button } from "@/app/_components/ui/button";
import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@/app/_components/ui/avatar";
import { Label } from "@/app/_components/ui/label";
import { Separator } from "@/app/_components/ui/separator";
import { Switch } from "@/app/_components/ui/switch";
import { useRef, useState } from "react";
import { ScrollArea } from "@/app/_components/ui/scroll-area";
import {
  updateUser,
} from "@/app/(pages)/(admin)/dashboard/user-management/action";
import { useProfileFormHandlers } from "../../dashboard/user-management/_handlers/use-profile-form";
import { CTexts } from "@/app/_lib/const/texts";

const profileFormSchema = z.object({
  username: z.string().nullable().optional(),
  avatar: z.string().nullable().optional(),
});

type ProfileFormValues = z.infer<typeof profileFormSchema>;

interface ProfileSettingsProps {
  user: IUserSchema | null;
}

export function ProfileSettings({ user }: ProfileSettingsProps) {
  const email = user?.email || "";
  const username = user?.profile?.username || "";

  const {
    form,
    fileInputRef,
    handleFileChange,
    handleAvatarClick,
    isPending,
    onSubmit,
  } = useProfileFormHandlers({ user });


  return (
    <ScrollArea className="h-[calc(100vh-140px)] w-full ">
      <div className="space-y-14 min-h-screen p-8 max-w-4xl mx-auto">
        <Form {...form}>
          <form onSubmit={() => { }} className="space-y-8">
            <div className="space-y-4">
              <div className="space-y-4 mb-4">
                <h3 className="text-lg font-semibold">Account</h3>
                <Separator className="" />
              </div>
              <div className="flex items-start gap-4">
                <div
                  className="relative cursor-pointer group"
                  onClick={handleAvatarClick}
                >
                  <Avatar className="h-16 w-16">
                    {isPending ? (
                      <div className="h-full w-full bg-muted animate-pulse rounded-full" />
                    ) : (
                      <>
                          <AvatarImage
                            src={user?.profile?.avatar || ""}
                            alt={username}
                          />
                          <AvatarFallback>
                            {username?.[0]?.toUpperCase() || email?.[0]?.toUpperCase()}
                          </AvatarFallback>
                      </>
                    )}
                    <div className="absolute inset-0 flex items-center justify-center bg-black/50 rounded-full opacity-0 group-hover:opacity-100 transition-opacity">
                      {isPending ? (
                        <Loader2 className="h-5 w-5 text-white animate-spin" />
                      ) : (
                        <ImageIcon className="h-5 w-5 text-white" />
                      )}
                    </div>
                  </Avatar>
                  <input
                    ref={fileInputRef}
                    type="file"
                    accept={CTexts.ALLOWED_FILE_TYPES.join(",")}
                    className="hidden"
                    onChange={handleFileChange}
                    disabled={isPending}
                  />
                </div>
                <div className="flex-1 space-y-1">
                  <Label>Preferred name</Label>
                  <FormField
                    control={form.control}
                    name="username"
                    render={({ field }) => (
                      <FormItem>
                        <FormControl>
                          <Input
                            // placeholder={user?.profile?.username || ""}
                            className="bg-muted/50 w-80"
                            {...field}
                            value={field.value || user?.profile?.username || ""}
                            disabled={true}
                          />
                        </FormControl>
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                </div>
              </div>
            </div>
            {/* <Button
              type="submit"
              variant="outline"
              size="sm"
              className="text-xs"
              disabled={isPending || form.formState.isSubmitting}
            >
              {form.formState.isSubmitting ? (
                <>
                  <Loader2 className="mr-2 h-3 w-3 animate-spin" />
                  Saving...
                </>
              ) : (
                "Save changes"
              )}
            </Button> */}
          </form>
        </Form>

        <div className="">
          <div className="space-y-4 mb-4">
            <h3 className="text-base font-medium">Account security</h3>
            <Separator className="" />
          </div>
          <div className="space-y-8">
            <div className="flex items-center justify-between">
              <div>
                <Label>Email</Label>
                <p className="text-sm text-muted-foreground">{email}</p>
              </div>
              <Button variant="outline" size="sm">
                Change email
              </Button>
            </div>

            <div className="flex items-center justify-between">
              <div>
                <Label>Password</Label>
                <p className="text-sm text-muted-foreground">
                  Set a permanent password to login to your account.
                </p>
              </div>
              <Button variant="outline" size="sm">
                Change password
              </Button>
            </div>

            <div className="flex items-center justify-between">
              <div>
                <Label>2-step verification</Label>
                <p className="text-sm text-muted-foreground">
                  Add an additional layer of security to your account during
                  login.
                </p>
              </div>
              <Button variant="outline" size="sm">
                Add verification method
              </Button>
            </div>

            <div className="flex items-center justify-between">
              <div>
                <Label>Passkeys</Label>
                <p className="text-sm text-muted-foreground">
                  Securely sign-in with on-device biometric authentication.
                </p>
              </div>
              <Button variant="outline" size="sm">
                Add passkey
              </Button>
            </div>
          </div>
        </div>

        <div>
          <div className="space-y-4 mb-4">
            <h3 className="text-base font-medium">Notifications</h3>
            <Separator className="" />
          </div>
          <div className="space-y-8">
            <div className="flex items-center justify-between">
              <div>
                <Label>Support access</Label>
                <p className="text-sm text-muted-foreground">
                  Grant temporary access to your account for support purposes.
                </p>
              </div>
              <Switch />
            </div>

            <div className="flex items-center justify-between">
              <div>
                <Label className="text-destructive">Delete account</Label>
                <p className="text-sm text-muted-foreground">
                  Permanently delete the account and remove access from all
                  workspaces.
                </p>
              </div>
              <Button variant="outline" size="sm" className="text-destructive">
                Delete account
              </Button>
            </div>
          </div>
        </div>
      </div>
    </ScrollArea>
  );
}