import React, { useRef } from 'react';
import { View, Text, StyleSheet, SafeAreaView, ScrollView, KeyboardAvoidingView, Platform, TouchableOpacity, Keyboard } from 'react-native';
import { useLocalSearchParams, useRouter } from 'expo-router';
import { Header } from '@/components/Header';
import { CategorySelector } from '@/components/CategorySelector';
import { TaskNameInput } from '@/components/TaskNameInput';
import { SubtasksSection } from '@/components/SubtasksSection';
import { DateTimePickerComponent } from '@/components/DateTimePicker';
import { PrioritySelector } from '@/components/PrioritySelector';
import { RepeatSelector } from '@/components/RepeatSelector';
import { ReminderSelector } from '@/components/ReminderSelector';
import { DescriptionInput } from '@/components/DescriptionInput';
import { FormButtons } from '@/components/FormButtons';
import { TaskDeleteModal } from '@/components/TaskDeleteModal';
import { AssigneeSelector } from '@/components/AssigneeSelector';
import { useForm, FormProvider, Controller } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import { useDatabase } from '@/hooks/useDatabase';
import { database, collections } from '@/database';
import { Q } from '@nozbe/watermelondb';
import { TaskFormData, parseTaskTags, tagsToString } from '@/types';
import { useSettings } from '@/theme';
import { deleteTaskOccurrences } from '@/utils/taskActions';
import { scheduleTaskReminder } from '@/services/notifications';
import { ReminderPreference } from '@/types';
import { recordTombstonesInBatch } from '@/database/tombstones';
import { useFriends } from '@/hooks/useFriends';
import Svg, { Path, Circle } from 'react-native-svg';

const taskSchema = z.object({
  title: z.string().trim().min(1, 'Task name is required').max(100),
  description: z.string().max(1000).optional(),
  categoryId: z.string().optional(),
  tags: z.array(z.string()).optional(),
  priority: z.enum(['none', 'low', 'medium', 'high', 'critical']),
  dueDate: z.date().nullable().optional(),
  dueTime: z.string().optional(),
  endTime: z.string().optional(),
  allDay: z.boolean().optional(),
  repeat: z.enum(['none', 'daily', 'weekly', 'monthly', 'custom']),
  repeatInterval: z.number().int().min(1).max(30).optional(),
  repeatDays: z.array(z.number().int().min(0).max(6)).optional(),
  reminder: z.enum(['none', 'at_time', '15', '30', '60', '120', '1440']),
  reminders: z.string().optional(),
  assigneeId: z.string().nullable().optional(),
  subtasks: z.array(z.object({ title: z.string(), _key: z.string().optional() })).optional(),
});

function CollapsibleSection({ title, children, defaultExpanded = false, icon }: { title: string; children: React.ReactNode; defaultExpanded?: boolean; icon: React.ReactNode }) {
  const { theme } = useSettings();
  const [expanded, setExpanded] = React.useState(defaultExpanded);

  return (
    <View style={styles.section}>
      <TouchableOpacity style={[styles.sectionHeader, { backgroundColor: theme.card, borderColor: theme.border }]} onPress={() => setExpanded(!expanded)} activeOpacity={0.8}>
        <View style={styles.sectionHeaderLeft}>
          {icon}
          <Text style={[styles.sectionTitle, { color: theme.text }]}>{title}</Text>
        </View>
        <Svg width={20} height={20} viewBox="0 0 24 24">
          <Path
            d="M6 9l6 6 6-6"
            stroke={theme.textSecondary}
            strokeWidth={2.5}
            strokeLinecap="round"
            strokeLinejoin="round"
            fill="none"
          />
        </Svg>
      </TouchableOpacity>
      {expanded && <View style={styles.sectionContent}>{children}</View>}
    </View>
  );
}

