Initial commit for Greenlens

components/ResultCard.tsx

@@ -1,7 +1,10 @@
-
 import React, { useState } from 'react';
-import { IdentificationResult } from '../types';
-import { Droplets, Sun, Thermometer, CheckCircle2, ArrowLeft, Share2 } from 'lucide-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;
@@ -9,132 +12,255 @@ interface ResultCardProps {
   onSave: () => void;
   onClose: () => void;
   t: any;
+  isDark: boolean;
+  colorPalette: ColorPalette;
+  isGuest?: boolean;
 }
 
-export const ResultCard: React.FC<ResultCardProps> = ({ result, imageUri, onSave, onClose, t }) => {
+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);
 
-  return (
-    <div className="flex flex-col h-full bg-stone-50 dark:bg-stone-950 overflow-y-auto no-scrollbar animate-in slide-in-from-right duration-300">
-      
-      {/* Header */}
-      <div className="absolute top-0 left-0 right-0 z-10 flex justify-between items-center p-6 text-stone-900 dark:text-white">
-        <button onClick={onClose} className="bg-white/80 dark:bg-black/50 backdrop-blur-md p-2 rounded-full shadow-sm">
-            <ArrowLeft size={20} />
-        </button>
-        <span className="font-bold text-sm bg-white/80 dark:bg-black/50 backdrop-blur-md px-3 py-1 rounded-full">{t.result}</span>
-        <button className="bg-white/80 dark:bg-black/50 backdrop-blur-md p-2 rounded-full shadow-sm">
-            <Share2 size={20} />
-        </button>
-      </div>
+  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);
+    }
+  };
 
-      <div className="p-4 pt-20">
+  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 */}
-        <div className="relative w-full aspect-[4/3] rounded-[2rem] overflow-hidden shadow-lg mb-6">
-          <img src={imageUri} alt="Analyzed Plant" className="w-full h-full object-cover" />
-          <div className="absolute bottom-4 left-4 bg-white/90 backdrop-blur-sm text-primary-700 px-3 py-1.5 rounded-full text-xs font-bold shadow-sm flex items-center">
-             <CheckCircle2 size={14} className="mr-1.5 fill-primary-600 text-white" />
-             {Math.round(result.confidence * 100)}% {t.match}
-          </div>
-        </div>
+        <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 */}
-        <div className="px-2">
-            <h1 className="text-3xl font-serif font-bold text-stone-900 dark:text-stone-100 leading-tight mb-1">
-                {result.name}
-            </h1>
-            <p className="text-stone-400 dark:text-stone-500 italic text-sm mb-6">
-                {result.botanicalName}
-            </p>
+        <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>
 
-            <p className="text-stone-600 dark:text-stone-300 text-sm leading-relaxed mb-8">
-                {result.description || t.noDescription}
-            </p>
+        {/* 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>
 
-            {/* Care Check */}
-            <div className="flex justify-between items-end mb-4">
-                <h3 className="font-bold text-stone-900 dark:text-stone-100">{t.careCheck}</h3>
-                <button 
-                  onClick={() => setShowDetails(!showDetails)}
-                  className="text-[10px] font-bold text-primary-600 uppercase tracking-wide"
-                >
-                  {showDetails ? t.hideDetails : t.showDetails}
-                </button>
-            </div>
+        <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>
 
-            <div className="grid grid-cols-3 gap-3 mb-8">
-                <div className="bg-white dark:bg-stone-900 p-3 rounded-2xl border border-stone-100 dark:border-stone-800 flex flex-col items-center text-center shadow-sm">
-                    <div className="w-8 h-8 rounded-full bg-blue-50 dark:bg-blue-900/20 text-blue-500 flex items-center justify-center mb-2">
-                        <Droplets size={16} className="fill-current" />
-                    </div>
-                    <span className="text-[10px] text-stone-400 font-medium mb-0.5">{t.water}</span>
-                    <span className="text-xs font-bold text-stone-800 dark:text-stone-200">
-                        {result.careInfo.waterIntervalDays <= 7 ? t.waterModerate : t.waterLittle}
-                    </span>
-                </div>
+        {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>
+        )}
 
