import { Eye, Layers, Lightbulb } from 'lucide-react';

import { getZoneBehaviorHeading } from '@/business/zones/selectors';
import { ZoneDetailListPanel } from '@/components/zones-of-regulation/ZoneDetailListPanel';
import { ZoneSafetyConnectionPanel } from '@/components/zones-of-regulation/ZoneSafetyConnectionPanel';
import { ZoneSignsPanel } from '@/components/zones-of-regulation/ZoneSignsPanel';
import {
  ZONE_GRADIENT_CLASSES,
  type ZonesOfRegulationTab,
} from '@/shared/constants/zonesOfRegulation';
import type {
  ZoneInfo,
  ZonesSafetyConnection,
} from '@/shared/types/app';
import { cn } from '@/lib/utils';

interface ZoneDetailPanelProps {
  readonly zone: ZoneInfo | null;
  readonly activeTab: ZonesOfRegulationTab;
  readonly safetyConnection: ZonesSafetyConnection | null;
}

export function ZoneDetailPanel({
  zone,
  activeTab,
  safetyConnection,
}: ZoneDetailPanelProps) {
  if (!zone) {
    return null;
  }

  return (
    <section className={cn(zone.bgClass, 'rounded-2xl border-2 p-6', zone.borderClass)}>
      <div className="flex items-center gap-3 mb-5">
        <div className={cn(
          'w-12 h-12 rounded-xl bg-gradient-to-br flex items-center justify-center',
          ZONE_GRADIENT_CLASSES[zone.color],
        )}
        >
          <Layers size={24} className="text-white" />
        </div>
        <div>
          <h3 className={cn('text-xl font-bold', zone.textClass)}>{zone.name}</h3>
          <p className="text-sm text-gray-700">{zone.description}</p>
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <ZoneDetailListPanel
          zone={zone}
          title={getZoneBehaviorHeading(activeTab)}
          icon={Eye}
          items={zone.behaviors}
        />
        <ZoneDetailListPanel
          zone={zone}
          title="Strategies to Use"
          icon={Lightbulb}
          items={zone.strategies}
        />
        <ZoneSignsPanel zone={zone} />
      </div>

      <ZoneSafetyConnectionPanel connection={safetyConnection} />
    </section>
  );
}
