import { ChevronRight, Home, Building, Package, FileText } from 'lucide-react'
import React, { memo } from 'react'

import { Button } from '@/components/ui/button'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'

import type { BreadcrumbsBlockProps } from '../types'

export const BreadcrumbsBlock = memo<BreadcrumbsBlockProps>(function BreadcrumbsBlock({
  currentPath,
  onPathChange,
}) {
  const breadcrumbsData = [
    {
      path: ['Главная'],
      items: [
        { label: 'Главная', icon: Home, path: 'home' },
      ],
    },
    {
      path: ['Главная', 'Организации'],
      items: [
        { label: 'Главная', icon: Home, path: 'home' },
        { label: 'Организации', icon: Building, path: 'organizations' },
      ],
    },
    {
      path: ['Главная', 'Организации', 'ООО "Сфера"'],
      items: [
        { label: 'Главная', icon: Home, path: 'home' },
        { label: 'Организации', icon: Building, path: 'organizations' },
        { label: 'ООО "Сфера"', icon: Building, path: 'sfera' },
      ],
    },
    {
      path: ['Главная', 'Организации', 'ООО "Сфера"', 'Товары'],
      items: [
        { label: 'Главная', icon: Home, path: 'home' },
        { label: 'Организации', icon: Building, path: 'organizations' },
        { label: 'ООО "Сфера"', icon: Building, path: 'sfera' },
        { label: 'Товары', icon: Package, path: 'products' },
      ],
    },
    {
      path: ['Главная', 'Организации', 'ООО "Сфера"', 'Товары', 'Отчет по товарам'],
      items: [
        { label: 'Главная', icon: Home, path: 'home' },
        { label: 'Организации', icon: Building, path: 'organizations' },
        { label: 'ООО "Сфера"', icon: Building, path: 'sfera' },
        { label: 'Товары', icon: Package, path: 'products' },
        { label: 'Отчет по товарам', icon: FileText, path: 'products-report' },
      ],
    },
  ]

  const currentBreadcrumb = breadcrumbsData[currentPath] || breadcrumbsData[0]

  return (
    <Card className="glass-card border-white/10">
      <CardHeader>
        <CardTitle className="text-white">Хлебные крошки</CardTitle>
      </CardHeader>
      <CardContent className="space-y-6">
        {/* Standard Breadcrumbs */}
        <div>
          <h4 className="text-white/90 text-sm font-medium mb-3">Стандартные хлебные крошки</h4>
          <div className="glass-card border-white/10 p-4 rounded-lg">
            <nav className="flex items-center space-x-2">
              {currentBreadcrumb.items.map((item, index) => (
                <React.Fragment key={item.path}>
                  <Button
                    variant="ghost"
                    size="sm"
                    onClick={() => onPathChange(index)}
                    className={`flex items-center space-x-2 h-8 px-2 ${
                      index === currentBreadcrumb.items.length - 1
                        ? 'text-white font-medium pointer-events-none'
                        : 'text-white/70 hover:text-white hover:bg-white/5'
                    }`}
                  >
                    <item.icon className="h-3 w-3" />
                    <span className="text-sm">{item.label}</span>
                  </Button>
                  {index < currentBreadcrumb.items.length - 1 && (
                    <ChevronRight className="h-3 w-3 text-white/40" />
                  )}
                </React.Fragment>
              ))}
            </nav>
          </div>
        </div>

        {/* Interactive Breadcrumbs */}
        <div>
          <h4 className="text-white/90 text-sm font-medium mb-3">Интерактивные крошки</h4>
          <div className="glass-card border-white/10 p-4 rounded-lg">
            <div className="flex flex-wrap items-center gap-2 mb-4">
              {breadcrumbsData.map((breadcrumb, index) => (
                <Button
                  key={index}
                  variant={currentPath === index ? 'glass' : 'ghost'}
                  size="sm"
                  onClick={() => onPathChange(index)}
                  className={`h-7 px-3 text-xs ${
                    currentPath === index
                      ? 'text-white bg-white/10'
                      : 'text-white/70 hover:text-white hover:bg-white/5'
                  }`}
                >
                  Уровень {index + 1}
                </Button>
              ))}
            </div>
            
            <nav className="flex items-center space-x-2 flex-wrap">
              {currentBreadcrumb.items.map((item, index) => (
                <React.Fragment key={item.path}>
                  <div
                    className={`flex items-center space-x-2 px-3 py-1 rounded-md transition-colors ${
                      index === currentBreadcrumb.items.length - 1
                        ? 'bg-primary/20 text-white'
                        : 'hover:bg-white/5 text-white/70 cursor-pointer'
                    }`}
                    onClick={() => onPathChange(index)}
                  >
                    <item.icon className="h-3 w-3" />
                    <span className="text-sm">{item.label}</span>
                  </div>
                  {index < currentBreadcrumb.items.length - 1 && (
                    <ChevronRight className="h-3 w-3 text-white/40" />
                  )}
                </React.Fragment>
              ))}
            </nav>
          </div>
        </div>

        {/* Minimal Breadcrumbs */}
        <div>
          <h4 className="text-white/90 text-sm font-medium mb-3">Минималистичные крошки</h4>
          <div className="glass-card border-white/10 p-4 rounded-lg">
            <nav className="text-sm">
              <span className="text-white/60">
                {currentBreadcrumb.items.map((item, index) => (
                  <React.Fragment key={item.path}>
                    <span
                      className={`${
                        index === currentBreadcrumb.items.length - 1
                          ? 'text-white font-medium'
                          : 'text-white/70 hover:text-white cursor-pointer underline'
                      }`}
                      onClick={() => index < currentBreadcrumb.items.length - 1 && onPathChange(index)}
                    >
                      {item.label}
                    </span>
                    {index < currentBreadcrumb.items.length - 1 && (
                      <span className="mx-2 text-white/40">/</span>
                    )}
                  </React.Fragment>
                ))}
              </span>
            </nav>
          </div>
        </div>

        <div className="text-center text-white/60 text-sm py-2">
          <p className="text-xs">Различные варианты навигационных хлебных крошек</p>
        </div>
      </CardContent>
    </Card>
  )
})

BreadcrumbsBlock.displayName = 'BreadcrumbsBlock'