import React, { useEffect, useState } from 'react';
import { View, StyleSheet, ActivityIndicator, Text, ScrollView } from 'react-native';
import { useLocalSearchParams } from 'expo-router';
import { apiClient } from '@/api/client';
import { Deal } from '@/models/Deal';
import { DealCard } from '@/components/DealCard';

export default function DealDetailScreen() {
  const { id } = useLocalSearchParams<{ id: string }>();
  const [deal, setDeal] = useState<Deal | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    async function loadDeal() {
      if (!id) return;

      try {
        setLoading(true);
        const fetchedDeal = await apiClient.getDealById(id);
        setDeal(fetchedDeal);
        setError(null);
      } catch (err) {
        setError('Failed to load deal details.');
        console.error('Failed to fetch deal:', err);
      } finally {
        setLoading(false);
      }
    }

    loadDeal();
  }, [id]);

  if (loading) {
    return (
      <View style={styles.centerContainer}>
        <ActivityIndicator size="large" color="#ff9500" />
      </View>
    );
  }

  if (error || !deal) {
    return (
      <View style={styles.centerContainer}>
        <Text style={styles.errorText}>{error || 'Deal not found'}</Text>
      </View>
    );
  }

  return (
    <ScrollView style={styles.container} contentContainerStyle={styles.content}>
      <DealCard deal={deal} />
      <View style={styles.disclaimer}>
        <Text style={styles.disclaimerText}>
          Prices and availability are subject to change. Verified at Amazon.
        </Text>
      </View>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  content: {
    padding: 20,
  },
  centerContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#fff',
  },
  errorText: {
    fontSize: 16,
    color: '#e63946',
    textAlign: 'center',
    paddingHorizontal: 40,
  },
  disclaimer: {
    marginTop: 20,
    padding: 16,
    backgroundColor: '#f9f9f9',
    borderRadius: 8,
  },
  disclaimerText: {
    fontSize: 12,
    color: '#666',
    textAlign: 'center',
    lineHeight: 18,
  },
});