import React from 'react';
import { View, Text, Image, StyleSheet, TouchableOpacity } from 'react-native';
import { Card } from './Card';
import { Badge } from './Badge';
import { colors, spacing, typography, borderRadius } from '../lib/theme';
import { formatDate } from '../lib/utils/datetime';
import { Project } from '../types';

export interface ProjectCardProps {
  project: Project;
  onPress: (projectId: string) => void;
  variant?: 'grid' | 'list';
  showStepCount?: boolean;
  stepCount?: number;
}

export const ProjectCard: React.FC<ProjectCardProps> = ({
  project,
  onPress,
  variant = 'grid',
  showStepCount = false,
  stepCount = 0,
}) => {
  const statusVariant = project.status === 'done' ? 'success' : 'info';
  const statusText = project.status === 'in_progress' ? 'In Progress' : 'Done';

  return (
    <TouchableOpacity
      onPress={() => onPress(project.id)}
      accessibilityRole="button"
      accessibilityLabel={`Open project ${project.title}`}
      style={variant === 'grid' ? styles.gridCard : styles.listCard}
    >
      <Card>
        {/* Cover Image */}
        {project.coverImageUri ? (
          <View style={styles.imageContainer}>
            <Image
              source={{ uri: project.coverImageUri }}
              style={styles.coverImage}
              accessibilityLabel={`Cover image for ${project.title}`}
            />
            {showStepCount && stepCount > 0 && (
              <View style={styles.stepBadge}>
                <Text style={styles.stepBadgeText}>{stepCount} steps</Text>
              </View>
            )}
          </View>
        ) : (
          <View style={[styles.coverImage, styles.placeholderImage]}>
            <Text style={styles.placeholderIcon}>🏺</Text>
          </View>
        )}

        {/* Card Content */}
        <Card.Content>
          <Card.Title>{project.title}</Card.Title>

          <View style={styles.meta}>
            <Badge variant={statusVariant} size="sm">
              {statusText}
            </Badge>
          </View>

          {/* Tags */}
          {project.tags.length > 0 && (
            <View style={styles.tags}>
              {project.tags.slice(0, 3).map((tag, index) => (
                <Badge key={index} variant="default" size="sm">
                  {tag}
                </Badge>
              ))}
              {project.tags.length > 3 && (
                <Text style={styles.moreTagsText}>
                  +{project.tags.length - 3}
                </Text>
              )}
            </View>
          )}
        </Card.Content>

        {/* Card Footer */}
        <Card.Footer>
          <Text style={styles.date}>
            {formatDate(project.updatedAt)}
          </Text>
        </Card.Footer>
      </Card>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  gridCard: {
    flex: 1,
    marginBottom: spacing.md,
  },
  listCard: {
    marginBottom: spacing.md,
  },
  imageContainer: {
    position: 'relative',
    marginBottom: spacing.md,
  },
  coverImage: {
    width: '100%',
    height: 150,
    borderRadius: borderRadius.md,
    backgroundColor: colors.backgroundSecondary,
    borderWidth: 2,
    borderColor: colors.border,
  },
  placeholderImage: {
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: colors.borderLight,
  },
  placeholderIcon: {
    fontSize: 48,
    opacity: 0.5,
  },
  stepBadge: {
    position: 'absolute',
    top: spacing.md,
    right: spacing.md,
    backgroundColor: colors.primary,
    paddingHorizontal: spacing.md,
    paddingVertical: spacing.sm,
    borderRadius: borderRadius.full,
    borderWidth: 2,
    borderColor: colors.primaryDark,
  },
  stepBadgeText: {
    fontSize: typography.fontSize.xs,
    fontWeight: typography.fontWeight.bold,
    color: colors.background,
    letterSpacing: 0.5,
    textTransform: 'uppercase',
  },
  meta: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  tags: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    gap: spacing.xs,
    marginTop: spacing.xs,
  },
  moreTagsText: {
    fontSize: typography.fontSize.xs,
    color: colors.textSecondary,
    alignSelf: 'center',
  },
  date: {
    fontSize: typography.fontSize.xs,
    color: colors.textSecondary,
    fontWeight: typography.fontWeight.medium,
  },
});
