import React, { useState, useEffect } from 'react';
import { View, Text, StyleSheet, TextInput, TouchableOpacity, ScrollView, Modal, FlatList } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { useNavigation, useRoute } from '@react-navigation/native';
import { ScreenContainer } from '../../components/layout/ScreenContainer';
import { useResponsive } from '../../hooks/useResponsive';
import { useToast } from '../../context/ToastContext';
import { materialService } from '../../services/materialService';
import { MaterialCategory, MaterialUnit } from '../../types';
import { colors, spacing, radii } from '../../theme';

export default function MaterialFormScreen() {
  const navigation = useNavigation<any>();
  const route = useRoute<any>();
  const { materialId } = route.params || {};
  const isEdit = !!materialId;
  const { contentPadding, fontSize } = useResponsive();
  const { toast } = useToast();

  const [name, setName] = useState('');
  const [code, setCode] = useState('');
  const [description, setDescription] = useState('');
  const [categoryId, setCategoryId] = useState<number | null>(null);
  const [unitId, setUnitId] = useState<number | null>(null);
  const [status, setStatus] = useState('ACTIVE');
  const [stockQty, setStockQty] = useState('0');

  const [categories, setCategories] = useState<MaterialCategory[]>([]);
  const [units, setUnits] = useState<MaterialUnit[]>([]);
  const [showCategoryPicker, setShowCategoryPicker] = useState(false);
  const [showUnitPicker, setShowUnitPicker] = useState(false);
  const [showStatusPicker, setShowStatusPicker] = useState(false);
  const [loading, setLoading] = useState(false);
  const [initialLoading, setInitialLoading] = useState(!!materialId);

  const [newCatName, setNewCatName] = useState('');
  const [newUnitName, setNewUnitName] = useState('');
  const [addingCat, setAddingCat] = useState(false);
  const [addingUnit, setAddingUnit] = useState(false);

  useEffect(() => {
    loadMeta();
    if (isEdit) loadMaterial();
  }, []);

  const loadMeta = async () => {
    try {
      const [cats, unt] = await Promise.all([
        materialService.listCategories(),
        materialService.listUnits(),
      ]);
      setCategories(cats);
      setUnits(unt);
    } catch {}
  };

  const loadMaterial = async () => {
    try {
      const data = await materialService.getById(materialId);
      setName(data.material_name);
      setCode(data.material_code);
      setDescription(data.description || '');
      setCategoryId(data.category_id);
      setUnitId(data.unit_id);
      setStatus(data.status);
      setStockQty(String(data.stock_quantity ?? 0));
    } catch {
      toast('Failed to load material', 'error');
    } finally {
      setInitialLoading(false);
    }
  };

  const handleSave = async () => {
    if (!name.trim()) return toast('Name is required', 'error');
    if (!code.trim()) return toast('Code is required', 'error');
    setLoading(true);
    try {
      if (isEdit) {
        await materialService.update(materialId, {
          material_name: name.trim(),
          material_code: code.trim(),
          category_id: categoryId || undefined,
          unit_id: unitId || undefined,
          description: description.trim() || undefined,
          status,
          stock_quantity: parseFloat(stockQty) || 0,
        });
        toast('Material updated', 'success');
      } else {
        await materialService.create({
          material_name: name.trim(),
          material_code: code.trim(),
          category_id: categoryId || undefined,
          unit_id: unitId || undefined,
          description: description.trim() || undefined,
          stock_quantity: parseFloat(stockQty) || 0,
        });
        toast('Material created', 'success');
      }
      navigation.goBack();
    } catch (e: any) {
      toast(e.response?.data?.message || 'Failed to save material', 'error');
    } finally {
      setLoading(false);
    }
  };

  const handleAddCategory = async () => {
    if (!newCatName.trim()) return;
    try {
      const cat = await materialService.createCategory(newCatName.trim());
      const updated = await materialService.listCategories();
      setCategories(updated);
      setCategoryId(cat.id);
      setNewCatName('');
      setAddingCat(false);
      setShowCategoryPicker(false);
      toast('Category created', 'success');
    } catch (e: any) {
      toast(e.response?.data?.message || 'Failed to create category', 'error');
    }
  };

  const handleAddUnit = async () => {
    if (!newUnitName.trim()) return;
    try {
      const unit = await materialService.createUnit(newUnitName.trim());
      const updated = await materialService.listUnits();
      setUnits(updated);
      setUnitId(unit.id);
      setNewUnitName('');
      setAddingUnit(false);
      setShowUnitPicker(false);
      toast('Unit created', 'success');
    } catch (e: any) {
      toast(e.response?.data?.message || 'Failed to create unit', 'error');
    }
  };

  const selectedCategory = categories.find(c => c.id === categoryId);
  const selectedUnit = units.find(u => u.id === unitId);

  return (
    <ScreenContainer
      title={isEdit ? 'Edit Material' : 'New Material'}
      onBack={() => navigation.goBack()}
      loading={initialLoading}
      scroll={true}
      contentPadding={contentPadding}
    >
      <View style={styles.form}>
        <View style={styles.field}>
          <Text style={[styles.label, { fontSize: fontSize.caption }]}>Material Name *</Text>
          <TextInput
            style={[styles.input, { fontSize: fontSize.body }]}
            placeholder="e.g. Safety Helmet"
            placeholderTextColor={colors.gray[400]}
            value={name}
            onChangeText={setName}
          />
        </View>

        <View style={styles.field}>
          <Text style={[styles.label, { fontSize: fontSize.caption }]}>Material Code *</Text>
          <TextInput
            style={[styles.input, { fontSize: fontSize.body }]}
            placeholder="e.g. MAT-001"
            placeholderTextColor={colors.gray[400]}
            value={code}
            onChangeText={setCode}
            autoCapitalize="characters"
          />
        </View>

        <View style={styles.field}>
          <Text style={[styles.label, { fontSize: fontSize.caption }]}>Category</Text>
          <TouchableOpacity style={styles.picker} onPress={() => setShowCategoryPicker(true)}>
            <Text style={[styles.pickerText, { fontSize: fontSize.body, color: selectedCategory ? colors.gray[900] : colors.gray[400] }]}>
              {selectedCategory?.name || 'Select category'}
            </Text>
            <Ionicons name="chevron-down" size={18} color={colors.gray[400]} />
          </TouchableOpacity>
        </View>

        <View style={styles.field}>
          <Text style={[styles.label, { fontSize: fontSize.caption }]}>Unit</Text>
          <TouchableOpacity style={styles.picker} onPress={() => setShowUnitPicker(true)}>
            <Text style={[styles.pickerText, { fontSize: fontSize.body, color: selectedUnit ? colors.gray[900] : colors.gray[400] }]}>
              {selectedUnit?.name || 'Select unit'}
            </Text>
            <Ionicons name="chevron-down" size={18} color={colors.gray[400]} />
          </TouchableOpacity>
        </View>

        <View style={styles.field}>
          <Text style={[styles.label, { fontSize: fontSize.caption }]}>Description</Text>
          <TextInput
            style={[styles.input, styles.textArea, { fontSize: fontSize.body }]}
            placeholder="Optional description"
            placeholderTextColor={colors.gray[400]}
            value={description}
            onChangeText={setDescription}
            multiline
            numberOfLines={3}
          />
        </View>

        <View style={styles.field}>
          <Text style={[styles.label, { fontSize: fontSize.caption }]}>Stock Quantity</Text>
          <TextInput
            style={[styles.input, { fontSize: fontSize.body }]}
            placeholder="0"
            placeholderTextColor={colors.gray[400]}
            value={stockQty}
            onChangeText={setStockQty}
            keyboardType="numeric"
          />
        </View>

        {isEdit && (
          <View style={styles.field}>
            <Text style={[styles.label, { fontSize: fontSize.caption }]}>Status</Text>
            <TouchableOpacity style={styles.picker} onPress={() => setShowStatusPicker(true)}>
              <Text style={[styles.pickerText, { fontSize: fontSize.body, color: colors.gray[900] }]}>{status}</Text>
              <Ionicons name="chevron-down" size={18} color={colors.gray[400]} />
            </TouchableOpacity>
          </View>
        )}

        <TouchableOpacity
          style={[styles.saveButton, loading && { opacity: 0.5 }]}
          onPress={handleSave}
          disabled={loading}
        >
          <Ionicons name="checkmark-circle-outline" size={20} color={colors.white} />
          <Text style={[styles.saveButtonText, { fontSize: fontSize.body }]}>
            {loading ? 'Saving...' : isEdit ? 'Update Material' : 'Create Material'}
          </Text>
        </TouchableOpacity>
      </View>

      {/* Category Picker */}
      <Modal visible={showCategoryPicker} animationType="slide" transparent>
        <View style={styles.modalOverlay}>
          <View style={styles.modalContent}>
            <View style={styles.modalHeader}>
              <Text style={[styles.modalTitle, { fontSize: fontSize.h3 }]}>Select Category</Text>
              <View style={{ flexDirection: 'row', alignItems: 'center', gap: spacing.md }}>
                <TouchableOpacity onPress={() => { setAddingCat(true); }} style={styles.addBtn}>
                  <Ionicons name="add-circle" size={26} color={colors.primary[600]} />
                </TouchableOpacity>
                <TouchableOpacity onPress={() => { setShowCategoryPicker(false); setAddingCat(false); }}>
                  <Ionicons name="close" size={24} color={colors.gray[600]} />
                </TouchableOpacity>
              </View>
            </View>
            {addingCat && (
              <View style={styles.inlineAddRow}>
                <TextInput
                  style={[styles.inlineInput, { fontSize: fontSize.body }]}
                  placeholder="New category name"
                  placeholderTextColor={colors.gray[400]}
                  value={newCatName}
                  onChangeText={setNewCatName}
                  autoFocus
                />
                <TouchableOpacity style={styles.inlineSaveBtn} onPress={handleAddCategory}>
                  <Ionicons name="checkmark" size={22} color={colors.white} />
                </TouchableOpacity>
                <TouchableOpacity style={styles.inlineCancelBtn} onPress={() => { setAddingCat(false); setNewCatName(''); }}>
                  <Ionicons name="close" size={22} color={colors.gray[500]} />
                </TouchableOpacity>
              </View>
            )}
            <FlatList
              data={[{ id: null, name: 'None' } as any, ...categories]}
              keyExtractor={(item) => item.id?.toString() || 'none'}
              renderItem={({ item }) => (
                <TouchableOpacity
                  style={[styles.pickerOption, categoryId === item.id && styles.pickerOptionActive]}
                  onPress={() => { setCategoryId(item.id); setShowCategoryPicker(false); setAddingCat(false); }}
                >
                  <Text style={[styles.pickerOptionText, { color: categoryId === item.id ? colors.primary[600] : colors.gray[800], fontSize: fontSize.body }]}>
                    {item.name}
                  </Text>
                  {categoryId === item.id && <Ionicons name="checkmark" size={20} color={colors.primary[600]} />}
                </TouchableOpacity>
              )}
            />
          </View>
        </View>
      </Modal>

      {/* Unit Picker */}
      <Modal visible={showUnitPicker} animationType="slide" transparent>
        <View style={styles.modalOverlay}>
          <View style={styles.modalContent}>
            <View style={styles.modalHeader}>
              <Text style={[styles.modalTitle, { fontSize: fontSize.h3 }]}>Select Unit</Text>
              <View style={{ flexDirection: 'row', alignItems: 'center', gap: spacing.md }}>
                <TouchableOpacity onPress={() => { setAddingUnit(true); }} style={styles.addBtn}>
                  <Ionicons name="add-circle" size={26} color={colors.primary[600]} />
                </TouchableOpacity>
                <TouchableOpacity onPress={() => { setShowUnitPicker(false); setAddingUnit(false); }}>
                  <Ionicons name="close" size={24} color={colors.gray[600]} />
                </TouchableOpacity>
              </View>
            </View>
            {addingUnit && (
              <View style={styles.inlineAddRow}>
                <TextInput
                  style={[styles.inlineInput, { fontSize: fontSize.body }]}
                  placeholder="New unit name"
                  placeholderTextColor={colors.gray[400]}
                  value={newUnitName}
                  onChangeText={setNewUnitName}
                  autoFocus
                />
                <TouchableOpacity style={styles.inlineSaveBtn} onPress={handleAddUnit}>
                  <Ionicons name="checkmark" size={22} color={colors.white} />
                </TouchableOpacity>
                <TouchableOpacity style={styles.inlineCancelBtn} onPress={() => { setAddingUnit(false); setNewUnitName(''); }}>
                  <Ionicons name="close" size={22} color={colors.gray[500]} />
                </TouchableOpacity>
              </View>
            )}
            <FlatList
              data={[{ id: null, name: 'None' } as any, ...units]}
              keyExtractor={(item) => item.id?.toString() || 'none'}
              renderItem={({ item }) => (
                <TouchableOpacity
                  style={[styles.pickerOption, unitId === item.id && styles.pickerOptionActive]}
                  onPress={() => { setUnitId(item.id); setShowUnitPicker(false); setAddingUnit(false); }}
                >
                  <Text style={[styles.pickerOptionText, { color: unitId === item.id ? colors.primary[600] : colors.gray[800], fontSize: fontSize.body }]}>
                    {item.name}
                  </Text>
                  {unitId === item.id && <Ionicons name="checkmark" size={20} color={colors.primary[600]} />}
                </TouchableOpacity>
              )}
            />
          </View>
        </View>
      </Modal>

      {/* Status Picker */}
      <Modal visible={showStatusPicker} animationType="slide" transparent>
        <View style={styles.modalOverlay}>
          <View style={styles.modalContent}>
            <View style={styles.modalHeader}>
              <Text style={[styles.modalTitle, { fontSize: fontSize.h3 }]}>Status</Text>
              <TouchableOpacity onPress={() => setShowStatusPicker(false)}>
                <Ionicons name="close" size={24} color={colors.gray[600]} />
              </TouchableOpacity>
            </View>
            {['ACTIVE', 'INACTIVE'].map((s) => (
              <TouchableOpacity
                key={s}
                style={[styles.pickerOption, status === s && styles.pickerOptionActive]}
                onPress={() => { setStatus(s); setShowStatusPicker(false); }}
              >
                <Text style={[styles.pickerOptionText, { color: status === s ? colors.primary[600] : colors.gray[800], fontSize: fontSize.body }]}>{s}</Text>
                {status === s && <Ionicons name="checkmark" size={20} color={colors.primary[600]} />}
              </TouchableOpacity>
            ))}
          </View>
        </View>
      </Modal>
    </ScreenContainer>
  );
}

