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

import type { Quest } from '../types';

// ─────────────────────────────────────────────────────────────────────────────
// Props
// ─────────────────────────────────────────────────────────────────────────────

interface QuestProgressProps {
  quest: Quest;
  primaryColor?: string;
  backgroundColor?: string;
  style?: object;
}

// ─────────────────────────────────────────────────────────────────────────────
// Component
// ─────────────────────────────────────────────────────────────────────────────

export function QuestProgress({
  quest,
  primaryColor = '#6366F1',
  backgroundColor = '#E5E7EB',
  style,
}: QuestProgressProps) {
  const progressPercent = quest.target > 0 ? (quest.progress / quest.target) * 100 : 0;
  const isCompleted = quest.status === 'completed';

  return (
    <View style={[styles.container, style]}>
      <View style={styles.header}>
        <Text style={styles.name}>{quest.name}</Text>
        {isCompleted && <Text style={styles.completedBadge}>✓</Text>}
      </View>

      <Text style={styles.description}>{quest.description}</Text>

      <View style={[styles.progressBar, { backgroundColor }]}>
        <View
          style={[
            styles.progressFill,
            {
              backgroundColor: isCompleted ? '#10B981' : primaryColor,
              width: `${Math.min(progressPercent, 100)}%`,
            },
          ]}
        />
      </View>

      <View style={styles.footer}>
        <Text style={styles.progressText}>
          {quest.progress} / {quest.target}
        </Text>
        <Text style={styles.percentText}>{Math.round(progressPercent)}%</Text>
      </View>

      {quest.rewards && quest.rewards.length > 0 && (
        <View style={styles.rewards}>
          <Text style={styles.rewardLabel}>Rewards:</Text>
          {quest.rewards.map((reward, idx) => (
            <Text key={idx} style={styles.rewardText}>
              {reward.type === 'points' && `${reward.amount} ${reward.currency}`}
              {reward.type === 'badge' && `🏅 Badge`}
              {reward.type === 'reward' && `🎁 Reward`}
            </Text>
          ))}
        </View>
      )}
    </View>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// Styles
// ─────────────────────────────────────────────────────────────────────────────

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#FFFFFF',
    borderRadius: 12,
    padding: 16,
    marginVertical: 8,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3,
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 4,
  },
  name: {
    fontSize: 16,
    fontWeight: '600',
    color: '#1F2937',
  },
  completedBadge: {
    fontSize: 18,
    color: '#10B981',
  },
  description: {
    fontSize: 14,
    color: '#6B7280',
    marginBottom: 12,
  },
  progressBar: {
    height: 8,
    borderRadius: 4,
    overflow: 'hidden',
  },
  progressFill: {
    height: '100%',
    borderRadius: 4,
  },
  footer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginTop: 8,
  },
  progressText: {
    fontSize: 12,
    color: '#6B7280',
  },
  percentText: {
    fontSize: 12,
    fontWeight: '600',
    color: '#1F2937',
  },
  rewards: {
    flexDirection: 'row',
    alignItems: 'center',
    marginTop: 12,
    paddingTop: 12,
    borderTopWidth: 1,
    borderTopColor: '#E5E7EB',
  },
  rewardLabel: {
    fontSize: 12,
    color: '#6B7280',
    marginRight: 8,
  },
  rewardText: {
    fontSize: 12,
    color: '#1F2937',
    marginRight: 8,
  },
});

export default QuestProgress;