import Link from "next/link";
import { AppShell } from "@/components/AppShell";
import { EmptyState } from "@/components/EmptyState";
import { PageHeader } from "@/components/PageHeader";
import { StatCard } from "@/components/StatCard";
import { SummaryCard } from "@/components/SummaryCard";
import { currency } from "@/lib/format";
import { buildProjectMetrics } from "@/lib/metrics";
import { getSelectedProject } from "@/lib/projects";

export default async function PartnersPage({
  searchParams
}: {
  searchParams?: Promise<Record<string, string | string[] | undefined>>;
}) {
  const params = (await searchParams) ?? {};
  const selected = typeof params.projectId === "string" ? params.projectId : undefined;
  const { user, projects, project, permissions, projectRole } = await getSelectedProject(selected, "partners.view");
  const canManagePartners = Boolean(permissions?.["partners.create"] || permissions?.["partners.edit"] || permissions?.["partners.editOwnership"]);

  if (!project) {
    return (
      <AppShell projects={projects} username={user.name ?? user.username ?? user.email} role={projectRole ?? user.role} permissions={permissions}>
        <EmptyState title="Create a project before viewing partners." href="/projects" actionLabel="Create project" />
      </AppShell>
    );
  }

  const metrics = buildProjectMetrics(project);
  const contributionTotal = project.contributions.reduce((sum, contribution) => sum + Number(contribution.amount), 0);

  return (
    <AppShell projects={projects} selectedProjectId={project.id} username={user.name ?? user.username ?? user.email} role={projectRole ?? user.role} permissions={permissions}>
      <PageHeader
        title="Partners"
        description="Review ownership, contributions, credited payments, responsible share, and net settlement position."
        actions={canManagePartners ? <Link className="btn-secondary" href={`/projects?projectId=${project.id}`}>Manage partners</Link> : null}
      />

      <section className="grid gap-4 md:grid-cols-3">
        <SummaryCard label="Active partners" value={String(project.partners.filter((partner) => partner.active).length)} />
        <StatCard label="Partner contributions" value={contributionTotal} tone="positive" />
        <SummaryCard label="Settlement items" value={String(metrics.settlements.length)} />
      </section>

      <section className="panel mt-6 overflow-hidden">
        <div className="border-b border-line px-4 py-3">
          <h3 className="font-semibold text-ink">Partner Balance Summary</h3>
        </div>
        <div className="overflow-x-auto">
          <table className="w-full min-w-[1120px]">
            <thead className="table-head">
              <tr>
                <th className="px-3 py-2">Partner</th>
                <th className="px-3 py-2">Ownership</th>
                <th className="px-3 py-2">Capital Contributed</th>
                <th className="px-3 py-2">Out-of-Pocket Paid</th>
                <th className="px-3 py-2">Project Fund Handled</th>
                <th className="px-3 py-2">Total Credit</th>
                <th className="px-3 py-2">Responsible Share</th>
                <th className="px-3 py-2">Net balance</th>
                <th className="px-3 py-2">Status</th>
              </tr>
            </thead>
            <tbody>
              {metrics.balances.map((balance) => (
                <tr key={balance.partnerId}>
                  <td className="table-cell font-medium text-ink">{balance.name}</td>
                  <td className="table-cell">{balance.ownershipPercentage.toFixed(2)}%</td>
                  <td className="table-cell">{currency(balance.capitalContributed)}</td>
                  <td className="table-cell">{currency(balance.outOfPocketPaid)}</td>
                  <td className="table-cell">{currency(balance.projectFundPaymentsHandled)}</td>
                  <td className="table-cell">{currency(balance.totalPaid)}</td>
                  <td className="table-cell">{currency(balance.totalResponsibleShare)}</td>
                  <td className={`table-cell font-semibold ${balance.netBalance >= 0 ? "text-emerald-700" : "text-red-700"}`}>
                    {currency(balance.netBalance)}
                  </td>
                  <td className="table-cell">{balance.netBalance >= 0 ? "Receivable / credited" : "Owes settlement"}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </section>
    </AppShell>
  );
}