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

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

import '../global.css';

export default function Index() {
  const { colors, spacing, typography } = useTheme();
  const [selectedThemes, setSelectedThemes] = useState<string[]>(['Soirée', 'Techno', 'Festival']);

  const themeOptions = useMemo(
    () => ['Soirée', 'Techno', 'Festival', 'Fête de jeunesse', 'Concert', 'Bal', 'Afterwork', 'Gratuit'],
    [],
  );

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

  const handleThemeSelect = useCallback((value: string, nextSelected: boolean) => {
    setSelectedThemes((prev) => {
      if (nextSelected) {
        if (prev.includes(value)) {
          return prev;
        }

        return [...prev, value];
      }

      return prev.filter((theme) => theme !== value);
    });
  }, []);

  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>

        <View style={{ gap: spacing[12] }}>
          <Text style={[typography.sectionLabel, { color: colors.textSecondary, letterSpacing: 1.1 }]}>BADGES</Text>
          <View style={styles.badgeWrap}>
            <Badge variant="verified" />
            <Badge variant="free" />
            <Badge variant="complete" />
            <Badge variant="tonight" />
            <Badge variant="pro" />
            <Badge variant="draft" />
            <Badge date={{ day: '04', month: 'sept' }} />
          </View>
        </View>

        <View style={{ gap: spacing[12] }}>
          <Text style={[typography.sectionLabel, { color: colors.textSecondary, letterSpacing: 1.1 }]}>CHIPS DE THÈME · CAPSULE 34 PX</Text>
          <View style={styles.chipWrap}>
            <ThemeChip label="Soirée" selected selectedVariant="gradient" showCross={false} />
            <ThemeChip label="Festival" selected selectedVariant="accent" />
            <ThemeChip label="Fête de jeunesse" />
            <ThemeChip label="Concert" />
            <ThemeChip label="Bal" />
            <ThemeChip label="Techno" />
            <ThemeChip label="Afterwork" />
            <ThemeChip label="Gratuit" selected selectedVariant="accent" showRemoveIcon={false} />
          </View>
        </View>

        <View style={{ gap: spacing[12] }}>
          <Text style={[typography.sectionLabel, { color: colors.textSecondary, letterSpacing: 1.1 }]}>THÈMES · MULTI-SÉLECTION</Text>
          <View style={styles.chipWrap}>
            {themeOptions.map((theme) => {
              const selected = selectedThemes.includes(theme);

              return (
                <ThemeChip
                  key={theme}
                  label={theme}
                  value={theme}
                  selected={selected}
                  selectedVariant={theme === 'Soirée' ? 'gradient' : 'accent'}
                  onSelect={handleThemeSelect}
                />
              );
            })}
          </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,
  },
  badgeWrap: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    gap: 12,
    alignItems: 'center',
  },
  chipWrap: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    gap: 10,
    alignItems: 'center',
  },
});