import { File } from 'expo-file-system';
import { ImageManipulator, SaveFormat } from 'expo-image-manipulator';
import * as ImagePicker from 'expo-image-picker';
import { router } from 'expo-router';
import { useState } from 'react';
import { Alert, Linking, Platform, StyleSheet, View } from 'react-native';
import useSWR from 'swr';
import {
  SERVICE_LABELS,
  STREAMING_SERVICES,
  timeAgo,
  type ConnectionDTO,
  type MeDTO,
  type NowPlayingProvider,
  type StreamingService,
  type NotificationType,
  NOTIFICATION_PREF_LABELS,
  NOTIFICATION_TYPES,
} from '@musicshare/shared';
import { Avatar } from '@/components/Avatar';
import { RelinkReminder } from '@/components/RelinkReminder';
import { FeaturedPicker } from '@/components/FeaturedPicker';
import { Screen } from '@/components/Screen';
import { ServiceName } from '@/components/ServiceName';
import { SharingControls } from '@/components/SharingControls';
import { Body, Button, Card, Chip, Field, Heading, ListRow, Row, Title } from '@/components/ui';
import { api } from '@/lib/api';
import { WEB_URL } from '@/lib/config';
import { showError } from '@/lib/errors';
import { AppleMusicPermissionError, appleMusicAvailable, connectAppleMusic } from '@/lib/appleMusic';
import { SignInError, openSignupPage, openSpotifyLinkPage, signInWithService } from '@/lib/connect';
import { openReaderSettings, useReader } from '@/lib/nowPlayingReader';
import { NTFY_URL, disablePush, enablePush, pushAvailable, usePushStatus } from '@/lib/push';
import { useSession } from '@/lib/session';
import { checkForUpdate, currentVersion, installUpdate, updaterAvailable, useUpdateState } from '@/lib/updates';
import { colors, radius, space } from '@/lib/theme';

export default function SettingsScreen() {
  return (
    <Screen>
      <Title>Settings</Title>
      <ProfileSection />
      <SharingControls />
      <RelinkReminder />
      <MyServices />
      <Notifications />
      <ThisPhone />
      <Connections />
      <FeaturedPicker />
      <AppVersion />
      <Account />
    </Screen>
  );
}

function ProfileSection() {
  const { me, setMe } = useSession();
  const [displayName, setDisplayName] = useState(me?.displayName ?? '');
  const [bio, setBio] = useState(me?.bio ?? '');
  const [busy, setBusy] = useState(false);

  const save = async () => {
    setBusy(true);
    try {
      setMe(await api.updateMe({ displayName: displayName.trim() || null, bio: bio.trim() || null }));
    } catch (err) {
      showError(err);
    }
    setBusy(false);
  };

  return (
    <Card>
      <Heading>Profile</Heading>
      <AvatarPicker />
      <Field label="Display name" value={displayName} onChangeText={setDisplayName} maxLength={64} />
      <Field label="Bio" value={bio} onChangeText={setBio} maxLength={280} multiline style={{ minHeight: 64 }} />
      <Button title="Save" variant="primary" loading={busy} onPress={save} style={{ alignSelf: 'flex-start' }} />
    </Card>
  );
}

