import { AlertTriangle, Layers } from 'lucide-react';

import type { ZonesOfRegulationPage } from '@/business/zones/types';
import { ZoneDetailPanel } from '@/components/zones-of-regulation/ZoneDetailPanel';
import { ZonesHeader } from '@/components/zones-of-regulation/ZonesHeader';
import { ZonesOverviewGrid } from '@/components/zones-of-regulation/ZonesOverviewGrid';
import { ZonesQuickFlow } from '@/components/zones-of-regulation/ZonesQuickFlow';
import { ZonesTabs } from '@/components/zones-of-regulation/ZonesTabs';
import { StatePanel } from '@/components/ui/state-panel';

interface ZonesOfRegulationViewProps {
  readonly page: ZonesOfRegulationPage;
}

export function ZonesOfRegulationView({ page }: ZonesOfRegulationViewProps) {
  const contentError = page.zonesError || page.pageContentError;

  return (
    <div className="space-y-6">
      <ZonesHeader />

      <ZonesTabs activeTab={page.activeTab} onTabChange={page.setActiveTab} />

      {page.isLoading ? (
        <StatePanel
          title="Loading zones"
          icon={Layers}
          tone="cyan"
          alignment="center"
          loading
        >
          Loading regulation zone content.
        </StatePanel>
      ) : contentError ? (
        <StatePanel
          title="Zones could not be loaded"
          icon={AlertTriangle}
          tone="red"
          alignment="center"
          role="alert"
        >
          Please try again.
        </StatePanel>
      ) : (
        <>
          <ZonesOverviewGrid
            zones={page.zones}
            expandedZone={page.expandedZone}
            onToggleZone={page.toggleExpandedZone}
          />

          <ZoneDetailPanel
            zone={page.selectedZone}
            activeTab={page.activeTab}
            safetyConnection={page.safetyConnection}
          />
        </>
      )}

      <ZonesQuickFlow
        title={page.pageContent.quickDeEscalationFlowTitle}
        steps={page.pageContent.quickDeEscalationFlow}
      />
    </div>
  );
}
