"use client";
import { useState } from 'react';
import Head from 'next/head';
import Image from 'next/image';
import Header from "../../components/partials/header";

const UserProfile = () => {
  const [darkMode, setDarkMode] = useState(false);
  const [isProfileInfoModal, setIsProfileInfoModal] = useState(false);
  const [isProfileAddressModal, setIsProfileAddressModal] = useState(false);
  
  // Personal information form state
  const [personalInfo, setPersonalInfo] = useState({
    firstName: 'Musharaf',
    lastName: 'Chowdhury',
    email: 'masharwar@ping.com',
    phone: '+09 363 398 46',
    bio: '',
    facebook: 'https://facebook.com/Ping4tQ',
    linkedin: 'https://linkedn.com/Ping4tQ',
    twitter: 'https://x.com/Ping4tQ',
    instagram: 'https://instagram.com/Ping4tQ'
  });
  
  // Address form state
  const [address, setAddress] = useState({
    country: 'United States',
    cityState: 'Arizona, United States',
    postalCode: 'ERT 2489',
    taxId: 'AS4568384'
  });
  
  // Checkbox states for permissions
  const [user1Permissions, setUser1Permissions] = useState({
    read: false,
    create: true,
    update: true,
    bulkCreate: true,
    delete: false
  });
  
  const [user2Permissions, setUser2Permissions] = useState({
    read: false,
    create: true,
    update: true,
    bulkCreate: true,
    delete: false
  });
  
  const [user3Permissions, setUser3Permissions] = useState({
    read: false,
    create: true,
    update: true,
    bulkCreate: true,
    delete: false
  });
  
  const [user4Permissions, setUser4Permissions] = useState({
    read: false,
    create: true,
    update: true,
    bulkCreate: true,
    delete: false
  });

  // New member form state
  const [newMember, setNewMember] = useState({
    name: '',
    email: '',
    role: 'Team Member',
    permissions: {
      read: false,
      create: false,
      update: false,
      bulkCreate: false,
      delete: false
    }
  });

  const toggleDarkMode = () => {
    setDarkMode(!darkMode);
    localStorage.setItem('darkMode', JSON.stringify(!darkMode));
  };

  const handlePersonalInfoChange = (e) => {
    const { name, value } = e.target;
    setPersonalInfo(prev => ({
      ...prev,
      [name]: value
    }));
  };

  const handleSavePersonalInfo = (e) => {
    e.preventDefault();
    console.log('Personal info saved:', personalInfo);
    setIsProfileInfoModal(false);
  };

  const handleNewMemberChange = (e) => {
    const { name, value, type, checked } = e.target;
    
    if (name.startsWith('permissions.')) {
      const permissionName = name.split('.')[1];
      setNewMember(prev => ({
        ...prev,
        permissions: {
          ...prev.permissions,
          [permissionName]: checked
        }
      }));
    } else {
      setNewMember(prev => ({
        ...prev,
        [name]: value
      }));
    }
  };

  const handleAddressChange = (e) => {
    const { name, value } = e.target;
    setAddress(prev => ({
      ...prev,
      [name]: value
    }));
  };

  const handleSaveAddress = (e) => {
    e.preventDefault();
    console.log('Address saved:', address);
    setIsProfileAddressModal(false);
  };

  const handleAddMember = (e) => {
    e.preventDefault();
    console.log('New member added:', newMember);
    setIsProfileAddressModal(false);
    setNewMember({
      name: '',
      email: '',
      role: 'Team Member',
      permissions: {
        read: false,
        create: false,
        update: false,
        bulkCreate: false,
        delete: false
      }
    });
  };

  return (
    <div className={`flex flex-col min-h-screen ${darkMode ? 'dark bg-gray-900' : 'bg-gray-50'}`}>
      {/* ----------------------------------------- */}
      {/* <div className="flex grow flex-col items-center justify-between lg:flex-row lg:px-6 w-full">
      <div className="hidden sm:hidden md:hidden lg:block lg:gap-16 lg:w-full lg:px-6 lg:py-3 xl:flex xl:gap-4 xl:w-full xl:px-6 2xl:flex 2xl:gap-16 2xl:w-full 2xl:px-6">
        <div className="flex flex-col gap-3">
          <div className="grid grid-cols-4 gap-4">
            {[1, 2, 3, 4].map((item) => (
              <div key={item} className="border-2 rounded-[10px] px-2 py-2 flex flex-col gap-3 w-[10rem]">
                <h2 className="text-[14px] text-[#667085]">Total Patients</h2>
                <div className="flex gap-5 -mt-1">
                  <p className="text-[25px]">345</p>
                  <p className="text-[8px] text-[#667085] mt-[18px]">
                    <span className="text-green-400">+25%</span> vs Last Week
                  </p>
                </div>
                <button className="bg-[#465FFF] text-white text-[8px] px-[24px] py-[4px] w-full rounded-[4px]">
                  View List
                </button>
              </div>
            ))}
          </div>

          <div className="w-[43rem] h-[7rem] border-2 rounded-[10px] px-2 py-2 flex flex-col gap-2">
            <h2 className="text-[14px] text-[#667085]">Missed Token</h2>
            <p className="text-[20px]">
              J-134, J-159, J-134, J-159, J-134, J-159, J-134, J-159, J-134, J-159, J-134, J-159
            </p>
            <button className="bg-[#465FFF] text-white text-[8px] px-[24px] py-[4px] w-full rounded-[4px]">
              View List
            </button>
          </div>
        </div>

        <div className="lg:border-2 lg:rounded-[10px] lg:px-6 lg:py-6 lg:w-[50%] lg:h-[15rem] lg:flex-col lg:items-center lg:gap-5 lg:hidden xl:block xl:border-2 xl:rounded-[10px] xl:px-6 xl:py-6 xl:w-[50%] xl:h-[15rem] xl:flex xl:flex-col xl:items-center xl:gap-5 2xl:border-2 2xl:rounded-[10px] 2xl:px-8 2xl:pt-6 2xl:pb-8 2xl:w-[50%] 2xl:h-[15rem] 2xl:flex 2xl:flex-col 2xl:items-center 2xl:gap-5">
          <div>
            <h2 className="text-[14px] text-[#667085]">Current Token</h2>
            <p className="font-bold text-[25px] text-center">J-369</p>
          </div>

          <div className="flex flex-row items-center gap-5 2xl:gap-[6rem]">
            <div>
              <h2 className="text-[14px] text-[#667085]">Previous Token</h2>
              <p className="font-bold text-red-500 text-[25px] text-center">J-210</p>
            </div>
            <div>
              <h2 className="text-[14px] text-[#667085]">Next Token</h2>
              <p className="text-green-500 font-bold text-[25px] text-center">J-309</p>
            </div>
          </div>

          <button className="bg-[#465FFF] text-white text-[8px] px-[24px] py-[6px] w-full rounded-[4px] 2xl:text-[12px]">
            View List
          </button>
        </div>
      </div>
    </div> */}
    <Header></Header>

    {/* ------------------------------------------------------------------- */}
      <Head>
        <title>Profile | TailAdmin - Tailwind CSS Admin Dashboard Template</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
      </Head>

      <div className="flex flex-col">
        <div className=" flex text-red-400">
          <h1 className="text-2xl font-bold text-gray-800 dark:text-white/90 mr-auto">
            Profile
          </h1>
          <div className="text-sm text-gray-600 dark:text-gray-400 ml-auto">
            <span className="hover:text-gray-800 dark:hover:text-gray-200">
              Home
            </span>
            <span className="mx-1"> &nbsp;&gt;&nbsp;</span>
            <span className="text-gry-800 dark:text-white/90">Profile</span>
          </div>
        </div>
        
        <div className="flex h-screen overflow-hidden">
          <div className="relative flex flex-col flex-1 overflow-hidden">
            <main>
              <div className="p-4 mx-auto max-w-screen-2xl md:p-6">
                <div className="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03] lg:p-6">
                  <h3 className="mb-5 text-lg font-semibold text-gray-800 dark:text-white/90 lg:mb-7">
                    Profile
                  </h3>

                  <div className="p-5 mb-6 border border-gray-200 rounded-2xl dark:border-gray-800 lg:p-6">
                    <div className="flex flex-col gap-5 xl:flex-row xl:items-center xl:justify-between">
                      <div className="flex flex-col items-center w-full gap-6 xl:flex-row">
                        <div className="w-20 h-20 overflow-hidden border border-gray-200 rounded-full dark:border-gray-800">
                          <Image
                            src="/images/user/owner.jpg"
                            alt="user"
                            width={80}
                            height={80}
                            className="object-cover"
                          />
                        </div>
                        <div className="order-3 xl:order-2">
                          <h4 className="mb-2 text-lg font-semibold text-center text-gray-800 dark:text-white/90 xl:text-left">
                            Musharof Chowdhury
                          </h4>
                          <div className="flex flex-col items-center gap-1 text-center xl:flex-row xl:gap-3 xl:text-left">
                            <p className="text-sm text-gray-500 dark:text-gray-400">
                              Team Manager
                            </p>
                            <div className="hidden h-3.5 w-px bg-gray-300 dark:bg-gray-700 xl:block"></div>
                            <p className="text-sm text-gray-500 dark:text-gray-400">
                              Arizona, United States
                            </p>
                          </div>
                        </div>
                      </div>

                      <button
                        onClick={() => setIsProfileInfoModal(true)}
                        className="flex w-full items-center justify-center gap-2 rounded-full border border-gray-300 bg-white px-4 py-3 text-sm font-medium text-gray-700 shadow-theme-xs hover:bg-gray-50 hover:text-gray-800 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.03] dark:hover:text-gray-200 lg:inline-flex lg:w-auto"
                      >
                        <svg
                          className="fill-current"
                          width="18"
                          height="18"
                          viewBox="0 0 18 18"
                          fill="none"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            fillRule="evenodd"
                            clipRule="evenodd"
                            d="M15.0911 2.78206C14.2125 1.90338 12.7878 1.90338 11.9092 2.78206L4.57524 10.116C4.26682 10.4244 4.0547 10.8158 3.96468 11.2426L3.31231 14.3352C3.25997 14.5833 3.33653 14.841 3.51583 15.0203C3.69512 15.1996 3.95286 15.2761 4.20096 15.2238L7.29355 14.5714C7.72031 14.4814 8.11172 14.2693 8.42013 13.9609L15.7541 6.62695C16.6327 5.74827 16.6327 4.32365 15.7541 3.44497L15.0911 2.78206ZM12.9698 3.84272C13.2627 3.54982 13.7376 3.54982 14.0305 3.84272L14.6934 4.50563C14.9863 4.79852 14.9863 5.2734 14.6934 5.56629L14.044 6.21573L12.3204 4.49215L12.9698 3.84272ZM11.2597 5.55281L5.6359 11.1766C5.53309 11.2794 5.46238 11.4099 5.43238 11.5522L5.01758 13.5185L6.98394 13.1037C7.1262 13.0737 7.25666 13.003 7.35947 12.9002L12.9833 7.27639L11.2597 5.55281Z"
                            fill=""
                          />
                        </svg>
                        Edit
                      </button>
                    </div>
                  </div>

                  <div className="p-5 mb-6 border border-gray-200 rounded-2xl dark:border-gray-800 lg:p-6">
                    <div className="flex flex-col gap-6 lg:flex-row lg:items-start lg:justify-between">
                      <div>
                        <h4 className="text-lg font-semibold text-gray-800 dark:text-white/90 lg:mb-6">
                          Information
                        </h4>

                        <div className="grid grid-cols-1 gap-4 lg:grid-cols-2 lg:gap-7 2xl:gap-x-32">
                          <div>
                            <p className="mb-2 text-xs leading-normal text-gray-500 dark:text-gray-400">
                              Email address
                            </p>
                            <p className="text-sm font-medium text-gray-800 dark:text-white/90">
                              {personalInfo.email}
                            </p>
                          </div>

                          <div>
                            <p className="mb-2 text-xs leading-normal text-gray-500 dark:text-gray-400">
                              Phone
                            </p>
                            <p className="text-sm font-medium text-gray-800 dark:text-white/90">
                              {personalInfo.phone}
                            </p>
                          </div>
                        </div>
                      </div>

                      <button
                        onClick={() => setIsProfileInfoModal(true)}
                        className="flex w-full items-center justify-center gap-2 rounded-full border border-gray-300 bg-white px-4 py-3 text-sm font-medium text-gray-700 shadow-theme-xs hover:bg-gray-50 hover:text-gray-800 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.03] dark:hover:text-gray-200 lg:inline-flex lg:w-auto"
                      >
                        <svg
                          className="fill-current"
                          width="18"
                          height="18"
                          viewBox="0 0 18 18"
                          fill="none"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            fillRule="evenodd"
                            clipRule="evenodd"
                            d="M15.0911 2.78206C14.2125 1.90338 12.7878 1.90338 11.9092 2.78206L4.57524 10.116C4.26682 10.4244 4.0547 10.8158 3.96468 11.2426L3.31231 14.3352C3.25997 14.5833 3.33653 14.841 3.51583 15.0203C3.69512 15.1996 3.95286 15.2761 4.20096 15.2238L7.29355 14.5714C7.72031 14.4814 8.11172 14.2693 8.42013 13.9609L15.7541 6.62695C16.6327 5.74827 16.6327 4.32365 15.7541 3.44497L15.0911 2.78206ZM12.9698 3.84272C13.2627 3.54982 13.7376 3.54982 14.0305 3.84272L14.6934 4.50563C14.9863 4.79852 14.9863 5.2734 14.6934 5.56629L14.044 6.21573L12.3204 4.49215L12.9698 3.84272ZM11.2597 5.55281L5.6359 11.1766C5.53309 11.2794 5.46238 11.4099 5.43238 11.5522L5.01758 13.5185L6.98394 13.1037C7.1262 13.0737 7.25666 13.003 7.35947 12.9002L12.9833 7.27639L11.2597 5.55281Z"
                            fill=""
                          />
                        </svg>
                        Edit
                      </button>
                    </div>
                  </div>

                  <div className="p-5 border border-gray-200 rounded-2xl dark:border-gray-800 lg:p-6">
                    <div className="flex flex-col gap-6">
                      <div className="flex flex-col gap-6 lg:flex-row lg:justify-between">
                        <h4 className="text-lg font-semibold text-gray-800 dark:text-white/90 lg:mb-6">
                          Permissions-Entry Management
                        </h4>

                        <button
                          onClick={() => setIsProfileAddressModal(true)}
                          className="flex w-full items-center justify-center gap-2 rounded-full border border-gray-300 bg-white px-4 py-3 text-sm font-medium text-gray-700 shadow-theme-xs hover:bg-gray-50 hover:text-gray-800 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.03] dark:hover:text-gray-200 lg:inline-flex lg:w-auto"
                        >
                          <svg
                            className="fill-current"
                            width="18"
                            height="18"
                            viewBox="0 0 18 18"
                            fill="none"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              fillRule="evenodd"
                              clipRule="evenodd"
                              d="M15.0911 2.78206C14.2125 1.90338 12.7878 1.90338 11.9092 2.78206L4.57524 10.116C4.26682 10.4244 4.0547 10.8158 3.96468 11.2426L3.31231 14.3352C3.25997 14.5833 3.33653 14.841 3.51583 15.0203C3.69512 15.1996 3.95286 15.2761 4.20096 15.2238L7.29355 14.5714C7.72031 14.4814 8.11172 14.2693 8.42013 13.9609L15.7541 6.62695C16.6327 5.74827 16.6327 4.32365 15.7541 3.44497L15.0911 2.78206ZM12.9698 3.84272C13.2627 3.54982 13.7376 3.54982 14.0305 3.84272L14.6934 4.50563C14.9863 4.79852 14.9863 5.2734 14.6934 5.56629L14.044 6.21573L12.3204 4.49215L12.9698 3.84272ZM11.2597 5.55281L5.6359 11.1766C5.53309 11.2794 5.46238 11.4099 5.43238 11.5522L5.01758 13.5185L6.98394 13.1037C7.1262 13.0737 7.25666 13.003 7.35947 12.9002L12.9833 7.27639L11.2597 5.55281Z"
                              fill=""
                            />
                          </svg>
                          Add new a team member
                        </button>
                      </div>

                      <div className="max-w-full overflow-x-auto">
                        <div className="min-w-full">
                          <div className="divide-y divide-gray-100 dark:divide-gray-800">
                            {/* Team User 1 */}
                            <div className="flex flex-col lg:flex-row lg:items-center">
                              <div className="px-5 py-4 sm:px-6">
                                <h3 className="text-base font-medium text-gray-800 dark:text-white/90">
                                  Team User 1
                                </h3>
                              </div>
                              <PermissionCheckbox
                                label="Read"
                                checked={user1Permissions.read}
                                onChange={() =>
                                  setUser1Permissions({
                                    ...user1Permissions,
                                    read: !user1Permissions.read,
                                  })
                                }
                              />
                              <PermissionCheckbox
                                label="Create"
                                checked={user1Permissions.create}
                                onChange={() =>
                                  setUser1Permissions({
                                    ...user1Permissions,
                                    create: !user1Permissions.create,
                                  })
                                }
                              />
                              <PermissionCheckbox
                                label="Update"
                                checked={user1Permissions.update}
                                onChange={() =>
                                  setUser1Permissions({
                                    ...user1Permissions,
                                    update: !user1Permissions.update,
                                  })
                                }
                              />
                              <PermissionCheckbox
                                label="Bulk Create"
                                checked={user1Permissions.bulkCreate}
                                onChange={() =>
                                  setUser1Permissions({
                                    ...user1Permissions,
                                    bulkCreate: !user1Permissions.bulkCreate,
                                  })
                                }
                              />
                              <PermissionCheckbox
                                label="Delete (disabled by Super Admin)"
                                checked={user1Permissions.delete}
                                onChange={() =>
                                  setUser1Permissions({
                                    ...user1Permissions,
                                    delete: !user1Permissions.delete,
                                  })
                                }
                                disabled
                              />
                            </div>

                            {/* Team User 2 */}
                            <div className="flex flex-col lg:flex-row lg:items-center">
                              <div className="px-5 py-4 sm:px-6">
                                <h3 className="text-base font-medium text-gray-800 dark:text-white/90">
                                  Team User 2
                                </h3>
                              </div>
                              <PermissionCheckbox
                                label="Read"
                                checked={user2Permissions.read}
                                onChange={() =>
                                  setUser2Permissions({
                                    ...user2Permissions,
                                    read: !user2Permissions.read,
                                  })
                                }
                              />
                              <PermissionCheckbox
                                label="Create"
                                checked={user2Permissions.create}
                                onChange={() =>
                                  setUser2Permissions({
                                    ...user2Permissions,
                                    create: !user2Permissions.create,
                                  })
                                }
                              />
                              <PermissionCheckbox
                                label="Update"
                                checked={user2Permissions.update}
                                onChange={() =>
                                  setUser2Permissions({
                                    ...user2Permissions,
                                    update: !user2Permissions.update,
                                  })
                                }
                              />
                              <PermissionCheckbox
                                label="Bulk Create"
                                checked={user2Permissions.bulkCreate}
                                onChange={() =>
                                  setUser2Permissions({
                                    ...user2Permissions,
                                    bulkCreate: !user2Permissions.bulkCreate,
                                  })
                                }
                              />
                              <PermissionCheckbox
                                label="Delete (disabled by Super Admin)"
                                checked={user2Permissions.delete}
                                onChange={() =>
                                  setUser2Permissions({
                                    ...user2Permissions,
                                    delete: !user2Permissions.delete,
                                  })
                                }
                                disabled
                              />
                            </div>

                            {/* Team User 3 */}
                            <div className="flex flex-col lg:flex-row lg:items-center">
                              <div className="px-5 py-4 sm:px-6">
                                <h3 className="text-base font-medium text-gray-800 dark:text-white/90">
                                  Team User 3
                                </h3>
                              </div>
                              <PermissionCheckbox
                                label="Read"
                                checked={user3Permissions.read}
                                onChange={() =>
                                  setUser3Permissions({
                                    ...user3Permissions,
                                    read: !user3Permissions.read,
                                  })
                                }
                              />
                              <PermissionCheckbox
                                label="Create"
                                checked={user3Permissions.create}
                                onChange={() =>
                                  setUser3Permissions({
                                    ...user3Permissions,
                                    create: !user3Permissions.create,
                                  })
                                }
                              />
                              <PermissionCheckbox
                                label="Update"
                                checked={user3Permissions.update}
                                onChange={() =>
                                  setUser3Permissions({
                                    ...user3Permissions,
                                    update: !user3Permissions.update,
                                  })
                                }
                              />
                              <PermissionCheckbox
                                label="Bulk Create"
                                checked={user3Permissions.bulkCreate}
                                onChange={() =>
                                  setUser3Permissions({
                                    ...user3Permissions,
                                    bulkCreate: !user3Permissions.bulkCreate,
                                  })
                                }
                              />
                              <PermissionCheckbox
                                label="Delete (disabled by Super Admin)"
                                checked={user3Permissions.delete}
                                onChange={() =>
                                  setUser3Permissions({
                                    ...user3Permissions,
                                    delete: !user3Permissions.delete,
                                  })
                                }
                                disabled
                              />
                            </div>

                            {/* Team User 4 */}
                            <div className="flex flex-col lg:flex-row lg:items-center">
                              <div className="px-5 py-4 sm:px-6">
                                <h3 className="text-base font-medium text-gray-800 dark:text-white/90">
                                  Team User 4
                                </h3>
                              </div>
                              <PermissionCheckbox
                                label="Read"
                                checked={user4Permissions.read}
                                onChange={() =>
                                  setUser4Permissions({
                                    ...user4Permissions,
                                    read: !user4Permissions.read,
                                  })
                                }
                              />
                              <PermissionCheckbox
                                label="Create"
                                checked={user4Permissions.create}
                                onChange={() =>
                                  setUser4Permissions({
                                    ...user4Permissions,
                                    create: !user4Permissions.create,
                                  })
                                }
                              />
                              <PermissionCheckbox
                                label="Update"
                                checked={user4Permissions.update}
                                onChange={() =>
                                  setUser4Permissions({
                                    ...user4Permissions,
                                    update: !user4Permissions.update,
                                  })
                                }
                              />
                              <PermissionCheckbox
                                label="Bulk Create"
                                checked={user4Permissions.bulkCreate}
                                onChange={() =>
                                  setUser4Permissions({
                                    ...user4Permissions,
                                    bulkCreate: !user4Permissions.bulkCreate,
                                  })
                                }
                              />
                              <PermissionCheckbox
                                label="Delete (disabled by Super Admin)"
                                checked={user4Permissions.delete}
                                onChange={() =>
                                  setUser4Permissions({
                                    ...user4Permissions,
                                    delete: !user4Permissions.delete,
                                  })
                                }
                                disabled
                              />
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </main>
          </div>
        </div>
      </div>

      {/* Edit Personal Information Modal */}
      {isProfileInfoModal && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-white/80 backdrop-blur-sm">
          <div className="bg-white/90 rounded-xl p-6 w-full max-w-2xl max-h-[90vh] overflow-y-auto custom-scroll shadow-xl border border-gray-200">
            <div className="flex justify-between items-center mb-4">
              <h3 className="text-xl font-semibold text-gray-800">Edit Personal Information</h3>
              <button 
                onClick={() => setIsProfileInfoModal(false)}
                className="text-gray-500 hover:text-gray-700 transition-colors"
              >
                <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12"></path>
                </svg>
              </button>
            </div>

            <p className="text-sm text-gray-600 mb-6">
              Updates your details to keep your profile up-to-date.
            </p>

            <form onSubmit={handleSavePersonalInfo} className="space-y-6">
              <div>
                <h4 className="text-lg font-semibold mb-3 text-gray-800">Social Links</h4>
                <div className="space-y-4">
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-1">Facebook</label>
                      <input
                        type="url"
                        name="facebook"
                        value={personalInfo.facebook}
                        onChange={handlePersonalInfoChange}
                        className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 transition-colors"
                        placeholder="https://facebook.com/username"
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-1">LinkedIn</label>
                      <input
                        type="url"
                        name="linkedin"
                        value={personalInfo.linkedin}
                        onChange={handlePersonalInfoChange}
                        className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 transition-colors"
                        placeholder="https://linkedin.com/username"
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-1">X.com</label>
                      <input
                        type="url"
                        name="twitter"
                        value={personalInfo.twitter}
                        onChange={handlePersonalInfoChange}
                        className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 transition-colors"
                        placeholder="https://x.com/username"
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-1">Instagram</label>
                      <input
                        type="url"
                        name="instagram"
                        value={personalInfo.instagram}
                        onChange={handlePersonalInfoChange}
                        className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 transition-colors"
                        placeholder="https://instagram.com/username"
                      />
                    </div>
                  </div>
                </div>
              </div>

              <div>
                <h4 className="text-lg font-semibold mb-3 text-gray-800">Personal Information</h4>
                <div className="space-y-4">
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-1">First Name</label>
                      <input
                        type="text"
                        name="firstName"
                        value={personalInfo.firstName}
                        onChange={handlePersonalInfoChange}
                        className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 transition-colors"
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-1">Last Name</label>
                      <input
                        type="text"
                        name="lastName"
                        value={personalInfo.lastName}
                        onChange={handlePersonalInfoChange}
                        className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 transition-colors"
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
                      <input
                        type="email"
                        name="email"
                        value={personalInfo.email}
                        onChange={handlePersonalInfoChange}
                        className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 transition-colors"
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-1">Phone</label>
                      <div className="flex">
                        <input
                          type="tel"
                          name="phone"
                          value={personalInfo.phone}
                          onChange={handlePersonalInfoChange}
                          className="w-full px-3 py-2 border border-gray-300 rounded-l-md focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 transition-colors"
                        />
                        <button
                          type="button"
                          onClick={() => setPersonalInfo({...personalInfo, phone: ''})}
                          className="px-3 py-2 border border-gray-300 border-l-0 rounded-r-md bg-gray-100 hover:bg-gray-200 text-sm transition-colors"
                        >
                          Clear
                        </button>
                      </div>
                    </div>
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">Bio</label>
                    <textarea
                      name="bio"
                      value={personalInfo.bio}
                      onChange={handlePersonalInfoChange}
                      className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 transition-colors resize-none"
                      rows={3}
                    />
                  </div>
                </div>
              </div>

              <div className="flex justify-end gap-3 pt-4">
                <button
                  type="button"
                  onClick={() => setIsProfileInfoModal(false)}
                  className="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200 transition-colors"
                >
                  Close
                </button>
                <button
                  type="submit"
                  className="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700 transition-colors"
                >
                  Save Changes
                </button>
              </div>
            </form>
          </div>
        </div>
      )}
      
      {/* Edit Address Modal */}
      {isProfileAddressModal && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-white/80 backdrop-blur-sm">
          <div className="bg-white/90 rounded-xl p-6 w-full max-w-lg max-h-[90vh] overflow-y-auto custom-scroll shadow-xl border border-gray-200">
            <div className="flex justify-between items-center mb-4">
              <h3 className="text-xl font-semibold text-gray-800">Edit Address</h3>
              <button 
                onClick={() => setIsProfileAddressModal(false)}
                className="text-gray-500 hover:text-gray-700 transition-colors"
              >
                <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12"></path>
                </svg>
              </button>
            </div>

            <form onSubmit={handleSaveAddress}>
              <div className="mb-4">
                <p className="text-sm text-gray-600 mb-6">
                  Update your details to keep your profile up-to-date.
                </p>
                
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                      Country
                    </label>
                    <input
                      type="text"
                      name="country"
                      value={address.country}
                      onChange={handleAddressChange}
                      className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 transition-colors"
                      required
                    />
                  </div>
                  
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                      City/State
                    </label>
                    <input
                      type="text"
                      name="cityState"
                      value={address.cityState}
                      onChange={handleAddressChange}
                      className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 transition-colors"
                      required
                    />
                  </div>
                  
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                      Postal Code
                    </label>
                    <input
                      type="text"
                      name="postalCode"
                      value={address.postalCode}
                      onChange={handleAddressChange}
                      className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 transition-colors"
                      required
                    />
                  </div>
                  
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                      TAX ID
                    </label>
                    <input
                      type="text"
                      name="taxId"
                      value={address.taxId}
                      onChange={handleAddressChange}
                      className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 transition-colors"
                      required
                    />
                  </div>
                </div>
              </div>

              <div className="mt-6 flex justify-end gap-3">
                <button
                  type="button"
                  onClick={() => setIsProfileAddressModal(false)}
                  className="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200 transition-colors"
                >
                  Close
                </button>
                <button
                  type="submit"
                  className="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700 transition-colors"
                >
                  Save Changes
                </button>
              </div>
            </form>
          </div>
        </div>
      )}

      <style jsx global>{`
        .custom-scroll {
          scrollbar-width: thin;
          scrollbar-color: #cbd5e0 #f1f1f1;
        }
        .custom-scroll::-webkit-scrollbar {
          width: 6px;
          height: 6px;
        }
        .custom-scroll::-webkit-scrollbar-track {
          background: #f1f1f1;
          border-radius: 3px;
        }
        .custom-scroll::-webkit-scrollbar-thumb {
          background-color: #cbd5e0;
          border-radius: 3px;
        }
        .dark .custom-scroll::-webkit-scrollbar-track {
          background: #374151;
        }
        .dark .custom-scroll::-webkit-scrollbar-thumb {
          background-color: #4b5563;
        }
      `}</style>
    </div>
  );
};