function AvatarPicker() {
  const { me, setMe } = useSession();
  const [busy, setBusy] = useState(false);
  if (!me) return null;

  const run = async (fn: () => Promise<MeDTO>) => {
    setBusy(true);
    try {
      setMe(await fn());
    } catch (err) {
      showError(err, "Couldn't update your picture");
    }
    setBusy(false);
  };

  const pick = async () => {
    // The system photo picker needs no permission on Android 13+; iOS asks the first time.
    const result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ['images'],
      allowsEditing: true,
      aspect: [1, 1],
      quality: 0.85,
    });
    const asset = result.canceled ? null : result.assets[0];
    if (!asset) return;
    run(async () => {
      // Shrink first: photos from 50-200 MP cameras are huge, and the server keeps 512 px anyway.
      const side = Math.min(1024, asset.width || 1024);
      const image = await (await ImageManipulator.manipulate(asset.uri).resize({ width: side }).renderAsync()).saveAsync({
        compress: 0.85,
        format: SaveFormat.JPEG,
      });
      const form = new FormData();
      // Expo's fetch needs a real file object (it rejects React Native's { uri, name, type } parts).
      form.append('file', new File(image.uri) as unknown as Blob);
      return api.uploadAvatar(form);
    });
  };

  const remove = () =>
    Alert.alert('Remove your picture?', undefined, [
      { text: 'Cancel', style: 'cancel' },
      { text: 'Remove', style: 'destructive', onPress: () => run(() => api.removeAvatar()) },
    ]);

  return (
    <View style={styles.avatarRow}>
      <Avatar user={me} size={72} />
      <View style={{ gap: space.sm }}>
        <Button small variant="primary" loading={busy} title={me.avatarUrl ? 'Change picture' : 'Add a picture'} onPress={pick} />
        {me.avatarUrl && !busy && <Button small title="Remove" onPress={remove} />}
      </View>
    </View>
  );
}

/** The services you use: songs offer only these, and open in the main one. */
function MyServices() {
  const { me, setMe } = useSession();
  const mine = me?.services ?? [];
  const save = async (services: StreamingService[], preferredService: StreamingService | null) => {
    try {
      setMe(await api.updateMe({ services: services.length ? services : null, preferredService }));
    } catch (err) {
      showError(err);
    }
  };
  const toggle = (s: StreamingService) => {
    const services = mine.includes(s) ? mine.filter((x) => x !== s) : [...mine, s];
    // The main service has to be one you use; fall back to the first one left.
    const main = me?.preferredService && services.includes(me.preferredService) ? me.preferredService : (services[0] ?? null);
    save(services, main);
  };
  return (
    <Card>
      <Heading>Your music services</Heading>
      <Body muted style={styles.small}>
        Songs only show buttons for the ones you pick.
      </Body>
      <Row>
        {STREAMING_SERVICES.map((s) => (
          <Chip key={s} label={SERVICE_LABELS[s]} selected={mine.includes(s)} onPress={() => toggle(s)} />
        ))}
      </Row>
      {mine.length > 1 && (
        <>
          <Heading>Open songs in</Heading>
          <Row>
            {mine.map((s) => (
              <Chip key={s} label={SERVICE_LABELS[s]} selected={me?.preferredService === s} onPress={() => save(mine, s)} />
            ))}
          </Row>
        </>
      )}
    </Card>
  );
}

/** What to be notified about, and push delivery on this phone. */
function Notifications() {
  const { me, setMe } = useSession();
  const push = usePushStatus();
  const [busy, setBusy] = useState(false);
  if (!me) return null;

  const toggle = async (type: NotificationType) => {
    try {
      setMe(await api.updateMe({ notifyPrefs: { [type]: !me.notifyPrefs[type] } }));
    } catch (err) {
      showError(err);
    }
  };
  const turnOn = async () => {
    setBusy(true);
    try {
      const result = await enablePush();
      if (result === 'denied') Alert.alert('Notifications are off', 'Allow notifications for musicshare in Android settings, then try again.');
      if (result === 'no-distributor') push.refresh();
    } catch (err) {
      showError(err);
    }
    setBusy(false);
  };
  const turnOff = async () => {
    setBusy(true);
    await disablePush().catch((err) => showError(err));
    push.refresh();
    setBusy(false);
  };

  return (
    <Card>
      <Heading>Notifications</Heading>
      <Body muted style={styles.small}>
        Notify me about:
      </Body>
      <Row>
        {NOTIFICATION_TYPES.map((t) => (
          <Chip key={t} label={NOTIFICATION_PREF_LABELS[t]} selected={me.notifyPrefs[t]} onPress={() => toggle(t)} />
        ))}
      </Row>
      {pushAvailable &&
        (push.enabled ? (
          <>
            <Body muted style={styles.small}>
              On for this phone{push.distributor ? `, delivered by ${push.distributor}` : ''}.
            </Body>
            <Button small title="Turn off on this phone" loading={busy} onPress={turnOff} style={{ alignSelf: 'flex-start' }} />
          </>
        ) : push.hasDistributor ? (
          <Button small variant="primary" title="Turn on for this phone" loading={busy} onPress={turnOn} style={{ alignSelf: 'flex-start' }} />
        ) : (
          <>
            <Body muted style={styles.small}>
              musicshare doesn&apos;t use Google to deliver notifications. Install ntfy (free and open source), then come back and turn
              them on. You&apos;ll still see everything under the bell on the feed without it.
            </Body>
            <Row>
              <Button small variant="primary" title="Get ntfy" onPress={() => Linking.openURL(NTFY_URL)} />
              <Button small title="I've installed it" loading={busy} onPress={turnOn} />
            </Row>
          </>
        ))}
    </Card>
  );
}

