/**
 * Layout maestro-detalle adaptativo.
 *
 * - **Tablet**: dos paneles lado a lado. La selección vive en estado local; al
 *   tocar un ítem se muestra su detalle en el panel derecho (no navega).
 * - **Móvil**: solo el panel maestro; al tocar un ítem se invoca `onSelectPhone`
 *   (la pantalla lo conecta con `navigation.navigate`).
 */
import React, { ReactNode, useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { useLayout } from './responsive';

interface MasterDetailProps {
  /** Pinta la lista. Recibe la selección actual (tablet) y el callback de selección. */
  renderMaster: (args: {
    selectedId: number | null;
    onSelect: (id: number) => void;
  }) => ReactNode;
  /** Pinta el detalle de un id (solo se usa en tablet). */
  renderDetail: (id: number) => ReactNode;
  /** En móvil: qué hacer al seleccionar (normalmente navegar al detalle). */
  onSelectPhone: (id: number) => void;
  /** Texto/elemento cuando aún no hay selección (tablet). */
  placeholder?: ReactNode;
  /** Proporción del panel maestro en tablet (0–1). */
  masterFlex?: number;
}

export function MasterDetail({
  renderMaster,
  renderDetail,
  onSelectPhone,
  placeholder,
  masterFlex = 0.38,
}: MasterDetailProps) {
  const { isTablet } = useLayout();
  const [selectedId, setSelectedId] = useState<number | null>(null);

  if (!isTablet) {
    return <>{renderMaster({ selectedId: null, onSelect: onSelectPhone })}</>;
  }

  return (
    <View style={styles.row}>
      <View style={[styles.master, { flex: masterFlex }]}>
        {renderMaster({ selectedId, onSelect: setSelectedId })}
      </View>
      <View style={[styles.detail, { flex: 1 - masterFlex }]}>
        {selectedId != null ? (
          renderDetail(selectedId)
        ) : (
          <View style={styles.placeholder}>
            {placeholder ?? <Text style={styles.placeholderText}>Selecciona un elemento</Text>}
          </View>
        )}
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  row: { flex: 1, flexDirection: 'row' },
  master: { borderRightWidth: StyleSheet.hairlineWidth, borderColor: '#ddd' },
  detail: { flex: 1 },
  placeholder: { flex: 1, justifyContent: 'center', alignItems: 'center', padding: 24 },
  placeholderText: { color: '#888', fontSize: 15 },
});
