import { Modal, Pressable, ScrollView, View } from 'react-native';

import { IconButton } from '../../atoms/IconButton';
import { Text } from '../../atoms/Text';

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

interface TechnicalSheetDrawerProps {
  technicalSheet: TechnicalSheetType | null;
  visible: boolean;
  onClose: () => void;
}

interface RowProps {
  label: string;
  value: string | number | undefined;
}

function Row({ label, value }: RowProps) {
  return (
    <View className="mb-2 flex-row gap-2">
      <Text variant="bodyMedium" className="font-medium text-foreground">
        {label}
      </Text>
      <Text variant="bodyMedium" className="text-foreground">
        {value ?? '—'}
      </Text>
    </View>
  );
}

export function TechnicalSheetDrawer({
  technicalSheet,
  visible,
  onClose,
}: TechnicalSheetDrawerProps) {
  if (!technicalSheet) {
    return null;
  }

  return (
    <Modal visible={visible} transparent animationType="slide" onRequestClose={onClose}>
      <View className="flex-1 justify-end">
        <Pressable
          accessibilityRole="button"
          accessibilityLabel="Cerrar ficha técnica"
          onPress={onClose}
          className="absolute inset-0 bg-overlay/50"
        />
        <View className="max-h-[80%] rounded-t-2xl bg-card pb-8">
          <View className="flex-row items-center justify-between border-b border-border px-4 pb-2 pt-4">
            <Text variant="subtitleLarge" tone="primary" className="font-bold">
              Ficha técnica
            </Text>
            <IconButton
              icon="close"
              size="sm"
              variant="ghost"
              onPress={onClose}
              iconClassName="text-primary"
              accessibilityLabel="Cerrar ficha técnica"
            />
          </View>
          <ScrollView className="px-4 pt-4" showsVerticalScrollIndicator={false}>
            <View className="flex-row justify-between gap-3">
              <View className="flex-1">
                <Row label="Número de lados:" value={technicalSheet.numberOfSides} />
                <Row label="Cuadros por lado:" value={technicalSheet.squaresPerSide} />
                <Row label="Número de naves:" value={technicalSheet.numberOfShips} />
                <Row label="Camas por nave:" value={technicalSheet.bedsPerShip} />
                <Row label="Camino central:" value={technicalSheet.centralPath} />
                <Row label="Tipo de númeración:" value={technicalSheet.numberingType} />
              </View>
              <View className="flex-1">
                {technicalSheet.bedSize ? (
                  <>
                    <Text variant="subtitleMedium" className="mb-2 font-bold">
                      Tamaño de la cama
                    </Text>
                    <Row label="Ancho:" value={technicalSheet.bedSize.width} />
                    <Row label="Largo:" value={technicalSheet.bedSize.length} />
                  </>
                ) : null}
                {technicalSheet.coordinates ? (
                  <>
                    <Text variant="subtitleMedium" className="mb-2 font-bold">
                      Coordenadas
                    </Text>
                    <Row label="Inferior izq:" value={technicalSheet.coordinates.bottomLeft} />
                    <Row label="Superior der:" value={technicalSheet.coordinates.topRight} />
                  </>
                ) : null}
              </View>
            </View>
          </ScrollView>
        </View>
      </View>
    </Modal>
  );
}