/** Android: share from any music app on this phone (no-op elsewhere). */
function ThisPhone() {
  const { available, granted, playback } = useReader();
  if (!available) return null;
  return (
    <Card>
      <Heading>This phone</Heading>
      {granted ? (
        <Body muted style={styles.small}>
          {playback?.title
            ? `Sharing ${playback.title}${playback.artist ? ` by ${playback.artist}` : ''} from ${playback.appName ?? 'a music app'}.`
            : 'On. Anything you play in a music app is shared.'}
        </Body>
      ) : (
        <Body muted style={styles.small}>
          Share what you play in Spotify, YouTube Music, Apple Music and other music apps. No accounts needed.
        </Body>
      )}
      <Button
        small
        variant={granted ? 'secondary' : 'primary'}
        title={granted ? 'Turn off in Android settings' : 'Turn on'}
        onPress={granted ? openReaderSettings : () => router.push('/share-setup')}
        style={{ alignSelf: 'flex-start' }}
      />
    </Card>
  );
}

function Connections() {
  const { data: connections = [], mutate } = useSWR<ConnectionDTO[]>('/connections');
  const byProvider = new Map(connections.map((c) => [c.provider, c]));

  const run = async (fn: () => Promise<unknown>) => {
    try {
      await fn();
    } catch (err) {
      showError(err);
    }
    await mutate();
  };

  /** Sign in on the service's site (Plex, Last.fm) and come back to the app. */
  const connectOAuth = (provider: 'plex' | 'lastfm') =>
    run(async () => {
      try {
        await signInWithService(provider);
      } catch (err) {
        if (err instanceof SignInError) Alert.alert(`Couldn't connect ${SERVICE_LABELS[provider]}`, err.message);
        else throw err;
      }
    });

  const linkSpotifyOnLastfm = () => openSpotifyLinkPage('lastfm').catch((e) => showError(e));
  const linkSpotifyOnListenBrainz = () => openSpotifyLinkPage('listenbrainz').catch((e) => showError(e));
  const spotifyLinked = byProvider.has('lastfm') || byProvider.has('listenbrainz');

  const disconnect = (provider: NowPlayingProvider) =>
    Alert.alert(`Disconnect ${SERVICE_LABELS[provider]}?`, 'Friends will stop seeing what you play there.', [
      { text: 'Cancel', style: 'cancel' },
      { text: 'Disconnect', style: 'destructive', onPress: () => run(() => api.disconnect(provider)) },
    ]);

  const status = (p: NowPlayingProvider, fallback: string) => {
    const c = byProvider.get(p);
    if (!c) return <Body muted style={styles.small}>{fallback}</Body>;
    if (c.status === 'error') return <Body style={[styles.small, { color: colors.danger }]}>Needs reconnecting: {c.lastError}</Body>;
    return (
      <Body muted style={styles.small}>
        Connected as {c.displayName ?? c.externalUserId}
        {c.lastPolledAt ? ` · checked ${timeAgo(c.lastPolledAt)}` : ''}
      </Body>
    );
  };

  const isActive = (p: NowPlayingProvider) => byProvider.get(p)?.status === 'active';

  const linkAppleMusic = () =>
    run(async () => {
      try {
        await connectAppleMusic();
      } catch (err) {
        if (err instanceof AppleMusicPermissionError) Alert.alert('Apple Music access needed', err.message);
        else throw err;
      }
    });

  return (
    <Card>
      <Heading>Music services</Heading>
      <Body muted style={styles.small}>
        Connect where you listen. Friends see what you&apos;re playing in real time.
      </Body>

      {appleMusicAvailable && (
        <View style={[styles.connectionColumn, styles.connection]}>
          <View style={{ flex: 1 }}>
            <ServiceName service="apple_music" />
            {status('apple_music', 'One tap. Live while the app is open, recently played otherwise.')}
          </View>
          {isActive('apple_music') ? (
            <Button small title="Disconnect" onPress={() => disconnect('apple_music')} />
          ) : (
            <Button small variant="primary" title={byProvider.has('apple_music') ? 'Reconnect' : 'Connect'} onPress={linkAppleMusic} />
          )}
        </View>
      )}

      {/* Spotify caps new apps at a handful of accounts, so Spotify comes in through
          its own Last.fm / ListenBrainz link (or the Android toggle). */}
      <View style={[styles.connectionColumn, styles.connection]}>
        <View style={{ flex: 1 }}>
          <ServiceName service="spotify" />
          <Body muted style={styles.small}>
            {Platform.OS === 'android'
              ? 'Shared automatically by “This phone” above. On other devices, connect it through Last.fm or ListenBrainz.'
              : spotifyLinked
                ? 'Through Spotify’s link to Last.fm or ListenBrainz. Make sure it’s linked there.'
                : 'Connect it through Last.fm or ListenBrainz: Spotify sends your plays there, and we share them.'}
          </Body>
        </View>
        <Button small variant={spotifyLinked ? 'secondary' : 'primary'} title={spotifyLinked ? 'Check link' : 'Set up'} onPress={() => router.push('/spotify-setup')} />
      </View>

      <View style={[styles.connectionColumn, styles.connection]}>
        <View style={{ flex: 1 }}>
          <ServiceName service="plex" />
          {status('plex', 'Music you play from your Plex servers')}
        </View>
        {isActive('plex') ? (
          <Button small title="Disconnect" onPress={() => disconnect('plex')} />
        ) : (
          <Button small variant="primary" title={byProvider.has('plex') ? 'Reconnect' : 'Connect'} onPress={() => connectOAuth('plex')} />
        )}
      </View>

      <View style={styles.connectionColumn}>
        <View style={styles.connection}>
          <View style={{ flex: 1 }}>
            <ServiceName service="lastfm" />
            {status('lastfm', 'Scrobbles from Spotify, TIDAL, YouTube Music and more.')}
          </View>
          {byProvider.has('lastfm') ? (
            <Button small title="Disconnect" onPress={() => disconnect('lastfm')} />
          ) : (
            <Button small variant="primary" title="Sign in" onPress={() => connectOAuth('lastfm')} />
          )}
        </View>
        {byProvider.has('lastfm') ? (
          <Button small title="Link Spotify to Last.fm" onPress={linkSpotifyOnLastfm} style={{ alignSelf: 'flex-start' }} />
        ) : (
          <Button small title="No account? Create one" onPress={() => openSignupPage('lastfm')} style={{ alignSelf: 'flex-start' }} />
        )}
      </View>

      <UsernameConnection
        provider="listenbrainz"
        status={status('listenbrainz', 'Open-source scrobbling')}
        active={byProvider.has('listenbrainz')}
        onConnect={(username) => run(() => api.connectUsername('listenbrainz', username))}
        onDisconnect={() => disconnect('listenbrainz')}
        onLinkSpotify={linkSpotifyOnListenBrainz}
      />

      <JellyfinConnection
        status={status('jellyfin', 'Sign in to your Jellyfin server. Your password isn’t stored.')}
        active={isActive('jellyfin')}
        onConnect={(input) => run(() => api.connectJellyfin(input))}
        onDisconnect={() => disconnect('jellyfin')}
      />

      {connections.some((c) => c.webhookUrl) && (
        <Body muted style={styles.small}>
          Instant updates for Plex/Jellyfin can be set up from Settings on the web.
        </Body>
      )}
    </Card>
  );
}

