import { router } from 'expo-router';
import { Pressable, Text, View } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { useRequests, useWorkOrders } from '@/api/exploitation';
import { useMe } from '@/auth/session';
import { usePermissions } from '@/auth/use-permissions';
import { EnteteTabs } from '@/composants/ui';
import { PanneauDemandes } from '@/composants/panneau-demandes';
import { useTokens } from '@/theme/tokens';

/** Accueil — maquette « mobile ouvert à tous les rôles », écran 2 : le
 *  Demandeur y voit directement ses demandes (son seul geste) ; les rôles
 *  de gestion (Administrateur/Gestionnaire/Dispatcher/Vue seule) y trouvent
 *  leurs signaux réels (urgence, OT en cours, demandes à traiter) — aucun
 *  chiffre inventé : seuls WORK_ORDERS/REQUESTS sont déjà câblés sur mobile,
 *  le reste (stock, préventif du mois…) attend son propre écran (Menu). */
export default function PageAccueil() {
  const { data: me } = useMe();
  if (me?.role.name === 'Demandeur') {
    return (
      <SafeAreaView style={{ flex: 1 }} edges={['top']}>
        <View style={{ flex: 1, padding: 14, gap: 10 }}>
          <EnteteTabs />
          <PanneauDemandes />
        </View>
      </SafeAreaView>
    );
  }
  return <TableauDeBordGestion />;
}

function TableauDeBordGestion() {
  const t = useTokens();
  const { can } = usePermissions();
  const peutOT = can('WORK_ORDERS', 'view');
  const peutDemandes = can('REQUESTS', 'view');
  const { data: workOrders } = useWorkOrders();
  const { data: requests } = useRequests();

  const ots = workOrders ?? [];
  const urgences = ots.filter((o) => o.priority === 'PERSON_TRAPPED' && o.status !== 'DONE' && o.status !== 'CANCELLED');
  const enCours = ots.filter((o) => o.status === 'OPEN' || o.status === 'IN_PROGRESS').length;
  const aTraiter = (requests ?? []).filter((r) => r.status === 'RECEIVED').length;

  return (
    <SafeAreaView style={{ flex: 1, backgroundColor: t.fond }} edges={['top']}>
      <View style={{ padding: 14, gap: 10, flex: 1 }}>
        <EnteteTabs />
        <Text style={{ fontFamily: 'Manrope_800ExtraBold', fontSize: 19, color: t.encre }}>
          Accueil
        </Text>

        {urgences.length ? (
          <Pressable
            accessibilityRole="button"
            onPress={() => router.push(`/ot/${urgences[0]!.id}`)}
            style={{
              backgroundColor: t.prioBloqueFond,
              borderRadius: 10,
              padding: 9,
              flexDirection: 'row',
              alignItems: 'center',
              gap: 8,
            }}
          >
            <View style={{ width: 8, height: 8, borderRadius: 4, backgroundColor: t.prioBloque }} />
            <Text style={{ color: t.prioBloque, fontFamily: 'Manrope_800ExtraBold', fontSize: 12 }}>
              {urgences.length === 1
                ? `1 personne bloquée — ${urgences[0]!.assetReference} · ${urgences[0]!.siteName}`
                : `${urgences.length} personnes bloquées`}
            </Text>
          </Pressable>
        ) : null}

        {peutOT || peutDemandes ? (
          <View style={{ flexDirection: 'row', gap: 8 }}>
            {peutOT ? (
              <View
                style={{
                  flex: 1,
                  backgroundColor: t.surface,
                  borderColor: t.bordure,
                  borderWidth: 1,
                  borderRadius: 10,
                  padding: 10,
                }}
              >
                <Text style={{ fontFamily: 'Manrope_800ExtraBold', fontSize: 19, color: t.primaire }}>
                  {enCours}
                </Text>
                <Text style={{ fontFamily: 'Manrope_600SemiBold', fontSize: 10.5, color: t.encre2 }}>
                  OT en cours
                </Text>
              </View>
            ) : null}
            {peutDemandes ? (
              <View
                style={{
                  flex: 1,
                  backgroundColor: t.surface,
                  borderColor: t.bordure,
                  borderWidth: 1,
                  borderRadius: 10,
                  padding: 10,
                }}
              >
                <Text style={{ fontFamily: 'Manrope_800ExtraBold', fontSize: 19, color: t.encre }}>
                  {aTraiter}
                </Text>
                <Text style={{ fontFamily: 'Manrope_600SemiBold', fontSize: 10.5, color: t.encre2 }}>
                  Demandes reçues
                </Text>
              </View>
            ) : null}
          </View>
        ) : null}

        {peutDemandes && aTraiter > 0 ? (
          <Pressable
            accessibilityRole="button"
            onPress={() => router.push('/demandes')}
            style={{
              flexDirection: 'row',
              alignItems: 'center',
              gap: 10,
              backgroundColor: t.surface,
              borderColor: t.bordure,
              borderWidth: 1,
              borderRadius: 10,
              padding: 11,
            }}
          >
            <View
              style={{
                width: 28,
                height: 28,
                borderRadius: 8,
                backgroundColor: t.primaireDoux,
                alignItems: 'center',
                justifyContent: 'center',
              }}
            >
              <Text style={{ fontSize: 14, color: t.primaire }}>✎</Text>
            </View>
            <View style={{ flex: 1 }}>
              <Text style={{ fontFamily: 'Manrope_700Bold', fontSize: 12.5, color: t.encre }}>
                Demandes en attente
              </Text>
              <Text style={{ fontFamily: 'Manrope_400Regular', fontSize: 11, color: t.encre2 }}>
                à approuver ou rejeter
              </Text>
            </View>
            <Text
              style={{
                fontFamily: 'Manrope_800ExtraBold',
                fontSize: 10.5,
                color: t.stAttente,
                backgroundColor: t.stAttenteFond,
                paddingHorizontal: 7,
                paddingVertical: 2,
                borderRadius: 999,
                overflow: 'hidden',
              }}
            >
              {aTraiter}
            </Text>
            <Text style={{ color: t.encre3, fontSize: 13 }}>›</Text>
          </Pressable>
        ) : null}

        {!peutOT && !peutDemandes ? (
          <Text style={{ color: t.encre3, fontFamily: 'Manrope_600SemiBold', textAlign: 'center', padding: 24 }}>
            Rien à afficher ici pour votre rôle — voir le Menu.
          </Text>
        ) : null}
      </View>
    </SafeAreaView>
  );
}