import axios from 'axios';
import { useEffect, useMemo, useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { DriverShell } from '../components/driver-shell';
import { API_URL } from '../src/runtime-config';
import { useDriverSession } from '../src/store/session';
import { driverTheme, formatCurrency, formatDateTime } from '../src/lib/driver-ui';
import { extractErrorMessage } from '../src/lib/driver-api';

type FinanceDashboard = {
  grossRevenue: number;
  netRevenue: number;
  pendingPayoutAmount: number;
  paidOrders: number;
  averageTicket: number;
};

type LedgerItem = {
  id: string;
  amount: number | string;
  description: string;
  createdAt: string;
};

export default function DriverEarningsScreen() {
  const { accessToken } = useDriverSession();
  const headers = useMemo(() => (accessToken ? { Authorization: `Bearer ${accessToken}` } : undefined), [accessToken]);
  const [dashboard, setDashboard] = useState<FinanceDashboard | null>(null);
  const [ledger, setLedger] = useState<LedgerItem[]>([]);
  const [error, setError] = useState('');

  useEffect(() => {
    if (!headers) {
      return;
    }

    void Promise.all([
      axios.get<FinanceDashboard>(`${API_URL}/finance/dashboard`, { headers }),
      axios.get<LedgerItem[]>(`${API_URL}/finance/ledger`, { headers }),
    ])
      .then(([dashboardResponse, ledgerResponse]) => {
        setDashboard(dashboardResponse.data);
        setLedger(ledgerResponse.data);
        setError('');
      })
      .catch((requestError) => {
        setError(extractErrorMessage(requestError, 'Falha ao carregar o financeiro do entregador.'));
      });
  }, [headers]);

  return (
    <DriverShell
      eyebrow="Financeiro"
      title="Ganhos claros e sem ruido"
      subtitle="Saldo, repasse pendente e historico de corridas em uma leitura que ajuda o entregador a decidir quando continuar na rua."
    >
      <View style={styles.metrics}>
        <View style={styles.metricCard}>
          <Text style={styles.metricLabel}>Liquido</Text>
          <Text style={styles.metricValue}>{formatCurrency(dashboard?.netRevenue)}</Text>
        </View>
        <View style={styles.metricCard}>
          <Text style={styles.metricLabel}>Pendente</Text>
          <Text style={styles.metricValue}>{formatCurrency(dashboard?.pendingPayoutAmount)}</Text>
        </View>
        <View style={styles.metricCard}>
          <Text style={styles.metricLabel}>Corridas</Text>
          <Text style={styles.metricValue}>{dashboard?.paidOrders ?? 0}</Text>
        </View>
        <View style={styles.metricCard}>
          <Text style={styles.metricLabel}>Ticket medio</Text>
          <Text style={styles.metricValue}>{formatCurrency(dashboard?.averageTicket)}</Text>
        </View>
      </View>

      {error ? <View style={styles.warningCard}><Text style={styles.warningText}>{error}</Text></View> : null}

      <View style={styles.historyCard}>
        <Text style={styles.historyTitle}>Historico de corridas liquidadas</Text>
        <View style={styles.ledgerList}>
          {ledger.length ? ledger.map((item) => (
            <View key={item.id} style={styles.ledgerRow}>
              <View style={styles.ledgerTextBlock}>
                <Text style={styles.ledgerTitle}>{item.description}</Text>
                <Text style={styles.ledgerMeta}>{formatDateTime(item.createdAt)}</Text>
              </View>
              <Text style={styles.ledgerAmount}>{formatCurrency(item.amount)}</Text>
            </View>
          )) : <Text style={styles.emptyText}>Nenhuma corrida liquidada ainda.</Text>}
        </View>
      </View>
    </DriverShell>
  );
}

const styles = StyleSheet.create({
  metrics: { gap: 12 },
  metricCard: {
    borderRadius: 22,
    padding: 18,
    backgroundColor: driverTheme.card,
  },
  metricLabel: {
    fontSize: 11,
    textTransform: 'uppercase',
    letterSpacing: 1.2,
    color: '#64748B',
    fontWeight: '800',
  },
  metricValue: {
    marginTop: 8,
    fontSize: 22,
    color: driverTheme.textDark,
    fontWeight: '900',
  },
  warningCard: {
    borderRadius: 20,
    padding: 14,
    backgroundColor: driverTheme.warningSoft,
  },
  warningText: {
    color: '#92400E',
    fontSize: 13,
    lineHeight: 18,
    fontWeight: '700',
  },
  historyCard: {
    borderRadius: 24,
    padding: 18,
    backgroundColor: driverTheme.card,
  },
  historyTitle: {
    fontSize: 18,
    color: driverTheme.textDark,
    fontWeight: '900',
  },
  ledgerList: { marginTop: 12, gap: 10 },
  ledgerRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    gap: 10,
    paddingTop: 10,
    borderTopWidth: 1,
    borderTopColor: '#E2E8F0',
  },
  ledgerTextBlock: { flex: 1 },
  ledgerTitle: { fontSize: 14, fontWeight: '800', color: driverTheme.textDark },
  ledgerMeta: { marginTop: 4, fontSize: 12, color: '#64748B' },
  ledgerAmount: { fontSize: 15, fontWeight: '900', color: '#0F766E' },
  emptyText: { color: '#64748B', fontSize: 14 },
});