import { updateExpensePhaseAction } from "@/app/actions";
import { AppShell } from "@/components/AppShell";
import { EmptyState } from "@/components/EmptyState";
import { PageHeader } from "@/components/PageHeader";
import { StatusMessage } from "@/components/StatusMessage";
import { financialPhaseLabels, recordTypeLabels } from "@/lib/finance";
import { currency, shortDate } from "@/lib/format";
import { getSelectedProject } from "@/lib/projects";

export default async function ReviewRecordsPage({
  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, "expenses.edit");

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

  const reviewRecords = project.expenses.filter((expense) => expense.phase === "OTHER");

  return (
    <AppShell projects={projects} selectedProjectId={project.id} username={user.name ?? user.username ?? user.email} role={projectRole ?? user.role} permissions={permissions}>
      <PageHeader title="Review Records" description="Assign a financial phase and record type to old imported or uncategorized records." />
      <StatusMessage updated={params.updated} deleted={params.deleted} error={params.error} />

      <section className="panel overflow-hidden">
        <div className="border-b border-line px-4 py-3">
          <h3 className="font-semibold text-ink">Unphased Records</h3>
        </div>
        <div className="overflow-x-auto">
          <table className="w-full min-w-[960px]">
            <thead className="table-head">
              <tr>
                <th className="px-3 py-2">Date</th>
                <th className="px-3 py-2">Category</th>
                <th className="px-3 py-2">Description</th>
                <th className="px-3 py-2">Amount</th>
                <th className="px-3 py-2">Assign</th>
              </tr>
            </thead>
            <tbody>
              {reviewRecords.map((expense) => (
                <tr key={expense.id}>
                  <td className="table-cell">{shortDate(expense.date)}</td>
                  <td className="table-cell">{expense.category?.name ?? "-"}</td>
                  <td className="table-cell">{expense.description ?? expense.vendor ?? "-"}</td>
                  <td className="table-cell">{currency(Number(expense.finalCost))}</td>
                  <td className="table-cell">
                    <form action={updateExpensePhaseAction} className="grid gap-2 md:grid-cols-[1fr_1fr_auto]">
                      <input type="hidden" name="projectId" value={project.id} />
                      <input type="hidden" name="expenseId" value={expense.id} />
                      <select className="field" name="phase" defaultValue={expense.phase}>
                        {Object.entries(financialPhaseLabels).map(([phase, label]) => (
                          <option key={phase} value={phase}>{label}</option>
                        ))}
                      </select>
                      <select className="field" name="recordType" defaultValue={expense.recordType}>
                        {Object.entries(recordTypeLabels).map(([recordType, label]) => (
                          <option key={recordType} value={recordType}>{label}</option>
                        ))}
                      </select>
                      <button className="btn-secondary">Save</button>
                    </form>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
          {reviewRecords.length === 0 ? <div className="p-6 text-sm text-slate-600">No unphased records need review.</div> : null}
        </div>
      </section>
    </AppShell>
  );
}