import React, { useMemo, useState } from 'react';
import styled from 'styled-components';
import { isAxiosError } from 'axios';
import { Link } from 'react-router-dom';
import { AdminPageShell } from '@/features/admin/components/AdminPageShell';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { useLocale } from '@/app/providers/LocaleProvider';
import { useAuthStore } from '@/features/auth/store/authStore';
import { usePermissions } from '@/features/auth/hooks/usePermissions';
import { PERMISSIONS } from '@/features/auth/constants/permissions';
import { AppLayout } from '@/shared/components/layout/AppLayout';
import {Button, Input, Modal, Select, Table, Th, Td, Tr, AdminPanel, TableWrap, PanelLoadingState, PanelMessage} from '@/shared/components/ui';
import { ROUTES } from '@/shared/constants/routes';
import { listCompanies } from '@/features/admin/services/companyAdminService';
import {
  createDepartment,
  deleteDepartment,
  listDepartments,
  updateDepartment} from '@/features/admin/services/departmentAdminService';
import { invalidateTicketFormOptions } from '@/features/tickets/utils/invalidateTicketFormOptions';
import { AdminActionsHeader, AdminRowActions } from '@/features/admin/components/AdminRowActions';
import type { DepartmentRecord } from '@/features/admin/types/admin.types';

const Actions = styled.div`
  display: flex;
  gap: ${({ theme }) => theme.spacing[2]};
  flex-wrap: wrap;
`;

const FormGrid = styled.div`
  display: grid;
  gap: ${({ theme }) => theme.spacing[3]};
`;


const emptyForm = {
  name: '',
  code: '',
  slug: '',
  description: '',
  portal_description_en: '',
  portal_description_ar: '',
  is_active: true,
  portal_enabled: true,
  portal_requires_membership: false};