export default function TaskDetailScreen() {
  const { id } = useLocalSearchParams<{ id: string }>();
  const { isReady } = useDatabase();
  const router = useRouter();
  const { theme } = useSettings();
  const { friends } = useFriends();
  const { notifications: notificationsEnabled, reminderPreference } = useSettings();
  const [loaded, setLoaded] = React.useState(false);
  const [notFound, setNotFound] = React.useState(false);
  const scrollViewRef = useRef<ScrollView>(null);

  const methods = useForm<TaskFormData>({
    resolver: zodResolver(taskSchema),
    defaultValues: {
      title: '',
      description: '',
      categoryId: '',
      tags: [],
      priority: 'none',
      dueDate: null,
      dueTime: '',
      endTime: '',
      allDay: false,
      repeat: 'none',
      repeatInterval: 1,
      repeatDays: [],
      reminder: 'none',
      assigneeId: null,
      subtasks: [],
    },
  });

  const { handleSubmit, watch, setValue, control, reset, formState: { errors } } = methods;

  const tags = watch('tags') ?? [];
  const priority = watch('priority');
  const repeat = watch('repeat');
  const repeatInterval = watch('repeatInterval') ?? 1;
  const repeatDays = watch('repeatDays') ?? [];
  const reminder = watch('reminder');
  const reminders = watch('reminders');
  const dueDate = watch('dueDate');
  const assigneeId = watch('assigneeId');
  const [deleteModalVisible, setDeleteModalVisible] = React.useState(false);

  React.useEffect(() => {
    if (!id || !isReady) return;
    let mounted = true;

    (async () => {
      try {
        const task = await collections.tasks.find(id);
        const subtasks = await collections.subtasks.query(Q.where('task_id', id)).fetch();

        if (!mounted) return;
        const remindersValue = task.reminders || (task.reminder && task.reminder !== 'none' ? task.reminder : '');

        reset({
          title: task.title,
          description: task.description,
          categoryId: task.categoryId,
          tags: parseTaskTags(task.tags, task.categoryId),
          priority: task.priority,
          dueDate: task.dueDate ? new Date(task.dueDate) : null,
          dueTime: task.dueTime,
          endTime: task.endTime || '',
          allDay: task.allDay ?? false,
          repeat: task.repeat,
          repeatInterval: task.repeatInterval || 1,
          repeatDays: (task.repeatDays || '').split(',').map(Number).filter((d) => !Number.isNaN(d)),
          reminder: (task.reminder || 'none') as TaskFormData['reminder'],
          reminders: remindersValue,
          assigneeId: task.assigneeId ?? null,
          subtasks: subtasks.map((s) => ({ title: s.title, _key: s.id })),
        });
        setLoaded(true);
      } catch {
        if (mounted) setNotFound(true);
      }
    })();

    return () => { mounted = false; };
  }, [id, isReady, reset]);

  const onSubmit = async (data: TaskFormData) => {
    if (!id || !isReady) return;

    Keyboard.dismiss();
    scrollViewRef.current?.scrollTo({ y: 0, animated: true });

    const now = new Date();
    const dueDateTimestamp = data.dueDate ? data.dueDate.getTime() : 0;

    let savedTask: any = null;

    await database.write(async () => {
      const task = await collections.tasks.find(id);
      savedTask = task;
      const existingSubtasks = await collections.subtasks.query(Q.where('task_id', id)).fetch();

      await task.update((t) => {
        t.title = data.title.trim();
        t.description = data.description || '';
        t.categoryId = (data.tags && data.tags[0]) || task.categoryId || '';
        t.tags = tagsToString(data.tags || []);
        t.priority = data.priority;
        t.dueDate = dueDateTimestamp;
        t.dueTime = data.dueTime || '';
        t.endTime = data.endTime || '';
        t.allDay = data.allDay ?? false;
        t.repeat = data.repeat;
        t.repeatInterval = data.repeatInterval || 1;
        t.repeatDays = (data.repeatDays || []).join(',');
        t.reminder = data.reminder || 'none';
        t.reminders = data.reminders || '';
        t.assigneeId = data.assigneeId ?? null;
        if (data.repeat !== 'none' && !t.seriesId) {
          t.seriesId = `series_${Math.random().toString(36).slice(2, 10)}${Date.now().toString(36)}`;
        }
        t.updatedAt = now;
      });

      const keptIds = new Set<string>();
      let order = 0;
      for (const formItem of data.subtasks ?? []) {
        const trimmed = formItem.title.trim();
        if (!trimmed) continue;
        if (formItem._key) {
          const existing = existingSubtasks.find((s) => s.id === formItem._key && !s.parentSubtaskId);
          if (existing) {
            keptIds.add(existing.id);
            await existing.update((s) => {
              s.title = trimmed;
              s.order = order;
              s.updatedAt = now;
            });
            order++;
            continue;
          }
        }
        await collections.subtasks.create((s) => {
          s.taskId = task.id;
          s.categoryId = task.categoryId || '';
          s.tags = task.tags || '';
          s.title = trimmed;
          s.description = '';
          s.priority = 'none';
          s.completed = false;
          s.dueDate = 0;
          s.dueTime = '';
          s.endTime = '';
          s.allDay = false;
          s.repeat = 'none';
          s.repeatInterval = 1;
          s.repeatDays = '';
          s.seriesId = '';
          s.reminder = 'none';
          s.reminders = '';
          s.assigneeId = null;
          s.order = order++;
          s.createdAt = now;
          s.updatedAt = now;
        });
      }

      const removedIds: string[] = [];
      for (const existing of existingSubtasks) {
        if (existing.parentSubtaskId) continue;
        if (keptIds.has(existing.id)) continue;
        removedIds.push(existing.id);
        const children = await collections.subtasks.query(Q.where('parent_subtask_id', existing.id)).fetch();
        for (const child of children) {
          await child.update((c) => {
            c.parentSubtaskId = null;
            c.updatedAt = now;
          });
        }
        await existing.destroyPermanently();
      }
      if (removedIds.length > 0) {
        await recordTombstonesInBatch('subtasks', removedIds);
      }
    });

    await scheduleTaskReminder(savedTask, notificationsEnabled, reminderPreference);

    router.back();
  };

  const handleDelete = () => {
    setDeleteModalVisible(true);
  };

  const doDelete = async (scope: 'this' | 'future' | 'all') => {
    if (!id) return;
    setDeleteModalVisible(false);
    await deleteTaskOccurrences(id, scope);
    router.back();
  };

  if (!isReady || !loaded) {
    return (
      <View style={[styles.loadingContainer, { backgroundColor: theme.background }]}>
        <Text style={{ color: theme.textFaint }}>{notFound ? 'Task not found' : 'Loading...'}</Text>
      </View>
    );
  }

  return (
    <SafeAreaView style={[styles.container, { backgroundColor: theme.background }]}>
      <Header
        title="Edit Task"
        showLogo={true}
        rightAction={
          <TouchableOpacity onPress={handleDelete} activeOpacity={0.7} style={[styles.deleteButton, { borderColor: theme.accentBorder, backgroundColor: theme.accentSoft }]}>
            <Svg width={22} height={22} viewBox="0 0 24 24">
              <Path d="M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13" stroke={theme.accent} strokeWidth={2.2} strokeLinecap="round" strokeLinejoin="round" fill="none" />
            </Svg>
          </TouchableOpacity>
        }
      />
      <FormProvider {...methods}>
        <KeyboardAvoidingView
          style={styles.keyboardAvoiding}
          behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
          keyboardVerticalOffset={Platform.OS === 'ios' ? 0 : 0}
        >
          <ScrollView
            ref={scrollViewRef}
            contentContainerStyle={styles.scrollContent}
            showsVerticalScrollIndicator={false}
            keyboardShouldPersistTaps="handled"
            keyboardDismissMode="interactive"
          >
            <CategorySelector
              value={tags}
              onChange={(value) => setValue('tags', value)}
              error={errors.categoryId?.message}
            />
            <Controller
              control={control}
              name="title"
              render={({ field }) => (
                <TaskNameInput
                  value={field.value}
                  onChangeText={field.onChange}
                  onBlur={field.onBlur}
                  error={errors.title?.message}
                />
              )}
            />
            <SubtasksSection control={control} />
            <PrioritySelector
              value={priority}
              onChange={(value) => setValue('priority', value)}
            />

            <CollapsibleSection title="Date & Time" icon={
              <Svg width={20} height={20} viewBox="0 0 24 24">
                <Circle cx={12} cy={12} r={10} stroke={theme.accent} strokeWidth={1.8} fill="none" />
                <Path d="M12 6v6l4 2" stroke={theme.accent} strokeWidth={1.8} strokeLinecap="round" />
              </Svg>
            } defaultExpanded={!!dueDate}>
              <DateTimePickerComponent control={control} />
            </CollapsibleSection>

            <CollapsibleSection title="Repeat" icon={
              <Svg width={20} height={20} viewBox="0 0 24 24">
                <Path
                  d="M17 2l4 4-4 4M3 11v-1a4 4 0 0 1 4-4h14M7 22l-4-4 4-4M21 13v1a4 4 0 0 1-4 4H3"
                  stroke={theme.accent}
                  strokeWidth={1.8}
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  fill="none"
                />
              </Svg>
            } defaultExpanded={repeat !== 'none'}>
              <RepeatSelector
                value={repeat}
                interval={repeatInterval}
                days={repeatDays}
                onChange={(nextRepeat, nextInterval, nextDays) => {
                  setValue('repeat', nextRepeat);
                  setValue('repeatInterval', nextInterval);
                  setValue('repeatDays', nextDays);
                }}
              />
            </CollapsibleSection>

            <CollapsibleSection title="Reminder" icon={
              <Svg width={20} height={20} viewBox="0 0 24 24">
                <Path
                  d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9M10.3 21a1.94 1.94 0 0 0 3.4 0"
                  stroke={theme.accent}
                  strokeWidth={1.8}
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  fill="none"
                />
              </Svg>
            } defaultExpanded={!!reminders && reminders !== ''}>
              <ReminderSelector
                value={reminders}
                hasDueDate={!!dueDate}
                onChange={(value) => setValue('reminders', value)}
              />
            </CollapsibleSection>

            <CollapsibleSection title="Assignee" icon={
              <Svg width={20} height={20} viewBox="0 0 24 24">
                <Circle cx={12} cy={12} r={10} stroke={theme.accent} strokeWidth={1.8} fill="none" />
                <Path d="M12 10v6M12 19v1" stroke={theme.accent} strokeWidth={1.8} strokeLinecap="round" />
              </Svg>
            } defaultExpanded={!!assigneeId}>
              <AssigneeSelector
                value={assigneeId}
                onChange={(value: string | null) => setValue('assigneeId', value)}
                friends={friends.map((f) => f.username)}
              />
            </CollapsibleSection>

            <CollapsibleSection title="Description" icon={
              <Svg width={20} height={20} viewBox="0 0 24 24">
                <Path d="M4 6h16M4 12h16M4 18h10" stroke={theme.accent} strokeWidth={1.8} strokeLinecap="round" strokeLinejoin="round" fill="none" />
              </Svg>
            } defaultExpanded={!!methods.getValues('description')}>
              <Controller
                control={control}
                name="description"
                render={({ field }) => (
                  <DescriptionInput
                    value={field.value ?? ''}
                    onChangeText={field.onChange}
                    onBlur={field.onBlur}
                  />
                )}
              />
            </CollapsibleSection>
          </ScrollView>
        </KeyboardAvoidingView>
        <FormButtons onSubmit={handleSubmit(onSubmit)} submitLabel="Save" />
      </FormProvider>

      <TaskDeleteModal
        visible={deleteModalVisible}
        taskId={id}
        taskTitle={methods.getValues('title')}
        isRepeating={repeat !== 'none'}
        onClose={() => setDeleteModalVisible(false)}
        onDelete={doDelete}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  loadingContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  keyboardAvoiding: {
    flex: 1,
  },
  scrollContent: {
    paddingHorizontal: 12,
    paddingTop: 8,
    paddingBottom: 60,
    gap: 12,
  },
  section: {
    gap: 6,
  },
  sectionHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingVertical: 10,
    paddingHorizontal: 12,
    borderRadius: 10,
    borderWidth: 1,
  },
  sectionHeaderLeft: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
  },
  sectionTitle: {
    fontSize: 14,
    fontWeight: '600',
  },
  sectionContent: {
    paddingHorizontal: 2,
    gap: 6,
  },
  deleteButton: {
    width: 32,
    height: 32,
    borderRadius: 10,
    borderWidth: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});