import { router, useLocalSearchParams } from 'expo-router';
import { Pressable, ScrollView, Text } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { ASSET_STATUS_LABELS, type AssetStatus } from '@siop/shared';
import { useAssets, useLocations } from '@/api/exploitation';
import { Carte, EnteteFiche, LigneInfo } from '@/composants/ui';
import { useTokens, type Tokens } from '@/theme/tokens';

/** Fiche site — R6.2. Consultation seule (D4) : identité, zones, ascenseurs
 *  du site. Pas de carte interactive ni d'édition sur mobile pour l'instant
 *  (réservé au web) — même filtre appareils↔site que fiche-site.tsx (web) :
 *  par nom, la liste étant déjà plate côté serveur. */
export default function PageFicheSite() {
  const t = useTokens();
  const { id } = useLocalSearchParams<{ id: string }>();
  const { data: locations } = useLocations();
  const { data: assets } = useAssets();

  const site = (locations ?? []).find((l) => l.id === id);
  if (!site) return null;

  const zones = (locations ?? []).filter((l) => l.parentId === site.id);
  const appareils = (assets ?? []).filter((a) => a.siteName === site.name);

  return (
    <SafeAreaView style={{ flex: 1, backgroundColor: t.fond }} edges={['top']}>
      <ScrollView contentContainerStyle={{ padding: 14, gap: 10 }}>
        <EnteteFiche titre={site.name} />

        <Carte titre="Identité">
          <LigneInfo nom="Adresse" valeur={[site.address, site.city].filter(Boolean).join(' — ') || '—'} />
          <LigneInfo nom="Gardien" valeur={site.guardianName ?? '—'} />
          {site.guardianPhone ? <LigneInfo nom="Téléphone" valeur={site.guardianPhone} /> : null}
          <LigneInfo nom="Client / syndic" valeur={site.partnerName ?? '—'} />
          <LigneInfo nom="Appareils" valeur={String(site.assetCount)} />
        </Carte>

        {zones.length ? (
          <Carte titre="Emplacements">
            {zones.map((z) => (
              <LigneInfo
                key={z.id}
                nom={z.name}
                valeur={appareils.filter((a) => a.locationId === z.id).map((a) => a.reference).join(' · ') || '—'}
              />
            ))}
          </Carte>
        ) : null}

        <Carte titre={`Ascenseurs du site (${appareils.length})`}>
          {appareils.map((a) => (
            <Pressable
              key={a.id}
              accessibilityRole="button"
              onPress={() => router.push(`/ascenseur/${a.id}`)}
              style={{ flexDirection: 'row', alignItems: 'center', gap: 8, paddingVertical: 3 }}
            >
              <Text style={{ fontFamily: 'Manrope_700Bold', fontSize: 12.5, color: t.primaire }}>
                {a.reference}
              </Text>
              <Text
                numberOfLines={1}
                style={{ flex: 1, fontFamily: 'Manrope_400Regular', fontSize: 12.5, color: t.encre }}
              >
                {a.brand} {a.model ?? ''}
              </Text>
              <ChipStatutAppareil statut={a.status} t={t} />
            </Pressable>
          ))}
          {!appareils.length ? (
            <Text style={{ color: t.encre3, fontFamily: 'Manrope_400Regular', fontSize: 12.5 }}>
              Aucun appareil rattaché.
            </Text>
          ) : null}
        </Carte>
      </ScrollView>
    </SafeAreaView>
  );
}

function ChipStatutAppareil({ statut, t }: { statut: AssetStatus; t: Tokens }) {
  const enService = statut === 'IN_SERVICE';
  return (
    <Text
      style={{
        fontFamily: 'Manrope_700Bold',
        fontSize: 10.5,
        color: enService ? t.stTermine : t.stAttente,
        backgroundColor: enService ? t.stTermineFond : t.stAttenteFond,
        paddingHorizontal: 8,
        paddingVertical: 2,
        borderRadius: 999,
        overflow: 'hidden',
      }}
    >
      {ASSET_STATUS_LABELS[statut]}
    </Text>
  );
}