/**
 * Analytics dashboard — KPIs, charts, performance overview.
 * Sisu replacement: GCI, conversion rates, pipeline stats.
 */

import React, { useEffect, useState, useCallback } from 'react';
import {
  View,
  Text,
  StyleSheet,
  ScrollView,
  RefreshControl,
} from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { useTheme } from '../../themes/ThemeProvider';
import KPIWidget from '../../components/KPIWidget';
import { getKPIs, getCommissionForecast, KPIData } from '../../services/api';

interface ForecastData {
  forecast_30_day: number;
  forecast_60_day: number;
  forecast_90_day: number;
  pipeline_value: number;
}

export default function AnalyticsDashboard() {
  const { theme } = useTheme();
  const [kpis, setKPIs] = useState<KPIData | null>(null);
  const [forecast, setForecast] = useState<ForecastData | null>(null);
  const [refreshing, setRefreshing] = useState(false);

  const load = useCallback(async () => {
    const [kpiRes, forecastRes] = await Promise.allSettled([
      getKPIs(),
      getCommissionForecast(),
    ]);
    if (kpiRes.status === 'fulfilled' && kpiRes.value.data) setKPIs(kpiRes.value.data);
    if (forecastRes.status === 'fulfilled' && forecastRes.value.data) setForecast(forecastRes.value.data as ForecastData);
  }, []);

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

  const onRefresh = useCallback(async () => {
    setRefreshing(true);
    await load();
    setRefreshing(false);
  }, [load]);

  const fmt = (val: number): string => {
    if (val >= 1_000_000) return `$${(val / 1_000_000).toFixed(1)}M`;
    if (val >= 1_000) return `$${(val / 1_000).toFixed(0)}K`;
    return `$${val.toLocaleString()}`;
  };

  return (
    <SafeAreaView style={[styles.safe, { backgroundColor: theme.colors.background }]} edges={['bottom']}>
      <ScrollView
        refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} tintColor={theme.colors.primary} />}
      >
        {kpis && (
          <>
            <Text style={[styles.sectionTitle, { color: theme.colors.text }]}>Income</Text>
            <View style={styles.kpiGrid}>
              <KPIWidget label="GCI MTD" value={fmt(kpis.gci_mtd)} size="lg" />
              <KPIWidget label="GCI YTD" value={fmt(kpis.gci_ytd)} size="lg" />
            </View>

            <Text style={[styles.sectionTitle, { color: theme.colors.text }]}>Activity</Text>
            <View style={styles.kpiGrid}>
              <KPIWidget label="Deals Closed MTD" value={kpis.deals_closed_mtd} />
              <KPIWidget label="Deals Closed YTD" value={kpis.deals_closed_ytd} />
              <KPIWidget label="Pending" value={kpis.deals_pending} />
              <KPIWidget label="Active Listings" value={kpis.listings_active} />
            </View>

            <Text style={[styles.sectionTitle, { color: theme.colors.text }]}>Lead Performance</Text>
            <View style={styles.kpiGrid}>
              <KPIWidget label="Leads MTD" value={kpis.leads_mtd} />
              <KPIWidget label="Conversion" value={`${(kpis.conversion_rate * 100).toFixed(1)}%`} />
              <KPIWidget label="Showings MTD" value={kpis.showings_mtd} />
              <KPIWidget label="Avg DOM" value={kpis.avg_days_on_market} suffix=" days" />
            </View>
          </>
        )}

        {forecast && (
          <>
            <Text style={[styles.sectionTitle, { color: theme.colors.text }]}>GCI Forecast</Text>
            <View style={styles.kpiGrid}>
              <KPIWidget label="30-Day" value={fmt(forecast.forecast_30_day)} />
              <KPIWidget label="60-Day" value={fmt(forecast.forecast_60_day)} />
              <KPIWidget label="90-Day" value={fmt(forecast.forecast_90_day)} />
              <KPIWidget label="Pipeline" value={fmt(forecast.pipeline_value)} />
            </View>
          </>
        )}

        <View style={styles.bottomPad} />
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  safe: { flex: 1 },
  sectionTitle: { fontSize: 18, fontWeight: '700', paddingHorizontal: 16, paddingTop: 20, paddingBottom: 10 },
  kpiGrid: { flexDirection: 'row', flexWrap: 'wrap', paddingHorizontal: 12, gap: 10 },
  bottomPad: { height: 40 },
});