"use client";

import { useRouter, useSearchParams } from "next/navigation";
import { Suspense, useEffect, useState } from "react";
import { api } from "@/lib/api";
import type { Issue, IssueInput, IssueStatus } from "@/lib/types";
import { useWorkflowStates } from "@/lib/store";
import { useIssues } from "@/hooks/useIssues";
import { AppShell } from "@/components/layout/AppShell";
import { IssueList } from "@/components/issues/IssueList";

/**
 * Página principal de issues.
 *
 * Agrupa por estado y permite filtrar. Acepta `?new=1` en la URL para abrir
 * el formulario de creación directamente (usado por el botón «Nuevo issue» y
 * por la palette de comandos).
 */
export default function IssuesPage() {
  return (
    <Suspense fallback={null}>
      <IssuesPageInner />
    </Suspense>
  );
}

function IssuesPageInner() {
  const router = useRouter();
  const searchParams = useSearchParams();

  const [statusFilter, setStatusFilter] = useState<IssueStatus[]>([]);
  const { meta, order } = useWorkflowStates();
  const [refreshKey, setRefreshKey] = useState(0);
  const [creating, setCreating] = useState(false);
  const [title, setTitle] = useState("");

  // Abrir el formulario cuando la URL lo indica.
  useEffect(() => {
    if (searchParams.get("new") === "1") {
      setCreating(true);
      // Quitar el parámetro para no reabrirlo al navegar dentro de la página.
      router.replace("/issues");
    }
  }, [searchParams, router]);

  const { issues, loading } = useIssues(
    statusFilter.length ? { status: statusFilter } : undefined,
    refreshKey,
  );

  function toggleStatus(status: IssueStatus) {
    setStatusFilter((current) =>
      current.includes(status)
        ? current.filter((s) => s !== status)
        : [...current, status],
    );
  }

  async function handleCreate(event: React.FormEvent) {
    event.preventDefault();
    const trimmed = title.trim();
    if (!trimmed) return;

    const input: IssueInput = { title: trimmed, status: "todo" };
    await api.createIssue(input);

    setTitle("");
    setCreating(false);
    setRefreshKey((key) => key + 1);
  }

  const actions = (
    <div className="d-flex align-items-center gap-2">
      {order.map((status) => (
        <button
          key={status}
          type="button"
          className={`filter-chip${statusFilter.includes(status) ? " active" : ""}`}
          onClick={() => toggleStatus(status)}
        >
          <span
            className="label-dot"
            style={{ background: meta[status]?.color ?? "#98a2b3" }}
          />
          {meta[status]?.label ?? status}
        </button>
      ))}
    </div>
  );

  return (
    <AppShell title="Issues" actions={actions}>
      {creating && (
        <div className="border-bottom p-3" style={{ background: "var(--lp-bg-elevated)" }}>
          <form onSubmit={handleCreate}>
            <input
              autoFocus
              className="issue-title-input"
              style={{ fontSize: 15 }}
              placeholder="Issue title…"
              value={title}
              onChange={(event) => setTitle(event.target.value)}
              onKeyDown={(event) => {
                if (event.key === "Escape") setCreating(false);
              }}
            />
            <div className="d-flex gap-2 mt-3">
              <button type="submit" className="btn btn-accent btn-sm" disabled={!title.trim()}>
                Crear issue
              </button>
              <button
                type="button"
                className="btn btn-lp btn-sm"
                onClick={() => setCreating(false)}
              >
                Cancelar
              </button>
            </div>
          </form>
        </div>
      )}

      {!creating && (
        <div className="filter-bar">
          <button type="button" className="filter-chip" onClick={() => setCreating(true)}>
            <i className="bx bx-plus" />
            Nuevo issue
          </button>

          {statusFilter.length > 0 && (
            <button
              type="button"
              className="filter-chip"
              onClick={() => setStatusFilter([])}
            >
              <i className="bx bx-x" />
              Limpiar filtros
            </button>
          )}
        </div>
      )}

      <IssueList
        issues={issues}
        loading={loading}
        groupBy="status"
        emptyTitle={
          statusFilter.length > 0 ? "Ningún issue coincide con los filtros" : "No hay issues aquí"
        }
        emptyDescription={
          statusFilter.length > 0
            ? "Prueba a ampliar la selección de estados."
            : "Crea un nuevo issue para empezar."
        }
      />
    </AppShell>
  );
}