import React, { useEffect, useState, useCallback } from 'react';
import { Heading } from '@/components/ui/heading';
import { Text } from '@/components/ui/text';
import { Avatar } from '@/components/ui/avatar';
import { ImageCropper } from '@/components/ui/image-cropper';
import { FileWithPath, useDropzone } from 'react-dropzone';
import {
  DropdownMenu,
  DropdownMenuContent,
} from '@/components/ui/dropdown-menu';
import { IBranch, IDivision, UnknownRecord } from '@/types';
import { useSelector } from 'react-redux';
import { RootState } from '@/store/store';
import AsyncImage from '@/components/common/AsyncImage';
import FooterLinks from './FooterLinks';
import HeaderCard from './HeaderCard';
import OfficialInfo from './OfficialInfo';
import LocationAccessInfo from './LocationAccessInfo';
import GeneralInfo from './GeneralInfo';
import { fetchBranchesAndDivisions } from './user-functions';

export type FileWithPreview = FileWithPath & {
  preview: string;
};

const accept = { 'image/*': [] };

const UserProfile: React.FC = () => {
  const user = useSelector((state: RootState) => state.session.user);

  const [functionalBranches, setFunctionalBranches] = useState<IBranch[]>([]);
  const [userDivisions, setUserDivisions] = useState<IDivision[]>([]);
  const [myProfile, setMyProfile] = useState<UnknownRecord | null>(null);
  const [displayPicture, setDisplayPicture] = useState<string>('');

  const [selectedFile, setSelectedFile] = useState<FileWithPreview | null>(
    null,
  );
  const [isDialogOpen, setDialogOpen] = useState(false);

  // Load user profile
  useEffect(() => {
    if (user) {
      setMyProfile(user);
      setDisplayPicture(user.image || '');
    }
  }, [user]);

  // Fetch branches and divisions when user.id is available
  useEffect(() => {
    const fetchData = async () => {
      if (!user?.id) return;
      const { branches, divisions } = await fetchBranchesAndDivisions(
        String(user.id),
      );
      setFunctionalBranches(Array.isArray(branches) ? branches : []);
      setUserDivisions(Array.isArray(divisions) ? divisions : []);
    };
    fetchData();
  }, [user?.id]);

  // Handle file drop
  const onDrop = useCallback((acceptedFiles: FileWithPath[]) => {
    const file = acceptedFiles[0];
    if (!file) {
      alert('Invalid or too large image selected!');
      return;
    }

    const fileWithPreview = Object.assign(file, {
      preview: URL.createObjectURL(file),
    });

    setSelectedFile(fileWithPreview);
    setDialogOpen(true);
  }, []);

  // Cleanup preview URL
  useEffect(() => {
    return () => {
      if (selectedFile?.preview) {
        URL.revokeObjectURL(selectedFile.preview);
      }
    };
  }, [selectedFile]);

  const { getRootProps, getInputProps } = useDropzone({
    onDrop,
    accept,
  });

  return (
    <Text className="header_right_side">
      <DropdownMenu>
        <HeaderCard profile={myProfile || {}} displayPicture={displayPicture} />
        <DropdownMenuContent className="w-80 mr-1 profile-widget">
          <Text className="user-data-menu">
            <Text className="header-panel-section">
              <Heading level="h5" className="title-heading">
                My Profile
              </Heading>
            </Text>
            <Text className="profile-main-box">
              <Text className="profile-box flex gap-4 items-center">
                <Text className="dp-media relative">
                  {selectedFile ? (
                    <ImageCropper
                      dialogOpen={isDialogOpen}
                      setDialogOpen={setDialogOpen}
                      selectedFile={selectedFile}
                      setSelectedFile={setSelectedFile}
                    />
                  ) : (
                    <Avatar
                      {...getRootProps()}
                      className="cursor-pointer profile-user-img img-responsive img-circle"
                    >
                      {/* <input {...getInputProps()} /> */}
                      <AsyncImage
                        src={displayPicture}
                        fallback={`/header/no-image.png`}
                        directory="employees"
                        className="userDp"
                        alt={`${myProfile?.fname ?? ''} ${myProfile?.lname ?? ''}`}
                        width={70}
                        height={70}
                      />
                    </Avatar>
                  )}
                </Text>
                <GeneralInfo profile={myProfile || {}} />
              </Text>

              <OfficialInfo profile={myProfile || {}} />
              <LocationAccessInfo
                profile={myProfile || {}}
                divisions={userDivisions}
                functionalBranches={functionalBranches}
              />
              <FooterLinks />
            </Text>
          </Text>
        </DropdownMenuContent>
      </DropdownMenu>
    </Text>
  );
};

export default UserProfile;