'use client';

import { Camera } from 'lucide-react';
import { Input } from '@/components/ui/input';
import { useGlobalContext } from '@/context/Provider';
import { useEffect, useRef, useState } from 'react';
import apis, { BUCKET_ROOT } from '@/utils/apis';
import { Icons } from '../icons';

interface ProfileFormData {
  restaurantName: string;
  contactNumber: string;
  ownerName: string;
  email: string;
  mobileNumber: string;
  image: string;
  countryCode: string;
  id: string;
}

export function EditProfileModal() {
  const { Toast, userInfo } = useGlobalContext();
  const [loading, setLoading] = useState(false);
  const fileInputRef = useRef<HTMLInputElement>(null);
  const [image, setImage] = useState('');
  const [blobFile, setBlobFile] = useState<File | null>(null);
  const [fileName, setFileName] = useState('');
  const [formData, setFormData] = useState<ProfileFormData>({
    restaurantName: userInfo?.restaurant_id?.restaurant_name || '',
    contactNumber:
      (userInfo?.restaurant_id?.country_code || '') +
      (userInfo?.restaurant_id?.restaurant_phone || ''),
    countryCode: userInfo?.restaurant_id?.country_code || '',
    ownerName: userInfo?.name || '',
    email: userInfo?.email || '',
    mobileNumber: (userInfo?.country_code || '') + (userInfo?.phone || ''),
    image: userInfo?.image || '',
    id: userInfo?.restaurant_id?._id || ''
  });

  useEffect(() => {
    setFormData({
      restaurantName: userInfo?.restaurant_id?.restaurant_name || '',
      contactNumber: userInfo?.restaurant_id?.restaurant_phone || '',
      countryCode: userInfo?.restaurant_id?.country_code || '',
      ownerName: userInfo?.name || '',
      email: userInfo?.email || '',
      mobileNumber: (userInfo?.country_code || '') + (userInfo?.phone || ''),
      image: userInfo?.image || '',
      id: userInfo?.restaurant_id?._id || ''
    });
    setImage(userInfo?.image || '');
  }, [userInfo]);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;
    setFormData((prev) => ({ ...prev, [name]: value }));
  };

  const handleUpdate = async () => {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!formData?.email || !emailRegex.test(formData.email)) {
      Toast.error("Enter a valid email!");
      return;
    }
    let payload = {
      restaurant_name: formData?.restaurantName,
      restaurant_phone: formData?.contactNumber,
      country_code: formData?.countryCode,
      owner_name: formData?.ownerName,
      email: formData?.email,
      image: image
    };
    try {
      const apiRes = await apis.restaurant.update(formData?.id, payload);
      if (apiRes) {
        Toast.success('Profile updated successfully');
        // setUserInfo(apiRes.data);
      } else {
        Toast.error(apiRes?.message);
      }
    } catch (error) {
      Toast.error(error);
    }
  };

  const handleFileSelect = () => {
    if (fileInputRef?.current) {
      fileInputRef.current.click();
    }
  };
  const handleUploadImage = async (file: File) => {
    try {
      setLoading(true);

      const apiRes = await apis.Common.uploadFile('file', file);
      //   console.log('uploadd',apiRes)
      setImage(apiRes?.key);
      Toast.success('Image uploaded successfully!');
    } catch (error) {
      Toast.error(error);
    } finally {
      setLoading(false);
    }
  };

  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    event.preventDefault();
    const file = event.target.files?.[0];

    if (file) {
      const maxFileSize = 5 * 1024 * 1024;
      const allowedTypes = ['image/jpeg', 'image/png', 'image/jpg'];

      if (!allowedTypes.includes(file.type)) {
        Toast.error('Only JPG and PNG images are allowed.');
        return;
      }

      if (file.size > maxFileSize) {
        Toast.error('Image size cannot be more than 5MB.');
        return;
      }

      setBlobFile(file);
      handleUploadImage(file);
    }
  };
  return (
    <>
      <div className="p-4 pb-0">
        <div className="relative mx-auto mb-8 h-[150px] w-[150px]">
          {image ? (
            <img
              src={BUCKET_ROOT + image}
              alt="Restaurant"
              className="h-[140px] w-[140px] rounded-full border-[1px] border-[#fee398] object-cover"
            />
          ) : (
            <div className="flex h-[140px] w-[140px] items-center justify-center rounded-full border-[1px] border-[#fee398]">
              {' '}
              <Icons.MenuIcon />
            </div>
          )}
          <button
            className="absolute bottom-0 right-0 rounded-full bg-blue-500 p-2 text-white hover:bg-blue-600"
            onClick={(e) => {
              e.preventDefault();
              handleFileSelect();
            }}
          >
            <Camera className="h-4 w-4" />
          </button>
          <Input
            type="file"
            accept=".jpg,.jpeg,.png"
            hidden
            ref={fileInputRef}
            onChange={handleFileChange}
            className="hidden"
          />
        </div>

        <form className="w-full space-y-6">
          <div>
            <label className="text-sm font-medium text-[#0C1018]">
              Restaurant Name
            </label>
            <Input
              name="restaurantName"
              className="mt-1 h-[45px]"
              placeholder="Enter restaurant name"
              value={formData.restaurantName}
              onChange={handleChange}
            />
          </div>

          <div>
            <label className="text-sm font-medium text-[#0C1018]">
              Restaurant Contact Number
            </label>
            <Input
              name="contactNumber"
              className="mt-1 h-[45px]"
              placeholder="Enter contact number"
              value={formData.contactNumber}
              onChange={handleChange}
            />
          </div>

          <div>
            <label className="text-sm font-medium text-[#0C1018]">
              Owner Name
            </label>
            <Input
              name="ownerName"
              className="mt-1 h-[45px]"
              placeholder="Enter owner name"
              value={formData.ownerName}
              onChange={handleChange}
            />
          </div>

          <div>
            <label className="text-sm font-medium text-[#0C1018]">
              Email address
            </label>
            <Input
              type="email"
              name="email"
              className="mt-1 h-[45px]"
              placeholder="Enter email address"
              value={formData.email}
              onChange={handleChange}
            />
          </div>

          <div>
            <label className="text-sm font-medium text-[#0C1018]">
              Mobile Number
            </label>
            <div className="flex gap-2">
              <Input
                className="mt-1 h-[45px] flex-1"
                placeholder="Enter mobile number"
                disabled
                value={formData.mobileNumber}
              />
            </div>
          </div>
        </form>
      </div>

      <div className="mt-6 p-6 pt-0">
        <button
          onClick={handleUpdate}
          className="w-full rounded-lg bg-yellow-400 py-3 font-medium text-black transition-colors hover:bg-yellow-500"
        >
          Save Changes
        </button>
      </div>
    </>
  );
}