task-team/mobile/app/(tabs)/index.tsx

import { useState, useEffect, useCallback } from 'react';
import {
  View,
  Text,
  FlatList,
  TouchableOpacity,
  StyleSheet,
  RefreshControl,
  Alert,
  TextInput,
  Modal,
} from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { useAuthContext } from '../../lib/AuthContext';
import * as api from '../../lib/api';

const PRIORITY_COLORS: Record<string, string> = {
  high: '#EF4444',
  medium: '#F59E0B',
  low: '#22C55E',
};

const STATUS_ICONS: Record<string, string> = {
  todo: 'ellipse-outline',
  in_progress: 'time-outline',
  done: 'checkmark-circle',
};

export default function TasksScreen() {
  const { token } = useAuthContext();
  const [tasks, setTasks] = useState<any[]>([]);
  const [groups, setGroups] = useState<any[]>([]);
  const [refreshing, setRefreshing] = useState(false);
  const [showAdd, setShowAdd] = useState(false);
  const [newTitle, setNewTitle] = useState('');
  const [filter, setFilter] = useState<string>('all');

  const loadData = useCallback(async () => {
    if (!token) return;
    try {
      const [tasksRes, groupsRes] = await Promise.all([
        api.getTasks(token),
        api.getGroups(token),
      ]);
      setTasks(tasksRes.data || []);
      setGroups(groupsRes.data || []);
    } catch (err: any) {
      Alert.alert('Chyba', err.message);
    }
  }, [token]);

  useEffect(() => {
    loadData();
  }, [loadData]);

  const onRefresh = useCallback(async () => {
    setRefreshing(true);
    await loadData();
    setRefreshing(false);
  }, [loadData]);

  const addTask = async () => {
    if (!newTitle.trim() || !token) return;
    try {
      await api.createTask(token, { title: newTitle.trim() });
      setNewTitle('');
      setShowAdd(false);
      await loadData();
    } catch (err: any) {
      Alert.alert('Chyba', err.message);
    }
  };

  const toggleTask = async (task: any) => {
    if (!token) return;
    const newStatus = task.status === 'done' ? 'todo' : 'done';
    try {
      await api.updateTask(token, task.id, { status: newStatus });
      await loadData();
    } catch (err: any) {
      Alert.alert('Chyba', err.message);
    }
  };

  const filteredTasks =
    filter === 'all' ? tasks : tasks.filter((t) => t.status === filter);

  const getGroupColor = (groupId: string) => {
    const group = groups.find((g) => g.id === groupId);
    return group?.color || '#64748B';
  };

  const renderTask = ({ item }: { item: any }) => (
    <TouchableOpacity
      style={styles.taskCard}
      onPress={() => toggleTask(item)}
      activeOpacity={0.7}
    >
      <View style={styles.taskLeft}>
        <Ionicons
          name={STATUS_ICONS[item.status] as any || 'ellipse-outline'}
          size={24}
          color={item.status === 'done' ? '#22C55E' : '#94A3B8'}
        />
        <View style={styles.taskInfo}>
          <Text
            style={[
              styles.taskTitle,
              item.status === 'done' && styles.taskDone,
            ]}
          >
            {item.title}
          </Text>
          {item.group_name && (
            <View
              style={[
                styles.groupBadge,
                { backgroundColor: getGroupColor(item.group_id) + '20' },
              ]}
            >
              <Text
                style={[
                  styles.groupBadgeText,
                  { color: getGroupColor(item.group_id) },
                ]}
              >
                {item.group_name}
              </Text>
            </View>
          )}
        </View>
      </View>
      {item.priority && (
        <View
          style={[
            styles.priorityDot,
            { backgroundColor: PRIORITY_COLORS[item.priority] || '#94A3B8' },
          ]}
        />
      )}
    </TouchableOpacity>
  );

  return (
    <View style={styles.container}>
      {/* Filter bar */}
      <View style={styles.filterBar}>
        {['all', 'todo', 'in_progress', 'done'].map((f) => (
          <TouchableOpacity
            key={f}
            style={[styles.filterBtn, filter === f && styles.filterBtnActive]}
            onPress={() => setFilter(f)}
          >
            <Text
              style={[
                styles.filterText,
                filter === f && styles.filterTextActive,
              ]}
            >
              {f === 'all'
                ? 'Vse'
                : f === 'todo'
                ? 'K provedeni'
                : f === 'in_progress'
                ? 'Rozpracovano'
                : 'Hotovo'}
            </Text>
          </TouchableOpacity>
        ))}
      </View>

      {/* Task list */}
      <FlatList
        data={filteredTasks}
        keyExtractor={(item) => item.id?.toString()}
        renderItem={renderTask}
        refreshControl={
          <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
        }
        contentContainerStyle={styles.listContent}
        ListEmptyComponent={
          <View style={styles.empty}>
            <Ionicons name="document-outline" size={48} color="#CBD5E1" />
            <Text style={styles.emptyText}>Zatim zadne ukoly</Text>
          </View>
        }
      />

      {/* FAB */}
      <TouchableOpacity
        style={styles.fab}
        onPress={() => setShowAdd(true)}
      >
        <Ionicons name="add" size={28} color="#fff" />
      </TouchableOpacity>

      {/* Add task modal */}
      <Modal visible={showAdd} transparent animationType="slide">
        <View style={styles.modalOverlay}>
          <View style={styles.modalContent}>
            <Text style={styles.modalTitle}>Novy ukol</Text>
            <TextInput
              style={styles.input}
              placeholder="Nazev ukolu..."
              value={newTitle}
              onChangeText={setNewTitle}
              autoFocus
              onSubmitEditing={addTask}
            />
            <View style={styles.modalActions}>
              <TouchableOpacity
                style={styles.cancelBtn}
                onPress={() => {
                  setShowAdd(false);
                  setNewTitle('');
                }}
              >
                <Text style={styles.cancelText}>Zrusit</Text>
              </TouchableOpacity>
              <TouchableOpacity style={styles.addBtn} onPress={addTask}>
                <Text style={styles.addBtnText}>Pridat</Text>
              </TouchableOpacity>
            </View>
          </View>
        </View>
      </Modal>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: '#F8FAFC' },
  filterBar: {
    flexDirection: 'row',
    padding: 12,
    gap: 8,
    backgroundColor: '#fff',
    borderBottomWidth: 1,
    borderBottomColor: '#E2E8F0',
  },
  filterBtn: {
    paddingHorizontal: 12,
    paddingVertical: 6,
    borderRadius: 16,
    backgroundColor: '#F1F5F9',
  },
  filterBtnActive: { backgroundColor: '#3B82F6' },
  filterText: { fontSize: 13, color: '#64748B' },
  filterTextActive: { color: '#fff', fontWeight: '600' },
  listContent: { padding: 12, paddingBottom: 80 },
  taskCard: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    backgroundColor: '#fff',
    borderRadius: 12,
    padding: 16,
    marginBottom: 8,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.05,
    shadowRadius: 3,
    elevation: 2,
  },
  taskLeft: { flexDirection: 'row', alignItems: 'center', flex: 1 },
  taskInfo: { marginLeft: 12, flex: 1 },
  taskTitle: { fontSize: 15, color: '#1E293B', fontWeight: '500' },
  taskDone: {
    textDecorationLine: 'line-through',
    color: '#94A3B8',
  },
  groupBadge: { marginTop: 4, paddingHorizontal: 8, paddingVertical: 2, borderRadius: 8, alignSelf: 'flex-start' },
  groupBadgeText: { fontSize: 11, fontWeight: '600' },
  priorityDot: { width: 10, height: 10, borderRadius: 5 },
  empty: { alignItems: 'center', marginTop: 60 },
  emptyText: { color: '#94A3B8', fontSize: 16, marginTop: 12 },
  fab: {
    position: 'absolute',
    right: 20,
    bottom: 20,
    width: 56,
    height: 56,
    borderRadius: 28,
    backgroundColor: '#3B82F6',
    alignItems: 'center',
    justifyContent: 'center',
    shadowColor: '#3B82F6',
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.3,
    shadowRadius: 8,
    elevation: 6,
  },
  modalOverlay: {
    flex: 1,
    backgroundColor: 'rgba(0,0,0,0.4)',
    justifyContent: 'flex-end',
  },
  modalContent: {
    backgroundColor: '#fff',
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20,
    padding: 24,
    paddingBottom: 40,
  },
  modalTitle: { fontSize: 18, fontWeight: '700', color: '#1E293B', marginBottom: 16 },
  input: {
    borderWidth: 1,
    borderColor: '#E2E8F0',
    borderRadius: 12,
    padding: 14,
    fontSize: 16,
    backgroundColor: '#F8FAFC',
  },
  modalActions: {
    flexDirection: 'row',
    justifyContent: 'flex-end',
    gap: 12,
    marginTop: 16,
  },
  cancelBtn: { paddingHorizontal: 20, paddingVertical: 10 },
  cancelText: { color: '#64748B', fontSize: 15 },
  addBtn: {
    backgroundColor: '#3B82F6',
    paddingHorizontal: 24,
    paddingVertical: 10,
    borderRadius: 10,
  },
  addBtnText: { color: '#fff', fontSize: 15, fontWeight: '600' },
});