import React, { useState } from 'react';
import { View, Text, ScrollView, TouchableOpacity } from 'react-native';
import { RouteProp, useRoute, useNavigation } from '@react-navigation/native';
import { useTheme } from '@theme';
import { getStyles } from './leadTasks.styles';
import { LeadsStackParamList } from '../../navigation/leadsStack';
import { FormInput, FormPicker, ActionButton, CheckboxWithLabel } from '@components';

type LeadTasksRouteProp = RouteProp<LeadsStackParamList, 'leadTasks'>;

export const LeadTasksScreen = () => {
  const route = useRoute<LeadTasksRouteProp>();
  const navigation = useNavigation();
  const { theme: colors } = useTheme();
  const styles = getStyles(colors);

  const leadId = route.params?.leadId;

  // Multiple checkboxes can be checked at the same time
  const billableOptions = [
    { id: 'public', label: 'Public' },
    { id: 'billable', label: 'Billable' },
  ];

  // Form state
  const [selectedBillable, setSelectedBillable] = useState<string[]>(['billable']);
  const [attachment, setAttachment] = useState('');
  const [subject, setSubject] = useState('');
  const [hourlyRate, setHourlyRate] = useState('');
  const [startDate, setStartDate] = useState('');
  const [dueDate, setDueDate] = useState('');
  const [priority, setPriority] = useState('');
  const [repeatEvery, setRepeatEvery] = useState('');
  const [relatedTo, setRelatedTo] = useState('lead');
  const [lead, setLead] = useState('');
  const [assignees, setAssignees] = useState('');
  const [followers, setFollowers] = useState('');
  const [taskDescription, setTaskDescription] = useState('');

  const handleSave = () => {
    console.log('Save task pressed');
    // TODO: Implement save logic
  };

  return (
    <View style={styles.container}>
      <ScrollView style={styles.scrollView} contentContainerStyle={styles.scrollContent}>
        {/* Public or Billable */}
        <CheckboxWithLabel
          label="Public or Billable"
          options={billableOptions}
          selectedValues={selectedBillable}
          onValueChange={setSelectedBillable}
          singleSelect={false}
        />

        {/* Attachment */}
        <FormInput
          label="Attachment"
          value={attachment}
          onChangeText={setAttachment}
          placeholder=""
        />

        {/* Subject */}
        <FormInput
          label="Subject"
          value={subject}
          onChangeText={setSubject}
          placeholder=""
          required
        />

        {/* Hourly Rate */}
        <FormInput
          label="Hourly Rate"
          value={hourlyRate}
          onChangeText={setHourlyRate}
          placeholder=""
          keyboardType="numeric"
        />

        {/* Start Date and Due Date */}
        <View style={styles.row}>
          <View style={styles.halfWidth}>
            <FormInput
              label="Start Date"
              value={startDate}
              onChangeText={setStartDate}
              placeholder=""
              required
            />
          </View>
          <View style={styles.halfWidth}>
            <FormInput
              label="Due Date"
              value={dueDate}
              onChangeText={setDueDate}
              placeholder=""
            />
          </View>
        </View>

        {/* Priority */}
        <FormPicker
          label="Priority"
          value={priority}
          onValueChange={setPriority}
          options={[
            { label: 'Nothing selected', value: '' },
            { label: 'Low', value: 'low' },
            { label: 'Medium', value: 'medium' },
            { label: 'High', value: 'high' },
            { label: 'Urgent', value: 'urgent' },
          ]}
        />

        {/* Repeat every */}
        <FormPicker
          label="Repeat every"
          value={repeatEvery}
          onValueChange={setRepeatEvery}
          options={[
            { label: 'Nothing selected', value: '' },
            { label: 'Daily', value: 'daily' },
            { label: 'Weekly', value: 'weekly' },
            { label: 'Monthly', value: 'monthly' },
            { label: 'Yearly', value: 'yearly' },
          ]}
        />

        {/* Related To */}
        <FormPicker
          label="Related To"
          value={relatedTo}
          onValueChange={setRelatedTo}
          options={[
            { label: 'Lead', value: 'lead' },
            { label: 'Customer', value: 'customer' },
            { label: 'Project', value: 'project' },
          ]}
        />

        {/* Lead */}
        <FormPicker
          label="Lead"
          value={lead}
          onValueChange={setLead}
          options={[
            { label: 'Adan ltd - adantesr@gmail.com', value: 'adan_ltd' },
            { label: 'Select Lead', value: '' },
          ]}
        />

        {/* Assignees */}
        <FormPicker
          label="Assignees"
          value={assignees}
          onValueChange={setAssignees}
          options={[
            { label: 'Rahul Roy', value: 'rahul_roy' },
            { label: 'Select Assignee', value: '' },
          ]}
        />

        {/* Followers */}
        <FormPicker
          label="Followers"
          value={followers}
          onValueChange={setFollowers}
          options={[
            { label: 'Nothing selected', value: '' },
            { label: 'User 1', value: 'user_1' },
            { label: 'User 2', value: 'user_2' },
          ]}
        />

        {/* Task Description */}
        <FormInput
          label="Task Description"
          value={taskDescription}
          onChangeText={setTaskDescription}
          placeholder=""
          multiline
        />

        {/* Save Button */}
        <View style={styles.buttonContainer}>
          <ActionButton
            label="Save"
            onPress={handleSave}
            variant="primary"
          />
        </View>
      </ScrollView>
    </View>
  );
};