import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { TabsContent } from "@/components/ui/tabs";
import { fetchHeader } from "@/helpers/fetch.helper";
import { useToast } from "@/hooks/use-toast";
import { APP_BASE_URL } from "@/utils/constants";
import { useState } from "react";

const UserPasswordUpdateTabContent = () => {
  const [inputValues , setInputValues] = useState<Record<string,any>>({});
  const [loading ,setLoading] = useState<boolean>(false);
  const [error , setError] = useState<Record<string,any>>({})

  const { toast } = useToast()

  const handleInputValuesChange = (key : string , value : string) => {
      setInputValues((prev : any) => ({...prev , [key] : value}))
  }

  const handlePasswordChange = async () : Promise<void> => {
      setLoading(true)

      const formData = new FormData();
      Object.entries(inputValues).forEach(([key, value] : [key : string , value : any]) => {
        if(key == 'profile_picture'){
          if(value instanceof File){
            formData.append(key, value);
          }
        }else{
          formData.append(key, value);
        }
      });


      try{
        const res = await fetch(APP_BASE_URL + '/api/profile/change-password' , {
          headers : fetchHeader() ,
          body : formData , 
          method : 'POST'
        })
        const data = await res.json()
          if(res.status == 200){
            toast({
              title : 'Sucessfully updated  password',
              description : `${data?.message}`,
              variant : 'success'
            })
            setInputValues({})
            setError({})

          }else{
            toast({
              title : 'Error updating password',
              description : `${data?.error}`,
              variant : 'destructive'
            })
          }
      }catch(error : any){
        toast({
          title : 'Error updating password',
          description : `${error?.message}`,
          variant : 'destructive'
        })
      }

  }




  return(
    <TabsContent value="password" className="mt-0">
      <Card>
        <CardHeader>
          <CardTitle>Update Password</CardTitle>
          <p className="text-sm text-gray-500">
            Change your password to keep your account secure.
          </p>
        </CardHeader>
        <CardContent className="space-y-6">
          <div className="space-y-2">
            <label className="text-sm font-medium">Current Password</label>
            <Input 
              type="password" 
              required 
              name="current_password" 
              onChange={(e) => handleInputValuesChange('current_password' , e.target.value)}
              error={error?.current_password}
              value={inputValues?.current_password ?? ''}
            />
          </div>

          <div className="space-y-2">
            <label className="text-sm font-medium">New Password</label>
            <Input
              type="password" required 
              onChange={(e) => handleInputValuesChange('new_password' , e.target.value)} 
              error={error?.new_password}
              value={inputValues?.new_password ?? ''}
              />
          </div>

          <div className="space-y-2">
            <label className="text-sm font-medium">Confirm New Password</label>
            <Input 
              type="password" 
              required
              name="confirm_password"
              error={error?.confirm_password}
              value={inputValues?.confirm_password ?? ''}
              onChange={(e) => handleInputValuesChange('confirm_password' , e.target.value)}
            />
          </div>

          <div className="mx-auto w-fit">
            <Button className="mt-6 w-full md:min-w-[600px] min-w-[300px]  bg-purple-700" onClick={handlePasswordChange}>Save Changes</Button>
          </div>
        </CardContent>
      </Card>
    </TabsContent>
  )
}

export default UserPasswordUpdateTabContent