import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity, ScrollView } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { colors, spacing, radii, shadows } from '../../theme';
import { useAuth } from '../../hooks/useAuth';
import { useToast } from '../../context/ToastContext';

interface NavItem {
  label: string;
  icon: keyof typeof Ionicons.glyphMap;
  route: string;
  permission?: string;
  adminOnly?: boolean;
}

const adminNavItems: NavItem[] = [
  { label: 'Dashboard', icon: 'grid-outline', route: 'AdminHome' },
  { label: 'Users', icon: 'people-outline', route: 'UserList', permission: 'user.view', adminOnly: true },
  { label: 'Roles & Permissions', icon: 'shield-checkmark-outline', route: 'RoleList', permission: 'user.view', adminOnly: true },
  { label: 'Jobs', icon: 'briefcase-outline', route: 'Jobs', permission: 'job.view' },
  { label: 'Materials', icon: 'cube-outline', route: 'Materials', permission: 'material.view' },
  { label: 'Geofences', icon: 'location-outline', route: 'GeofenceList', permission: 'geofence.view', adminOnly: true },
  { label: 'Reports', icon: 'bar-chart-outline', route: 'Report', permission: 'report.view' },
  { label: 'Audit Log', icon: 'document-text-outline', route: 'AuditLog', permission: 'report.view', adminOnly: true },
];

const userNavItems: NavItem[] = [
  { label: 'Dashboard', icon: 'grid-outline', route: 'UserDashboard' },
  { label: 'My Jobs', icon: 'briefcase-outline', route: 'Jobs', permission: 'job.view' },
  { label: 'Materials', icon: 'cube-outline', route: 'Materials', permission: 'material.view' },
];

interface SidebarProps {
  activeRoute: string;
  collapsed: boolean;
  onToggle: () => void;
  onNavigate: (route: string) => void;
  onLogout?: () => void;
}

