'use client'

import React from 'react'
import Link from 'next/link'
import Image from 'next/image'
import { usePathname } from 'next/navigation'
import { AccountSidebarProps } from '@/app/types'
import Logout from './Logout'
import noPhoto from '../public/images/noPhoto.png'

const AccountSidebar: React.FC<AccountSidebarProps> = ({
  user,
  navigation,
}) => {
  const pathname = usePathname()

  if (!user) {
    return null
  }
  const navigationItems = navigation

  const getAccountTypeStyles = (accountType: string) => {
    switch (accountType.toLowerCase()) {
      case 'lite':
        return 'bg-gray-400 text-white'
      case 'standart':
        return 'bg-orange/70 text-white'
      case 'premium':
        return 'bg-blue-300'
      default:
        return 'bg-gray-200'
    }
  }

  return (
    <div className="space-y-3">
      <div className="flex items-center space-x-4 w-full bg-white rounded-2xl shadow p-4">
        <div className="flex items-center justify-center">
          {user.image ? (
            <Image
              src={user.image}
              alt="Profile"
              height={84}
              width={84}
              className="rounded-2xl w-full md:w-[84px] aspect-square object-cover"
              priority
            />
          ) : (
            <Image
              src={noPhoto}
              alt="Фотографии пока что нет"
              height={84}
              width={84}
              priority
              className="rounded-2xl w-full md:w-[84px] aspect-square object-cover"
            />
          )}
        </div>
        <div className="space-y-1">
          <p className="text-xl font-bold">{user.name || 'Пользователь'}</p>
          <p className="text-sm font-medium text-gray-500">
            ID: {user.uuid || 'Not available'}
          </p>
          {user.account_type && (
            <Link
              href="payments/"
              className={`${getAccountTypeStyles(
                user.account_type
              )} flex items-center justify-center py-1 px-3 text-sm rounded-lg`}
            >
              {user.account_type.charAt(0).toUpperCase() +
                user.account_type.slice(1)}
            </Link>
          )}
        </div>
      </div>

      <div className="w-full md:w-64 bg-white rounded-2xl shadow p-2">
        <nav className="space-y-2">
          {navigationItems.map((item) => {
            const isActive = pathname === item.href
            return (
              <Link
                key={item.name}
                href={item.href}
                className={`${
                  isActive
                    ? 'bg-orange text-white'
                    : 'text-gray-600 hover:bg-gray-100'
                } flex items-center p-4 text-sm font-medium rounded-lg transition-colors`}
              >
                <item.icon
                  className={`mr-3 h-5 w-5 ${
                    isActive ? 'text-white' : 'text-gray-400'
                  }`}
                />
                {item.name}
              </Link>
            )
          })}
        </nav>
      </div>
      <div className="w-full md:w-64 bg-white rounded-2xl shadow p-2">
        <Logout />
      </div>
    </div>
  )
}

export default AccountSidebar