import { createContributionAction, deleteProjectScopedRecordAction, updateContributionAction } from "@/app/actions";
import { AppShell } from "@/components/AppShell";
import { ConfirmSubmitButton } from "@/components/ConfirmSubmitButton";
import { DeleteButton } from "@/components/DeleteButton";
import { EmptyState } from "@/components/EmptyState";
import { PaginationControls } from "@/components/PaginationControls";
import { PageHeader } from "@/components/PageHeader";
import { ReceiptUploader } from "@/components/ReceiptUploader";
import { ReceiptViewer } from "@/components/ReceiptViewer";
import { SelectionToolbar } from "@/components/SelectionToolbar";
import { StatCard } from "@/components/StatCard";
import { StatusMessage } from "@/components/StatusMessage";
import { financialPhaseLabels } from "@/lib/finance";
import { currency, dateInput, shortDate } from "@/lib/format";
import { paginateItems, paginationFromParams } from "@/lib/pagination";
import { getSelectedProject } from "@/lib/projects";

export default async function ContributionsPage({
  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, "contributions.view");
  const canEdit = Boolean(permissions?.["contributions.create"] || permissions?.["contributions.edit"] || permissions?.["contributions.archive"] || permissions?.["contributions.delete"]);

  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 tracking contributions." href="/projects" actionLabel="Create project" />
      </AppShell>
    );
  }

  const totalContributions = project.contributions.reduce((sum, contribution) => sum + Number(contribution.amount), 0);
  const pagination = paginationFromParams(params, project.contributions.length);
  const pagedContributions = paginateItems(project.contributions, pagination);
  const byPartner = project.partners.map((partner) => ({
    id: partner.id,
    name: partner.partner.name,
    amount: project.contributions
      .filter((contribution) => contribution.partnerId === partner.id)
      .reduce((sum, contribution) => sum + Number(contribution.amount), 0)
  }));
  const accountOptions = project.projectAccounts.filter((account) => account.active);

  return (
    <AppShell projects={projects} selectedProjectId={project.id} username={user.name ?? user.username ?? user.email} role={projectRole ?? user.role} permissions={permissions}>
      <PageHeader title="Contributions" description="Track money partners invest into the project. Contributions are credits, not expenses." />
      <StatusMessage updated={params.updated} deleted={params.deleted} error={params.error} />

      <section className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
        <StatCard label="Total contributions" value={totalContributions} tone="positive" />
        {byPartner.slice(0, 3).map((partner) => (
          <StatCard key={partner.id} label={partner.name} value={partner.amount} />
        ))}
      </section>

      <section className="mt-6 grid gap-6 xl:grid-cols-[0.75fr_1.25fr]">
        {canEdit ? (
          <form action={createContributionAction} className="panel grid gap-4 p-4">
            <h3 className="font-semibold text-ink">Add Contribution</h3>
            <input type="hidden" name="projectId" value={project.id} />
            <label className="grid gap-2">
              <span className="label">Partner</span>
              <select className="field" name="partnerId" required>
                {project.partners.map((partner) => (
                  <option key={partner.id} value={partner.id}>{partner.partner.name}</option>
                ))}
              </select>
            </label>
            <div className="grid gap-4 md:grid-cols-2">
              <label className="grid gap-2">
                <span className="label">Date</span>
                <input className="field" name="date" type="date" defaultValue={new Date().toISOString().slice(0, 10)} required />
              </label>
              <label className="grid gap-2">
                <span className="label">Amount</span>
                <input className="field" name="amount" type="number" step="0.01" min="0" required />
              </label>
            </div>
            <label className="grid gap-2">
              <span className="label">Financial phase</span>
              <select className="field" name="phase" defaultValue="OTHER">
                {Object.entries(financialPhaseLabels).map(([phase, label]) => (
                  <option key={phase} value={phase}>{label}</option>
                ))}
              </select>
            </label>
            <input className="field" name="purpose" placeholder="Purpose" />
            <input className="field" name="paymentMethod" placeholder="Payment method" />
            <label className="grid gap-2">
              <span className="label">Destination project account</span>
              <select className="field" name="projectAccountId" defaultValue="">
                <option value="">No account selected</option>
                {accountOptions.map((account) => (
                  <option key={account.id} value={account.id}>{account.accountName}</option>
                ))}
              </select>
            </label>
            <ReceiptUploader name="proof" label="Proof / receipt" />
            <textarea className="field min-h-20" name="notes" placeholder="Notes" />
            <ConfirmSubmitButton title="Review before saving" message="Save this partner contribution?" confirmLabel="Confirm Save">
              Save contribution
            </ConfirmSubmitButton>
          </form>
        ) : null}

        <div className="panel overflow-hidden">
          <div className="border-b border-line px-4 py-3">
            <h3 className="font-semibold text-ink">Contribution Records</h3>
          </div>
          <div className="overflow-x-auto">
            <SelectionToolbar totalRecords={project.contributions.length}>
            <table className="w-full min-w-[980px]">
              <thead className="table-head">
                <tr>
                  <th className="px-3 py-2">Select</th>
                  <th className="px-3 py-2">Details</th>
                  <th className="px-3 py-2">Date</th>
                  <th className="px-3 py-2">Partner</th>
                  <th className="px-3 py-2">Contribution Amount</th>
                  <th className="px-3 py-2">Destination Account</th>
                  <th className="px-3 py-2">Method</th>
                  <th className="px-3 py-2">Status</th>
                  <th className="px-3 py-2">Proof</th>
                  {canEdit ? <th className="px-3 py-2">Actions</th> : null}
                </tr>
              </thead>
              <tbody>
                {pagedContributions.map((contribution) => (
                  <tr key={contribution.id}>
                    <td className="table-cell">
                      <input data-record-checkbox className="h-4 w-4 rounded border-line" type="checkbox" value={contribution.id} aria-label={`Select contribution from ${contribution.partner.partner.name}`} />
                    </td>
                    <td className="table-cell align-top">
                      <details className="min-w-80">
                        <summary className="cursor-pointer text-sm font-medium text-blue-700">Expand</summary>
                        <div className="mt-3 grid gap-3 rounded-md border border-line bg-slate-50 p-3 text-sm md:grid-cols-2">
                          <div><p className="label">Phase</p><p className="font-medium text-ink">{financialPhaseLabels[contribution.phase]}</p></div>
                          <div><p className="label">Purpose</p><p className="font-medium text-ink">{contribution.purpose ?? "-"}</p></div>
                          <div><p className="label">Notes</p><p className="font-medium text-ink">{contribution.notes ?? "-"}</p></div>
                          <div><p className="label">Created</p><p className="font-medium text-ink">{shortDate(contribution.createdAt)}</p></div>
                        </div>
                      </details>
                    </td>
                    <td className="table-cell">{shortDate(contribution.date)}</td>
                    <td className="table-cell font-medium text-ink">{contribution.partner.partner.name}</td>
                    <td className="table-cell font-semibold text-ink">{currency(Number(contribution.amount))}</td>
                    <td className="table-cell">{contribution.projectAccount?.accountName ?? "-"}</td>
                    <td className="table-cell">{contribution.paymentMethod ?? "-"}</td>
                    <td className="table-cell">Active</td>
                    <td className="table-cell">
                      <ReceiptViewer url={contribution.proofUrl} emptyLabel="No Receipt" compact />
                    </td>
                    {canEdit ? (
                      <td className="table-cell align-top">
                        <div className="flex flex-wrap gap-2">
                          <details className="action-modal">
                            <summary>Edit</summary>
                            <form action={updateContributionAction} className="mt-3 grid min-w-80 gap-3">
                              <input type="hidden" name="projectId" value={project.id} />
                              <input type="hidden" name="contributionId" value={contribution.id} />
                              <select className="field" name="partnerId" defaultValue={contribution.partnerId} required>
                                {project.partners.map((partner) => (
                                  <option key={partner.id} value={partner.id}>{partner.partner.name}</option>
                                ))}
                              </select>
                              <input className="field" name="date" type="date" defaultValue={dateInput(contribution.date)} required />
                              <input className="field" name="amount" type="number" step="0.01" min="0" defaultValue={Number(contribution.amount)} required />
                              <select className="field" name="phase" defaultValue={contribution.phase}>
                                {Object.entries(financialPhaseLabels).map(([phase, label]) => (
                                  <option key={phase} value={phase}>{label}</option>
                                ))}
                              </select>
                              <input className="field" name="purpose" defaultValue={contribution.purpose ?? ""} placeholder="Purpose" />
                              <input className="field" name="paymentMethod" defaultValue={contribution.paymentMethod ?? ""} placeholder="Payment method" />
                              <select className="field" name="projectAccountId" defaultValue={contribution.projectAccountId ?? ""}>
                                <option value="">No account selected</option>
                                {project.projectAccounts.map((account) => (
                                  <option key={account.id} value={account.id}>
                                    {account.accountName}
                                    {account.active ? "" : " (inactive)"}
                                  </option>
                                ))}
                              </select>
                              <ReceiptUploader name="proof" label="Replace proof / receipt" existingUrl={contribution.proofUrl} />
                              <textarea className="field min-h-20" name="notes" defaultValue={contribution.notes ?? ""} />
                              <ConfirmSubmitButton title="Review changes" message="Update this partner contribution?" confirmLabel="Confirm Update">
                                Update contribution
                              </ConfirmSubmitButton>
                            </form>
                          </details>
                          <form action={deleteProjectScopedRecordAction}>
                            <input type="hidden" name="projectId" value={project.id} />
                            <input type="hidden" name="model" value="contribution" />
                            <input type="hidden" name="id" value={contribution.id} />
                            <input type="hidden" name="returnTo" value="/contributions" />
                            <DeleteButton label="Delete contribution" message="Delete this contribution?" />
                          </form>
                        </div>
                      </td>
                    ) : null}
                  </tr>
                ))}
              </tbody>
            </table>
            </SelectionToolbar>
            <PaginationControls pagination={pagination} pathname="/contributions" params={params} />
            {pagedContributions.length === 0 ? <div className="p-6 text-sm text-slate-600">No partner contributions yet.</div> : null}
          </div>
        </div>
      </section>
    </AppShell>
  );
}