import React, { useMemo, useState } from 'react';
import styled from 'styled-components';
import { useNavigate } from 'react-router-dom';
import { useLocale } from '@/app/providers/LocaleProvider';
import { AppLayout } from '@/shared/components/layout/AppLayout';
import { ContentPanel } from '@/shared/components/layout/ContentPanel';
import { PageHeader } from '@/shared/components/layout/PageHeader';
import { Button, Spinner } from '@/shared/components/ui';
import { ROUTES } from '@/shared/constants/routes';
import { TicketFiltersBar } from '@/features/tickets/components/TicketFiltersBar';
import { TicketListCard } from '@/features/tickets/components/TicketListCard';
import { useTickets } from '@/features/tickets/hooks/useTickets';
import { useTicketListFilterOptions } from '@/features/tickets/hooks/useTicketListFilterOptions';
import type { TicketListFilters } from '@/features/tickets/types/ticket.types';
import { EmptyStateCard } from '@/features/onboarding/components/EmptyStateCard';

const FilterPanel = styled(ContentPanel)`
  margin-bottom: ${({ theme }) => theme.layout.sectionGap};
`;

const TicketsList = styled.div`
  display: flex;
  flex-direction: column;
  gap: ${({ theme }) => theme.layout.cardGap};
`;

const Centered = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: ${({ theme }) => theme.spacing[4]};
  padding: ${({ theme }) => theme.spacing[12]} ${({ theme }) => theme.spacing[4]};
  text-align: center;
  color: ${({ theme }) => theme.colors.text.secondary};
`;

const PaginationBar = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: ${({ theme }) => theme.spacing[3]};
  margin-top: ${({ theme }) => theme.spacing[6]};
`;

const DEFAULT_FILTERS: TicketListFilters = {
  page: 1,
  per_page: 15,
  sort_by: 'updated_at',
  sort_order: 'desc',
};

const TicketsPage: React.FC = () => {
  const { t } = useLocale();
  const navigate = useNavigate();
  const [filters, setFilters] = useState<TicketListFilters>(DEFAULT_FILTERS);
  const [appliedFilters, setAppliedFilters] = useState<TicketListFilters>(DEFAULT_FILTERS);

  const { data, isLoading, isError, error, isFetching, refetch } = useTickets(appliedFilters);

  const filterOptions = useTicketListFilterOptions();

  const tickets = data?.data ?? [];
  const meta = data?.meta;

  const paginationLabel = useMemo(() => {
    if (!meta) return '';
    return t('tickets:pagination.summary', {
      page: meta.current_page,
      totalPages: meta.last_page,
      total: meta.total,
    });
  }, [meta, t]);

  return (
    <AppLayout>
      <PageHeader
        title={t('tickets:title')}
        actions={
          <Button variant="primary" onClick={() => navigate(ROUTES.TICKET_CREATE)} data-tour="tickets-create">
            {t('tickets:create')}
          </Button>
        }
      />

      <FilterPanel variant="muted" padding="md">
        <TicketFiltersBar
          filters={filters}
          statuses={filterOptions.statuses}
          priorities={filterOptions.priorities}
          onChange={(patch) => setFilters((current) => ({ ...current, ...patch }))}
          onSearch={() => setAppliedFilters({ ...filters, page: 1 })}
        />
      </FilterPanel>

      {isLoading ? (
        <Centered role="status">
          <Spinner size="lg" />
          <p>{t('tickets:states.loading')}</p>
        </Centered>
      ) : isError ? (
        <Centered role="alert">
          <p>{error instanceof Error ? error.message : t('tickets:states.error')}</p>
          <Button variant="primary" onClick={() => refetch()} loading={isFetching}>
            {t('tickets:states.retry')}
          </Button>
        </Centered>
      ) : tickets.length === 0 ? (
        <div data-tour="tickets-list">
          <EmptyStateCard
            icon="🎫"
            title={t('onboarding:emptyStates.tickets.title')}
            description={t('onboarding:emptyStates.tickets.description')}
            actionLabel={t('onboarding:emptyStates.tickets.action')}
            onAction={() => navigate(ROUTES.TICKET_CREATE)}
          />
        </div>
      ) : (
        <>
          <TicketsList data-tour="tickets-list">
            {tickets.map((ticket) => (
              <TicketListCard
                key={ticket.id}
                ticket={ticket}
                onClick={() => navigate(ROUTES.TICKET_DETAIL(ticket.id))}
              />
            ))}
          </TicketsList>

          {meta && meta.last_page > 1 && (
            <PaginationBar>
              <span>{paginationLabel}</span>
              <div style={{ display: 'flex', gap: '8px' }}>
                <Button
                  variant="outline"
                  disabled={meta.current_page <= 1 || isFetching}
                  onClick={() =>
                    setAppliedFilters((current) => ({
                      ...current,
                      page: Math.max(1, (current.page ?? 1) - 1),
                    }))
                  }
                >
                  {t('tickets:pagination.previous')}
                </Button>
                <Button
                  variant="outline"
                  disabled={meta.current_page >= meta.last_page || isFetching}
                  onClick={() =>
                    setAppliedFilters((current) => ({
                      ...current,
                      page: (current.page ?? 1) + 1,
                    }))
                  }
                >
                  {t('tickets:pagination.next')}
                </Button>
              </div>
            </PaginationBar>
          )}
        </>
      )}
    </AppLayout>
  );
};

export default TicketsPage;