carry-your-live/carry-your-live/src/components/UpdateNotifier.tsx

import { useEffect, useState, useCallback } from 'react';
import { Modal, View, Text, StyleSheet, Pressable, ScrollView, Platform } from 'react-native';
import {
  checkForUpdates,
  wasPromptedFor,
  markPrompted,
  downloadAPK,
  installAPK,
  openReleaseUrl,
  AppUpdate,
} from '@/services/updates';
import { useSettings } from '@/theme';

export function UpdateNotifier() {
  const { theme } = useSettings();
  const [update, setUpdate] = useState<AppUpdate | null>(null);
  const [visible, setVisible] = useState(false);
  const [downloading, setDownloading] = useState(false);
  const [downloadProgress, setDownloadProgress] = useState(0);
  const [downloadError, setDownloadError] = useState<string | null>(null);

  const checkUpdate = useCallback(async () => {
    const available = await checkForUpdates();
    if (!available) return;

    const prompted = await wasPromptedFor(available.tagName);
    if (prompted && !available.mandatory) return;

    setUpdate(available);
    setVisible(true);
  }, []);

  useEffect(() => {
    checkUpdate();
  }, [checkUpdate]);

  const handleDownload = async () => {
    if (!update?.apkUrl) {
      await openReleaseUrl(update?.releaseUrl ?? '');
      return;
    }

    setDownloading(true);
    setDownloadProgress(0);
    setDownloadError(null);

    try {
      const uri = await downloadAPK(update.apkUrl, setDownloadProgress);
      if (uri) {
        const installed = await installAPK(uri);
        if (!installed) {
          setDownloadError('Failed to open installer. Please install manually from Downloads.');
        }
      } else {
        setDownloadError('Download failed. Please try again or download from the release page.');
      }
    } catch (error) {
      setDownloadError('An error occurred during download.');
    } finally {
      setDownloading(false);
    }
  };

  const handleLater = async () => {
    if (update) {
      await markPrompted(update.tagName);
    }
    setVisible(false);
  };

  const handleReleasePage = async () => {
    if (update) {
      await openReleaseUrl(update.releaseUrl);
    }
  };

  if (!visible || !update) return null;

  const isMandatory = update.mandatory;

  return (
    <Modal
      visible={visible}
      transparent
      animationType="fade"
      onRequestClose={isMandatory ? () => {} : handleLater}
    >
      <View style={[styles.overlay, { backgroundColor: theme.overlay }]}>
        <View style={[styles.modal, { backgroundColor: theme.card }]}>
          <View style={[styles.header, { borderBottomColor: theme.border }]}>
            <Text style={[styles.title, { color: theme.text }]}>Update Available</Text>
            <Text style={[styles.version, { color: theme.textSecondary }]}>
              Version {update.version}
            </Text>
          </View>

          <ScrollView style={styles.content} contentContainerStyle={styles.contentContainer}>
            <Text style={[styles.sectionTitle, { color: theme.text }]}>What's New</Text>
            <Text style={[styles.notes, { color: theme.textSecondary }]}>
              {update.notes || 'No release notes provided.'}
            </Text>

            {isMandatory && (
              <View style={styles.mandatoryBadge}>
                <Text style={styles.mandatoryText}>Mandatory Update</Text>
              </View>
            )}

            {downloading && (
              <View style={styles.progressContainer}>
                <View style={[styles.progressBar, { backgroundColor: theme.border }]}>
                  <View
                    style={[
                      styles.progressFill,
                      { backgroundColor: theme.accent, width: `${downloadProgress * 100}%` },
                    ]}
                  />
                </View>
                <Text style={[styles.progressText, { color: theme.textSecondary }]}>
                  Downloading... {Math.round(downloadProgress * 100)}%
                </Text>
              </View>
            )}

            {downloadError && (
              <View style={styles.errorContainer}>
                <Text style={styles.errorText}>{downloadError}</Text>
                <Pressable style={styles.errorAction} onPress={handleDownload}>
                  <Text style={styles.errorActionText}>Retry Download</Text>
                </Pressable>
              </View>
            )}
          </ScrollView>

          <View style={[styles.actions, { borderTopColor: theme.border }]}>
            {!isMandatory && (
              <Pressable
                style={[styles.button, styles.buttonSecondary, { backgroundColor: theme.cardAlt }]}
                onPress={handleLater}
              >
                <Text style={[styles.buttonText, { color: theme.textSecondary }]}>Later</Text>
              </Pressable>
            )}

            <Pressable
              style={[
                styles.button,
                styles.buttonPrimary,
                { backgroundColor: theme.accent, opacity: downloading ? 0.7 : 1 },
              ]}
              onPress={handleDownload}
              disabled={downloading}
            >
              <Text style={[styles.buttonText, { color: theme.accentText }]}>
                {downloading
                  ? 'Downloading...'
                  : update.apkUrl
                    ? 'Download & Install'
                    : 'View Release'}
              </Text>
            </Pressable>

            <Pressable
              style={[styles.button, styles.buttonGhost, { backgroundColor: 'transparent' }]}
              onPress={handleReleasePage}
            >
              <Text style={[styles.buttonText, { color: theme.textSecondary }]}>Release Notes</Text>
            </Pressable>
          </View>
        </View>
      </View>
    </Modal>
  );
}

