import { type ReactNode, useState } from 'react';
import { ScrollView, View } from 'react-native';
import { useNavigation } from '@react-navigation/native';

import { Button } from '../../atoms/Button';
import { IconButton } from '../../atoms/IconButton';
import { cn } from '../../lib/cn';

import { BottomMenu } from '../BottomMenu/BottomMenu';
import { ScreenHeader } from '../ScreenHeader';
import { TechnicalSheetDrawer } from '../TechnicalSheet';
import type { TechnicalSheet as TechnicalSheetType } from '../TechnicalSheet/TechnicalSheet.types';

export interface LayoutProps {
  children: ReactNode;
  title: string;
  breadcrumbs?: string[];
  scrollable?: boolean;
  showBackButton?: boolean;
  rightAction?: ReactNode;
  footerButton?: {
    label: string;
    onPress: () => void;
    disabled?: boolean;
    loading?: boolean;
  };
  technicalSheet?: TechnicalSheetType | null;
  isSelectionMode?: boolean;
  onObservationPress?: () => void | Promise<void>;
  isObservationDisabled?: boolean;
  observationLabel?: string;
  observationIcon?: string;
  onAddPress?: () => void | Promise<void>;
  onCreatePress?: () => void;
  onSelectAll?: () => void;
  onDeselectAll?: () => void;
  isAllSelected?: boolean;
  isAddDisabled?: boolean;
  observationBadgeCount?: number;
}

/**
 * Layout legacy. Mantiene la misma API que la versión Paper anterior pero
 * por dentro está implementado con NativeWind + Atoms.
 *
 * `Layout` es un alias directo de este component para unificar nomenclatura.
 */
export const Layout: React.FC<LayoutProps> = ({
  children,
  title,
  breadcrumbs,
  scrollable = true,
  showBackButton = true,
  rightAction,
  footerButton,
  technicalSheet,
  isSelectionMode,
  onObservationPress,
  isObservationDisabled,
  observationLabel,
  observationIcon,
  onAddPress,
  onCreatePress,
  onSelectAll,
  onDeselectAll,
  isAllSelected,
  isAddDisabled,
  observationBadgeCount,
}) => {
  const [isDrawerVisible, setIsDrawerVisible] = useState(false);
  const navigation = useNavigation();

  const handleOpenDrawer = () => setIsDrawerVisible(true);
  const handleCloseDrawer = () => setIsDrawerVisible(false);

  const renderRightAction = () => {
    if (rightAction) return rightAction;

    if (isSelectionMode && onSelectAll && onDeselectAll) {
      return (
        <IconButton
          variant="ghost"
          size="md"
          icon={isAllSelected ? 'listChecks' : 'square'}
          onPress={isAllSelected ? onDeselectAll : onSelectAll}
          iconClassName="text-primary"
          accessibilityLabel={isAllSelected ? 'Deseleccionar todos' : 'Seleccionar todos'}
        />
      );
    }

    return null;
  };

  const shouldShowBottomMenu =
    technicalSheet || onObservationPress || showBackButton || onAddPress || onCreatePress;

  return (
    <View className="flex-1 bg-primary-foreground">
      <ScreenHeader title={title} breadcrumbs={breadcrumbs} rightAction={renderRightAction()} />

      {technicalSheet && (
        <TechnicalSheetDrawer
          technicalSheet={technicalSheet}
          visible={isDrawerVisible}
          onClose={handleCloseDrawer}
        />
      )}

      {scrollable ? (
        <ScrollView
          className="flex-1 -mt-7 rounded-t-[28px] bg-primary-foreground"
          contentContainerStyle={{
            padding: 16,
            paddingBottom: shouldShowBottomMenu ? 96 : 16,
          }}
        >
          {children}
        </ScrollView>
      ) : (
        <View
          className={cn(
            '-mt-2 flex-1 rounded-t-[28px] bg-primary-foreground p-4',
            shouldShowBottomMenu && 'pb-24',
          )}
        >
          {children}
        </View>
      )}

      {footerButton && (
        <View className="bg-background p-4">
          <Button
            variant="primary"
            size="lg"
            fullWidth
            onPress={footerButton.onPress}
            disabled={footerButton.disabled}
            loading={footerButton.loading}
          >
            {footerButton.label}
          </Button>
        </View>
      )}

      {shouldShowBottomMenu && (
        <View className="bg-background p-4">
          <BottomMenu
            onTechnicalSheetPress={technicalSheet ? handleOpenDrawer : undefined}
            onObservationPress={onObservationPress}
            onCreatePress={onCreatePress}
            isObservationDisabled={isObservationDisabled}
            isTechnicalSheetDisabled={!technicalSheet}
            onBackPress={() => navigation.goBack()}
            showBackButton={showBackButton}
            onAddPress={onAddPress}
            isAddDisabled={isAddDisabled}
            isSelectionMode={isSelectionMode}
            observationLabel={observationLabel}
            observationIcon={observationIcon}
            observationBadgeCount={observationBadgeCount}
            onSelectAll={onSelectAll}
            onDeselectAll={onDeselectAll}
          />
        </View>
      )}
    </View>
  );
};