function UsernameConnection({
  provider,
  status,
  active,
  onConnect,
  onDisconnect,
  onLinkSpotify,
}: {
  provider: 'lastfm' | 'listenbrainz';
  status: React.ReactNode;
  active: boolean;
  onConnect: (username: string) => Promise<void>;
  onDisconnect: () => void;
  onLinkSpotify: () => void;
}) {
  const [username, setUsername] = useState('');
  const [busy, setBusy] = useState(false);
  return (
    <View style={styles.connectionColumn}>
      <View style={styles.connection}>
        <View style={{ flex: 1 }}>
          <ServiceName service={provider} />
          {status}
        </View>
        {active && <Button small title="Disconnect" onPress={onDisconnect} />}
      </View>
      {!active && (
        <Row style={{ flexWrap: 'nowrap' }}>
          <View style={{ flex: 1 }}>
            <Field placeholder="Username" value={username} onChangeText={setUsername} autoCapitalize="none" autoCorrect={false} />
          </View>
          <Button
            small
            variant="primary"
            title="Connect"
            loading={busy}
            disabled={!username.trim()}
            onPress={async () => {
              setBusy(true);
              await onConnect(username.trim());
              setBusy(false);
            }}
          />
        </Row>
      )}
      {active ? (
        <Button small title={`Link Spotify to ${SERVICE_LABELS[provider]}`} onPress={onLinkSpotify} style={{ alignSelf: 'flex-start' }} />
      ) : (
        <>
          <Button small title="No account? Create one" onPress={() => openSignupPage(provider)} style={{ alignSelf: 'flex-start' }} />
          {provider === 'listenbrainz' && (
            <Body muted style={styles.small}>
              ListenBrainz uses MusicBrainz accounts: create one there, then sign in to ListenBrainz once.
            </Body>
          )}
        </>
      )}
    </View>
  );
}

