import { useCallback, useEffect, useMemo, useState } from 'react';
import {
  ActivityIndicator,
  KeyboardAvoidingView,
  Modal,
  Platform,
  Pressable,
  RefreshControl,
  ScrollView,
  StyleSheet,
  Text,
  TextInput,
  View,
} from 'react-native';
import { router } from 'expo-router';

import { createProject, Customer, fetchCustomers, fetchPlants, fetchProjects, Plant, Project } from '@/src/lib/api';
import { useAuth } from '@/src/providers/auth-provider';

const PRIMARY = '#69c350';

function getProjectLine(project: Project): string {
  if (project.projectNumber) return `${project.name} · ${project.projectNumber}`;
  return project.name;
}

function getActivePhaseLabel(project: Project): string {
  const explicit = String(project.active_phase || '').trim();
  if (explicit) return explicit;

  const phases = Array.isArray(project.phases) ? project.phases : [];
  const active = phases.find((phase: any) => phase?.active);
  return String(active?.label || '').trim();
}

function isProjectCompletedByPhase(project: Project): boolean {
  const phase = getActivePhaseLabel(project).toLowerCase();
  return phase === 'abgeschlossen';
}

export default function ProjectsScreen() {
  const { token } = useAuth();

  const [projects, setProjects] = useState<Project[]>([]);
  const [customers, setCustomers] = useState<Customer[]>([]);
  const [plants, setPlants] = useState<Plant[]>([]);

  const [search, setSearch] = useState('');
  const [showArchived, setShowArchived] = useState(false);
  const [loading, setLoading] = useState(true);
  const [refreshing, setRefreshing] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const [createOpen, setCreateOpen] = useState(false);
  const [saving, setSaving] = useState(false);
  const [createError, setCreateError] = useState<string | null>(null);
  const [nameInput, setNameInput] = useState('');
  const [projectNumberInput, setProjectNumberInput] = useState('');
  const [notesInput, setNotesInput] = useState('');
  const [selectedCustomerId, setSelectedCustomerId] = useState<number | null>(null);
  const [selectedPlantId, setSelectedPlantId] = useState<number | null>(null);

  const [pickerMode, setPickerMode] = useState<'customer' | 'plant' | null>(null);
  const [customerSearch, setCustomerSearch] = useState('');
  const [plantSearch, setPlantSearch] = useState('');

  const filteredProjects = useMemo(() => {
    const terms = search
      .trim()
      .toLowerCase()
      .split(/\s+/)
      .filter(Boolean);

    return projects.filter((project) => {
      if (!showArchived && isProjectCompletedByPhase(project)) return false;
      if (terms.length === 0) return true;

      const haystack = [
        project.name,
        project.projectNumber,
        project.notes,
        project.customerRef,
        project.active_phase,
        getActivePhaseLabel(project),
      ]
        .map((value) => String(value || '').toLowerCase())
        .join(' ');

      return terms.every((term) => haystack.includes(term));
    });
  }, [projects, search, showArchived]);

  const selectedCustomerLabel = useMemo(() => {
    if (!selectedCustomerId) return 'Kunde auswählen (optional)';
    const customer = customers.find((item) => Number(item.id) === selectedCustomerId);
    return customer ? `${customer.name}${customer.customerNumber ? ` · ${customer.customerNumber}` : ''}` : `ID ${selectedCustomerId}`;
  }, [customers, selectedCustomerId]);

  const selectedPlantLabel = useMemo(() => {
    if (!selectedPlantId) return 'Objekt auswählen (optional)';
    const plant = plants.find((item) => Number(item.id) === selectedPlantId);
    return plant ? plant.name : `ID ${selectedPlantId}`;
  }, [plants, selectedPlantId]);

  const filteredCustomerOptions = useMemo(() => {
    const terms = customerSearch.trim().toLowerCase().split(/\s+/).filter(Boolean);
    return customers
      .filter((customer) => !customer.archived)
      .filter((customer) => {
        if (terms.length === 0) return true;
        const haystack = [customer.name, customer.customerNumber]
          .map((value) => String(value || '').toLowerCase())
          .join(' ');
        return terms.every((term) => haystack.includes(term));
      });
  }, [customerSearch, customers]);

  const filteredPlantOptions = useMemo(() => {
    const terms = plantSearch.trim().toLowerCase().split(/\s+/).filter(Boolean);
    return plants
      .filter((plant) => !plant.archived)
      .filter((plant) => {
        if (terms.length === 0) return true;
        const haystack = [plant.name, plant.description]
          .map((value) => String(value || '').toLowerCase())
          .join(' ');
        return terms.every((term) => haystack.includes(term));
      });
  }, [plantSearch, plants]);

  const loadProjects = useCallback(async (showSpinner = true) => {
    if (!token) return;
    if (showSpinner) setLoading(true);
    setError(null);

    try {
      const [projectRows, customerRows, plantRows] = await Promise.all([
        fetchProjects(token, true),
        fetchCustomers(token, true),
        fetchPlants(token, true),
      ]);
      setProjects(projectRows);
      setCustomers(customerRows);
      setPlants(plantRows);
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Projekte konnten nicht geladen werden.');
    } finally {
      setLoading(false);
      setRefreshing(false);
    }
  }, [token]);

  useEffect(() => {
    if (!token) return;
    void loadProjects(true);
  }, [loadProjects, token]);

  async function onRefresh() {
    setRefreshing(true);
    await loadProjects(false);
  }

  function closeCreateModal() {
    setCreateOpen(false);
    setCreateError(null);
    setNameInput('');
    setProjectNumberInput('');
    setNotesInput('');
    setSelectedCustomerId(null);
    setSelectedPlantId(null);
    setCustomerSearch('');
    setPlantSearch('');
    setPickerMode(null);
  }

  async function onCreateProject() {
    if (!token) return;

    const name = nameInput.trim();
    if (!name) {
      setCreateError('Bitte einen Projektnamen eingeben.');
      return;
    }

    setSaving(true);
    setCreateError(null);

    try {
      await createProject(token, {
        name,
        projectNumber: projectNumberInput.trim() || null,
        customer: selectedCustomerId,
        plant: selectedPlantId,
        notes: notesInput.trim() || null,
      });
      closeCreateModal();
      await loadProjects(false);
    } catch (err) {
      setCreateError(err instanceof Error ? err.message : 'Projekt konnte nicht erstellt werden.');
    } finally {
      setSaving(false);
    }
  }

  return (
    <View style={styles.screen}>
      <View style={styles.searchWrap}>
        <TextInput
          placeholder="Projekte suchen"
          placeholderTextColor="#9ca3af"
          style={styles.searchInput}
          value={search}
          onChangeText={setSearch}
        />
        <Pressable
          style={[styles.toggleButton, showArchived ? styles.toggleButtonActive : null]}
          onPress={() => setShowArchived((prev) => !prev)}>
          <Text style={[styles.toggleButtonText, showArchived ? styles.toggleButtonTextActive : null]}>
            Abgeschlossene anzeigen
          </Text>
        </Pressable>
      </View>

      <ScrollView
        style={styles.list}
        contentContainerStyle={styles.listContent}
        refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />}>
        {error ? <Text style={styles.error}>{error}</Text> : null}

        {loading ? (
          <View style={styles.loadingBox}>
            <ActivityIndicator />
            <Text style={styles.loadingText}>Projekte werden geladen...</Text>
          </View>
        ) : null}

        {!loading && filteredProjects.length === 0 ? <Text style={styles.empty}>Keine Projekte gefunden.</Text> : null}

        {!loading &&
          filteredProjects.map((project) => (
            <Pressable key={String(project.id)} style={styles.row} onPress={() => router.push(`/project/${project.id}`)}>
              <View style={styles.rowHeader}>
                <Text style={styles.rowTitle} numberOfLines={1}>{getProjectLine(project)}</Text>
                {isProjectCompletedByPhase(project) ? <Text style={styles.archivedBadge}>Abgeschlossen</Text> : null}
              </View>
              {getActivePhaseLabel(project) ? (
                <Text style={styles.phaseText} numberOfLines={1}>Phase: {getActivePhaseLabel(project)}</Text>
              ) : null}
              {project.notes ? <Text style={styles.rowSubtitle} numberOfLines={1}>{String(project.notes)}</Text> : null}
            </Pressable>
          ))}
      </ScrollView>

      <Pressable style={styles.fab} onPress={() => setCreateOpen(true)}>
        <Text style={styles.fabText}>+</Text>
      </Pressable>

      <Modal visible={createOpen} transparent animationType="fade" onRequestClose={closeCreateModal}>
        <View style={styles.modalOverlay}>
          <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : undefined} style={styles.modalKeyboardWrap}>
            <View style={styles.modalCard}>
              <Text style={styles.modalTitle}>Neues Projekt</Text>

              <TextInput
                placeholder="Projektname"
                placeholderTextColor="#9ca3af"
                style={styles.searchInput}
                value={nameInput}
                onChangeText={setNameInput}
              />

              <TextInput
                placeholder="Projekt-Nr. (optional)"
                placeholderTextColor="#9ca3af"
                style={styles.searchInput}
                value={projectNumberInput}
                onChangeText={setProjectNumberInput}
              />

              <Pressable style={styles.selectButton} onPress={() => setPickerMode('customer')}>
                <Text style={styles.selectButtonText} numberOfLines={1}>{selectedCustomerLabel}</Text>
              </Pressable>

              <Pressable style={styles.selectButton} onPress={() => setPickerMode('plant')}>
                <Text style={styles.selectButtonText} numberOfLines={1}>{selectedPlantLabel}</Text>
              </Pressable>

              <TextInput
                placeholder="Notizen (optional)"
                placeholderTextColor="#9ca3af"
                style={[styles.searchInput, styles.multilineInput]}
                value={notesInput}
                onChangeText={setNotesInput}
                multiline
              />

              {pickerMode === 'customer' ? (
                <View style={styles.inlinePickerBox}>
                  <Text style={styles.inlinePickerTitle}>Kunde auswählen</Text>
                  <TextInput
                    placeholder="Kunden suchen"
                    placeholderTextColor="#9ca3af"
                    style={styles.searchInput}
                    value={customerSearch}
                    onChangeText={setCustomerSearch}
                  />
                  <ScrollView style={styles.pickerList}>
                    <Pressable
                      style={styles.pickerRow}
                      onPress={() => {
                        setSelectedCustomerId(null);
                        setPickerMode(null);
                      }}>
                      <Text style={styles.pickerRowTitle}>Keine Auswahl</Text>
                    </Pressable>
                    {filteredCustomerOptions.map((customer) => (
                      <Pressable
                        key={String(customer.id)}
                        style={styles.pickerRow}
                        onPress={() => {
                          setSelectedCustomerId(Number(customer.id));
                          setPickerMode(null);
                        }}>
                        <Text style={styles.pickerRowTitle} numberOfLines={1}>{customer.name}</Text>
                        <Text style={styles.pickerRowMeta} numberOfLines={1}>
                          {customer.customerNumber ? `Nr. ${customer.customerNumber}` : `ID ${customer.id}`}
                        </Text>
                      </Pressable>
                    ))}
                  </ScrollView>
                </View>
              ) : null}

              {pickerMode === 'plant' ? (
                <View style={styles.inlinePickerBox}>
                  <Text style={styles.inlinePickerTitle}>Objekt auswählen</Text>
                  <TextInput
                    placeholder="Objekte suchen"
                    placeholderTextColor="#9ca3af"
                    style={styles.searchInput}
                    value={plantSearch}
                    onChangeText={setPlantSearch}
                  />
                  <ScrollView style={styles.pickerList}>
                    <Pressable
                      style={styles.pickerRow}
                      onPress={() => {
                        setSelectedPlantId(null);
                        setPickerMode(null);
                      }}>
                      <Text style={styles.pickerRowTitle}>Keine Auswahl</Text>
                    </Pressable>
                    {filteredPlantOptions.map((plant) => (
                      <Pressable
                        key={String(plant.id)}
                        style={styles.pickerRow}
                        onPress={() => {
                          setSelectedPlantId(Number(plant.id));
                          setPickerMode(null);
                        }}>
                        <Text style={styles.pickerRowTitle} numberOfLines={1}>{plant.name}</Text>
                        <Text style={styles.pickerRowMeta} numberOfLines={1}>ID {plant.id}</Text>
                      </Pressable>
                    ))}
                  </ScrollView>
                </View>
              ) : null}

              {createError ? <Text style={styles.error}>{createError}</Text> : null}

              <View style={styles.modalActions}>
                <Pressable style={styles.secondaryButton} onPress={closeCreateModal} disabled={saving}>
                  <Text style={styles.secondaryButtonText}>Abbrechen</Text>
                </Pressable>
                <Pressable
                  style={[styles.primaryButton, saving ? styles.buttonDisabled : null]}
                  onPress={onCreateProject}
                  disabled={saving}>
                  <Text style={styles.primaryButtonText}>{saving ? 'Speichere...' : 'Anlegen'}</Text>
                </Pressable>
              </View>
            </View>
          </KeyboardAvoidingView>
        </View>
      </Modal>
    </View>
  );
}

