import { AppShell } from "@/components/AppShell";
import { DeleteButton } from "@/components/DeleteButton";
import { EmptyState } from "@/components/EmptyState";
import { PageHeader } from "@/components/PageHeader";
import { StatCard } from "@/components/StatCard";
import { StatusMessage } from "@/components/StatusMessage";
import { createIncomeAction, createOperatingExpenseAction, deleteProjectScopedRecordAction, updateIncomeAction, updateOperatingExpenseAction } from "@/app/actions";
import { currency, dateInput, shortDate } from "@/lib/format";
import { buildProjectMetrics } from "@/lib/metrics";
import { getSelectedProject } from "@/lib/projects";

export default async function ProfitLossPage({
  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, "profitLoss.view");
  const canEdit = Boolean(permissions?.["operatingExpenses.create"] || permissions?.["operatingExpenses.edit"] || permissions?.["operatingExpenses.archive"] || permissions?.["operatingExpenses.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 profit/loss." href="/projects" actionLabel="Create project" />
      </AppShell>
    );
  }

  const metrics = buildProjectMetrics(project);
  const incomeCategories = project.categories.filter((category) => ["RENTAL_INCOME", "OTHER_INCOME"].includes(category.type));
  const operatingCategories = project.categories.filter((category) => category.type === "OPERATING_EXPENSE");

  return (
    <AppShell projects={projects} selectedProjectId={project.id} username={user.name ?? user.username ?? user.email} role={projectRole ?? user.role} permissions={permissions}>
      <PageHeader title="Monthly Profit/Loss" description="Track income, operating expenses, net result, and partner shares." />
      <StatusMessage updated={params.updated} deleted={params.deleted} error={params.error} />

      <section className="grid gap-4 md:grid-cols-3">
        <StatCard label="Total income" value={metrics.profitLoss.totalIncome} tone="positive" />
        <StatCard label="Total expenses" value={metrics.profitLoss.totalExpenses} tone="negative" />
        <StatCard label="Net profit/loss" value={metrics.profitLoss.netProfitLoss} tone={metrics.profitLoss.netProfitLoss >= 0 ? "positive" : "negative"} />
      </section>

      {canEdit ? (
        <section className="mt-6 grid gap-6 xl:grid-cols-2">
          <form action={createIncomeAction} className="panel grid gap-4 p-4">
            <h3 className="font-semibold text-ink">Add Income</h3>
            <input type="hidden" name="projectId" value={project.id} />
            <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">Category</span>
                <select className="field" name="categoryId">
                  <option value="">Uncategorized</option>
                  {incomeCategories.map((category) => (
                    <option key={category.id} value={category.id}>{category.name}</option>
                  ))}
                </select>
              </label>
            </div>
            <input className="field" name="description" placeholder="Description" />
            <input className="field" name="amount" type="number" step="0.01" min="0" placeholder="Amount" required />
            <input className="field" name="notes" placeholder="Notes" />
            <button className="btn-primary">Save income</button>
          </form>

          <form action={createOperatingExpenseAction} className="panel grid gap-4 p-4">
            <h3 className="font-semibold text-ink">Add Operating Expense</h3>
            <input type="hidden" name="projectId" value={project.id} />
            <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">Category</span>
                <select className="field" name="categoryId">
                  <option value="">Uncategorized</option>
                  {operatingCategories.map((category) => (
                    <option key={category.id} value={category.id}>{category.name}</option>
                  ))}
                </select>
              </label>
            </div>
            <input className="field" name="vendor" placeholder="Vendor" />
            <input className="field" name="description" placeholder="Description" />
            <input className="field" name="amount" type="number" step="0.01" min="0" placeholder="Amount" required />
            <button className="btn-primary">Save expense</button>
          </form>
        </section>
      ) : null}

      <section className="mt-6 grid gap-6 xl:grid-cols-3">
        <div className="panel overflow-hidden xl:col-span-2">
          <div className="border-b border-line px-4 py-3">
            <h3 className="font-semibold text-ink">Income and Expenses</h3>
          </div>
          <div className="overflow-x-auto">
            <table className="w-full min-w-[760px]">
              <thead className="table-head">
                <tr>
                  <th className="px-3 py-2">Date</th>
                  <th className="px-3 py-2">Type</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>
                  {canEdit ? <th className="px-3 py-2">Actions</th> : null}
                </tr>
              </thead>
              <tbody>
                {project.incomes.map((income) => (
                  <tr key={income.id}>
                    <td className="table-cell">{shortDate(income.date)}</td>
                    <td className="table-cell text-emerald-700">Income</td>
                    <td className="table-cell">{income.category?.name ?? "-"}</td>
                    <td className="table-cell">{income.description ?? "-"}</td>
                    <td className="table-cell">{currency(Number(income.amount))}</td>
                    {canEdit ? (
                      <td className="table-cell align-top">
                        <div className="flex flex-wrap gap-2">
                          <details className="action-modal">
                            <summary>Edit</summary>
                            <form action={updateIncomeAction} className="mt-3 grid min-w-80 gap-3">
                              <input type="hidden" name="projectId" value={project.id} />
                              <input type="hidden" name="incomeId" value={income.id} />
                              <input className="field" name="date" type="date" defaultValue={dateInput(income.date)} required />
                              <select className="field" name="categoryId" defaultValue={income.categoryId ?? ""}>
                                <option value="">Uncategorized</option>
                                {incomeCategories.map((category) => (
                                  <option key={category.id} value={category.id}>{category.name}</option>
                                ))}
                              </select>
                              <input className="field" name="description" defaultValue={income.description ?? ""} placeholder="Description" />
                              <input className="field" name="amount" type="number" step="0.01" min="0" defaultValue={Number(income.amount)} required />
                              <textarea className="field min-h-20" name="notes" defaultValue={income.notes ?? ""} />
                              <button className="btn-primary">Update income</button>
                            </form>
                          </details>
                          <form action={deleteProjectScopedRecordAction}>
                            <input type="hidden" name="projectId" value={project.id} />
                            <input type="hidden" name="model" value="income" />
                            <input type="hidden" name="id" value={income.id} />
                            <input type="hidden" name="returnTo" value="/profit-loss" />
                            <DeleteButton label="Delete income" message="Delete this income record?" />
                          </form>
                        </div>
                      </td>
                    ) : null}
                  </tr>
                ))}
                {project.operatingExpenses.map((expense) => (
                  <tr key={expense.id}>
                    <td className="table-cell">{shortDate(expense.date)}</td>
                    <td className="table-cell text-red-700">Expense</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.amount))}</td>
                    {canEdit ? (
                      <td className="table-cell align-top">
                        <div className="flex flex-wrap gap-2">
                          <details className="action-modal">
                            <summary>Edit</summary>
                            <form action={updateOperatingExpenseAction} className="mt-3 grid min-w-80 gap-3">
                              <input type="hidden" name="projectId" value={project.id} />
                              <input type="hidden" name="operatingExpenseId" value={expense.id} />
                              <input className="field" name="date" type="date" defaultValue={dateInput(expense.date)} required />
                              <select className="field" name="categoryId" defaultValue={expense.categoryId ?? ""}>
                                <option value="">Uncategorized</option>
                                {operatingCategories.map((category) => (
                                  <option key={category.id} value={category.id}>{category.name}</option>
                                ))}
                              </select>
                              <input className="field" name="vendor" defaultValue={expense.vendor ?? ""} placeholder="Vendor" />
                              <input className="field" name="description" defaultValue={expense.description ?? ""} placeholder="Description" />
                              <input className="field" name="amount" type="number" step="0.01" min="0" defaultValue={Number(expense.amount)} required />
                              <textarea className="field min-h-20" name="notes" defaultValue={expense.notes ?? ""} />
                              <button className="btn-primary">Update expense</button>
                            </form>
                          </details>
                          <form action={deleteProjectScopedRecordAction}>
                            <input type="hidden" name="projectId" value={project.id} />
                            <input type="hidden" name="model" value="operatingExpense" />
                            <input type="hidden" name="id" value={expense.id} />
                            <input type="hidden" name="returnTo" value="/profit-loss" />
                            <DeleteButton label="Delete operating expense" message="Delete this operating expense?" />
                          </form>
                        </div>
                      </td>
                    ) : null}
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>

        <div className="panel p-4">
          <h3 className="font-semibold text-ink">Partner Share</h3>
          <div className="mt-4 grid gap-3">
            {metrics.profitLoss.partnerShares.map((share) => (
              <div key={share.partnerId} className="flex items-center justify-between rounded-md border border-line bg-slate-50 p-3 text-sm">
                <span className="font-medium text-ink">{share.name}</span>
                <span className={share.amount >= 0 ? "text-emerald-700" : "text-red-700"}>{currency(share.amount)}</span>
              </div>
            ))}
          </div>
        </div>
      </section>
    </AppShell>
  );
}