import { useTheme } from '@/components/ThemeContext';
import React, { Dispatch, forwardRef, SetStateAction } from 'react';
import { useTranslation } from 'react-i18next';
import { ScrollView, StyleSheet, Text, View } from 'react-native';
import { CreateAdsResponse } from '../lib/types';

type StepFourProps = {
  setPayment: Dispatch<SetStateAction<'PAYME' | 'REFFERAL'>>;
  data: CreateAdsResponse | null;
};

const StepFour = forwardRef(({ data }: StepFourProps) => {
  const { isDark } = useTheme();
  const { t } = useTranslation();

  const theme = {
    background: isDark ? '#0f172a' : '#ffffff',
    cardBg: isDark ? '#1e293b' : '#f8fafc',
    cardBorder: isDark ? '#334155' : '#e2e8f0',
    text: isDark ? '#f8fafc' : '#0f172a',
    textSecondary: isDark ? '#cbd5e1' : '#64748b',
    totalPrice: isDark ? '#f87171' : '#ef4444',
  };

  const totalPrice = data?.data.total_price || 0;

  return (
    <>
      <ScrollView
        contentContainerStyle={[styles.container, { backgroundColor: theme.background }]}
        showsVerticalScrollIndicator={false}
      >
        <Text style={[styles.sectionTitle, { color: theme.text }]}>
          {t("To'lov uchun ma'lumotlar")}
        </Text>

        <View
          style={[styles.card, { backgroundColor: theme.cardBg, borderColor: theme.cardBorder }]}
        >
          <Text style={[styles.label, { color: theme.text }]}>
            {t("E'lon nomi")}: <Text style={styles.value}>{data?.data.title}</Text>
          </Text>
          <Text style={[styles.label, { color: theme.text }]}>
            {t("E'lon tavsifi")}: <Text style={styles.value}>{data?.data.description}</Text>
          </Text>
          <Text style={[styles.label, styles.total, { color: theme.totalPrice }]}>
            {t('Umumiy narx')}:{' '}
            <Text style={styles.value}>
              {totalPrice} {t("so'm")}
            </Text>
          </Text>
        </View>
      </ScrollView>
    </>
  );
});

export default StepFour;

const styles = StyleSheet.create({
  container: { flexGrow: 1 },
  sectionTitle: { fontSize: 18, fontWeight: '700', marginVertical: 12 },
  card: {
    borderRadius: 16,
    padding: 20,
    marginBottom: 20,
    borderWidth: 1,
    gap: 8,
  },
  label: { fontSize: 15, fontWeight: '600' },
  value: { fontWeight: '800' },
  total: { marginTop: 8, fontSize: 16 },
});