const styles = StyleSheet.create({
  form: { gap: spacing.lg },
  field: { gap: spacing.xs },
  label: { fontWeight: '600', color: colors.gray[700] },
  input: {
    backgroundColor: colors.white,
    borderWidth: 1,
    borderColor: colors.gray[200],
    borderRadius: radii.md,
    paddingHorizontal: spacing.md,
    paddingVertical: spacing.sm,
    color: colors.gray[900],
  },
  textArea: { minHeight: 80, textAlignVertical: 'top' },
  picker: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    backgroundColor: colors.white,
    borderWidth: 1,
    borderColor: colors.gray[200],
    borderRadius: radii.md,
    paddingHorizontal: spacing.md,
    paddingVertical: spacing.sm,
  },
  pickerText: { fontWeight: '400' },
  saveButton: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    gap: spacing.sm,
    backgroundColor: colors.primary[600],
    borderRadius: radii.md,
    paddingVertical: spacing.md,
    marginTop: spacing.md,
  },
  saveButtonText: { color: colors.white, fontWeight: '600' },
  modalOverlay: { flex: 1, backgroundColor: 'rgba(0,0,0,0.5)', justifyContent: 'flex-end' },
  modalContent: { backgroundColor: colors.white, borderTopLeftRadius: radii.xl, borderTopRightRadius: radii.xl, maxHeight: '60%' },
  modalHeader: {
    flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center',
    padding: spacing.lg, borderBottomWidth: 1, borderBottomColor: colors.border,
  },
  modalTitle: { fontWeight: '700', color: colors.gray[900] },
  addBtn: { padding: 2 },
  inlineAddRow: {
    flexDirection: 'row', alignItems: 'center', gap: spacing.sm,
    paddingHorizontal: spacing.lg, paddingVertical: spacing.sm,
    backgroundColor: colors.gray[50], borderBottomWidth: 1, borderBottomColor: colors.gray[100],
  },
  inlineInput: {
    flex: 1,
    backgroundColor: colors.white,
    borderWidth: 1,
    borderColor: colors.primary[300],
    borderRadius: radii.md,
    paddingHorizontal: spacing.md,
    paddingVertical: spacing.xs,
    color: colors.gray[900],
  },
  inlineSaveBtn: {
    backgroundColor: colors.primary[600],
    borderRadius: radii.md,
    paddingHorizontal: spacing.sm,
    paddingVertical: spacing.xs,
  },
  inlineCancelBtn: {
    backgroundColor: colors.gray[200],
    borderRadius: radii.md,
    paddingHorizontal: spacing.sm,
    paddingVertical: spacing.xs,
  },
  pickerOption: {
    flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between',
    paddingHorizontal: spacing.lg, paddingVertical: spacing.md,
    borderBottomWidth: 1, borderBottomColor: colors.gray[100],
  },
  pickerOptionActive: { backgroundColor: colors.primary[50] },
  pickerOptionText: { fontWeight: '500' },
});