-                <div className="bg-white dark:bg-stone-900 p-3 rounded-2xl border border-stone-100 dark:border-stone-800 flex flex-col items-center text-center shadow-sm">
-                    <div className="w-8 h-8 rounded-full bg-amber-50 dark:bg-amber-900/20 text-amber-500 flex items-center justify-center mb-2">
-                        <Sun size={16} className="fill-current" />
-                    </div>
-                    <span className="text-[10px] text-stone-400 font-medium mb-0.5">{t.light}</span>
-                    <span className="text-xs font-bold text-stone-800 dark:text-stone-200 truncate w-full">
-                        {result.careInfo.light}
-                    </span>
-                </div>
+        {/* Save */}
+        <View style={styles.localInfo}>
+          <View style={[styles.localIcon, { borderColor: colors.borderStrong }]} />
+          <Text style={[styles.localText, { color: colors.textMuted }]}>{t.dataSavedLocally}</Text>
+        </View>
 
-                <div className="bg-white dark:bg-stone-900 p-3 rounded-2xl border border-stone-100 dark:border-stone-800 flex flex-col items-center text-center shadow-sm">
-                    <div className="w-8 h-8 rounded-full bg-rose-50 dark:bg-rose-900/20 text-rose-500 flex items-center justify-center mb-2">
-                        <Thermometer size={16} className="fill-current" />
-                    </div>
-                    <span className="text-[10px] text-stone-400 font-medium mb-0.5">{t.temp}</span>
-                    <span className="text-xs font-bold text-stone-800 dark:text-stone-200">
-                        {result.careInfo.temp}
-                    </span>
-                </div>
-            </div>
-
-            {/* Expanded Details */}
-            {showDetails && (
-              <div className="mb-8 p-5 bg-stone-100 dark:bg-stone-900/50 rounded-2xl animate-in fade-in slide-in-from-top-2 border border-stone-200 dark:border-stone-800">
-                  <h4 className="font-bold text-xs mb-3 text-stone-700 dark:text-stone-300 uppercase tracking-wide">{t.detailedCare}</h4>
-                  <ul className="space-y-3 text-sm text-stone-600 dark:text-stone-300">
-                      <li className="flex items-start">
-                          <span className="mr-3 text-primary-500">•</span>
-                          <span>{t.careTextWater.replace('{0}', result.careInfo.waterIntervalDays.toString())}</span>
-                      </li>
-                      <li className="flex items-start">
-                          <span className="mr-3 text-amber-500">•</span>
-                          <span>{t.careTextLight.replace('{0}', result.careInfo.light)}</span>
-                      </li>
-                       <li className="flex items-start">
-                          <span className="mr-3 text-rose-500">•</span>
-                          <span>{t.careTextTemp.replace('{0}', result.careInfo.temp)}</span>
-                      </li>
-                  </ul>
-              </div>
-            )}
-
-            {/* Save Button */}
-            <div className="flex items-center justify-center space-x-2 text-xs text-stone-400 mb-4">
-                <div className="w-3 h-3 rounded-sm border border-stone-300 flex items-center justify-center">
-                    <div className="w-1.5 h-1.5 bg-stone-400 rounded-[1px]"></div>
-                </div>
-                <span>{t.dataSavedLocally}</span>
-            </div>
-
-            <button 
-                onClick={onSave}
-                className="w-full py-4 bg-primary-500 hover:bg-primary-600 text-black font-bold text-sm rounded-xl shadow-lg shadow-primary-500/30 active:scale-[0.98] transition-all flex items-center justify-center"
-            >
-                <div className="bg-black/20 rounded-full p-0.5 mr-2">
-                    <CheckCircle2 size={14} className="text-black" />
-                </div>
-                {t.addToPlants}
-            </button>
-            <div className="h-8"></div>
-        </div>
-      </div>
-    </div>
+        <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 },
+});