import odooApi from '@/core/api/odooApi';
import { createSlug } from '@/core/utils/slug';
import {
  Breadcrumb as ChakraBreadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  Skeleton,
} from '@chakra-ui/react';
import Link from 'next/link';
import React from 'react';
import { useQuery } from 'react-query';
import useDevice from '@/core/hooks/useDevice';

const Breadcrumb = ({ categoryId }) => {
  const { isDesktop, isMobile } = useDevice();

  const breadcrumbs = useQuery(
    ['category-breadcrumbs', categoryId],
    async () =>
      await odooApi('GET', `/api/v1/category/${categoryId}/category-breadcrumb`)
  );

  const cats = breadcrumbs.data ?? [];
  const total = cats.length;

  const showEllipsis = total > 2;
  const parent = total >= 2 ? cats[total - 2] : null;
  const last = total ? cats[total - 1] : null;
  const hiddenText = showEllipsis
    ? cats
        .slice(0, total - 2)
        .map((c) => c.name)
        .join(' / ')
    : '';

  // ===== MOBILE: 2 BARIS -> (1) Home/..//Parent  (2) Last (wrap) =====
  if (isMobile) {
    return (
      <div className='container mx-auto py-4 md:py-6'>
        <Skeleton isLoaded={!breadcrumbs.isLoading} className='w-11/12'>
          {/* Baris 1 */}
          <ChakraBreadcrumb>
            <BreadcrumbItem>
              <BreadcrumbLink as={Link} href='/' className='!text-danger-500'>
                Home
              </BreadcrumbLink>
            </BreadcrumbItem>

            {showEllipsis && (
              <BreadcrumbItem>
                <BreadcrumbLink
                  className='!text-danger-500'
                  title={hiddenText}
                  aria-label='Kategori tersembunyi'
                >
                  ..
                </BreadcrumbLink>
              </BreadcrumbItem>
            )}

            {parent && (
              <BreadcrumbItem>
                <BreadcrumbLink
                  as={Link}
                  href={createSlug('/shop/category/', parent.name, parent.id)}
                  className='!text-danger-500'
                >
                  {parent.name}
                </BreadcrumbLink>
              </BreadcrumbItem>
            )}
          </ChakraBreadcrumb>

          {/* Baris 2 */}
          {last && (
            <ChakraBreadcrumb className='mt-1'>
              <BreadcrumbItem isCurrentPage>
                <BreadcrumbLink className='whitespace-normal break-words leading-6'>
                  {last.name}
                </BreadcrumbLink>
              </BreadcrumbItem>
            </ChakraBreadcrumb>
          )}
        </Skeleton>
      </div>
    );
  }

  // ===== DESKTOP: biarkan seperti semula =====
  if (isDesktop) {
    return (
      <div className='container mx-auto py-4 md:py-6'>
        <Skeleton isLoaded={!breadcrumbs.isLoading} className='w-2/3'>
          <ChakraBreadcrumb>
            <BreadcrumbItem>
              <BreadcrumbLink
                as={Link}
                href='/'
                className='!text-danger-500 whitespace-nowrap'
              >
                Home
              </BreadcrumbLink>
            </BreadcrumbItem>

            {cats.map((category, index) => (
              <BreadcrumbItem
                key={index}
                isCurrentPage={index === cats.length - 1}
              >
                {index === cats.length - 1 ? (
                  <BreadcrumbLink className='whitespace-nowrap'>
                    {category.name}
                  </BreadcrumbLink>
                ) : (
                  <BreadcrumbLink
                    as={Link}
                    href={createSlug(
                      '/shop/category/',
                      category.name,
                      category.id
                    )}
                    className='!text-danger-500 whitespace-nowrap'
                  >
                    {category.name}
                  </BreadcrumbLink>
                )}
              </BreadcrumbItem>
            ))}
          </ChakraBreadcrumb>
        </Skeleton>
      </div>
    );
  }

  // Fallback → layout desktop
  return (
    <div className='container mx-auto py-4 md:py-6'>
      <Skeleton isLoaded={!breadcrumbs.isLoading} className='w-2/3'>
        <ChakraBreadcrumb>
          <BreadcrumbItem>
            <BreadcrumbLink
              as={Link}
              href='/'
              className='!text-danger-500 whitespace-nowrap'
            >
              Home
            </BreadcrumbLink>
          </BreadcrumbItem>
          {cats.map((category, index) => (
            <BreadcrumbItem
              key={index}
              isCurrentPage={index === cats.length - 1}
            >
              {index === cats.length - 1 ? (
                <BreadcrumbLink className='whitespace-nowrap'>
                  {category.name}
                </BreadcrumbLink>
              ) : (
                <BreadcrumbLink
                  as={Link}
                  href={createSlug(
                    '/shop/category/',
                    category.name,
                    category.id
                  )}
                  className='!text-danger-500 whitespace-nowrap'
                >
                  {category.name}
                </BreadcrumbLink>
              )}
            </BreadcrumbItem>
          ))}
        </ChakraBreadcrumb>
      </Skeleton>
    </div>
  );
};

export default Breadcrumb;