import React, { useState } from 'react';
import { View, Text, StyleSheet, ScrollView, TouchableOpacity, Share, Alert } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
import { ColorPalette, IdentificationResult } from '../types';
import { useColors } from '../constants/Colors';
import { SafeImage } from './SafeImage';

interface ResultCardProps {
  result: IdentificationResult;
  imageUri: string;
  onSave: () => void;
  onClose: () => void;
  t: any;
  isDark: boolean;
  colorPalette: ColorPalette;
  isGuest?: boolean;
}

export const ResultCard: React.FC<ResultCardProps> = ({
  result,
  imageUri,
  onSave,
  onClose,
  t,
  isDark,
  colorPalette,
  isGuest = false,
}) => {
  const colors = useColors(isDark, colorPalette);
  const insets = useSafeAreaInsets();
  const [showDetails, setShowDetails] = useState(false);

  const handleShare = async () => {
    try {
      await Share.share({
        message: `I just identified a ${result.name} (${result.botanicalName}) with ${Math.round(result.confidence * 100)}% confidence using GreenLens!`,
      });
    } catch (error: any) {
      Alert.alert('Error', error.message);
    }
  };

  return (
    <SafeAreaView style={[styles.container, { backgroundColor: colors.background }]} edges={['top', 'bottom']}>
      {/* Header */}
      <View style={[styles.header, { paddingTop: insets.top + 8 }]}>
        <TouchableOpacity
          style={[styles.headerBtn, { backgroundColor: colors.heroButton, borderColor: colors.heroButtonBorder }]}
          onPress={onClose}
        >
          <Ionicons name="arrow-back" size={20} color={colors.text} />
        </TouchableOpacity>
        <View style={[styles.headerBadge, { backgroundColor: colors.heroButton, borderColor: colors.heroButtonBorder }]}>
          <Text style={[styles.headerBadgeText, { color: colors.text }]}>{t.result}</Text>
        </View>
        <TouchableOpacity
          style={[styles.headerBtn, { backgroundColor: colors.heroButton, borderColor: colors.heroButtonBorder }]}
          onPress={handleShare}
        >
          <Ionicons name="share-outline" size={20} color={colors.text} />
        </TouchableOpacity>
      </View>

      <ScrollView
        showsVerticalScrollIndicator={false}
        contentContainerStyle={[
          styles.scrollContent,
          { paddingTop: insets.top + 76, paddingBottom: insets.bottom + 36 },
        ]}
      >
        {/* Hero Image */}
        <View style={[styles.heroContainer, { shadowColor: colors.overlayStrong }]}>
          <SafeImage uri={imageUri} style={styles.heroImage} />
          <View style={[styles.confidenceBadge, { backgroundColor: colors.heroButton }]}>
            <Ionicons name="checkmark-circle" size={14} color={colors.success} />
            <Text style={[styles.confidenceText, { color: colors.success }]}>
              {Math.round(result.confidence * 100)}% {t.match}
            </Text>
          </View>
        </View>

        {/* Info */}
        <Text style={[styles.plantName, { color: colors.text }]}>{result.name}</Text>
        <Text style={[styles.botanical, { color: colors.textMuted }]}>{result.botanicalName}</Text>
        <Text style={[styles.description, { color: colors.textSecondary }]}>
          {result.description || t.noDescription}
        </Text>

        {/* Care Check */}
        <View style={styles.careHeader}>
          <Text style={[styles.sectionTitle, { color: colors.text }]}>{t.careCheck}</Text>
          <TouchableOpacity onPress={() => setShowDetails(!showDetails)}>
            <Text style={[styles.detailsToggle, { color: colors.primaryDark }]}>
              {showDetails ? t.hideDetails : t.showDetails}
            </Text>
          </TouchableOpacity>
        </View>

        <View style={styles.careGrid}>
          {[
            { icon: 'water' as const, label: t.water, value: result.careInfo.waterIntervalDays <= 7 ? t.waterModerate : t.waterLittle, color: colors.info, bg: colors.infoSoft },
            { icon: 'sunny' as const, label: t.light, value: result.careInfo.light, color: colors.warning, bg: colors.warningSoft },
            { icon: 'thermometer' as const, label: t.temp, value: result.careInfo.temp, color: colors.danger, bg: colors.dangerSoft },
          ].map((item) => (
            <View key={item.label} style={[styles.careCard, { backgroundColor: colors.surface, borderColor: colors.border }]}>
              <View style={[styles.careIcon, { backgroundColor: item.bg }]}>
                <Ionicons name={item.icon} size={16} color={item.color} />
              </View>
              <Text style={[styles.careLabel, { color: colors.textMuted }]}>{item.label}</Text>
              <Text style={[styles.careValue, { color: colors.text }]}>{item.value}</Text>
            </View>
          ))}
        </View>

        {showDetails && (
          <View style={[styles.detailsBox, { backgroundColor: colors.surfaceMuted, borderColor: colors.border }]}>
            <Text style={[styles.detailsTitle, { color: colors.textSecondary }]}>{t.detailedCare}</Text>
            {[
              { text: t.careTextWater.replace('{0}', result.careInfo.waterIntervalDays.toString()), color: colors.success },
              { text: t.careTextLight.replace('{0}', result.careInfo.light), color: colors.warning },
              { text: t.careTextTemp.replace('{0}', result.careInfo.temp), color: colors.danger },
            ].map((item, i) => (
              <View key={i} style={styles.detailRow}>
                <View style={[styles.detailDot, { backgroundColor: item.color }]} />
                <Text style={[styles.detailText, { color: colors.textSecondary }]}>{item.text}</Text>
              </View>
            ))}
          </View>
        )}

        {/* Save */}
        <View style={styles.localInfo}>
          <View style={[styles.localIcon, { borderColor: colors.borderStrong }]} />
          <Text style={[styles.localText, { color: colors.textMuted }]}>{t.dataSavedLocally}</Text>
        </View>

        <TouchableOpacity
          style={[
            styles.saveBtn,
            { backgroundColor: colors.primary, shadowColor: colors.primary },
          ]}
          activeOpacity={0.8}
          onPress={onSave}
        >
          <Ionicons name={isGuest ? "person-add" : "checkmark-circle"} size={16} color={colors.onPrimary} />
          <Text style={[styles.saveBtnText, { color: colors.onPrimary }]}>
            {isGuest ? t.registerToSave : t.addToPlants}
          </Text>
        </TouchableOpacity>
      </ScrollView>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: { flex: 1 },
  header: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    zIndex: 10,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingHorizontal: 20,
  },
  headerBtn: {
    borderRadius: 20,
    padding: 8,
    borderWidth: 1,
  },
  headerBadge: {
    borderRadius: 20,
    paddingHorizontal: 12,
    paddingVertical: 4,
    borderWidth: 1,
  },
  headerBadgeText: { fontWeight: '700', fontSize: 13 },
  scrollContent: { paddingHorizontal: 16 },
  heroContainer: {
    width: '100%',
    aspectRatio: 4 / 3,
    borderRadius: 24,
    overflow: 'hidden',
    marginBottom: 20,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.15,
    shadowRadius: 8,
    elevation: 6,
  },
  heroImage: { width: '100%', height: '100%', resizeMode: 'cover' },
  confidenceBadge: {
    position: 'absolute',
    bottom: 14,
    left: 14,
    borderRadius: 20,
    paddingHorizontal: 10,
    paddingVertical: 6,
    flexDirection: 'row',
    alignItems: 'center',
    gap: 4,
  },
  confidenceText: { fontSize: 11, fontWeight: '700' },
  plantName: { fontSize: 28, fontWeight: '700', marginBottom: 2 },
  botanical: { fontSize: 13, fontStyle: 'italic', marginBottom: 14 },
  description: { fontSize: 13, lineHeight: 20, marginBottom: 24 },
  careHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'flex-end',
    marginBottom: 12,
  },
  sectionTitle: { fontSize: 16, fontWeight: '700' },
  detailsToggle: { fontSize: 10, fontWeight: '700', textTransform: 'uppercase', letterSpacing: 0.5 },
  careGrid: { flexDirection: 'row', gap: 10, marginBottom: 20 },
  careCard: {
    flex: 1,
    alignItems: 'center',
    padding: 12,
    borderRadius: 18,
    borderWidth: 1,
    gap: 6,
  },
  careIcon: { width: 32, height: 32, borderRadius: 16, justifyContent: 'center', alignItems: 'center' },
  careLabel: { fontSize: 10, fontWeight: '500' },
  careValue: {
    width: '100%',
    fontSize: 11,
    lineHeight: 14,
    fontWeight: '700',
    textAlign: 'center',
    flexShrink: 1,
  },
  detailsBox: {
    borderRadius: 18,
    borderWidth: 1,
    padding: 16,
    marginBottom: 20,
    gap: 10,
  },
  detailsTitle: { fontSize: 11, fontWeight: '700', textTransform: 'uppercase', letterSpacing: 0.5 },
  detailRow: { flexDirection: 'row', alignItems: 'flex-start', gap: 10 },
  detailDot: { width: 6, height: 6, borderRadius: 3, marginTop: 6 },
  detailText: { fontSize: 13, flex: 1 },
  localInfo: { flexDirection: 'row', justifyContent: 'center', alignItems: 'center', gap: 6, marginBottom: 12 },
  localIcon: { width: 12, height: 12, borderRadius: 2, borderWidth: 1, borderColor: '#d6d3d1' },
  localText: { fontSize: 11 },
  saveBtn: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    gap: 8,
    backgroundColor: '#4ade80',
    paddingVertical: 16,
    borderRadius: 14,
    shadowColor: '#4ade80',
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.3,
    shadowRadius: 8,
    elevation: 6,
  },
  saveBtnText: { fontWeight: '700', fontSize: 14 },
});