import React, { useState, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import {
  useGroups,
  useCreateGroup,
  useUpdateGroup,
  useDeleteGroup,
  usePermissions,
  useGroupMembers,
  useAddGroupMember,
  useRemoveGroupMember,
  useUsers,
} from '@/api/hooks';
import type { PermissionItem, Group, GroupMember } from '@/api/hooks';
import { Input } from '@/components/ui/Input';
import { Button } from '@/components/ui/Button';
import { Card } from '@/components/ui/Card';
import { Badge } from '@/components/ui/Badge';
import { Select } from '@/components/ui/Select';
import { EmptyState } from '@/components/ui/EmptyState';
import { Skeleton } from '@/components/ui/Skeleton';
import { useToast } from '@/components/ui/Toast';
import { Modal } from '@/components/ui/Modal';
import { ConfirmDialog } from '@/components/ui/ConfirmDialog';

function isPermissionGranted(permissions: Record<string, any>, permKey: string): boolean {
  if (!permissions) return false;
  if (typeof permissions === 'boolean') return permissions;
  if (Array.isArray(permissions)) return permissions.includes(permKey);
  if (typeof permissions === 'object') {
    if (permKey in permissions) {
      const val = permissions[permKey];
      return val === true || val === 'true' || val === 1;
    }
    if ('all' in permissions && permissions.all === true) return true;
  }
  return false;
}

function togglePermission(
  permissions: Record<string, any>,
  permKey: string
): Record<string, any> {
  const current = isPermissionGranted(permissions, permKey);
  return { ...permissions, [permKey]: !current };
}

function getGrantedPermissionKeys(permissions: Record<string, any>): string[] {
  if (!permissions) return [];
  if (Array.isArray(permissions)) return permissions as string[];
  if (typeof permissions === 'object') {
    return Object.keys(permissions).filter(
      (k) => k !== 'all' && permissions[k] === true
    );
  }
  return [];
}

function toggleDeniedPermission(denied: string[], permKey: string): string[] {
  if (denied.includes(permKey)) {
    return denied.filter((k) => k !== permKey);
  }
  return [...denied, permKey];
}

interface EditingGroup extends Partial<Group> {
  id?: string;
  name: string;
  description: string;
  permissions: Record<string, any>;
  denied_permissions: string[];
  field_permissions: Record<string, any>;
}

export function SettingsGroupsPage() {
  const { t } = useTranslation();
  const toast = useToast();
  const { data, isLoading, isError, error, refetch } = useGroups();
  const { data: permissionsData, isLoading: permissionsLoading } = usePermissions();
  const createGroupMutation = useCreateGroup();
  const updateGroupMutation = useUpdateGroup();
  const deleteGroupMutation = useDeleteGroup();

  const [createOpen, setCreateOpen] = useState(false);
  const [newGroupName, setNewGroupName] = useState('');
  const [newGroupDescription, setNewGroupDescription] = useState('');
  const [newGroupPermissions, setNewGroupPermissions] = useState<Record<string, any>>({});
  const [newGroupDenied, setNewGroupDenied] = useState<string[]>([]);
  const [editingGroup, setEditingGroup] = useState<EditingGroup | null>(null);
  const [confirmDelete, setConfirmDelete] = useState<Group | null>(null);

  // Member management state
  const [memberSearchUserId, setMemberSearchUserId] = useState('');

  const groups: Group[] = data?.items ?? [];

  const allPermissions: PermissionItem[] = useMemo(() => {
    return permissionsData?.all ?? [];
  }, [permissionsData]);

  const permissionLabelMap = useMemo(() => {
    const map = new Map<string, string>();
    for (const perm of allPermissions) {
      map.set(perm.key, perm.label);
    }
    return map;
  }, [allPermissions]);

  const groupedPermissions = useMemo(() => {
    const groups: Record<string, PermissionItem[]> = {};
    for (const perm of allPermissions) {
      if (!groups[perm.category]) {
        groups[perm.category] = [];
      }
      groups[perm.category].push(perm);
    }
    return groups;
  }, [allPermissions]);

  const handleCreateGroup = async () => {
    if (!newGroupName.trim()) {
      toast.error(t('validation.required', 'Pflichtfeld'));
      return;
    }
    try {
      await createGroupMutation.mutateAsync({
        name: newGroupName.trim(),
        description: newGroupDescription.trim() || null,
        permissions: newGroupPermissions,
        denied_permissions: newGroupDenied,
        field_permissions: {},
      });
      toast.success(t('settings.groupCreated', 'Gruppe erstellt'));
      setNewGroupName('');
      setNewGroupDescription('');
      setNewGroupPermissions({});
      setNewGroupDenied([]);
      setCreateOpen(false);
    } catch (err: any) {
      toast.error(err.message || t('common.error'));
    }
  };

  const handleTogglePermission = (permKey: string, target: 'new' | 'edit') => {
    if (target === 'new') {
      setNewGroupPermissions((prev) => togglePermission(prev, permKey));
    } else if (editingGroup) {
      setEditingGroup({
        ...editingGroup,
        permissions: togglePermission(editingGroup.permissions || {}, permKey),
      });
    }
  };

  const handleToggleDenied = (permKey: string, target: 'new' | 'edit') => {
    if (target === 'new') {
      setNewGroupDenied((prev) => toggleDeniedPermission(prev, permKey));
    } else if (editingGroup) {
      setEditingGroup({
        ...editingGroup,
        denied_permissions: toggleDeniedPermission(editingGroup.denied_permissions || [], permKey),
      });
    }
  };

  const handleSaveGroup = async () => {
    if (!editingGroup || !editingGroup.id) return;
    if (!editingGroup.name.trim()) {
      toast.error(t('validation.required', 'Pflichtfeld'));
      return;
    }
    try {
      await updateGroupMutation.mutateAsync({
        id: editingGroup.id,
        data: {
          name: editingGroup.name.trim(),
          description: editingGroup.description.trim() || null,
          permissions: editingGroup.permissions,
          denied_permissions: editingGroup.denied_permissions,
          field_permissions: editingGroup.field_permissions || {},
        },
      });
      toast.success(t('settings.groupUpdated', 'Gruppe aktualisiert'));
      setEditingGroup(null);
    } catch (err: any) {
      toast.error(err.message || t('common.error'));
    }
  };

  const handleDeleteGroup = async () => {
    if (!confirmDelete) return;
    try {
      await deleteGroupMutation.mutateAsync(confirmDelete.id);
      toast.success(t('settings.groupDeleted', 'Gruppe gelöscht'));
      setConfirmDelete(null);
    } catch (err: any) {
      toast.error(err.message || t('common.error'));
    }
  };

  const startEdit = (group: Group) => {
    setEditingGroup({
      id: group.id,
      name: group.name,
      description: group.description || '',
      permissions: group.permissions || {},
      denied_permissions: group.denied_permissions || [],
      field_permissions: group.field_permissions || {},
    });
  };

  if (isLoading || permissionsLoading) {
    return (
      <div className="p-6 max-w-4xl mx-auto" data-testid="settings-groups-page">
        <Skeleton className="h-8 w-48 mb-6" />
        <div className="space-y-3">
          <Skeleton className="h-16" />
          <Skeleton className="h-16" />
          <Skeleton className="h-16" />
        </div>
      </div>
    );
  }

  if (isError) {
    return (
      <div className="p-6 max-w-4xl mx-auto" data-testid="settings-groups-page">
        <h1 className="text-2xl font-bold text-secondary-900 mb-6">
          {t('settings.groups', 'Gruppen')}
        </h1>
        <EmptyState
          title={t('common.error')}
          description={error?.message || t('common.error')}
          action={<Button onClick={() => refetch()}>{t('common.reset', 'Erneut versuchen')}</Button>}
        />
      </div>
    );
  }

  return (
    <div className="p-6 max-w-4xl mx-auto" data-testid="settings-groups-page">
      <div className="flex items-center justify-between mb-6">
        <h1 className="text-2xl font-bold text-secondary-900">
          {t('settings.groups', 'Gruppen')}
        </h1>
        <Button onClick={() => setCreateOpen(true)} data-testid="create-group-btn">
          {t('settings.createGroup', 'Gruppe erstellen')}
        </Button>
      </div>

      {groups.length === 0 ? (
        <EmptyState
          title={t('settings.noGroups', 'Keine Gruppen vorhanden')}
          action={<Button onClick={() => setCreateOpen(true)}>{t('settings.createGroup', 'Gruppe erstellen')}</Button>}
        />
      ) : (
        <div className="space-y-4">
          {groups.map((group) => {
            const grantedKeys = getGrantedPermissionKeys(group.permissions);
            const deniedCount = (group.denied_permissions || []).length;
            return (
              <Card key={group.id}>
                <div className="flex items-center justify-between mb-3">
                  <div className="flex-1 min-w-0">
                    <h3 className="text-lg font-semibold text-secondary-900">{group.name}</h3>
                    {group.description && (
                      <p className="text-sm text-secondary-500 mt-1">{group.description}</p>
                    )}
                  </div>
                  <div className="flex items-center gap-2">
                    <Button
                      variant="secondary"
                      size="sm"
                      onClick={() => startEdit(group)}
                      data-testid={`edit-group-${group.id}`}
                    >
                      {t('common.edit')}
                    </Button>
                    <Button
                      variant="danger"
                      size="sm"
                      onClick={() => setConfirmDelete(group)}
                      data-testid={`delete-group-${group.id}`}
                    >
                      {t('common.delete')}
                    </Button>
                  </div>
                </div>
                <div className="flex flex-wrap gap-2 items-center">
                  {grantedKeys.length === 0 ? (
                    <span className="text-sm text-secondary-500">—</span>
                  ) : (
                    grantedKeys.slice(0, 10).map((perm) => {
                      const label = permissionLabelMap.get(perm) || perm;
                      return <Badge key={perm} variant="primary">{label}</Badge>;
                    })
                  )}
                  {grantedKeys.length > 10 && (
                    <Badge variant="default">+{grantedKeys.length - 10}</Badge>
                  )}
                  {deniedCount > 0 && (
                    <Badge variant="danger">
                      {deniedCount} {t('settings.denied', 'verweigert')}
                    </Badge>
                  )}
                </div>
              </Card>
            );
          })}
        </div>
      )}

      {/* Create Group Modal */}
      <Modal
        open={createOpen}
        onClose={() => setCreateOpen(false)}
        title={t('settings.createGroup', 'Gruppe erstellen')}
        size="lg"
      >
        <div className="space-y-4" data-testid="create-group-form">
          <Input
            label={t('settings.groupName', 'Gruppenname')}
            value={newGroupName}
            onChange={(e) => setNewGroupName(e.target.value)}
            placeholder={t('settings.groupName', 'Gruppenname')}
            data-testid="new-group-name"
          />
          <Input
            label={t('settings.groupDescription', 'Beschreibung')}
            value={newGroupDescription}
            onChange={(e) => setNewGroupDescription(e.target.value)}
            placeholder={t('settings.groupDescription', 'Beschreibung')}
            data-testid="new-group-description"
          />
          <div>
            <label className="block text-sm font-medium text-secondary-700 mb-2">
              {t('settings.permissions', 'Berechtigungen')}
            </label>
            <div className="space-y-2 max-h-48 overflow-y-auto border border-secondary-200 rounded-md p-3">
              {allPermissions.length === 0 && (
                <p className="text-sm text-secondary-500">{t('settings.noPermissions', 'Keine Berechtigungen verfügbar')}</p>
              )}
              {Object.entries(groupedPermissions).map(([category, perms]) => (
                <div key={category} className="mb-3">
                  <p className="text-xs font-semibold text-secondary-500 uppercase mb-1">
                    {category === 'system' ? t('settings.systemPermissions', 'System') : t('settings.pluginPermissions', 'Plugins')}
                  </p>
                  {perms.map((perm) => (
                    <label key={perm.key} className="flex items-center gap-2 p-2 rounded-md hover:bg-secondary-50 cursor-pointer min-h-touch">
                      <input
                        type="checkbox"
                        checked={isPermissionGranted(newGroupPermissions, perm.key)}
                        onChange={() => handleTogglePermission(perm.key, 'new')}
                        className="w-4 h-4 rounded border-secondary-300 text-primary-600 focus:ring-primary-500"
                      />
                      <span className="text-sm text-secondary-900">{perm.label}</span>
                    </label>
                  ))}
                </div>
              ))}
            </div>
          </div>
          <div>
            <label className="block text-sm font-medium text-secondary-700 mb-2">
              {t('settings.deniedPermissions', 'Verweigerte Berechtigungen')}
            </label>
            <div className="space-y-2 max-h-32 overflow-y-auto border border-secondary-200 rounded-md p-3">
              {allPermissions.length === 0 && (
                <p className="text-sm text-secondary-500">{t('settings.noPermissions', 'Keine Berechtigungen verfügbar')}</p>
              )}
              {allPermissions.map((perm) => (
                <label key={`denied-${perm.key}`} className="flex items-center gap-2 p-2 rounded-md hover:bg-secondary-50 cursor-pointer min-h-touch">
                  <input
                    type="checkbox"
                    checked={newGroupDenied.includes(perm.key)}
                    onChange={() => handleToggleDenied(perm.key, 'new')}
                    className="w-4 h-4 rounded border-danger-300 text-danger-600 focus:ring-danger-500"
                  />
                  <span className="text-sm text-secondary-900">{perm.label}</span>
                </label>
              ))}
            </div>
          </div>
          <div className="flex justify-end gap-3">
            <Button variant="secondary" onClick={() => setCreateOpen(false)}>{t('common.cancel')}</Button>
            <Button
              onClick={handleCreateGroup}
              isLoading={createGroupMutation.isPending}
              data-testid="save-group-btn"
            >
              {t('common.save')}
            </Button>
          </div>
        </div>
      </Modal>

      {/* Edit Group Modal */}
      <Modal
        open={!!editingGroup}
        onClose={() => setEditingGroup(null)}
        title={t('settings.groups', 'Gruppen') + ' — ' + (editingGroup?.name || '')}
        size="xl"
      >
        {editingGroup && (
          <EditGroupContent
            group={editingGroup}
            onChange={setEditingGroup}
            onTogglePermission={(key) => handleTogglePermission(key, 'edit')}
            onToggleDenied={(key) => handleToggleDenied(key, 'edit')}
            allPermissions={allPermissions}
            groupedPermissions={groupedPermissions}
            permissionLabelMap={permissionLabelMap}
            onSave={handleSaveGroup}
            onCancel={() => setEditingGroup(null)}
            isSaving={updateGroupMutation.isPending}
            memberSearchUserId={memberSearchUserId}
            setMemberSearchUserId={setMemberSearchUserId}
          />
        )}
      </Modal>

      <ConfirmDialog
        open={!!confirmDelete}
        title={t('common.delete')}
        message={`${t('common.delete')}: ${confirmDelete?.name}?`}
        variant="danger"
        onConfirm={handleDeleteGroup}
        onCancel={() => setConfirmDelete(null)}
      />
    </div>
  );
}

// ─── Edit Group Content with Tabs ─────────────────────────────────────────────

interface EditGroupContentProps {
  group: EditingGroup;
  onChange: (group: EditingGroup) => void;
  onTogglePermission: (key: string) => void;
  onToggleDenied: (key: string) => void;
  allPermissions: PermissionItem[];
  groupedPermissions: Record<string, PermissionItem[]>;
  permissionLabelMap: Map<string, string>;
  onSave: () => void;
  onCancel: () => void;
  isSaving: boolean;
  memberSearchUserId: string;
  setMemberSearchUserId: (val: string) => void;
}

function EditGroupContent({
  group,
  onChange,
  onTogglePermission,
  onToggleDenied,
  allPermissions,
  groupedPermissions,
  permissionLabelMap,
  onSave,
  onCancel,
  isSaving,
  memberSearchUserId,
  setMemberSearchUserId,
}: EditGroupContentProps) {
  const { t } = useTranslation();
  const toast = useToast();
  const [activeTab, setActiveTab] = useState<'details' | 'permissions' | 'denied' | 'members'>('details');

  const groupId = group.id || null;
  const { data: membersData, isLoading: membersLoading } = useGroupMembers(groupId);
  const { data: usersData } = useUsers(1, 100);
  const addMemberMutation = useAddGroupMember();
  const removeMemberMutation = useRemoveGroupMember();

  const members: GroupMember[] = membersData?.items ?? [];
  const allUsers = usersData?.items ?? [];

  // Users not yet in this group
  const availableUsers = useMemo(() => {
    const memberIds = new Set(members.map((m) => m.user_id));
    return allUsers.filter((u: any) => !memberIds.has(u.id));
  }, [allUsers, members]);

  const userSelectOptions = useMemo(() => {
    return availableUsers.map((u: any) => ({
      value: u.id,
      label: `${u.name || u.email} (${u.email})`,
    }));
  }, [availableUsers]);

  const handleAddMember = async () => {
    if (!groupId || !memberSearchUserId) return;
    try {
      await addMemberMutation.mutateAsync({ groupId, userId: memberSearchUserId });
      toast.success(t('settings.memberAdded', 'Mitglied hinzugefügt'));
      setMemberSearchUserId('');
    } catch (err: any) {
      toast.error(err.message || t('common.error'));
    }
  };

  const handleRemoveMember = async (userId: string) => {
    if (!groupId) return;
    try {
      await removeMemberMutation.mutateAsync({ groupId, userId });
      toast.success(t('settings.memberRemoved', 'Mitglied entfernt'));
    } catch (err: any) {
      toast.error(err.message || t('common.error'));
    }
  };

  const tabBtnClass = (tab: string) =>
    `px-4 py-2 text-sm font-medium rounded-md transition-colors ${
      activeTab === tab
        ? 'bg-primary-100 text-primary-700'
        : 'text-secondary-600 hover:bg-secondary-100 hover:text-secondary-900'
    }`;

  return (
    <div className="space-y-4" data-testid="edit-group-form">
      {/* Tab Navigation */}
      <div className="flex gap-2 border-b border-secondary-200 pb-2">
        <button className={tabBtnClass('details')} onClick={() => setActiveTab('details')} data-testid="tab-details">
          {t('settings.groupDetails', 'Details')}
        </button>
        <button className={tabBtnClass('permissions')} onClick={() => setActiveTab('permissions')} data-testid="tab-permissions">
          {t('settings.permissions', 'Berechtigungen')}
        </button>
        <button className={tabBtnClass('denied')} onClick={() => setActiveTab('denied')} data-testid="tab-denied">
          {t('settings.deniedPermissions', 'Verweigert')}
        </button>
        <button className={tabBtnClass('members')} onClick={() => setActiveTab('members')} data-testid="tab-members">
          {t('settings.members', 'Mitglieder')}
        </button>
      </div>

      {/* Details Tab */}
      {activeTab === 'details' && (
        <div className="space-y-4">
          <Input
            label={t('settings.groupName', 'Gruppenname')}
            value={group.name}
            onChange={(e) => onChange({ ...group, name: e.target.value })}
            data-testid="edit-group-name"
          />
          <Input
            label={t('settings.groupDescription', 'Beschreibung')}
            value={group.description}
            onChange={(e) => onChange({ ...group, description: e.target.value })}
            data-testid="edit-group-description"
          />
        </div>
      )}

      {/* Permissions Tab */}
      {activeTab === 'permissions' && (
        <div>
          <label className="block text-sm font-medium text-secondary-700 mb-2">
            {t('settings.permissions', 'Berechtigungen')}
          </label>
          <div className="space-y-2 max-h-64 overflow-y-auto border border-secondary-200 rounded-md p-3">
            {allPermissions.length === 0 && (
              <p className="text-sm text-secondary-500">{t('settings.noPermissions', 'Keine Berechtigungen verfügbar')}</p>
            )}
            {Object.entries(groupedPermissions).map(([category, perms]) => (
              <div key={category} className="mb-3">
                <p className="text-xs font-semibold text-secondary-500 uppercase mb-1">
                  {category === 'system' ? t('settings.systemPermissions', 'System') : t('settings.pluginPermissions', 'Plugins')}
                </p>
                {perms.map((perm) => (
                  <label key={perm.key} className="flex items-center gap-2 p-2 rounded-md hover:bg-secondary-50 cursor-pointer min-h-touch">
                    <input
                      type="checkbox"
                      checked={isPermissionGranted(group.permissions || {}, perm.key)}
                      onChange={() => onTogglePermission(perm.key)}
                      className="w-4 h-4 rounded border-secondary-300 text-primary-600 focus:ring-primary-500"
                    />
                    <span className="text-sm text-secondary-900">{perm.label}</span>
                  </label>
                ))}
              </div>
            ))}
          </div>
        </div>
      )}

      {/* Denied Permissions Tab */}
      {activeTab === 'denied' && (
        <div>
          <label className="block text-sm font-medium text-secondary-700 mb-2">
            {t('settings.deniedPermissions', 'Verweigerte Berechtigungen')}
          </label>
          <p className="text-xs text-secondary-500 mb-2">
            {t('settings.deniedPermissionsHint', 'Diese Berechtigungen werden explizit verweigert, auch wenn sie über Rollen gewährt wurden.')}
          </p>
          <div className="space-y-2 max-h-64 overflow-y-auto border border-secondary-200 rounded-md p-3">
            {allPermissions.length === 0 && (
              <p className="text-sm text-secondary-500">{t('settings.noPermissions', 'Keine Berechtigungen verfügbar')}</p>
            )}
            {allPermissions.map((perm) => (
              <label key={`denied-edit-${perm.key}`} className="flex items-center gap-2 p-2 rounded-md hover:bg-secondary-50 cursor-pointer min-h-touch">
                <input
                  type="checkbox"
                  checked={(group.denied_permissions || []).includes(perm.key)}
                  onChange={() => onToggleDenied(perm.key)}
                  className="w-4 h-4 rounded border-danger-300 text-danger-600 focus:ring-danger-500"
                />
                <span className="text-sm text-secondary-900">{perm.label}</span>
              </label>
            ))}
          </div>
        </div>
      )}

      {/* Members Tab */}
      {activeTab === 'members' && (
        <div className="space-y-4">
          <div className="flex gap-2 items-end">
            <div className="flex-1">
              <Select
                label={t('settings.addMember', 'Mitglied hinzufügen')}
                options={userSelectOptions}
                placeholder={t('settings.selectUser', 'Benutzer auswählen')}
                value={memberSearchUserId}
                onChange={(e) => setMemberSearchUserId(e.target.value)}
                data-testid="member-user-select"
              />
            </div>
            <Button
              onClick={handleAddMember}
              isLoading={addMemberMutation.isPending}
              disabled={!memberSearchUserId}
              data-testid="add-member-btn"
            >
              {t('common.add', 'Hinzufügen')}
            </Button>
          </div>

          <div className="border border-secondary-200 rounded-md">
            {membersLoading ? (
              <div className="p-4">
                <Skeleton className="h-12" />
              </div>
            ) : members.length === 0 ? (
              <div className="p-4 text-sm text-secondary-500">
                {t('settings.noMembers', 'Keine Mitglieder')}
              </div>
            ) : (
              <div className="divide-y divide-secondary-200" data-testid="group-members-list">
                {members.map((member) => (
                  <div key={member.user_id} className="flex items-center justify-between p-3">
                    <div className="flex-1 min-w-0">
                      <p className="font-medium text-secondary-900 truncate">{member.name}</p>
                      <p className="text-sm text-secondary-500 truncate">{member.email}</p>
                    </div>
                    <Badge variant={member.is_active === false ? 'danger' : 'success'} className="mr-2">
                      {member.is_active === false ? t('common.inactive') : t('common.active')}
                    </Badge>
                    <Button
                      variant="danger"
                      size="sm"
                      onClick={() => handleRemoveMember(member.user_id)}
                      data-testid={`remove-member-${member.user_id}`}
                    >
                      {t('common.remove', 'Entfernen')}
                    </Button>
                  </div>
                ))}
              </div>
            )}
          </div>
        </div>
      )}

      {/* Save / Cancel */}
      <div className="flex justify-end gap-3 pt-4 border-t border-secondary-200">
        <Button variant="secondary" onClick={onCancel}>{t('common.cancel')}</Button>
        <Button
          onClick={onSave}
          isLoading={isSaving}
          data-testid="update-group-btn"
        >
          {t('common.save')}
        </Button>
      </div>
    </div>
  );
}