function JellyfinConnection({
  status,
  active,
  onConnect,
  onDisconnect,
}: {
  status: React.ReactNode;
  active: boolean;
  onConnect: (input: { serverUrl: string; username: string; password: string }) => Promise<void>;
  onDisconnect: () => void;
}) {
  const [serverUrl, setServerUrl] = useState('');
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [busy, setBusy] = useState(false);
  return (
    <View style={styles.connectionColumn}>
      <View style={styles.connection}>
        <View style={{ flex: 1 }}>
          <ServiceName service="jellyfin" />
          {status}
        </View>
        {active && <Button small title="Disconnect" onPress={onDisconnect} />}
      </View>
      {!active && (
        <View style={{ gap: space.sm }}>
          <Field
            placeholder="https://jellyfin.example.com"
            value={serverUrl}
            onChangeText={setServerUrl}
            autoCapitalize="none"
            autoCorrect={false}
            keyboardType="url"
          />
          <Field placeholder="Username" value={username} onChangeText={setUsername} autoCapitalize="none" autoCorrect={false} />
          <Field placeholder="Password" value={password} onChangeText={setPassword} secureTextEntry />
          <Button
            small
            variant="primary"
            title="Connect"
            loading={busy}
            disabled={!serverUrl.trim() || !username.trim()}
            style={{ alignSelf: 'flex-start' }}
            onPress={async () => {
              setBusy(true);
              await onConnect({ serverUrl: serverUrl.trim(), username: username.trim(), password });
              setPassword('');
              setBusy(false);
            }}
          />
        </View>
      )}
    </View>
  );
}