const styles = StyleSheet.create({
  overlay: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  modal: {
    width: '100%',
    maxWidth: 480,
    borderRadius: 20,
    overflow: 'hidden',
    maxHeight: '85%',
  },
  header: {
    padding: 20,
    borderBottomWidth: 1,
  },
  title: {
    fontSize: 20,
    fontWeight: '700',
    marginBottom: 4,
  },
  version: {
    fontSize: 14,
  },
  content: {
    maxHeight: 300,
  },
  contentContainer: {
    padding: 20,
    paddingBottom: 12,
  },
  sectionTitle: {
    fontSize: 14,
    fontWeight: '600',
    marginBottom: 8,
    textTransform: 'uppercase',
    letterSpacing: 0.5,
  },
  notes: {
    fontSize: 14,
    lineHeight: 22,
  },
  mandatoryBadge: {
    marginTop: 12,
    paddingHorizontal: 12,
    paddingVertical: 6,
    borderRadius: 8,
    backgroundColor: '#FFEBEE',
    alignSelf: 'flex-start',
  },
  mandatoryText: {
    fontSize: 12,
    fontWeight: '600',
    color: '#C62828',
  },
  progressContainer: {
    marginTop: 16,
  },
  progressBar: {
    height: 6,
    borderRadius: 3,
    overflow: 'hidden',
  },
  progressFill: {
    height: '100%',
    borderRadius: 3,
  },
  progressText: {
    fontSize: 12,
    marginTop: 6,
    textAlign: 'center',
  },
  errorContainer: {
    marginTop: 16,
    padding: 12,
    borderRadius: 8,
    backgroundColor: '#FFF3E0',
  },
  errorText: {
    fontSize: 13,
    color: '#E65100',
    marginBottom: 8,
  },
  errorAction: {
    paddingVertical: 8,
    paddingHorizontal: 16,
    borderRadius: 6,
    backgroundColor: '#FF9800',
    alignSelf: 'flex-start',
  },
  errorActionText: {
    fontSize: 13,
    fontWeight: '600',
    color: '#FFF',
  },
  actions: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'flex-end',
    gap: 8,
    padding: 16,
    borderTopWidth: 1,
  },
  button: {
    paddingVertical: 10,
    paddingHorizontal: 20,
    borderRadius: 10,
    minWidth: 100,
    alignItems: 'center',
  },
  buttonPrimary: {},
  buttonSecondary: {},
  buttonGhost: {},
  buttonText: {
    fontSize: 14,
    fontWeight: '600',
  },
});