import { useState } from 'react';
import { mutate } from 'swr';
import { SERVICE_LABELS } from '@musicshare/shared';
import { SignInError, openSignupPage, signInWithService } from '@/lib/connect';
import { Button } from '../ui';
import { ErrorText, SetupActions, SetupHeader, type SetupProps } from './common';

type Provider = 'plex' | 'lastfm';

/**
 * Sign in to Plex, or to Last.fm for apps that can send plays there.
 * (Spotify has its own SpotifySetup: via Last.fm or ListenBrainz.)
 */
export function ServiceSignInSetup({
  service,
  appName,
  onDone,
  skipLabel,
}: SetupProps & { service: Provider; appName?: string }) {
  const [done, setDone] = useState(false);
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const run = async () => {
    setBusy(true);
    setError(null);
    try {
      if ((await signInWithService(service)) === 'connected') {
        await mutate('/connections');
        setDone(true);
      }
    } catch (err) {
      setError(err instanceof SignInError ? err.message : `Couldn't connect ${SERVICE_LABELS[service]}. Try again.`);
    }
    setBusy(false);
  };

  if (done) {
    return (
      <>
        <SetupHeader
          title="You're all set"
          subtitle={`Play something on ${appName ?? SERVICE_LABELS[service]} and your friends will see it.`}
        />
        <SetupActions primary="Continue" onPrimary={onDone} />
      </>
    );
  }

  if (service === 'lastfm') {
    return (
      <>
        <SetupHeader
          title="Connect Last.fm"
          subtitle={`${appName ?? 'Your app'} doesn’t let other iPhone apps see what’s playing. If it can send plays to Last.fm (TIDAL can, in its settings), sign in to Last.fm and we’ll share them.`}
        />
        <ErrorText>{error}</ErrorText>
        <SetupActions primary="Sign in with Last.fm" loading={busy} onPrimary={run} onSkip={onDone} skipLabel={skipLabel} />
        <Button small title="New to Last.fm? Create an account" onPress={() => openSignupPage('lastfm')} />
      </>
    );
  }

  return (
    <>
      <SetupHeader title="Share what you’re playing" subtitle={`Sign in to ${SERVICE_LABELS[service]} and your friends see what you play.`} />
      <ErrorText>{error}</ErrorText>
      <SetupActions primary={`Connect ${SERVICE_LABELS[service]}`} loading={busy} onPrimary={run} onSkip={onDone} skipLabel={skipLabel} />
    </>
  );
}