const styles = StyleSheet.create({
  screen: { flex: 1, backgroundColor: '#ffffff' },
  searchWrap: {
    paddingHorizontal: 16,
    paddingTop: 12,
    paddingBottom: 10,
    borderBottomWidth: 1,
    borderBottomColor: '#e5e7eb',
    backgroundColor: '#ffffff',
    gap: 8,
  },
  searchInput: {
    borderWidth: 1,
    borderColor: '#d1d5db',
    borderRadius: 10,
    paddingHorizontal: 12,
    paddingVertical: 10,
    fontSize: 15,
    color: '#111827',
    backgroundColor: '#ffffff',
  },
  list: { flex: 1, backgroundColor: '#ffffff' },
  listContent: { paddingBottom: 96 },
  row: {
    paddingHorizontal: 16,
    paddingVertical: 14,
    borderBottomWidth: 1,
    borderBottomColor: '#e5e7eb',
    backgroundColor: '#ffffff',
  },
  rowHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    gap: 8,
  },
  rowTitle: { flex: 1, color: '#111827', fontSize: 15, fontWeight: '600' },
  archivedBadge: {
    color: '#3d7a30',
    fontSize: 11,
    fontWeight: '600',
    backgroundColor: '#eff9ea',
    borderRadius: 999,
    paddingHorizontal: 8,
    paddingVertical: 3,
    overflow: 'hidden',
  },
  rowSubtitle: { color: '#6b7280', fontSize: 13, marginTop: 2 },
  phaseText: { color: '#6b7280', fontSize: 12, marginTop: 2 },
  toggleButton: {
    alignSelf: 'flex-start',
    borderWidth: 1,
    borderColor: '#d1d5db',
    borderRadius: 999,
    paddingHorizontal: 10,
    paddingVertical: 6,
    backgroundColor: '#ffffff',
  },
  toggleButtonActive: { borderColor: PRIMARY, backgroundColor: '#eff9ea' },
  toggleButtonText: { color: '#374151', fontSize: 12, fontWeight: '600' },
  toggleButtonTextActive: { color: '#3d7a30' },
  loadingBox: { paddingVertical: 20, alignItems: 'center', gap: 8 },
  loadingText: { color: '#6b7280' },
  empty: { color: '#6b7280', textAlign: 'center', paddingVertical: 20 },
  error: { color: '#dc2626', fontSize: 13, paddingHorizontal: 16, paddingTop: 10 },
  fab: {
    position: 'absolute',
    right: 18,
    bottom: 20,
    width: 56,
    height: 56,
    borderRadius: 28,
    backgroundColor: PRIMARY,
    alignItems: 'center',
    justifyContent: 'center',
    shadowColor: '#111827',
    shadowOpacity: 0.25,
    shadowRadius: 8,
    shadowOffset: { width: 0, height: 4 },
    elevation: 5,
  },
  fabText: { color: '#ffffff', fontSize: 30, lineHeight: 30, marginTop: -2 },
  modalOverlay: {
    flex: 1,
    backgroundColor: 'rgba(17, 24, 39, 0.45)',
    justifyContent: 'center',
    padding: 20,
  },
  modalKeyboardWrap: { width: '100%' },
  modalCard: { backgroundColor: '#ffffff', borderRadius: 14, padding: 16, gap: 10 },
  modalTitle: { color: '#111827', fontSize: 18, fontWeight: '700' },
  multilineInput: { minHeight: 92, textAlignVertical: 'top' },
  selectButton: {
    borderWidth: 1,
    borderColor: '#d1d5db',
    borderRadius: 10,
    paddingHorizontal: 12,
    paddingVertical: 10,
    backgroundColor: '#ffffff',
  },
  selectButtonText: { color: '#111827', fontSize: 15 },
  inlinePickerBox: {
    borderWidth: 1,
    borderColor: '#e5e7eb',
    borderRadius: 10,
    padding: 10,
    gap: 8,
    backgroundColor: '#fafafa',
  },
  inlinePickerTitle: { color: '#111827', fontSize: 14, fontWeight: '700' },
  pickerList: { maxHeight: 220 },
  pickerRow: {
    borderWidth: 1,
    borderColor: '#e5e7eb',
    borderRadius: 10,
    paddingHorizontal: 12,
    paddingVertical: 10,
    marginBottom: 8,
    backgroundColor: '#ffffff',
  },
  pickerRowTitle: { color: '#111827', fontSize: 14, fontWeight: '600' },
  pickerRowMeta: { color: '#6b7280', fontSize: 12, marginTop: 2 },
  modalActions: { flexDirection: 'row', justifyContent: 'flex-end', gap: 8, marginTop: 4 },
  secondaryButton: {
    borderWidth: 1,
    borderColor: '#d1d5db',
    borderRadius: 10,
    minHeight: 40,
    paddingHorizontal: 14,
    alignItems: 'center',
    justifyContent: 'center',
  },
  secondaryButtonText: { color: '#374151', fontWeight: '600' },
  primaryButton: {
    borderRadius: 10,
    minHeight: 40,
    paddingHorizontal: 14,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: PRIMARY,
  },
  primaryButtonText: { color: '#ffffff', fontWeight: '700' },
  buttonDisabled: { opacity: 0.6 },
});