import React, { useMemo, useState } from 'react';
import styled from 'styled-components';
import { isAxiosError } from 'axios';
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 { useTicketDepartments } from '@/features/tickets/hooks/useTicketDepartments';
import { AppLayout } from '@/shared/components/layout/AppLayout';
import {Button, ColorPicker, Input, Modal, Select, Table, Th, Td, Tr, AdminPanel, AdminListToolbar, TableWrap, PanelLoadingState, PanelMessage} from '@/shared/components/ui';
import {
  createPriority,
  createStatus,
  deletePriority,
  deleteStatus,
  listPriorities,
  listStatuses,
  updatePriority,
  updateStatus,
  type TicketPriorityRecord,
  type TicketStatusRecord} from '@/features/admin/services/ticketMetaAdminService';
import { localizedName } from '@/features/tickets/utils/ticketDisplay';
import { invalidateTicketFormOptions } from '@/features/tickets/utils/invalidateTicketFormOptions';
import { AdminActionsHeader, AdminRowActions } from '@/features/admin/components/AdminRowActions';

const TabContainer = styled.div`
  display: flex;
  gap: ${({ theme }) => theme.spacing[2]};
  margin-bottom: ${({ theme }) => theme.spacing[4]};
`;

const Tab = styled.button<{ $active: boolean }>`
  padding: ${({ theme }) => `${theme.spacing[2]} ${theme.spacing[4]}`};
  border: 1px solid ${({ theme }) => theme.colors.border};
  border-radius: ${({ theme }) => theme.borderRadius.md};
  background: ${({ $active, theme }) => ($active ? theme.colors.primaryLight : 'transparent')};
  cursor: pointer;
`;

type TabKey = 'statuses' | 'priorities';

const emptyStatusForm = {
  name_en: '',
  name_ar: '',
  color: '#6366f1',
  is_default: false,
  is_closed: false,
  is_resolved: false,
  sort_order: 0};

const emptyPriorityForm = {
  name_en: '',
  name_ar: '',
  color: '#6366f1',
  sort_order: 0};

