import Badge from '@/components/ui/Badge.tsx';
import { Card } from '@/components/ui/Card.tsx';
import { Grid } from '@/components/ui/layout';
import { useDynamicSectors } from '@/hooks/useDynamicSectors.ts';
import { useTranslation } from '@/hooks/useI18n.tsx';
import { motion } from 'framer-motion';
import React from 'react';

interface ModernSectorVisualizationProps {
  maxItems?: number;
  showStats?: boolean;
}

const ModernSectorVisualization: React.FC<ModernSectorVisualizationProps> = ({
  maxItems = 8,
  showStats = false,
}) => {
  const { t } = useTranslation();
  const { sectors: dynamicSectors, isLoading } = useDynamicSectors(maxItems);

  // Safety check for translation context
  if (!t) {
    return (
      <div className="w-full max-w-4xl mx-auto">
        <div className="text-center py-8">
          <p className="text-muted-foreground">Loading...</p>
        </div>
      </div>
    );
  }

  if (isLoading) {
    return (
      <div className="w-full relative">
        <Grid cols={{ sm: 2, md: 3 }} gap="md">
          {Array.from({ length: maxItems }).map((_, i) => (
            <Card
              key={i}
              className="p-6 animate-pulse h-full flex flex-col items-center justify-center"
            >
              <div className="w-16 h-16 bg-muted rounded-xl mb-4"></div>
              <div className="w-24 h-4 bg-muted rounded mb-2"></div>
              <div className="w-20 h-3 bg-muted rounded"></div>
            </Card>
          ))}
        </Grid>
      </div>
    );
  }

  return (
    <div className="w-full relative">
      <Grid cols={{ sm: 2, md: 3 }} gap="md" className="relative">
        {dynamicSectors.slice(0, maxItems).map((sector, index) => (
          <motion.div
            key={sector.backendName}
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{
              duration: 0.5,
              delay: index * 0.1,
              ease: [0.25, 0.46, 0.45, 0.94],
            }}
            className="relative"
          >
            <Card className="group relative p-6 hover:shadow-lg transition-all duration-300 hover:-translate-y-1 bg-card/50 backdrop-blur-sm border-border/50 h-full flex flex-col">
              <div className="flex flex-col items-center text-center space-y-4 relative z-10 flex-1">
                <div
                  className={`flex-shrink-0 w-16 h-16 rounded-xl flex items-center justify-center bg-gradient-to-br from-sector-${sector.colorKey}/20 to-sector-${sector.colorKey}/10 ring-2 ring-sector-${sector.colorKey}/20 group-hover:ring-sector-${sector.colorKey}/40 transition-all duration-300`}
                >
                  {React.cloneElement(sector.icon, {
                    className: `w-8 h-8 text-sector-${sector.colorKey} group-hover:scale-110 transition-transform duration-300`,
                  })}
                </div>

                <div className="flex-1 min-w-0 w-full">
                  <h3
                    className={`font-semibold text-lg text-foreground group-hover:text-sector-${sector.colorKey} transition-colors duration-300`}
                  >
                    {t(`${sector.nameKey}.name`)}
                  </h3>

                  {showStats && sector.count !== undefined && (
                    <div className="flex items-center justify-center mt-3">
                      <Badge
                        variant={
                          sector.colorKey as
                            | 'primary'
                            | 'secondary'
                            | 'outline'
                            | 'destructive'
                            | 'success'
                            | 'warning'
                            | 'info'
                        }
                        size="sm"
                        className={
                          ['construction', 'production', 'recreation', 'logistics'].includes(
                            sector.colorKey
                          )
                            ? ''
                            : `bg-sector-${sector.colorKey}/10 text-sector-${sector.colorKey} border-sector-${sector.colorKey}/20`
                        }
                      >
                        {t('common.organizations', { count: sector.count })}
                      </Badge>
                    </div>
                  )}
                </div>
              </div>

              {/* Subtle connection indicator */}
              <div
                className={`absolute inset-0 rounded-lg bg-gradient-to-br from-transparent via-transparent to-sector-${sector.colorKey}/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none`}
              />
            </Card>
          </motion.div>
        ))}
      </Grid>
    </div>
  );
};

export default React.memo(ModernSectorVisualization);