'use client';

import Link from 'next/link';
import { useCallback, useEffect, useState } from 'react';
import { RequireRole } from '@/lib/auth-context';
import { listPages } from '@/lib/services/pages';
import type { SitePage } from '@/lib/types';
import {
  EmptyState,
  ErrorAlert,
  Loading,
  PageHeader,
  formatDateTime,
} from '@/components/app/ui';
import { extractApiError } from '@/lib/api-client';
import { publicHrefForSlug } from '@/lib/pages-content';

export default function PaginasPage() {
  return (
    <RequireRole roles={['admin']}>
      <PaginasView />
    </RequireRole>
  );
}

function PaginasView() {
  const [pages, setPages] = useState<SitePage[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  const load = useCallback(async () => {
    setLoading(true);
    setError(null);
    try {
      setPages(await listPages());
    } catch (err) {
      setError(extractApiError(err));
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    load();
  }, [load]);

  return (
    <>
      <PageHeader
        title="Páginas do site"
        subtitle="Conteúdo das páginas institucionais publicadas no site"
      />

      {error && <ErrorAlert message={error} onRetry={load} />}

      {loading ? (
        <Loading />
      ) : pages.length === 0 ? (
        <EmptyState
          icon="bi-window-stack"
          title="Nenhuma página cadastrada"
          description="As páginas institucionais aparecem aqui após serem criadas."
        />
      ) : (
        <div className="card border-0 shadow-sm">
          <div className="table-responsive">
            <table className="table table-hover align-middle mb-0">
              <thead className="table-light">
                <tr>
                  <th scope="col">Título</th>
                  <th scope="col">Slug</th>
                  <th scope="col">Status</th>
                  <th scope="col">Atualizada</th>
                  <th scope="col" className="text-end">Ações</th>
                </tr>
              </thead>
              <tbody>
                {pages.map((page) => (
                  <tr key={page.id}>
                    <td className="fw-semibold">{page.title}</td>
                    <td>
                      <code className="text-muted">{page.slug}</code>
                    </td>
                    <td>
                      {page.isPublished ? (
                        <span className="badge text-bg-success">Publicada</span>
                      ) : (
                        <span className="badge text-bg-secondary">Rascunho</span>
                      )}
                    </td>
                    <td className="text-muted">
                      {formatDateTime(page.updatedAt)}
                    </td>
                    <td className="text-end table-nowrap">
                      <Link
                        href={publicHrefForSlug(page.slug)}
                        target="_blank"
                        className="btn btn-sm btn-outline-secondary me-1"
                        aria-label={`Ver ${page.title} no site`}
                      >
                        <i className="bi bi-box-arrow-up-right" />
                      </Link>
                      <Link
                        href={`/painel/paginas/${page.slug}`}
                        className="btn btn-sm btn-primary"
                        aria-label={`Editar ${page.title}`}
                      >
                        <i className="bi bi-pencil me-1" />
                        Editar
                      </Link>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      )}
    </>
  );
}