/**
 * DashboardPage.tsx
 *
 * Painel de fila de tickets — visão principal do agente de TI.
 * Exibe todos os chamados com filtros por status e prioridade.
 */

import { useState } from 'react';
import { useQuery } from '@tanstack/react-query';
import { api, type TicketStatus, type TicketPriority } from '@/lib/api';
import { TicketCard } from '@/components/tickets/TicketCard';
import styles from './DashboardPage.module.css';

// ─── Opções dos filtros ───────────────────────────────────────────────────────

const STATUS_OPTIONS: { value: TicketStatus | ''; label: string }[] = [
  { value: '',            label: 'Todos os status' },
  { value: 'open',        label: '🔵 Abertos' },
  { value: 'in_progress', label: '🟣 Em Andamento' },
  { value: 'waiting',     label: '🟡 Aguardando' },
  { value: 'resolved',    label: '🟢 Resolvidos' },
  { value: 'closed',      label: '⚫ Fechados' },
];

const PRIORITY_OPTIONS: { value: TicketPriority | ''; label: string }[] = [
  { value: '',         label: 'Todas as prioridades' },
  { value: 'critical', label: '⚡ Crítica' },
  { value: 'high',     label: '↑ Alta' },
  { value: 'medium',   label: '→ Média' },
  { value: 'low',      label: '↓ Baixa' },
];

// ─── Skeleton de carregamento ─────────────────────────────────────────────────

function TicketSkeleton() {
  return (
    <div className={styles.skeleton} aria-hidden="true">
      <div className={styles.skeletonLine} style={{ width: '30%', height: 20 }} />
      <div className={styles.skeletonLine} style={{ width: '80%', height: 18 }} />
      <div className={styles.skeletonLine} style={{ width: '60%', height: 14 }} />
    </div>
  );
}

// ─── Componente principal ─────────────────────────────────────────────────────

export default function DashboardPage() {
  // ── Filtros ────────────────────────────────────────────────────────────────
  const [status,   setStatus]   = useState<TicketStatus | ''>('');
  const [priority, setPriority] = useState<TicketPriority | ''>('');
  const [page,     setPage]     = useState(1);

  const LIMIT = 12;

  // ── Query ──────────────────────────────────────────────────────────────────
  // A query re-executa automaticamente sempre que os filtros ou a página mudam
  const { data, isLoading, isError, error } = useQuery({
    queryKey: ['tickets', { status, priority, page }],
    queryFn:  () =>
      api.tickets.list({
        status:   status   || undefined,
        priority: priority || undefined,
        page,
        limit: LIMIT,
      }),
  });

  const { data: stats } = useQuery({
    queryKey: ['stats'],
    queryFn: () => api.stats.get(),
  });

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

  // Reseta para página 1 ao mudar filtros
  function handleStatusChange(value: TicketStatus | '') {
    setStatus(value);
    setPage(1);
  }

  function handlePriorityChange(value: TicketPriority | '') {
    setPriority(value);
    setPage(1);
  }

  return (
    <div className={styles.page}>

      {/* ── Cabeçalho + stats ─────────────────────────────────────────────── */}
      <div className={styles.pageHeader}>
        <div>
          <h2 className={styles.heading}>Fila de Chamados</h2>
          {meta && (
            <p className={styles.total}>
              {meta.total} chamado{meta.total !== 1 ? 's' : ''} encontrado{meta.total !== 1 ? 's' : ''}
            </p>
          )}
        </div>
      </div>

      {/* ── KPI Cards ─────────────────────────────────────────────────────── */}
      {stats && (
        <div className={styles.kpiGrid}>
          <div className={styles.kpiCard}>
            <span className={styles.kpiLabel}>Pendentes</span>
            <strong className={styles.kpiValue}>{stats.totalPending}</strong>
          </div>
          <div className={styles.kpiCard}>
            <span className={styles.kpiLabel}>Aguardando</span>
            <strong className={styles.kpiValue}>{stats.totalWaiting}</strong>
          </div>
          <div className={styles.kpiCard}>
            <span className={styles.kpiLabel}>Resolvidos</span>
            <strong className={styles.kpiValue}>{stats.totalResolved}</strong>
          </div>
        </div>
      )}

      {/* ── Filtros ───────────────────────────────────────────────────────── */}
      <div className={styles.filters} role="search" aria-label="Filtros de chamados">
        <select
          className="input"
          value={status}
          onChange={(e) => handleStatusChange(e.target.value as TicketStatus | '')}
          aria-label="Filtrar por status"
          style={{ maxWidth: 220 }}
        >
          {STATUS_OPTIONS.map((o) => (
            <option key={o.value} value={o.value}>{o.label}</option>
          ))}
        </select>

        <select
          className="input"
          value={priority}
          onChange={(e) => handlePriorityChange(e.target.value as TicketPriority | '')}
          aria-label="Filtrar por prioridade"
          style={{ maxWidth: 220 }}
        >
          {PRIORITY_OPTIONS.map((o) => (
            <option key={o.value} value={o.value}>{o.label}</option>
          ))}
        </select>

        {(status || priority) && (
          <button
            className="btn btn--ghost"
            onClick={() => { handleStatusChange(''); handlePriorityChange(''); }}
          >
            Limpar filtros
          </button>
        )}
      </div>

      {/* ── Estados: loading / erro / vazio / lista ───────────────────────── */}
      {isLoading && (
        <div className={styles.grid} aria-busy="true" aria-label="Carregando chamados">
          {Array.from({ length: 6 }).map((_, i) => (
            <TicketSkeleton key={i} />
          ))}
        </div>
      )}

      {isError && (
        <div className={styles.errorState} role="alert">
          <p className={styles.errorTitle}>Falha ao carregar chamados</p>
          <p className={styles.errorMessage}>
            {error instanceof Error ? error.message : 'Erro desconhecido'}
          </p>
        </div>
      )}

      {!isLoading && !isError && tickets.length === 0 && (
        <div className={styles.emptyState}>
          <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="var(--color-text-muted)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
            <path d="M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z" />
            <path d="M13 5v2M13 17v2M13 11v2" />
          </svg>
          <p className={styles.emptyTitle}>Nenhum chamado encontrado</p>
          <p className={styles.emptyMessage}>
            {status || priority
              ? 'Tente ajustar os filtros acima.'
              : 'Nenhum chamado aberto no momento.'}
          </p>
        </div>
      )}

      {!isLoading && tickets.length > 0 && (
        <div className={styles.grid}>
          {tickets.map((ticket) => (
            <TicketCard key={ticket.id} ticket={ticket} />
          ))}
        </div>
      )}

      {/* ── Paginação ─────────────────────────────────────────────────────── */}
      {totalPages > 1 && (
        <div className={styles.pagination} aria-label="Paginação">
          <button
            className="btn btn--ghost"
            onClick={() => setPage((p) => Math.max(1, p - 1))}
            disabled={page <= 1}
          >
            ← Anterior
          </button>

          <span className={styles.pageInfo}>
            Página {page} de {totalPages}
          </span>

          <button
            className="btn btn--ghost"
            onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
            disabled={page >= totalPages}
          >
            Próxima →
          </button>
        </div>
      )}
    </div>
  );
}