const AdminTicketMetaPage: React.FC = () => {
  const { t, locale } = useLocale();
  const user = useAuthStore((state) => state.user);
  const {
    departments,
    departmentId,
    setDepartmentId,
    companyId,
    setCompanyId,
    companies,
    isSuperAdmin,
    isLoadingCompanies,
    isLoadingDepartments,
    hasCompany,
    hasDepartments,
  } = useTicketDepartments();
  const queryClient = useQueryClient();
  const [tab, setTab] = useState<TabKey>('statuses');
  const [modalOpen, setModalOpen] = useState(false);
  const [statusForm, setStatusForm] = useState(emptyStatusForm);
  const [priorityForm, setPriorityForm] = useState(emptyPriorityForm);
  const [editingStatus, setEditingStatus] = useState<TicketStatusRecord | null>(null);
  const [editingPriority, setEditingPriority] = useState<TicketPriorityRecord | null>(null);

  const companyOptions = useMemo(
    () => [
      { value: '', label: t('admin:users.selectCompany') },
      ...companies.map((company) => ({ value: company.id, label: company.name })),
    ],
    [companies, t],
  );

  const departmentOptions = useMemo(
    () => [
      { value: '', label: t('admin:users.selectDepartment') },
      ...departments.map((department) => ({ value: department.id, label: department.name })),
    ],
    [departments, t],
  );

  const lockedCompanyLabel = user?.company?.name ?? '';

  const statusesQuery = useQuery({
    queryKey: ['admin', 'ticket-statuses', departmentId],
    queryFn: () => listStatuses(departmentId),
    enabled: Boolean(departmentId) && tab === 'statuses'});

  const prioritiesQuery = useQuery({
    queryKey: ['admin', 'ticket-priorities', departmentId],
    queryFn: () => listPriorities(departmentId),
    enabled: Boolean(departmentId) && tab === 'priorities'});

  const saveStatusMutation = useMutation({
    mutationFn: () => {
      const payload = { ...statusForm, department_id: departmentId };
      if (editingStatus) {
        return updateStatus(editingStatus.id, payload);
      }
      return createStatus(payload);
    },
    onSuccess: async () => {
      setModalOpen(false);
      setEditingStatus(null);
      setStatusForm(emptyStatusForm);
      await queryClient.invalidateQueries({ queryKey: ['admin', 'ticket-statuses', departmentId] });
      await invalidateTicketFormOptions(queryClient, departmentId);
    }});

  const savePriorityMutation = useMutation({
    mutationFn: () => {
      const payload = { ...priorityForm, department_id: departmentId };
      if (editingPriority) {
        return updatePriority(editingPriority.id, payload);
      }
      return createPriority(payload);
    },
    onSuccess: async () => {
      setModalOpen(false);
      setEditingPriority(null);
      setPriorityForm(emptyPriorityForm);
      await queryClient.invalidateQueries({ queryKey: ['admin', 'ticket-priorities', departmentId] });
      await invalidateTicketFormOptions(queryClient, departmentId);
    }});

  const deleteStatusMutation = useMutation({
    mutationFn: deleteStatus,
    onSuccess: async () => {
      await queryClient.invalidateQueries({ queryKey: ['admin', 'ticket-statuses', departmentId] });
      await invalidateTicketFormOptions(queryClient, departmentId);
    }});

  const deletePriorityMutation = useMutation({
    mutationFn: deletePriority,
    onSuccess: async () => {
      await queryClient.invalidateQueries({ queryKey: ['admin', 'ticket-priorities', departmentId] });
      await invalidateTicketFormOptions(queryClient, departmentId);
    }});

  const openCreate = () => {
    setEditingStatus(null);
    setEditingPriority(null);
    setStatusForm(emptyStatusForm);
    setPriorityForm(emptyPriorityForm);
    setModalOpen(true);
  };

  const activeQuery = tab === 'statuses' ? statusesQuery : prioritiesQuery;
  const isForbidden =
    activeQuery.isError &&
    isAxiosError(activeQuery.error) &&
    activeQuery.error.response?.status === 403;

  return (
    <AppLayout>
      <AdminPageShell
        title={t('admin:ticketMeta.title')}
        subtitle={t('admin:ticketMeta.subtitle')}
        backLabel={t('settings:title')}
      >
      <TabContainer>
        <Tab type="button" $active={tab === 'statuses'} onClick={() => setTab('statuses')}>
          {t('admin:ticketMeta.statuses')}
        </Tab>
        <Tab type="button" $active={tab === 'priorities'} onClick={() => setTab('priorities')}>
          {t('admin:ticketMeta.priorities')}
        </Tab>
      </TabContainer>

      <AdminListToolbar>
        {isSuperAdmin ? (
          <Select
            label={t('admin:users.filters.company')}
            value={companyId}
            onChange={(event) => setCompanyId(event.target.value)}
            options={companyOptions}
            disabled={isLoadingCompanies}
            style={{ minWidth: 220 }}
          />
        ) : (
          <Input
            label={t('admin:users.filters.company')}
            value={lockedCompanyLabel}
            readOnly
            style={{ minWidth: 220 }}
          />
        )}
        <Select
          label={t('admin:categories.department')}
          value={departmentId}
          onChange={(event) => setDepartmentId(event.target.value)}
          options={departmentOptions}
          disabled={isLoadingDepartments || !hasCompany || !hasDepartments}
          style={{ minWidth: 240 }}
        />
        <Button variant="primary" onClick={openCreate} disabled={!departmentId}>
          {t('common:actions.create')}
        </Button>
      </AdminListToolbar>

      <AdminPanel>
        {isSuperAdmin && !hasCompany ? (
          <p style={{ margin: 0 }}>{t('admin:departments.companyRequired')}</p>
        ) : isForbidden ? (
          <PanelMessage $variant="error">{t('admin:states.forbidden')}</PanelMessage>
        ) : activeQuery.isLoading ? (
          <PanelLoadingState />
        ) : tab === 'statuses' ? (
          <TableWrap>
            <Table>
              <thead>
                <tr>
                  <Th>{t('admin:ticketMeta.name')}</Th>
                  <Th>{t('admin:ticketMeta.color')}</Th>
                  <Th>{t('admin:ticketMeta.flags')}</Th>
                  <AdminActionsHeader />
                </tr>
              </thead>
              <tbody>
                {(statusesQuery.data ?? []).map((status) => (
                  <Tr key={status.id}>
                    <Td>{localizedName(status, locale)}</Td>
                    <Td>
                      <span
                        style={{
                          display: 'inline-block',
                          width: 16,
                          height: 16,
                          borderRadius: 4,
                          background: status.color,
                          verticalAlign: 'middle',
                          marginInlineEnd: 8}}
                      />
                      {status.color}
                    </Td>
                    <Td>
                      {status.is_default ? t('admin:ticketMeta.default') : ''}
                      {status.is_closed ? ` ${t('admin:ticketMeta.closed')}` : ''}
                      {status.is_resolved ? ` ${t('admin:ticketMeta.resolved')}` : ''}
                    </Td>
                    <AdminRowActions
                      editLabel={t('common:actions.edit')}
                      deleteLabel={t('common:actions.delete')}
                      confirmDelete={t('admin:ticketMeta.confirmDelete')}
                      onEdit={() => {
                        setEditingStatus(status);
                        setStatusForm({
                          name_en: status.name_en,
                          name_ar: status.name_ar,
                          color: status.color,
                          is_default: status.is_default,
                          is_closed: status.is_closed,
                          is_resolved: status.is_resolved,
                          sort_order: status.sort_order});
                        setModalOpen(true);
                      }}
                      onDelete={() => deleteStatusMutation.mutate(status.id)}
                    />
                  </Tr>))}
              </tbody>
            </Table>
          </TableWrap>
        ) : (
          <TableWrap>
            <Table>
              <thead>
                <tr>
                  <Th>{t('admin:ticketMeta.name')}</Th>
                  <Th>{t('admin:ticketMeta.color')}</Th>
                  <Th>{t('admin:ticketMeta.sortOrder')}</Th>
                  <AdminActionsHeader />
                </tr>
              </thead>
              <tbody>
                {(prioritiesQuery.data ?? []).map((priority) => (
                  <Tr key={priority.id}>
                    <Td>{localizedName(priority, locale)}</Td>
                    <Td>{priority.color}</Td>
                    <Td>{priority.sort_order}</Td>
                    <AdminRowActions
                      editLabel={t('common:actions.edit')}
                      deleteLabel={t('common:actions.delete')}
                      confirmDelete={t('admin:ticketMeta.confirmDelete')}
                      onEdit={() => {
                        setEditingPriority(priority);
                        setPriorityForm({
                          name_en: priority.name_en,
                          name_ar: priority.name_ar,
                          color: priority.color,
                          sort_order: priority.sort_order});
                        setModalOpen(true);
                      }}
                      onDelete={() => deletePriorityMutation.mutate(priority.id)}
                    />
                  </Tr>))}
              </tbody>
            </Table>
          </TableWrap>
        )}
      </AdminPanel>
      </AdminPageShell>

      <Modal
        isOpen={modalOpen}
        onClose={() => setModalOpen(false)}
        title={
          tab === 'statuses'
            ? editingStatus
              ? t('admin:ticketMeta.editStatus')
              : t('admin:ticketMeta.createStatus')
            : editingPriority
              ? t('admin:ticketMeta.editPriority')
              : t('admin:ticketMeta.createPriority')
        }
        footer={
          <>
            <Button variant="secondary" onClick={() => setModalOpen(false)}>
              {t('common:actions.cancel')}
            </Button>
            <Button
              variant="primary"
              loading={saveStatusMutation.isPending || savePriorityMutation.isPending}
              onClick={() =>
                tab === 'statuses' ? saveStatusMutation.mutate() : savePriorityMutation.mutate()
              }
            >
              {t('common:actions.save')}
            </Button>
          </>
        }
      >
        {tab === 'statuses' ? (
          <>
            <Input
              label={t('admin:categories.nameEn')}
              value={statusForm.name_en}
              onChange={(e) => setStatusForm((p) => ({ ...p, name_en: e.target.value }))}
              fullWidth
            />
            <Input
              label={t('admin:categories.nameAr')}
              value={statusForm.name_ar}
              onChange={(e) => setStatusForm((p) => ({ ...p, name_ar: e.target.value }))}
              fullWidth
            />
            <ColorPicker
              label={t('admin:ticketMeta.color')}
              value={statusForm.color}
              onChange={(color) => setStatusForm((p) => ({ ...p, color }))}
              fullWidth
            />
          </>
        ) : (
          <>
            <Input
              label={t('admin:categories.nameEn')}
              value={priorityForm.name_en}
              onChange={(e) => setPriorityForm((p) => ({ ...p, name_en: e.target.value }))}
              fullWidth
            />
            <Input
              label={t('admin:categories.nameAr')}
              value={priorityForm.name_ar}
              onChange={(e) => setPriorityForm((p) => ({ ...p, name_ar: e.target.value }))}
              fullWidth
            />
            <ColorPicker
              label={t('admin:ticketMeta.color')}
              value={priorityForm.color}
              onChange={(color) => setPriorityForm((p) => ({ ...p, color }))}
              fullWidth
            />
          </>
        )}
      </Modal>
    </AppLayout>
  );
};

export default AdminTicketMetaPage;