const PermissionCheckbox = ({ label, checked, onChange, disabled = false }) => {
  return (
    <div className="px-5 py-4 sm:px-6">
      <label className={`group flex cursor-pointer items-center text-sm font-medium ${
        disabled ? 'text-gray-300 dark:text-gray-700 cursor-not-allowed' : 'text-gray-700 dark:text-gray-400'
      } select-none`}>
        <div className="relative">
          <input 
            type="checkbox" 
            className="sr-only" 
            checked={checked} 
            onChange={onChange}
            disabled={disabled}
          />
          <div className={`mr-3 flex h-5 w-5 items-center justify-center rounded-md border-[1.25px] transition-colors ${
            checked 
              ? 'border-blue-500 bg-blue-500' 
              : 'bg-transparent border-gray-300 dark:border-gray-700'
          } ${!disabled ? 'group-hover:border-blue-500' : ''} ${
            disabled ? 'border-gray-200 dark:border-gray-800 bg-gray-100 dark:bg-gray-800 pointer-events-none' : ''
          }`}>
            <span className={checked ? '' : 'opacity-0'}>
              <svg 
                width="14" 
                height="14" 
                viewBox="0 0 14 14" 
                fill="none" 
                xmlns="http://www.w3.org/2000/svg"
              >
                <path 
                  d="M11.6666 3.5L5.24992 9.91667L2.33325 7" 
                  stroke="white" 
                  strokeWidth="2"
                  strokeLinecap="round" 
                  strokeLinejoin="round" 
                />
              </svg>
            </span>
          </div>
        </div>
        {label}
      </label>
    </div>
  );
};

export default UserProfile;