import { Trash2, UserPlus } from "lucide-react";
import { createClient } from "@/lib/supabase/server";
import { getLookups, getUser, getWorkspace } from "@/lib/data";
import { dateBR } from "@/lib/format";
import { PageHeader } from "@/components/PageHeader";
import { ConfirmButton } from "@/components/ConfirmButton";
import { inviteMember, removeInvite, removeMember, setMemberRole } from "../actions";

export default async function Membros({ params }: { params: Promise<{ ws: string }> }) {
  const { ws } = await params;
  const supabase = await createClient();
  const [user, workspace, lookups, invRes] = await Promise.all([
    getUser(),
    getWorkspace(ws),
    getLookups(ws),
    supabase.from("workspace_invites").select("id,email,created_at").eq("workspace_id", ws).is("accepted_at", null).order("created_at"),
  ]);
  const me = lookups.members.find((m) => m.user_id === user.id);
  const isOwner = me?.role === "owner";
  const owners = lookups.members.filter((m) => m.role === "owner").length;
  const Hidden = () => <input type="hidden" name="ws" value={ws} />;

  return (
    <>
      <PageHeader title="Membros" subtitle={`Quem tem acesso à carteira ${workspace.name}. Todos os membros veem e editam todos os lançamentos.`} />

      <div className="grid gap-4 lg:grid-cols-3">
        <div className="card overflow-x-auto p-0 lg:col-span-2">
          <table className="table">
            <thead><tr><th>Pessoa</th><th>Papel</th><th /></tr></thead>
            <tbody>
              {lookups.members.map((m) => (
                <tr key={m.user_id}>
                  <td><div className="font-medium">{m.name}{m.user_id === user.id && <span className="ml-1 text-xs text-stone-400">(você)</span>}</div>
                    <div className="text-xs text-stone-500">{m.email}</div></td>
                  <td>
                    {isOwner && m.user_id !== user.id ? (
                      <form action={setMemberRole} className="flex gap-1">
                        <Hidden /><input type="hidden" name="user_id" value={m.user_id} />
                        <select className="input w-auto py-1" name="role" defaultValue={m.role}>
                          <option value="owner">Dono</option><option value="member">Membro</option>
                        </select>
                        <button className="btn btn-sm">OK</button>
                      </form>
                    ) : (
                      <span className={`badge ${m.role === "owner" ? "bg-brand-50 text-brand-700" : "bg-stone-100 text-stone-600"}`}>{m.role === "owner" ? "Dono" : "Membro"}</span>
                    )}
                  </td>
                  <td className="text-right">
                    {(isOwner || m.user_id === user.id) && !(m.role === "owner" && owners === 1) && (
                      <form action={removeMember}>
                        <Hidden /><input type="hidden" name="user_id" value={m.user_id} />
                        <ConfirmButton message={m.user_id === user.id ? "Sair desta carteira?" : `Remover ${m.name}?`} className="btn-ghost hover:text-red-600">
                          <Trash2 size={14} /> {m.user_id === user.id ? "Sair" : "Remover"}
                        </ConfirmButton>
                      </form>
                    )}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        <div className="space-y-4">
          {isOwner ? (
            <form action={inviteMember} className="card space-y-3">
              <Hidden />
              <div className="flex items-center gap-2 font-semibold"><UserPlus size={16} /> Convidar pessoa</div>
              <input className="input" name="email" type="email" placeholder="email@exemplo.com" required />
              <button className="btn-primary w-full">Convidar</button>
              <p className="text-xs text-stone-500">
                A pessoa cria a conta (ou entra) com este e-mail e ganha acesso automaticamente. Envie o link do app para ela.
              </p>
            </form>
          ) : (
            <div className="card text-sm text-stone-600">Só donos da carteira podem convidar pessoas.</div>
          )}

          {!!invRes.data?.length && (
            <div className="card">
              <div className="card-title">Convites pendentes</div>
              <ul className="space-y-2 text-sm">
                {invRes.data.map((i) => (
                  <li key={i.id} className="flex items-center justify-between gap-2">
                    <span className="truncate">{i.email}<span className="ml-1 text-xs text-stone-400">{dateBR(String(i.created_at).slice(0, 10))}</span></span>
                    {isOwner && (
                      <form action={removeInvite}><Hidden /><input type="hidden" name="id" value={i.id} />
                        <button className="btn-ghost hover:text-red-600" title="Cancelar convite"><Trash2 size={14} /></button></form>
                    )}
                  </li>
                ))}
              </ul>
            </div>
          )}
        </div>
      </div>
    </>
  );
}