import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

interface PipelineCardsData {
  label: string;
  value: number;
  color: string;
}

interface PipelineCardsProps {
  data: PipelineCardsData[];
  colors: any;
  fonts: any;
}

const PipelineCards: React.FC<PipelineCardsProps> = ({ 
  data, 
  colors, 
  fonts 
}) => {
  const total = data.reduce((sum, item) => sum + item.value, 0);
  const maxValue = Math.max(...data.map(item => item.value));
  
  if (total === 0) {
    return (
      <View style={styles.container}>
        <Text style={[styles.noDataText, { color: colors.textLight, fontFamily: fonts.regular }]}>
          No Pipeline Data
        </Text>
      </View>
    );
  }

  return (
    <View style={styles.container}>
      {data.map((stage, index) => {
        const percentage = total > 0 ? (stage.value / total) * 100 : 0;
        const progressWidth = maxValue > 0 ? (stage.value / maxValue) * 100 : 0;
        
        return (
          <View key={index} style={[styles.stageCard, { backgroundColor: colors.surface, borderColor: colors.border }]}>
            {/* Stage Header */}
            <View style={styles.stageHeader}>
              <View style={styles.stageInfo}>
                <View style={[styles.stageIndicator, { backgroundColor: stage.color }]} />
                <Text style={[styles.stageLabel, { color: colors.text, fontFamily: fonts.medium }]}>
                  {stage.label}
                </Text>
              </View>
              <View style={styles.stageStats}>
                <Text style={[styles.stageValue, { color: colors.text, fontFamily: fonts.bold }]}>
                  {stage.value}
                </Text>
                <Text style={[styles.stagePercentage, { color: colors.textLight, fontFamily: fonts.regular }]}>
                  {percentage.toFixed(1)}%
                </Text>
              </View>
            </View>
            
            {/* Progress Bar */}
            <View style={[styles.progressContainer, { backgroundColor: colors.border }]}>
              <View 
                style={[
                  styles.progressBar, 
                  { 
                    width: `${progressWidth}%`,
                    backgroundColor: stage.color
                  }
                ]} 
              />
            </View>
            
            {/* Stage Details */}
            <View style={styles.stageDetails}>
              <View style={styles.detailItem}>
                <Text style={[styles.detailLabel, { color: colors.textLight, fontFamily: fonts.regular }]}>
                  Deals
                </Text>
                <Text style={[styles.detailValue, { color: colors.text, fontFamily: fonts.bold }]}>
                  {stage.value}
                </Text>
              </View>
              <View style={styles.detailItem}>
                <Text style={[styles.detailLabel, { color: colors.textLight, fontFamily: fonts.regular }]}>
                  Pipeline %
                </Text>
                <Text style={[styles.detailValue, { color: colors.text, fontFamily: fonts.bold }]}>
                  {percentage.toFixed(1)}%
                </Text>
              </View>
              <View style={styles.detailItem}>
                <Text style={[styles.detailLabel, { color: colors.textLight, fontFamily: fonts.regular }]}>
                  Rank
                </Text>
                <Text style={[styles.detailValue, { color: stage.color, fontFamily: fonts.bold }]}>
                  #{index + 1}
                </Text>
              </View>
            </View>
          </View>
        );
      })}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    paddingVertical: 8,
  },
  noDataText: {
    fontSize: 14,
    textAlign: 'center',
    fontStyle: 'italic',
    paddingVertical: 20,
  },
  stageCard: {
    borderRadius: 12,
    borderWidth: 1,
    padding: 16,
    marginBottom: 12,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3,
  },
  stageHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 12,
  },
  stageInfo: {
    flexDirection: 'row',
    alignItems: 'center',
    flex: 1,
  },
  stageIndicator: {
    width: 12,
    height: 12,
    borderRadius: 6,
    marginRight: 10,
  },
  stageLabel: {
    fontSize: 16,
    fontWeight: '600',
    flex: 1,
  },
  stageStats: {
    alignItems: 'flex-end',
  },
  stageValue: {
    fontSize: 20,
    fontWeight: 'bold',
  },
  stagePercentage: {
    fontSize: 12,
    marginTop: 2,
  },
  progressContainer: {
    height: 8,
    borderRadius: 4,
    marginBottom: 12,
    overflow: 'hidden',
  },
  progressBar: {
    height: '100%',
    borderRadius: 4,
  },
  stageDetails: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  detailItem: {
    alignItems: 'center',
    flex: 1,
  },
  detailLabel: {
    fontSize: 11,
    marginBottom: 4,
  },
  detailValue: {
    fontSize: 14,
    fontWeight: 'bold',
  },
});

export default PipelineCards;