import { createSecurityDepositAction, deleteProjectScopedRecordAction, updateSecurityDepositAction } from "@/app/actions";
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 { currency, dateInput, shortDate } from "@/lib/format";
import { buildProjectMetrics } from "@/lib/metrics";
import { getSelectedProject } from "@/lib/projects";

function balanceHeld(deposit: {
  amountReceived: unknown;
  amountReturned: unknown;
  amountWithheld: unknown;
}) {
  return Math.max(0, Number(deposit.amountReceived) - Number(deposit.amountReturned) - Number(deposit.amountWithheld));
}

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

  const metrics = buildProjectMetrics(project);

  return (
    <AppShell projects={projects} selectedProjectId={project.id} username={user.name ?? user.username ?? user.email} role={projectRole ?? user.role} permissions={permissions}>
      <PageHeader title="Security Deposits" description="Track deposits as held liability. Only withheld amounts count as income or recovery." />
      <StatusMessage updated={params.updated} deleted={params.deleted} error={params.error} />

      <section className="grid gap-4 md:grid-cols-3">
        <StatCard label="Deposits held" value={metrics.totalDepositsHeld} />
        <StatCard label="Deposits returned" value={metrics.totalDepositsReturned} />
        <StatCard label="Deposits withheld" value={metrics.totalDepositsWithheld} tone="positive" />
      </section>

      <section className="mt-6 grid gap-6 xl:grid-cols-[0.75fr_1.25fr]">
        {canEdit ? (
          <form action={createSecurityDepositAction} className="panel grid gap-4 p-4">
            <h3 className="font-semibold text-ink">Add Security Deposit</h3>
            <input type="hidden" name="projectId" value={project.id} />
            <label className="grid gap-2">
              <span className="label">Tenant</span>
              <select className="field" name="tenantId" required>
                {project.tenants.map((tenant) => (
                  <option key={tenant.id} value={tenant.id}>{tenant.name}</option>
                ))}
              </select>
            </label>
            <label className="grid gap-2">
              <span className="label">Unit / room</span>
              <select className="field" name="unitId">
                <option value="">Use tenant unit</option>
                {project.units.map((unit) => (
                  <option key={unit.id} value={unit.id}>{unit.name}</option>
                ))}
              </select>
            </label>
            <div className="grid gap-4 md:grid-cols-2">
              <label className="grid gap-2">
                <span className="label">Date received</span>
                <input className="field" name="dateReceived" type="date" defaultValue={new Date().toISOString().slice(0, 10)} />
              </label>
              <label className="grid gap-2">
                <span className="label">Amount received</span>
                <input className="field" name="amountReceived" type="number" step="0.01" min="0" required />
              </label>
            </div>
            <div className="grid gap-4 md:grid-cols-2">
              <label className="grid gap-2">
                <span className="label">Date returned</span>
                <input className="field" name="dateReturned" type="date" />
              </label>
              <label className="grid gap-2">
                <span className="label">Amount returned</span>
                <input className="field" name="amountReturned" type="number" step="0.01" min="0" defaultValue="0" />
              </label>
            </div>
            <label className="grid gap-2">
              <span className="label">Amount withheld</span>
              <input className="field" name="amountWithheld" type="number" step="0.01" min="0" defaultValue="0" />
            </label>
            <input className="field" name="reasonWithheld" placeholder="Reason withheld" />
            <textarea className="field min-h-20" name="notes" placeholder="Notes" />
            <button className="btn-primary" disabled={project.tenants.length === 0}>Save deposit</button>
          </form>
        ) : null}

        <div className="panel overflow-hidden">
          <div className="border-b border-line px-4 py-3">
            <h3 className="font-semibold text-ink">Deposit Records</h3>
          </div>
          <div className="overflow-x-auto">
            <table className="w-full min-w-[1000px]">
              <thead className="table-head">
                <tr>
                  <th className="px-3 py-2">Tenant</th>
                  <th className="px-3 py-2">Unit</th>
                  <th className="px-3 py-2">Received</th>
                  <th className="px-3 py-2">Returned</th>
                  <th className="px-3 py-2">Withheld</th>
                  <th className="px-3 py-2">Balance held</th>
                  <th className="px-3 py-2">Reason</th>
                  {canEdit ? <th className="px-3 py-2">Actions</th> : null}
                </tr>
              </thead>
              <tbody>
                {project.securityDeposits.map((deposit) => (
                  <tr key={deposit.id}>
                    <td className="table-cell font-medium text-ink">{deposit.tenant.name}</td>
                    <td className="table-cell">{deposit.unit?.name ?? "-"}</td>
                    <td className="table-cell">
                      <div className="grid gap-1">
                        <span>{currency(Number(deposit.amountReceived))}</span>
                        <span className="text-xs text-slate-500">{shortDate(deposit.dateReceived)}</span>
                      </div>
                    </td>
                    <td className="table-cell">
                      <div className="grid gap-1">
                        <span>{currency(Number(deposit.amountReturned))}</span>
                        <span className="text-xs text-slate-500">{shortDate(deposit.dateReturned)}</span>
                      </div>
                    </td>
                    <td className="table-cell">{currency(Number(deposit.amountWithheld))}</td>
                    <td className="table-cell font-semibold text-ink">{currency(balanceHeld(deposit))}</td>
                    <td className="table-cell">{deposit.reasonWithheld ?? "-"}</td>
                    {canEdit ? (
                      <td className="table-cell align-top">
                        <div className="flex flex-wrap gap-2">
                          <details className="action-modal">
                            <summary>Edit</summary>
                            <form action={updateSecurityDepositAction} className="mt-3 grid min-w-80 gap-3">
                              <input type="hidden" name="projectId" value={project.id} />
                              <input type="hidden" name="securityDepositId" value={deposit.id} />
                              <select className="field" name="tenantId" defaultValue={deposit.tenantId} required>
                                {project.tenants.map((tenant) => (
                                  <option key={tenant.id} value={tenant.id}>{tenant.name}</option>
                                ))}
                              </select>
                              <select className="field" name="unitId" defaultValue={deposit.unitId ?? ""}>
                                <option value="">Use tenant unit</option>
                                {project.units.map((unit) => (
                                  <option key={unit.id} value={unit.id}>{unit.name}</option>
                                ))}
                              </select>
                              <input className="field" name="dateReceived" type="date" defaultValue={dateInput(deposit.dateReceived)} />
                              <input className="field" name="amountReceived" type="number" step="0.01" min="0" defaultValue={Number(deposit.amountReceived)} required />
                              <input className="field" name="dateReturned" type="date" defaultValue={dateInput(deposit.dateReturned)} />
                              <input className="field" name="amountReturned" type="number" step="0.01" min="0" defaultValue={Number(deposit.amountReturned)} />
                              <input className="field" name="amountWithheld" type="number" step="0.01" min="0" defaultValue={Number(deposit.amountWithheld)} />
                              <input className="field" name="reasonWithheld" defaultValue={deposit.reasonWithheld ?? ""} placeholder="Reason withheld" />
                              <textarea className="field min-h-20" name="notes" defaultValue={deposit.notes ?? ""} />
                              <button className="btn-primary">Update deposit</button>
                            </form>
                          </details>
                          <form action={deleteProjectScopedRecordAction}>
                            <input type="hidden" name="projectId" value={project.id} />
                            <input type="hidden" name="model" value="securityDeposit" />
                            <input type="hidden" name="id" value={deposit.id} />
                            <input type="hidden" name="returnTo" value="/security-deposits" />
                            <DeleteButton label="Delete deposit" message="Delete this security deposit record?" />
                          </form>
                        </div>
                      </td>
                    ) : null}
                  </tr>
                ))}
              </tbody>
            </table>
            {project.securityDeposits.length === 0 ? <div className="p-6 text-sm text-slate-600">No security deposits yet.</div> : null}
          </div>
        </div>
      </section>
    </AppShell>
  );
}