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

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

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

interface TechnicalSheetProps {
  technicalSheet: TechnicalSheetType;
  isExpanded: boolean;
  onToggle: () => 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 TechnicalSheet({ technicalSheet, isExpanded, onToggle }: TechnicalSheetProps) {
  return (
    <View className="mb-4 rounded-md bg-primary-50 p-4">
      <Pressable
        accessibilityRole="button"
        accessibilityLabel="Ficha técnica"
        accessibilityState={{ expanded: isExpanded }}
        onPress={onToggle}
        className="flex-row items-center justify-between rounded-md border border-border bg-primary px-2 py-1"
      >
        <Text variant="subtitleMedium" className="font-medium text-primary-foreground">
          Ficha tecnica
        </Text>
        <View className="h-8 w-8 items-center justify-center rounded-md bg-card">
          <Icon
            name={isExpanded ? 'chevronUp' : 'chevronDown'}
            size={20}
            className="text-primary"
          />
        </View>
      </Pressable>
      {isExpanded ? (
        <View className="mt-3 rounded-md p-1">
          <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>
        </View>
      ) : null}
    </View>
  );
}