import React, { 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 { AppLayout } from '@/shared/components/layout/AppLayout';
import {
  AdminPanel,
  Button,
  Input,
  Modal,
  Table,
  Th,
  Td,
  Tr,
  TableWrap,
  PanelLoadingState,
  PanelMessage} from '@/shared/components/ui';
import {
  createCompany,
  deleteCompany,
  listCompanies,
  updateCompany} from '@/features/admin/services/companyAdminService';
import { AdminRowActions } from '@/features/admin/components/AdminRowActions';
import type { CompanyRecord } from '@/features/admin/types/admin.types';

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


const emptyForm = { name: '', code: '', email_domain: '', is_active: true };

const AdminCompaniesPage: React.FC = () => {
  const { t } = useLocale();
  const user = useAuthStore((state) => state.user);
  const queryClient = useQueryClient();
  const [search, setSearch] = useState('');
  const [modalOpen, setModalOpen] = useState(false);
  const [editing, setEditing] = useState<CompanyRecord | null>(null);
  const [form, setForm] = useState(emptyForm);

  const canManage = Boolean(user?.is_super_admin);

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

  const saveMutation = useMutation({
    mutationFn: async () => {
      if (editing) {
        return updateCompany(editing.id, {
          name: form.name,
          code: form.code,
          email_domain: form.email_domain || null,
          is_active: form.is_active});
      }
      return createCompany({
        name: form.name,
        code: form.code,
        email_domain: form.email_domain || undefined,
        is_active: form.is_active});
    },
    onSuccess: async () => {
      setModalOpen(false);
      setEditing(null);
      setForm(emptyForm);
      await queryClient.invalidateQueries({ queryKey: ['admin', 'companies'] });
    }});

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

  const openCreate = () => {
    setEditing(null);
    setForm(emptyForm);
    setModalOpen(true);
  };

  const openEdit = (company: CompanyRecord) => {
    setEditing(company);
    setForm({
      name: company.name,
      code: company.code,
      email_domain: company.email_domain ?? '',
      is_active: company.is_active});
    setModalOpen(true);
  };

  const isForbidden =
    !canManage ||
    (companiesQuery.isError &&
      isAxiosError(companiesQuery.error) &&
      companiesQuery.error.response?.status === 403);

  return (
    <AppLayout>
      <AdminPageShell
        title={t('admin:companies.title')}
        subtitle={t('admin:companies.subtitle')}
        backLabel={t('settings:title')}
        toolbar={
          canManage ? (
            <>
              <Input
                label={t('common:actions.search')}
                value={search}
                onChange={(event) => setSearch(event.target.value)}
                style={{ minWidth: 220 }}
              />
              <Button variant="primary" onClick={openCreate}>
                {t('admin:companies.create')}
              </Button>
            </>
          ) : undefined
        }
      >
      <AdminPanel>
        {isForbidden ? (
          <PanelMessage $variant="error">{t('admin:states.forbidden')}</PanelMessage>
        ) : companiesQuery.isLoading ? (
          <PanelLoadingState />
        ) : companiesQuery.isError ? (
          <PanelMessage $variant="error">{t('admin:states.error')}</PanelMessage>
        ) : (companiesQuery.data?.length ?? 0) === 0 ? (
          <p style={{ margin: 0 }}>{t('admin:states.empty')}</p>
        ) : (
          <TableWrap>
            <Table>
              <thead>
                <tr>
                  <Th>{t('admin:companies.columns.name')}</Th>
                  <Th>{t('admin:companies.columns.code')}</Th>
                  <Th>{t('admin:companies.columns.status')}</Th>
                  <Th>{t('admin:companies.columns.actions')}</Th>
                </tr>
              </thead>
              <tbody>
                {companiesQuery.data?.map((company) => (
                  <Tr key={company.id}>
                    <Td>{company.name}</Td>
                    <Td>{company.code}</Td>
                    <Td>
                      {company.is_active
                        ? t('admin:companies.active')
                        : t('admin:companies.inactive')}
                    </Td>
                    <AdminRowActions
                      editLabel={t('common:actions.edit')}
                      deleteLabel={t('common:actions.delete')}
                      confirmDelete={t('admin:companies.confirmDelete')}
                      onEdit={() => openEdit(company)}
                      onDelete={() => deleteMutation.mutate(company.id)}
                    />
                  </Tr>
                ))}
              </tbody>
            </Table>
          </TableWrap>
        )}
      </AdminPanel>
      </AdminPageShell>

      <Modal
        isOpen={modalOpen}
        onClose={() => setModalOpen(false)}
        title={editing ? t('admin:companies.editTitle') : t('admin:companies.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()}
            >
              {t('common:actions.save')}
            </Button>
          </>
        }
      >
        <FormGrid>
          <Input
            label={t('admin:companies.columns.name')}
            value={form.name}
            onChange={(event) => setForm((prev) => ({ ...prev, name: event.target.value }))}
            required
            fullWidth
          />
          <Input
            label={t('admin:companies.columns.code')}
            value={form.code}
            onChange={(event) => setForm((prev) => ({ ...prev, code: event.target.value }))}
            required
            fullWidth
          />
          <Input
            label={t('admin:companies.columns.emailDomain')}
            value={form.email_domain}
            onChange={(event) =>
              setForm((prev) => ({ ...prev, email_domain: event.target.value }))
            }
            fullWidth
          />
          <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:companies.active')}
          </label>
        </FormGrid>
      </Modal>
    </AppLayout>
  );
};

export default AdminCompaniesPage;