import { createFileRoute } from "@tanstack/react-router";
import { useState, useCallback, useMemo } from "react";
import { AppShell } from "@/components/layout/AppShell";
import { EscopoToggle, useEscopo } from "@/components/layout/EscopoToggle";
import { useLancamentos } from "@/features/lancamentos/hooks/useLancamentos";
import { LancamentoForm } from "@/features/lancamentos/components/LancamentoForm";
import { LancamentoList } from "@/features/lancamentos/components/LancamentoList";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Plus, Search, X } from "lucide-react";
import type { Lancamento } from "@/features/lancamentos/types";

export const Route = createFileRoute("/lancamentos")({
  component: LancamentosPage,
});

function LancamentosPage() {
  const { escopo } = useEscopo();
  const items = useLancamentos(escopo);
  const [busca, setBusca] = useState("");
  const [aberto, setAberto] = useState(false);
  const [editando, setEditando] = useState<Lancamento | null>(null);

  const filtrados = useMemo(() => {
    const q = busca.trim().toLowerCase();
    if (!q) return items;
    return items.filter(
      (l) =>
        l.categoria.toLowerCase().includes(q) ||
        l.descricao.toLowerCase().includes(q) ||
        (l.fornecedorCliente ?? "").toLowerCase().includes(q),
    );
  }, [items, busca]);

  const onEditar = useCallback((l: Lancamento) => {
    setEditando(l);
    setAberto(true);
  }, []);

  const onNovo = useCallback(() => {
    setEditando(null);
    setAberto(true);
  }, []);

  return (
    <AppShell
      title="Lançamentos"
      subtitle={escopo === "pj" ? "Empresa" : "Pessoal"}
      right={<EscopoToggle />}
    >
      {aberto ? (
        <LancamentoForm
          escopo={escopo}
          inicial={editando}
          onClose={() => {
            setAberto(false);
            setEditando(null);
          }}
        />
      ) : (
        <>
          <div className="mb-3 flex gap-2">
            <div className="relative flex-1">
              <Search className="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
              <Input
                value={busca}
                onChange={(e) => setBusca(e.target.value)}
                placeholder="Buscar..."
                className="pl-9"
              />
              {busca && (
                <button
                  onClick={() => setBusca("")}
                  className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground"
                  aria-label="Limpar busca"
                >
                  <X className="size-4" />
                </button>
              )}
            </div>
            <Button onClick={onNovo}>
              <Plus className="size-4" /> Novo
            </Button>
          </div>
          <LancamentoList items={filtrados} onEditar={onEditar} />
        </>
      )}
    </AppShell>
  );
}