import React from "react";
import { FlatList, ScrollView, StyleSheet, Text, View } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";

export type Corrida = {
  id: string;
  data: string;
  empresa: string;
  km: number;
  custoPorKm: number;
  total: number;
  usuario: string;
};

interface HistoricoProps {
  historico: Corrida[];
}

const HistoricoItem = ({ item, index }: { item: Corrida; index: number }) => (
  <View style={styles.item}>
    <View style={styles.itemHeader}>
      <Text style={styles.itemNumber}>#{index + 1}</Text>
      <Text style={styles.itemDate}>{item.data}</Text>
    </View>

    <View style={styles.itemEmpresa}>
      <Text style={styles.empresaLabel}>{item.empresa}</Text>
    </View>

    <View style={styles.itemDetails}>
      <View style={styles.detailBox}>
        <Text style={styles.detailLabel}>Distância</Text>
        <Text style={styles.detailValue}>{item.km} km</Text>
      </View>

      <View style={styles.detailBox}>
        <Text style={styles.detailLabel}>Valor/km</Text>
        <Text style={styles.detailValue}>R$ {item.custoPorKm.toFixed(2)}</Text>
      </View>

      <View style={styles.detailBox}>
        <Text style={styles.detailLabel}>Total</Text>
        <Text style={styles.detailValue}>R$ {item.total.toFixed(2)}</Text>
      </View>
    </View>
  </View>
);

export default function Historico({ historico }: HistoricoProps) {
  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.header}>
        <Text style={styles.title}>Histórico de Corridas</Text>
        <Text style={styles.subtitle}>
          {historico.length} corrida{historico.length !== 1 ? "s" : ""}
        </Text>
      </View>

      {historico.length === 0 ? (
        <ScrollView contentContainerStyle={styles.emptyContainer}>
          <View style={styles.emptyBox}>
            <Text style={styles.emptyEmoji}>🚗</Text>
            <Text style={styles.emptyTitle}>Nenhuma corrida registrada</Text>
            <Text style={styles.emptyText}>Suas corridas aparecerão aqui</Text>
          </View>
        </ScrollView>
      ) : (
        <FlatList
          data={historico}
          keyExtractor={(item) => item.id}
          renderItem={({ item, index }) => (
            <HistoricoItem item={item} index={index} />
          )}
          contentContainerStyle={styles.listContent}
          showsVerticalScrollIndicator={false}
        />
      )}
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#ffffff",
  },
  header: {
    paddingHorizontal: 16,
    paddingTop: 16,
    paddingBottom: 24,
    backgroundColor: "#ffffff",
    borderBottomWidth: 2,
    borderBottomColor: "#000000",
  },
  title: {
    fontSize: 28,
    fontWeight: "800",
    color: "#000000",
    marginBottom: 4,
  },
  subtitle: {
    fontSize: 14,
    color: "#333333",
  },
  listContent: {
    padding: 16,
    paddingBottom: 32,
  },
  item: {
    backgroundColor: "#ffffff",
    borderRadius: 12,
    marginBottom: 12,
    overflow: "hidden",
    borderWidth: 1,
    borderColor: "#000000",
  },
  itemHeader: {
    flexDirection: "row",
    paddingHorizontal: 16,
    paddingTop: 12,
    paddingBottom: 8,
    justifyContent: "space-between",
    alignItems: "center",
    borderBottomWidth: 1,
    borderBottomColor: "#e0e0e0",
  },
  itemNumber: {
    fontSize: 12,
    fontWeight: "700",
    color: "#000000",
  },
  itemDate: {
    fontSize: 12,
    color: "#666666",
  },
  itemEmpresa: {
    paddingHorizontal: 16,
    paddingVertical: 10,
    backgroundColor: "#f5f5f5",
  },
  empresaLabel: {
    fontSize: 14,
    fontWeight: "600",
    color: "#000000",
  },
  itemDetails: {
    flexDirection: "row",
    paddingHorizontal: 16,
    paddingVertical: 12,
    gap: 8,
  },
  detailBox: {
    flex: 1,
    paddingVertical: 8,
  },
  detailLabel: {
    fontSize: 11,
    color: "#666666",
    fontWeight: "500",
    marginBottom: 2,
  },
  detailValue: {
    fontSize: 14,
    fontWeight: "700",
    color: "#000000",
  },
  emptyContainer: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    padding: 16,
  },
  emptyBox: {
    alignItems: "center",
  },
  emptyEmoji: {
    fontSize: 48,
    marginBottom: 16,
  },
  emptyTitle: {
    fontSize: 18,
    fontWeight: "600",
    color: "#000000",
    marginBottom: 8,
  },
  emptyText: {
    fontSize: 14,
    color: "#666666",
    textAlign: "center",
  },
});