import React, { useState } from 'react';
import {
  View,
  Text,
  ScrollView,
  TouchableOpacity,
  TextInput,
} from 'react-native';
import { RouteProp, useRoute } from '@react-navigation/native';
import Icon from 'react-native-vector-icons/Ionicons';
import { useTheme } from '@theme';
import { getStyles } from './leadProposals.styles';
import { LeadsStackParamList } from '../../navigation/leadsStack';
import { FormInput, FormPicker, AddItemButton, ActionButton } from '@components';

type LeadProposalsRouteProp = RouteProp<LeadsStackParamList, 'leadProposals'>;

export const LeadProposalsScreen = () => {
  const route = useRoute<LeadProposalsRouteProp>();
  const { theme: colors } = useTheme();
  const styles = getStyles(colors);

  const leadId = route.params?.leadId;

  // Form state
  const [subject, setSubject] = useState('');
  const [relatedTo, setRelatedTo] = useState('lead');
  const [lead, setLead] = useState('');
  const [date, setDate] = useState('');
  const [openTill, setOpenTill] = useState('');
  const [currency, setCurrency] = useState('USD');
  const [discountType, setDiscountType] = useState('before_tax');
  const [status, setStatus] = useState('revised');
  const [assignedTo, setAssignedTo] = useState('');
  const [email, setEmail] = useState('');
  
  // Item fields
  const [showQuantityAs, setShowQuantityAs] = useState('qty');
  const [item, setItem] = useState('');
  const [description, setDescription] = useState('');
  const [qty, setQty] = useState('1');
  const [rate, setRate] = useState('0');
  const [tax, setTax] = useState('no_tax');
  
  // Calculation fields
  const [discount, setDiscount] = useState('0');
  const [discountUnit, setDiscountUnit] = useState('%');
  const [adjustment, setAdjustment] = useState('0');

  const handleAddItem = () => {
    console.log('Add item pressed');
  };

  const handleSave = () => {
    console.log('Save pressed');
  };

  const handleSaveAndSend = () => {
    console.log('Save and Send pressed');
  };

  return (
    <ScrollView style={styles.container} contentContainerStyle={styles.scrollContent}>
      {/* Form Fields - Step 1 */}
      <View style={styles.card}>
        <Text style={styles.cardTitle}>Basic Information</Text>
        
        <FormInput
          label="Subject"
          value={subject}
          onChangeText={setSubject}
          placeholder="Enter subject"
          required
        />

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

        <FormPicker
          label="Lead"
          value={lead}
          onValueChange={setLead}
          options={[
            { label: 'Select Lead', value: '' },
          ]}
          required
        />

        <View style={styles.row}>
          <View style={styles.halfWidth}>
            <FormInput
              label="Date"
              value={date}
              onChangeText={setDate}
              placeholder="Select date"
              required
            />
          </View>
          <View style={styles.halfWidth}>
            <FormInput
              label="Open Till"
              value={openTill}
              onChangeText={setOpenTill}
              placeholder="Select date"
            />
          </View>
        </View>

        <FormPicker
          label="Currency"
          value={currency}
          onValueChange={setCurrency}
          options={[
            { label: 'USD', value: 'USD' },
            { label: 'EUR', value: 'EUR' },
            { label: 'GBP', value: 'GBP' },
          ]}
          required
        />

        <FormPicker
          label="Discount Type"
          value={discountType}
          onValueChange={setDiscountType}
          options={[
            { label: 'Before Tax', value: 'before_tax' },
            { label: 'After Tax', value: 'after_tax' },
            { label: 'No Discount', value: 'no_discount' },
          ]}
        />

        <FormPicker
          label="Status"
          value={status}
          onValueChange={setStatus}
          options={[
            { label: 'Draft', value: 'draft' },
            { label: 'Sent', value: 'sent' },
            { label: 'Revised', value: 'revised' },
            { label: 'Declined', value: 'declined' },
            { label: 'Accepted', value: 'accepted' },
          ]}
        />

        <FormPicker
          label="Assigned to"
          value={assignedTo}
          onValueChange={setAssignedTo}
          options={[
            { label: 'Select User', value: '' },
          ]}
        />

        <FormInput
          label="Email"
          value={email}
          onChangeText={setEmail}
          placeholder="Enter email"
          keyboardType="email-address"
          required
        />
      </View>

      {/* Items Section */}
      <View style={styles.card}>
        <Text style={styles.cardTitle}>Items</Text>

        <FormPicker
          label="Show quantity as"
          value={showQuantityAs}
          onValueChange={setShowQuantityAs}
          options={[
            { label: 'Qty', value: 'qty' },
            { label: 'Hours', value: 'hours' },
            { label: 'Qty/Hours', value: 'qty_hours' },
          ]}
        />

        <FormInput
          label="Item"
          value={item}
          onChangeText={setItem}
          placeholder="Enter item name"
        />

        <FormInput
          label="Description"
          value={description}
          onChangeText={setDescription}
          placeholder="Long Description"
          multiline
        />

        <View style={styles.row}>
          <View style={styles.halfWidth}>
            <FormInput
              label="Qty"
              value={qty}
              onChangeText={setQty}
              keyboardType="numeric"
            />
          </View>
          <View style={styles.halfWidth}>
            <FormInput
              label="Rate"
              value={rate}
              onChangeText={setRate}
              keyboardType="numeric"
            />
          </View>
        </View>

        <FormPicker
          label="Tax"
          value={tax}
          onValueChange={setTax}
          options={[
            { label: 'No Tax', value: 'no_tax' },
            { label: 'Tax 1', value: 'tax_1' },
            { label: 'Tax 2', value: 'tax_2' },
          ]}
        />

        <AddItemButton onPress={handleAddItem} />
      </View>

      {/* Calculation Section */}
      <View style={styles.card}>
        <Text style={styles.cardTitle}>Summary</Text>

        <View style={styles.summaryRow}>
          <Text style={styles.summaryLabel}>Sub Total:</Text>
          <Text style={styles.summaryValue}>0.0</Text>
        </View>

        <View style={styles.discountRow}>
          <Text style={styles.summaryLabel}>Discount:</Text>
          <View style={styles.discountInputs}>
            <TextInput
              style={styles.discountInput}
              value={discount}
              onChangeText={setDiscount}
              keyboardType="numeric"
              placeholderTextColor={colors.textMuted}
            />
            <TouchableOpacity style={styles.unitButton}>
              <Text style={styles.unitText}>{discountUnit}</Text>
              <Icon name="chevron-down" size={16} color={colors.textSecondary} />
            </TouchableOpacity>
          </View>
          <Text style={styles.summaryValue}>0.00</Text>
        </View>

        <View style={styles.adjustmentRow}>
          <Text style={styles.summaryLabel}>Adjustment:</Text>
          <TextInput
            style={styles.adjustmentInput}
            value={adjustment}
            onChangeText={setAdjustment}
            keyboardType="numeric"
            placeholderTextColor={colors.textMuted}
          />
          <Text style={styles.summaryValue}>0</Text>
        </View>

        <View style={styles.totalRow}>
          <Text style={styles.totalLabel}>Total:</Text>
          <Text style={styles.totalValue}>0.00</Text>
        </View>
      </View>

      <ActionButton
        label="Save and Send"
        onPress={handleSaveAndSend}
        variant="secondary"
      />

      <ActionButton
        label="Save"
        onPress={handleSave}
        variant="primary"
      />
    </ScrollView>
  );
};