import { router } from 'expo-router';
import { Share, StyleSheet, Text, View } from 'react-native';
import { profileUrl } from '@musicshare/shared';
import { Avatar } from '@/components/Avatar';
import { QrCode } from '@/components/QrCode';
import { Screen } from '@/components/Screen';
import { Body, Button } from '@/components/ui';
import { WEB_URL } from '@/lib/config';
import { useSession } from '@/lib/session';
import { colors, space } from '@/lib/theme';

/** "My code": friends scan it (in musicshare or any camera app) to open your profile. */
export default function MyQrScreen() {
  const { me } = useSession();
  if (!me) return null;
  const url = profileUrl(WEB_URL, me.username);

  const share = () =>
    Share.share({ message: `Follow me on musicshare and see what I'm listening to: ${url}`, url }).catch(() => {});

  return (
    <Screen edges={['bottom']} contentContainerStyle={styles.content}>
      <View style={styles.who}>
        <Avatar user={me} size={56} />
        <Text style={styles.name}>{me.displayName ?? me.username}</Text>
        <Text style={styles.handle}>@{me.username}</Text>
      </View>
      <QrCode value={url} size={260} />
      <Body muted style={styles.hint}>
        Friends scan this with musicshare (or their camera app) to open your profile.
      </Body>
      <View style={styles.actions}>
        <Button variant="primary" title="Scan a friend’s code" onPress={() => router.replace('/scan')} />
        <Button title="Share link" onPress={share} />
      </View>
    </Screen>
  );
}

const styles = StyleSheet.create({
  content: { flexGrow: 1, alignItems: 'center', justifyContent: 'center', gap: space.xl },
  who: { alignItems: 'center', gap: space.xs },
  name: { color: colors.text, fontSize: 22, fontWeight: '800' },
  handle: { color: colors.muted, fontSize: 15 },
  hint: { textAlign: 'center', maxWidth: 300 },
  actions: { alignSelf: 'stretch', gap: space.sm },
});