import React, { useState } from 'react';
import {
  View,
  Text,
  FlatList,
  StyleSheet,
  Modal,
  ScrollView,
} from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { useNavigation } from '@react-navigation/native';
import { ScreenContainer, ScreenListContainer } from '../../components/layout/ScreenContainer';
import { AnimatedCard } from '../../components/ui/AnimatedCard';
import { Card } from '../../components/common/Card';
import { Input } from '../../components/ui/Input';
import { Button } from '../../components/ui/Button';
import { EmptyState } from '../../components/ui/EmptyState';
import { useToast } from '../../context/ToastContext';
import { useResponsive } from '../../hooks/useResponsive';
import { adminService } from '../../services/adminService';
import { User } from '../../types';
import { colors, spacing, radii } from '../../theme';

export default function UserListScreen() {
  const navigation = useNavigation<any>();
  const { toast } = useToast();
  const { contentPadding, fontSize } = useResponsive();
  const [users, setUsers] = useState<User[]>([]);
  const [loading, setLoading] = useState(true);
  const [showCreate, setShowCreate] = useState(false);
  const [form, setForm] = useState({
    email: '',
    password: '',
    first_name: '',
    last_name: '',
    employee_code: '',
    phone: '',
    designation: '',
    role_id: '',
  });
  const [creating, setCreating] = useState(false);
  const [errors, setErrors] = useState<Record<string, string>>({});

  const loadUsers = async () => {
    try {
      const data = await adminService.users();
      setUsers(data);
    } catch (error) {
      console.error('Failed to load users:', error);
    } finally {
      setLoading(false);
    }
  };

  React.useEffect(() => {
    loadUsers();
  }, []);

  const validate = () => {
    const newErrors: Record<string, string> = {};
    if (!form.email) newErrors.email = 'Email is required';
    if (!form.password) newErrors.password = 'Password is required';
    if (!form.first_name) newErrors.first_name = 'First name is required';
    if (!form.employee_code) newErrors.employee_code = 'Employee code is required';
    if (!form.role_id) newErrors.role_id = 'Role is required';
    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

  const handleCreate = async () => {
    if (!validate()) return;

    setCreating(true);
    try {
      await adminService.createUser({ ...form, role_id: parseInt(form.role_id) });
      toast('User created successfully', 'success');
      setShowCreate(false);
      setForm({
        email: '',
        password: '',
        first_name: '',
        last_name: '',
        employee_code: '',
        phone: '',
        designation: '',
        role_id: '',
      });
      loadUsers();
    } catch (error: any) {
      toast(error.response?.data?.error || 'Failed to create user', 'error');
    } finally {
      setCreating(false);
    }
  };

  return (
    <>
      <ScreenListContainer
        title="Users"
        subtitle={`${users.length} users`}
        onBack={() => navigation.goBack()}
        rightAction={{ icon: 'person-add-outline', onPress: () => setShowCreate(true) }}
        loading={loading}
        data={users}
        keyExtractor={(item) => item.id.toString()}
        renderItem={({ item, index }) => (
          <AnimatedCard delay={index * 60} style={{ marginBottom: spacing.md }}>
            <View style={[styles.row, { gap: spacing.md }]}>
              <View style={[styles.avatar, { backgroundColor: colors.primary[600] }]}>
                <Text style={[styles.avatarText, { color: colors.white, fontSize: fontSize.h3 }]}>
                  {item.first_name[0]}
                  {item.last_name?.[0] || ''}
                </Text>
              </View>
              <View style={styles.info}>
                <Text style={[styles.name, { fontSize: fontSize.h3 }]}>
                  {item.first_name} {item.last_name}
                </Text>
                <Text style={[styles.email, { fontSize: fontSize.bodySmall, marginTop: spacing.xs }]}>{item.email}</Text>
                <Text style={[styles.code, { fontSize: fontSize.caption, marginTop: spacing.xs }]}>Code: {item.employee_code}</Text>
              </View>
              <Ionicons name="chevron-forward" size={18} color={colors.gray[300]} />
            </View>
          </AnimatedCard>
        )}
        ListEmptyComponent={
          <EmptyState
            icon="people-outline"
            title="No users found"
            description="Create your first user to get started"
          />
        }
      />

      <Modal visible={showCreate} animationType="slide">
        <View style={styles.modal}>
          <ScreenContainer
            title="Create User"
            onBack={() => setShowCreate(false)}
            scroll={true}
            contentPadding={contentPadding}
          >
            <Input
              label="First Name"
              required
              placeholder="Enter first name"
              value={form.first_name}
              onChangeText={(v) => setForm({ ...form, first_name: v })}
              error={errors.first_name}
            />

            <Input
              label="Last Name"
              placeholder="Enter last name"
              value={form.last_name}
              onChangeText={(v) => setForm({ ...form, last_name: v })}
            />

            <Input
              label="Email"
              required
              placeholder="Enter email"
              value={form.email}
              onChangeText={(v) => setForm({ ...form, email: v })}
              keyboardType="email-address"
              error={errors.email}
            />

            <Input
              label="Password"
              required
              placeholder="Enter password"
              value={form.password}
              onChangeText={(v) => setForm({ ...form, password: v })}
              secureTextEntry
              error={errors.password}
            />

            <Input
              label="Employee Code"
              required
              placeholder="Enter employee code"
              value={form.employee_code}
              onChangeText={(v) => setForm({ ...form, employee_code: v })}
              error={errors.employee_code}
            />

            <Input
              label="Phone"
              placeholder="Enter phone number"
              value={form.phone}
              onChangeText={(v) => setForm({ ...form, phone: v })}
              keyboardType="phone-pad"
            />

            <Input
              label="Designation"
              placeholder="Enter designation"
              value={form.designation}
              onChangeText={(v) => setForm({ ...form, designation: v })}
            />

            <Input
              label="Role ID"
              required
              placeholder="Enter role ID"
              value={form.role_id}
              onChangeText={(v) => setForm({ ...form, role_id: v })}
              keyboardType="numeric"
              error={errors.role_id}
            />

            <Button
              title="Create User"
              onPress={handleCreate}
              loading={creating}
              disabled={creating}
              size="lg"
              style={{ marginTop: spacing.md }}
            />
          </ScreenContainer>
        </View>
      </Modal>
    </>
  );
}

const styles = StyleSheet.create({
  modal: {
    flex: 1,
    backgroundColor: colors.background,
  },
  row: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  avatar: {
    width: 44,
    height: 44,
    borderRadius: 22,
    justifyContent: 'center',
    alignItems: 'center',
  },
  avatarText: {
    fontWeight: '600',
  },
  info: {
    flex: 1,
  },
  name: {
    fontWeight: '600',
    color: colors.gray[900],
  },
  email: {
    color: colors.gray[500],
  },
  code: {
    color: colors.gray[400],
  },
});