/** This build's version, and checking for a newer one (our own APKs; F-Droid updates its builds itself). */
function AppVersion() {
  const state = useUpdateState();
  if (!updaterAvailable) return null;
  const status = (() => {
    switch (state.status) {
      case 'checking':
        return 'Checking for updates…';
      case 'upToDate':
        return 'Up to date.';
      case 'downloading':
        return `Downloading ${state.update.version}… ${Math.round(state.progress * 100)}%`;
      case 'ready':
        return `Version ${state.update.version} is ready to install.`;
      case 'installing':
        return `Installing ${state.update.version}…`;
      case 'error':
        return state.message;
      default:
        return null;
    }
  })();
  return (
    <Card>
      <Heading>App version {currentVersion()}</Heading>
      {status && (
        <Body muted style={styles.small}>
          {status}
        </Body>
      )}
      {state.status === 'ready' || state.status === 'installing' ? (
        <Button
          small
          variant="primary"
          title="Install update"
          disabled={state.status === 'installing'}
          onPress={() => installUpdate(true)}
          style={{ alignSelf: 'flex-start' }}
        />
      ) : (
        <Button
          small
          title="Check for updates"
          loading={state.status === 'checking' || state.status === 'downloading'}
          onPress={() => checkForUpdate({ force: true })}
          style={{ alignSelf: 'flex-start' }}
        />
      )}
    </Card>
  );
}

function Account() {
  const { me, setMe, signOut } = useSession();
  const resend = async () => {
    try {
      await api.resendVerification();
      Alert.alert('Sent', `We sent a new link to ${me?.email}.`);
    } catch (err) {
      showError(err);
    }
  };
  const cancelChange = async () => {
    try {
      setMe(await api.cancelEmailChange());
    } catch (err) {
      showError(err);
    }
  };
  const confirmDelete = () =>
    Alert.alert('Delete your account?', 'This permanently removes your profile, follows and connected services.', [
      { text: 'Cancel', style: 'cancel' },
      {
        text: 'Delete',
        style: 'destructive',
        onPress: async () => {
          try {
            await api.deleteAccount();
            await signOut();
          } catch (err) {
            showError(err);
          }
        },
      },
    ]);
  const email = () =>
    Alert.alert(
      me?.email ?? 'Email',
      me?.pendingEmail
        ? `Changing to ${me.pendingEmail}: open the link we sent there.`
        : me?.emailVerified
          ? 'Confirmed.'
          : 'Not confirmed yet. Open the link we emailed you.',
      [
        { text: 'Change email', onPress: () => router.push('/change-email') },
        ...(me?.pendingEmail
          ? [{ text: 'Cancel the change', onPress: cancelChange }]
          : !me?.emailVerified
            ? [{ text: 'Send the link again', onPress: resend }]
            : []),
        { text: 'Close', style: 'cancel' as const },
      ],
    );
  const confirmSignOut = () =>
    Alert.alert('Log out?', undefined, [
      { text: 'Cancel', style: 'cancel' },
      { text: 'Log out', onPress: signOut },
    ]);
  return (
    <Card style={{ gap: 0 }}>
      <Heading style={{ marginBottom: space.sm }}>Account</Heading>
      <ListRow first label="Email" value={me?.emailVerified ? me.email : `${me?.email ?? ''} · not confirmed`} onPress={email} />
      <ListRow label="Password" value="Change" onPress={() => router.push('/change-password')} />
      <ListRow label="Blocked accounts" onPress={() => router.push('/blocked')} />
      <ListRow label="Privacy policy" onPress={() => Linking.openURL(`${WEB_URL}/privacy`)} />
      <ListRow label="Terms of use" onPress={() => Linking.openURL(`${WEB_URL}/terms`)} />
      <ListRow label="Log out" onPress={confirmSignOut} />
      <ListRow label="Delete account" danger onPress={confirmDelete} />
      <Body muted style={[styles.small, { marginTop: space.sm }]}>
        Signed in as @{me?.username}
      </Body>
    </Card>
  );
}

const styles = StyleSheet.create({
  small: { fontSize: 13 },
  avatarRow: { flexDirection: 'row', alignItems: 'center', gap: space.lg },
  connection: { flexDirection: 'row', alignItems: 'center', gap: space.md },
  connectionColumn: {
    gap: space.sm,
    borderTopWidth: StyleSheet.hairlineWidth,
    borderTopColor: colors.border,
    paddingTop: space.md,
  },
  result: { flexDirection: 'row', alignItems: 'center', gap: space.md, paddingVertical: space.xs },
  resultText: { color: colors.text, flex: 1, fontSize: 14 },
  thumb: { width: 40, height: 40, borderRadius: radius.sm },
});