import { ArrowUp, ArrowUpRight, Plus } from 'lucide-react-native';
import { useCallback } from 'react';
import { ScrollView, StyleSheet, Text, View } from 'react-native';

import { Button } from '@/components/Button';
import { useTheme } from '@/theme/useTheme';

import '../global.css';

export default function Index() {
  const { colors, spacing, typography } = useTheme();

  const simulateSubmit = useCallback(async () => {
    await new Promise<void>((resolve) => {
      setTimeout(resolve, 1300);
    });
  }, []);

  return (
    <View style={[styles.screen, { backgroundColor: colors.deepBackground }]}>
      <ScrollView
        contentContainerStyle={[
          styles.content,
          {
            padding: spacing[24],
            gap: spacing[24],
          },
        ]}
        showsVerticalScrollIndicator={false}
      >
        <View style={{ gap: spacing[8] }}>
          <Text
            style={[
              typography.sectionLabel,
              {
                color: colors.textSecondary,
                letterSpacing: 1.1,
              },
            ]}
          >
            BOUTONS · HAUTEUR 52 PX · RAYON 14 PX
          </Text>
        </View>

        <View style={styles.row}>
          <View style={styles.cell}>
            <Button label="Publier" variant="primary" />
            <Text style={[styles.caption, typography.digits, { color: colors.textSecondary }]}>Primaire</Text>
          </View>
          <View style={styles.cell}>
            <Button label="Publier" variant="primary" />
            <Text style={[styles.caption, typography.digits, { color: colors.textSecondary }]}>Pressé (tap)</Text>
          </View>
        </View>

        <View style={styles.row}>
          <View style={styles.cell}>
            <Button label="Intéressé" variant="secondary" rightIcon={ArrowUpRight} />
            <Text style={[styles.caption, typography.digits, { color: colors.textSecondary }]}>Secondaire</Text>
          </View>
          <View style={styles.cell}>
            <Button label="Publier" variant="primary" disabled />
            <Text style={[styles.caption, typography.digits, { color: colors.textSecondary }]}>Désactivé</Text>
          </View>
        </View>

        <View style={styles.row}>
          <View style={styles.cell}>
            <Button label="Tout voir" variant="ghost" fullWidth={false} style={styles.autoWidthButton} />
            <Text style={[styles.caption, typography.digits, { color: colors.textSecondary }]}>Texte</Text>
          </View>
          <View style={styles.cell}>
            <Button label="Envoyer" variant="primary" autoLoading loadingLabel="Envoi..." onPress={simulateSubmit} />
            <Text style={[styles.caption, typography.digits, { color: colors.textSecondary }]}>Chargement</Text>
          </View>
        </View>

        <View style={styles.row}>
          <View style={styles.cell}>
            <Button label="Supprimer" variant="destructive" />
            <Text style={[styles.caption, typography.digits, { color: colors.textSecondary }]}>Destructif</Text>
          </View>
          <View style={styles.cell}>
            <View style={styles.iconRow}>
              <Button
                iconOnly
                variant="secondary"
                fullWidth={false}
                icon={ArrowUp}
                iconOnlyShape="default"
                accessibilityLabel="Partager"
              />
              <Button
                iconOnly
                variant="primary"
                fullWidth={false}
                icon={Plus}
                iconOnlyShape="round"
                accessibilityLabel="Ajouter"
              />
            </View>
            <Text style={[styles.caption, typography.digits, { color: colors.textSecondary }]}>Icône / FAB</Text>
          </View>
        </View>
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  screen: {
    flex: 1,
  },
  content: {
    paddingBottom: 40,
  },
  row: {
    flexDirection: 'row',
    gap: 14,
  },
  cell: {
    flex: 1,
    gap: 10,
  },
  caption: {
    textAlign: 'center',
  },
  iconRow: {
    flexDirection: 'row',
    justifyContent: 'center',
    gap: 12,
  },
  autoWidthButton: {
    alignSelf: 'center',
    width: 140,
  },
});