const AdminDepartmentsPage: React.FC = () => {
  const { t } = useLocale();
  const user = useAuthStore((state) => state.user);
  const { isSuperAdmin, can } = usePermissions();
  const queryClient = useQueryClient();
  const [search, setSearch] = useState('');
  const [companyId, setCompanyId] = useState(user?.company_id ?? '');
  const [createCompanyId, setCreateCompanyId] = useState('');
  const [modalOpen, setModalOpen] = useState(false);
  const [editing, setEditing] = useState<DepartmentRecord | null>(null);
  const [form, setForm] = useState(emptyForm);

  const companiesQuery = useQuery({
    queryKey: ['admin', 'companies'],
    queryFn: () => listCompanies(),
    enabled: isSuperAdmin});

  const resolvedCompanyId = isSuperAdmin ? companyId : user?.company_id;

  const departmentsQuery = useQuery({
    queryKey: ['admin', 'departments', resolvedCompanyId, search],
    queryFn: () =>
      listDepartments({
        company_id: resolvedCompanyId!,
        search: search || undefined}),
    enabled: Boolean(resolvedCompanyId)});

  const companyNameById = useMemo(() => {
    const map = new Map<string, string>();
    for (const company of companiesQuery.data ?? []) {
      map.set(company.id, company.name);
    }
    return map;
  }, [companiesQuery.data]);

  const saveMutation = useMutation({
    mutationFn: async () => {
      const targetCompanyId = editing?.company_id ?? (isSuperAdmin ? createCompanyId : user?.company_id);
      if (!targetCompanyId) {
        return;
      }
      const portalPayload = {
        portal_enabled: form.portal_enabled,
        portal_description_en: form.portal_description_en || null,
        portal_description_ar: form.portal_description_ar || null,
        portal_requires_membership: form.portal_requires_membership};
      if (editing) {
        return updateDepartment(editing.id, {
          name: form.name,
          code: form.code,
          description: form.description || null,
          is_active: form.is_active,
          ...(isSuperAdmin && form.slug ? { slug: form.slug } : {}),
          ...portalPayload});
      }
      return createDepartment({
        company_id: targetCompanyId,
        name: form.name,
        code: form.code,
        slug: form.slug || undefined,
        description: form.description || undefined,
        is_active: form.is_active,
        ...portalPayload});
    },
    onSuccess: async () => {
      setModalOpen(false);
      setEditing(null);
      setForm(emptyForm);
      await queryClient.invalidateQueries({ queryKey: ['admin', 'departments'] });
      await invalidateTicketFormOptions(queryClient);
    }});

  const deleteMutation = useMutation({
    mutationFn: (id: string) => deleteDepartment(id),
    onSuccess: async () => {
      await queryClient.invalidateQueries({ queryKey: ['admin', 'departments'] });
      await invalidateTicketFormOptions(queryClient);
    }});

  const openCreate = () => {
    setEditing(null);
    setForm(emptyForm);
    setCreateCompanyId(resolvedCompanyId ?? '');
    setModalOpen(true);
  };

  const openEdit = (department: DepartmentRecord) => {
    setEditing(department);
    setForm({
      name: department.name,
      code: department.code,
      slug: department.slug ?? '',
      description: department.description ?? '',
      portal_description_en: department.portal_description_en ?? '',
      portal_description_ar: department.portal_description_ar ?? '',
      is_active: department.is_active,
      portal_enabled: department.portal_enabled ?? true,
      portal_requires_membership: department.portal_requires_membership ?? false});
    setModalOpen(true);
  };

  const isForbidden =
    departmentsQuery.isError &&
    isAxiosError(departmentsQuery.error) &&
    departmentsQuery.error.response?.status === 403;

  return (
    <AppLayout>
      <AdminPageShell
        title={t('admin:departments.title')}
        subtitle={t('admin:departments.subtitle')}
        backLabel={t('settings:title')}
        toolbar={
          <>
        {isSuperAdmin && (
          <Select
            label={t('admin:users.filters.company')}
            value={companyId}
            onChange={(event) => setCompanyId(event.target.value)}
            options={[
              { value: '', label: t('admin:users.selectCompany') },
              ...(companiesQuery.data ?? []).map((company) => ({
                value: company.id,
                label: company.name})),
            ]}
            style={{ minWidth: 220 }}
          />
        )}
        <Input
          label={t('common:actions.search')}
          value={search}
          onChange={(event) => setSearch(event.target.value)}
          style={{ minWidth: 220 }}
          disabled={!resolvedCompanyId}
        />
        {can(PERMISSIONS.COMPANY_DEPARTMENTS_MANAGE) ? (
          <Button variant="primary" onClick={openCreate} disabled={!resolvedCompanyId}>
            {t('admin:departments.create')}
          </Button>
        ) : null}
          </>
        }
      >
      <AdminPanel>
        {!resolvedCompanyId ? (
          <p style={{ margin: 0 }}>{t('admin:departments.companyRequired')}</p>
        ) : isForbidden ? (
          <PanelMessage $variant="error">{t('admin:states.forbidden')}</PanelMessage>
        ) : departmentsQuery.isLoading ? (
          <PanelLoadingState />
        ) : departmentsQuery.isError ? (
          <PanelMessage $variant="error">{t('admin:states.error')}</PanelMessage>
        ) : (departmentsQuery.data?.length ?? 0) === 0 ? (
          <p style={{ margin: 0 }}>{t('admin:states.empty')}</p>
        ) : (
          <TableWrap>
            <Table>
              <thead>
                <tr>
                  {isSuperAdmin && <Th>{t('admin:users.filters.company')}</Th>}
                  <Th>{t('admin:departments.columns.name')}</Th>
                  <Th>{t('admin:departments.columns.code')}</Th>
                  <Th>{t('admin:departments.columns.portal')}</Th>
                  <Th>{t('admin:departments.columns.users')}</Th>
                  <Th>{t('admin:departments.columns.heads')}</Th>
                  <Th>{t('admin:departments.columns.status')}</Th>
                  <Th>{t('admin:departments.manageUsers')}</Th>
                  <AdminActionsHeader />
                </tr>
              </thead>
              <tbody>
                {departmentsQuery.data?.map((department) => (
                  <Tr key={department.id}>
                    {isSuperAdmin && (
                      <Td>{companyNameById.get(department.company_id) ?? department.company_id}</Td>
                    )}
                    <Td>{department.name}</Td>
                    <Td>{department.code}</Td>
                    <Td>
                      {department.slug ? (
                        <Actions>
                          <span>{ROUTES.DEPARTMENT_PORTAL(department.slug)}</span>
                          <Button
                            size="sm"
                            variant="ghost"
                            type="button"
                            onClick={() => {
                              const url = `${window.location.origin}${ROUTES.DEPARTMENT_PORTAL(department.slug!)}`;
                              void navigator.clipboard.writeText(url);
                            }}
                          >
                            {t('admin:departments.copyPortalLink')}
                          </Button>
                        </Actions>
                      ) : (
                        '—'
                      )}
                    </Td>
                    <Td>{department.users_count ?? 0}</Td>
                    <Td>{department.heads_count ?? 0}</Td>
                    <Td>
                      {department.is_active
                        ? t('admin:departments.active')
                        : t('admin:departments.inactive')}
                    </Td>
                    <Td>
                      <Actions>
                        <Link to={ROUTES.ADMIN_USERS}>
                          <Button size="sm" variant="ghost">
                            {t('admin:departments.manageUsers')}
                          </Button>
                        </Link>
                      </Actions>
                    </Td>
                    <AdminRowActions
                      editLabel={t('common:actions.edit')}
                      deleteLabel={t('common:actions.delete')}
                      confirmDelete={t('admin:departments.confirmDelete')}
                      onEdit={() => openEdit(department)}
                      onDelete={() => deleteMutation.mutate(department.id)}
                    />
                  </Tr>))}
              </tbody>
            </Table>
          </TableWrap>
        )}
      </AdminPanel>
      </AdminPageShell>

      <Modal
        isOpen={modalOpen}
        onClose={() => setModalOpen(false)}
        title={
          editing ? t('admin:departments.editTitle') : t('admin:departments.createTitle')
        }
        footer={
          <>
            <Button variant="secondary" onClick={() => setModalOpen(false)}>
              {t('common:actions.cancel')}
            </Button>
            <Button
              variant="primary"
              loading={saveMutation.isPending}
              onClick={() => saveMutation.mutate()}
              disabled={
                !form.name.trim() ||
                !form.code.trim() ||
                (!editing && isSuperAdmin && !createCompanyId)
              }
            >
              {t('common:actions.save')}
            </Button>
          </>
        }
      >
        <FormGrid>
          {isSuperAdmin && !editing && (
            <Select
              label={t('admin:users.filters.company')}
              value={createCompanyId}
              onChange={(event) => setCreateCompanyId(event.target.value)}
              options={[
                { value: '', label: t('admin:users.selectCompany') },
                ...(companiesQuery.data ?? []).map((company) => ({
                  value: company.id,
                  label: company.name})),
              ]}
              fullWidth
              required
            />
          )}
          <Input
            label={t('admin:departments.columns.name')}
            value={form.name}
            onChange={(event) => setForm((prev) => ({ ...prev, name: event.target.value }))}
            required
            fullWidth
          />
          <Input
            label={t('admin:departments.columns.code')}
            value={form.code}
            onChange={(event) => setForm((prev) => ({ ...prev, code: event.target.value }))}
            required
            fullWidth
          />
          <Input
            label={t('admin:departments.columns.description')}
            value={form.description}
            onChange={(event) =>
              setForm((prev) => ({ ...prev, description: event.target.value }))
            }
            fullWidth
          />
          {isSuperAdmin ? (
            <Input
              label={t('admin:departments.columns.slug')}
              value={form.slug}
              onChange={(event) => setForm((prev) => ({ ...prev, slug: event.target.value }))}
              fullWidth
              placeholder={t('admin:departments.slugPlaceholder')}
            />
          ) : null}
          <Input
            label={t('admin:departments.portalDescriptionEn')}
            value={form.portal_description_en}
            onChange={(event) =>
              setForm((prev) => ({ ...prev, portal_description_en: event.target.value }))
            }
            fullWidth
          />
          <Input
            label={t('admin:departments.portalDescriptionAr')}
            value={form.portal_description_ar}
            onChange={(event) =>
              setForm((prev) => ({ ...prev, portal_description_ar: event.target.value }))
            }
            fullWidth
          />
          <label style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <input
              type="checkbox"
              checked={form.portal_enabled}
              onChange={(event) =>
                setForm((prev) => ({ ...prev, portal_enabled: event.target.checked }))
              }
            />
            {t('admin:departments.portalEnabled')}
          </label>
          <label style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <input
              type="checkbox"
              checked={form.portal_requires_membership}
              onChange={(event) =>
                setForm((prev) => ({
                  ...prev,
                  portal_requires_membership: event.target.checked}))
              }
            />
            {t('admin:departments.portalRequiresMembership')}
          </label>
          <label style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <input
              type="checkbox"
              checked={form.is_active}
              onChange={(event) =>
                setForm((prev) => ({ ...prev, is_active: event.target.checked }))
              }
            />
            {t('admin:departments.active')}
          </label>
        </FormGrid>
      </Modal>
    </AppLayout>
  );
};

export default AdminDepartmentsPage;