'use client';

import { useState } from 'react';
import Image from 'next/image';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { useHeaderData } from '@/components/providers/header-provider';

interface NavItem {
  label: string;
  href: string;
  icon: string;
}

interface SettingsSidebarProps {
  basePath?: '/agent/settings' | '/user/settings';
}

export function SettingsSidebar({
  basePath = '/agent/settings',
}: SettingsSidebarProps) {
  const pathname = usePathname();
  const { profileImage, profileName, profileTitle, avatarLoaded, setAvatarLoaded } = useHeaderData();
  const [localAvatarLoaded, setLocalAvatarLoaded] = useState(false);
  const [avatarError, setAvatarError] = useState(false);

  // Use header context's avatarLoaded or local state
  const isAvatarLoaded = avatarLoaded || localAvatarLoaded;

  const isAgent = basePath === '/agent/settings';

  const navItems: NavItem[] = [
    {
      label: 'Profile Settings',
      href: basePath,
      icon: '/assets/icons/settings-profile-icon.svg',
    },
    {
      label: 'Change Password',
      href: `${basePath}/password`,
      icon: '/assets/icons/settings-lock-icon.svg',
    },
    {
      label: 'Notifications',
      href: `${basePath}/notifications`,
      icon: '/assets/icons/settings-bell-icon.svg',
    },
    {
      label: 'Privacy',
      href: `${basePath}/privacy`,
      icon: '/assets/icons/settings-privacy-icon.svg',
    },
    ...(isAgent
      ? [
          // Billings & Payments is temporarily hidden — payment is not
          // required for approval / visibility. Re-enable when the coupon /
          // pricing flow is finalized.
          // {
          //   label: 'Billings & Payments',
          //   href: `${basePath}/billings`,
          //   icon: '/assets/icons/settings-billing-icon.svg',
          // },
          {
            label: 'Add Testimonials',
            href: `${basePath}/testimonials`,
            icon: '/assets/icons/settings-testimonials-icon.svg',
          },
        ]
      : []),
  ];

  return (
    <div className="w-full lg:w-[300px] space-y-4 flex-shrink-0">
      {/* Profile Card */}
      <div className="bg-white rounded-[15px] border border-[#00293D]/20 p-5">
        <div className="flex items-center gap-4">
          <div className="w-[70px] h-[70px] rounded-full overflow-hidden border-2 border-[#00293D]/20 flex-shrink-0 bg-gray-100 relative">
            {/* Shimmer while loading, initials only on error */}
            {avatarError || !profileImage ? (
              <div className="absolute inset-0 rounded-full bg-[#c4d9d4] flex items-center justify-center">
                <span className="font-bold text-[#00293d] text-[28px]">{profileName?.[0]?.toUpperCase() || '?'}</span>
              </div>
            ) : !isAvatarLoaded ? (
              <div className="absolute inset-0 rounded-full shimmer-loading" />
            ) : null}
            {profileImage && !avatarError && (
              <img
                ref={(el) => { if (el?.complete && el.naturalWidth > 0) { setAvatarLoaded(true); setLocalAvatarLoaded(true); } }}
                src={profileImage}
                alt={profileName || 'User'}
                className={`absolute inset-0 w-full h-full object-cover transition-opacity duration-300 ${isAvatarLoaded ? 'opacity-100' : 'opacity-0'}`}
                onLoad={() => { setAvatarLoaded(true); setLocalAvatarLoaded(true); }}
                onError={() => setAvatarError(true)}
              />
            )}
          </div>
          <div>
            {profileName ? (
              <h3 className="font-fractul font-bold text-[16px] leading-[19px] text-[#00293D]">
                {profileName}
              </h3>
            ) : (
              <div className="h-[19px] w-[120px] rounded shimmer-loading" />
            )}
            {profileTitle ? (
              <p className="font-serif font-normal text-[13px] leading-[17px] text-[#00293D]/60 mt-1">
                {profileTitle}
              </p>
            ) : (
              <div className="h-[17px] w-[80px] rounded shimmer-loading mt-1" />
            )}
          </div>
        </div>
      </div>

      {/* Settings Navigation Card */}
      <div className="bg-white rounded-[15px] border border-[#00293D]/20 overflow-hidden">
        {/* Settings Header */}
        <div className="flex items-center justify-between px-5 py-4 border-b border-[#00293D]/10">
          <h4 className="font-fractul font-bold text-[16px] leading-[19px] text-[#00293D]">
            Settings
          </h4>
          <Image
            src="/assets/icons/chevron-right-icon.svg"
            alt="Expand"
            width={8}
            height={14}
          />
        </div>

        {/* Navigation Items */}
        <nav className="py-2">
          {navItems.map((item) => {
            const isActive = pathname === item.href;
            return (
              <Link
                key={item.href}
                href={item.href}
                className={`flex items-center gap-4 py-3 px-5 transition-colors cursor-pointer ${
                  isActive
                    ? 'bg-[#e58625]'
                    : 'hover:bg-[#00293d]/5'
                }`}
              >
                <div className="w-5 h-5 flex items-center justify-center flex-shrink-0">
                  <Image
                    src={item.icon}
                    alt={item.label}
                    width={20}
                    height={20}
                    style={isActive ? { filter: 'brightness(0) invert(1)' } : { filter: 'invert(48%) sepia(94%) saturate(1000%) hue-rotate(360deg) brightness(95%) contrast(85%)' }}
                  />
                </div>
                <span
                  className={`font-serif text-[14px] leading-[19px] ${
                    isActive
                      ? 'font-medium text-white'
                      : 'font-normal text-[#00293D]'
                  }`}
                >
                  {item.label}
                </span>
              </Link>
            );
          })}
        </nav>
      </div>
    </div>
  );
}