export function Sidebar({ activeRoute, collapsed, onToggle, onNavigate, onLogout }: SidebarProps) {
  const { user, isAdmin, logout, hasPermission } = useAuth();
  const { toast } = useToast();
  const navItems = isAdmin ? adminNavItems : userNavItems;
  const initials = `${user?.first_name?.[0] || ''}${user?.last_name?.[0] || ''}`.toUpperCase();

  const handleLogout = async () => {
    onLogout?.();
    try {
      await logout();
    } catch {
      // silent
    }
    toast('Signed out successfully', 'success');
  };

  return (
    <View style={[styles.sidebar, collapsed && styles.collapsed]}>
      <View style={styles.logoSection}>
        {!collapsed && (
          <View style={styles.logoContainer}>
            <View style={styles.logoIcon}>
              <Ionicons name="briefcase" size={20} color={colors.white} />
            </View>
            <View>
              <Text style={styles.logoText}>FieldService</Text>
              <Text style={styles.logoSubtext}>{isAdmin ? 'Admin Panel' : 'Workbench'}</Text>
            </View>
          </View>
        )}
        {collapsed && (
          <View style={styles.logoSectionCollapsed}>
            <TouchableOpacity onPress={onToggle} style={styles.toggleBtn}>
              <Ionicons name="chevron-forward" size={18} color={colors.gray[400]} />
            </TouchableOpacity>
          </View>
        )}
        {!collapsed && (
          <TouchableOpacity onPress={onToggle} style={styles.toggleBtn}>
            <Ionicons name="chevron-back" size={18} color={colors.gray[400]} />
          </TouchableOpacity>
        )}
      </View>

      {!collapsed && (
        <View style={styles.userCard}>
          <View style={styles.avatar}>
            <Text style={styles.avatarText}>{initials}</Text>
          </View>
          <View style={styles.userInfo}>
            <Text style={styles.userName} numberOfLines={1}>
              {user?.first_name} {user?.last_name}
            </Text>
            <Text style={styles.userRole} numberOfLines={1}>
              {user?.role_names?.[0]?.replace(/_/g, ' ') || 'User'}
            </Text>
          </View>
        </View>
      )}

      <ScrollView style={styles.navScroll} showsVerticalScrollIndicator={false}>
        <View style={styles.navSection}>
          {!collapsed && <Text style={styles.navSectionLabel}>Navigation</Text>}
          {navItems
            .filter(item => !item.permission || hasPermission(item.permission))
            .map((item) => {
              const isActive = activeRoute === item.route;
              return (
                <TouchableOpacity
                  key={item.route}
                  style={[styles.navItem, isActive && styles.navItemActive, collapsed && styles.navItemCollapsed]}
                  onPress={() => onNavigate(item.route)}
                  activeOpacity={0.7}
                >
                  <Ionicons
                    name={item.icon}
                    size={20}
                    color={isActive ? colors.primary[600] : colors.gray[500]}
                  />
                  {!collapsed && (
                    <Text style={[styles.navLabel, isActive && styles.navLabelActive]}>
                      {item.label}
                    </Text>
                  )}
                  {isActive && <View style={styles.activeIndicator} />}
                </TouchableOpacity>
              );
            })}
        </View>
      </ScrollView>

      <View style={styles.footer}>
        <TouchableOpacity
          style={[styles.logoutBtn, collapsed && styles.logoutBtnCollapsed]}
          onPress={handleLogout}
          activeOpacity={0.7}
        >
          <Ionicons name="log-out-outline" size={20} color={colors.gray[500]} />
          {!collapsed && <Text style={styles.logoutLabel}>Sign Out</Text>}
        </TouchableOpacity>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  sidebar: {
    width: 260,
    backgroundColor: colors.gray[900],
    height: '100%',
    justifyContent: 'flex-start',
  },
  collapsed: {
    width: 68,
  },
  logoSection: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    padding: spacing.lg,
    borderBottomWidth: 1,
    borderBottomColor: 'rgba(255,255,255,0.08)',
  },
  logoSectionCollapsed: {
    flex: 1,
  },
  logoContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: spacing.sm,
  },
  logoIcon: {
    width: 36,
    height: 36,
    borderRadius: radii.lg,
    backgroundColor: colors.primary[600],
    justifyContent: 'center',
    alignItems: 'center',
  },
  logoText: {
    fontSize: 17,
    fontWeight: '700',
    color: colors.white,
    letterSpacing: -0.3,
  },
  logoSubtext: {
    fontSize: 11,
    color: colors.gray[400],
  },
  toggleBtn: {
    padding: spacing.xs,
  },
  userCard: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: spacing.lg,
    gap: spacing.md,
    borderBottomWidth: 1,
    borderBottomColor: 'rgba(255,255,255,0.08)',
  },
  avatar: {
    width: 40,
    height: 40,
    borderRadius: radii.xl,
    backgroundColor: colors.primary[600],
    justifyContent: 'center',
    alignItems: 'center',
  },
  avatarText: {
    color: colors.white,
    fontSize: 14,
    fontWeight: '700',
  },
  userInfo: {
    flex: 1,
  },
  userName: {
    fontSize: 14,
    fontWeight: '600',
    color: colors.white,
  },
  userRole: {
    fontSize: 12,
    color: colors.gray[400],
    marginTop: 1,
    textTransform: 'capitalize',
  },
  navScroll: {
    flex: 1,
  },
  navSection: {
    padding: spacing.md,
    gap: 2,
  },
  navSectionLabel: {
    fontSize: 11,
    fontWeight: '600',
    color: colors.gray[500],
    textTransform: 'uppercase',
    letterSpacing: 0.8,
    paddingHorizontal: spacing.sm,
    paddingVertical: spacing.sm,
    marginBottom: spacing.xs,
  },
  navItem: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingVertical: 10,
    paddingHorizontal: spacing.md,
    borderRadius: radii.md,
    gap: spacing.md,
    position: 'relative',
  },
  navItemCollapsed: {
    justifyContent: 'center',
    paddingHorizontal: 0,
  },
  navItemActive: {
    backgroundColor: 'rgba(99, 102, 241, 0.12)',
  },
  navLabel: {
    fontSize: 14,
    fontWeight: '500',
    color: colors.gray[400],
    flex: 1,
  },
  navLabelActive: {
    color: colors.primary[400],
    fontWeight: '600',
  },
  activeIndicator: {
    position: 'absolute',
    left: 0,
    top: '50%',
    marginTop: -12,
    width: 3,
    height: 24,
    borderRadius: 2,
    backgroundColor: colors.primary[500],
  },
  footer: {
    padding: spacing.md,
    borderTopWidth: 1,
    borderTopColor: 'rgba(255,255,255,0.08)',
  },
  logoutBtn: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: spacing.md,
    paddingVertical: 10,
    paddingHorizontal: spacing.md,
    borderRadius: radii.md,
  },
  logoutBtnCollapsed: {
    justifyContent: 'center',
    paddingHorizontal: 0,
  },
  logoutLabel: {
    fontSize: 14,
    fontWeight: '500',
    color: colors.gray[400],
  },
});