import { AppShell } from "@/components/AppShell";
import { DeleteButton } from "@/components/DeleteButton";
import { EmptyState } from "@/components/EmptyState";
import { PageHeader } from "@/components/PageHeader";
import { StatusMessage } from "@/components/StatusMessage";
import { createTenantAction, deleteProjectScopedRecordAction, updateTenantAction } from "@/app/actions";
import { currency, dateInput, shortDate } from "@/lib/format";
import { getSelectedProject } from "@/lib/projects";

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

  return (
    <AppShell projects={projects} selectedProjectId={project.id} username={user.name ?? user.username ?? user.email} role={projectRole ?? user.role} permissions={permissions}>
      <PageHeader title="Tenants" description="Assign tenants to units and track rent terms." />
      <StatusMessage updated={params.updated} deleted={params.deleted} error={params.error} />
      <section className="grid gap-6 xl:grid-cols-[0.85fr_1.15fr]">
        {canEdit ? (
          <form action={createTenantAction} className="panel grid gap-4 p-4">
            <h3 className="font-semibold text-ink">New Tenant</h3>
            <input type="hidden" name="projectId" value={project.id} />
            <label className="grid gap-2">
              <span className="label">Tenant name</span>
              <input className="field" name="name" required />
            </label>
            <div className="grid gap-4 md:grid-cols-2">
              <label className="grid gap-2">
                <span className="label">Phone</span>
                <input className="field" name="phone" />
              </label>
              <label className="grid gap-2">
                <span className="label">Email</span>
                <input className="field" name="email" type="email" />
              </label>
            </div>
            <label className="grid gap-2">
              <span className="label">Unit / room</span>
              <select className="field" name="unitId">
                <option value="">Unassigned</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">Move-in</span>
                <input className="field" name="moveInDate" type="date" />
              </label>
              <label className="grid gap-2">
                <span className="label">Move-out</span>
                <input className="field" name="moveOutDate" type="date" />
              </label>
            </div>
            <div className="grid gap-4 md:grid-cols-3">
              <label className="grid gap-2">
                <span className="label">Monthly rent</span>
                <input className="field" name="monthlyRent" type="number" step="0.01" min="0" />
              </label>
              <label className="grid gap-2">
                <span className="label">Security deposit</span>
                <input className="field" name="securityDeposit" type="number" step="0.01" min="0" />
              </label>
              <label className="grid gap-2">
                <span className="label">Due day</span>
                <input className="field" name="rentDueDay" type="number" min="1" max="31" defaultValue="1" />
              </label>
            </div>
            <label className="grid gap-2">
              <span className="label">Status</span>
              <select className="field" name="status" defaultValue="ACTIVE">
                <option value="ACTIVE">Active</option>
                <option value="NOTICE">Notice</option>
                <option value="INACTIVE">Inactive</option>
              </select>
            </label>
            <button className="btn-primary">Save tenant</button>
          </form>
        ) : null}

        <div className="panel overflow-hidden">
          <div className="border-b border-line px-4 py-3">
            <h3 className="font-semibold text-ink">Tenant List</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">Tenant</th>
                  <th className="px-3 py-2">Unit</th>
                  <th className="px-3 py-2">Move-in</th>
                  <th className="px-3 py-2">Rent</th>
                  <th className="px-3 py-2">Deposit</th>
                  <th className="px-3 py-2">Status</th>
                  {canEdit ? <th className="px-3 py-2">Actions</th> : null}
                </tr>
              </thead>
              <tbody>
                {project.tenants.map((tenant) => (
                  <tr key={tenant.id}>
                    <td className="table-cell font-medium text-ink">{tenant.name}</td>
                    <td className="table-cell">{tenant.unit?.name ?? "-"}</td>
                    <td className="table-cell">{shortDate(tenant.moveInDate)}</td>
                    <td className="table-cell">{currency(Number(tenant.monthlyRent))}</td>
                    <td className="table-cell">{currency(Number(tenant.securityDeposit))}</td>
                    <td className="table-cell">{tenant.status.toLowerCase()}</td>
                    {canEdit ? (
                      <td className="table-cell align-top">
                        <div className="flex flex-wrap gap-2">
                          <details className="action-modal">
                            <summary>Edit</summary>
                            <form action={updateTenantAction} className="mt-3 grid min-w-80 gap-3">
                              <input type="hidden" name="projectId" value={project.id} />
                              <input type="hidden" name="tenantId" value={tenant.id} />
                              <input className="field" name="name" defaultValue={tenant.name} required />
                              <input className="field" name="phone" defaultValue={tenant.phone ?? ""} placeholder="Phone" />
                              <input className="field" name="email" type="email" defaultValue={tenant.email ?? ""} placeholder="Email" />
                              <select className="field" name="unitId" defaultValue={tenant.unitId ?? ""}>
                                <option value="">Unassigned</option>
                                {project.units.map((unit) => (
                                  <option key={unit.id} value={unit.id}>{unit.name}</option>
                                ))}
                              </select>
                              <input className="field" name="moveInDate" type="date" defaultValue={dateInput(tenant.moveInDate)} />
                              <input className="field" name="moveOutDate" type="date" defaultValue={dateInput(tenant.moveOutDate)} />
                              <input className="field" name="monthlyRent" type="number" step="0.01" min="0" defaultValue={Number(tenant.monthlyRent)} />
                              <input className="field" name="securityDeposit" type="number" step="0.01" min="0" defaultValue={Number(tenant.securityDeposit)} />
                              <input className="field" name="rentDueDay" type="number" min="1" max="31" defaultValue={tenant.rentDueDay} />
                              <select className="field" name="status" defaultValue={tenant.status}>
                                <option value="ACTIVE">Active</option>
                                <option value="NOTICE">Notice</option>
                                <option value="INACTIVE">Inactive</option>
                              </select>
                              <textarea className="field min-h-20" name="notes" defaultValue={tenant.notes ?? ""} />
                              <button className="btn-primary">Update tenant</button>
                            </form>
                          </details>
                          <form action={deleteProjectScopedRecordAction}>
                            <input type="hidden" name="projectId" value={project.id} />
                            <input type="hidden" name="model" value="tenant" />
                            <input type="hidden" name="id" value={tenant.id} />
                            <input type="hidden" name="returnTo" value="/tenants" />
                            <DeleteButton label="Delete tenant" message={`Delete tenant ${tenant.name}?`} />
                          </form>
                        </div>
                      </td>
                    ) : null}
                  </tr>
                ))}
              </tbody>
            </table>
            {project.tenants.length === 0 ? <div className="p-6 text-sm text-slate-600">No tenants yet.</div> : null}
          </div>
        </div>
      </section>
    </AppShell>
  );
}