import { RefreshCw, Trash2 } from "lucide-react";
import { createClient } from "@/lib/supabase/server";
import { getProvider } from "@/lib/openfinance";
import { PageHeader } from "@/components/PageHeader";
import { ConnectBank } from "@/components/ConnectBank";
import { ConfirmButton } from "@/components/ConfirmButton";
import { addConnectionManually, removeConnection, syncNow } from "./actions";

export default async function OpenFinance({ params, searchParams }: { params: Promise<{ ws: string }>; searchParams: Promise<{ ok?: string }> }) {
  const { ws } = await params;
  const { ok } = await searchParams;
  const supabase = await createClient();
  const { data: conns } = await supabase.from("openfinance_connections").select("*").eq("workspace_id", ws).order("created_at");
  const configured = getProvider().isConfigured();
  const Hidden = () => <input type="hidden" name="ws" value={ws} />;

  return (
    <>
      <PageHeader title="Open Finance" subtitle="Importação automática de extratos bancários via agregador (Pluggy)">
        {configured && <ConnectBank ws={ws} sandbox={process.env.PLUGGY_SANDBOX === "true"} />}
      </PageHeader>

      {ok !== undefined && (
        <div className="mb-4 rounded-lg border border-brand-100 bg-brand-50 px-4 py-3 text-sm text-brand-700">
          Sincronização concluída: {ok} lançamento(s) novo(s) importado(s).
        </div>
      )}

      {!configured && (
        <div className="card mb-6 space-y-2 text-sm text-stone-700">
          <div className="font-semibold">Integração ainda não ativada</div>
          <p>A estrutura já está pronta. Para ativar:</p>
          <ol className="list-decimal space-y-1 pl-5">
            <li>Crie uma conta em <a className="text-brand-600 underline" href="https://dashboard.pluggy.ai" target="_blank">dashboard.pluggy.ai</a> e gere <code>CLIENT_ID</code> e <code>CLIENT_SECRET</code>.</li>
            <li>Preencha <code>PLUGGY_CLIENT_ID</code> e <code>PLUGGY_CLIENT_SECRET</code> no <code>.env.local</code> (ou nas variáveis do servidor).</li>
            <li>Para testar com bancos fictícios, use também <code>PLUGGY_SANDBOX=true</code>.</li>
            <li>Reinicie o app. O botão <b>Conectar banco</b> aparece aqui.</li>
          </ol>
          <p className="text-stone-500">O código usa uma interface de provedor (<code>src/lib/openfinance</code>), então dá para trocar por Belvo ou outro agregador depois.</p>
        </div>
      )}

      <div className="card overflow-x-auto p-0">
        <table className="table">
          <thead><tr><th>Instituição</th><th>Status</th><th>Última sincronização</th><th /></tr></thead>
          <tbody>
            {(conns ?? []).map((c) => (
              <tr key={c.id}>
                <td><div className="font-medium">{c.institution ?? "—"}</div><div className="text-xs text-stone-400">{c.provider} · {c.item_id}</div></td>
                <td><span className="badge bg-stone-100 text-stone-600">{c.status}</span></td>
                <td className="text-stone-500">{c.last_sync_at ? new Date(c.last_sync_at).toLocaleString("pt-BR") : "nunca"}</td>
                <td className="text-right">
                  <div className="inline-flex gap-1">
                    <form action={syncNow}><Hidden /><input type="hidden" name="id" value={c.id} />
                      <button className="btn btn-sm" disabled={!configured}><RefreshCw size={12} /> Sincronizar</button></form>
                    <form action={removeConnection}><Hidden /><input type="hidden" name="id" value={c.id} />
                      <ConfirmButton message="Remover conexão? Contas e lançamentos importados são mantidos." className="btn-ghost hover:text-red-600"><Trash2 size={14} /></ConfirmButton></form>
                  </div>
                </td>
              </tr>
            ))}
            {!conns?.length && <tr><td colSpan={4} className="py-8 text-center text-stone-500">Nenhum banco conectado.</td></tr>}
          </tbody>
        </table>
      </div>

      {configured && (
        <details className="mt-4 text-sm">
          <summary className="cursor-pointer text-stone-500">Adicionar por Item ID (avançado)</summary>
          <form action={addConnectionManually} className="mt-2 flex max-w-md gap-2">
            <Hidden /><input className="input" name="item_id" placeholder="Item ID da Pluggy" required /><button className="btn">Adicionar</button>
          </form>
        </details>
      )}

      <p className="mt-4 text-xs text-stone-500">
        Lançamentos importados entram como pagos e sem categoria; categorize em <i>Lançamentos</i>. Reimportações não duplicam nem sobrescrevem suas edições.
      </p>
    </>
  );
}