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 { createUnitAction, deleteProjectScopedRecordAction, updateUnitAction } from "@/app/actions";
import { currency } from "@/lib/format";
import { getSelectedProject } from "@/lib/projects";

export default async function UnitsPage({
  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, "units.view");
  const canEdit = Boolean(permissions?.["units.create"] || permissions?.["units.edit"] || permissions?.["units.archive"] || permissions?.["units.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 units." 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="Units / Rooms" description="Track rentable rooms, apartments, floors, parking, and status." />
      <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={createUnitAction} className="panel grid gap-4 p-4">
            <h3 className="font-semibold text-ink">New Unit</h3>
            <input type="hidden" name="projectId" value={project.id} />
            <label className="grid gap-2">
              <span className="label">Unit / room 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">Floor</span>
                <input className="field" name="floor" />
              </label>
              <label className="grid gap-2">
                <span className="label">Monthly rent</span>
                <input className="field" name="monthlyRent" type="number" step="0.01" min="0" />
              </label>
            </div>
            <label className="grid gap-2">
              <span className="label">Status</span>
              <select className="field" name="status" defaultValue="VACANT">
                <option value="VACANT">Vacant</option>
                <option value="OCCUPIED">Occupied</option>
                <option value="UNDER_RENOVATION">Under renovation</option>
              </select>
            </label>
            <label className="grid gap-2">
              <span className="label">Description</span>
              <textarea className="field min-h-20" name="description" />
            </label>
            <button className="btn-primary">Save unit</button>
          </form>
        ) : null}

        <div className="panel overflow-hidden">
          <div className="border-b border-line px-4 py-3">
            <h3 className="font-semibold text-ink">Units</h3>
          </div>
          <div className="overflow-x-auto">
            <table className="w-full">
              <thead className="table-head">
                <tr>
                  <th className="px-3 py-2">Name</th>
                  <th className="px-3 py-2">Floor</th>
                  <th className="px-3 py-2">Rent</th>
                  <th className="px-3 py-2">Status</th>
                  {canEdit ? <th className="px-3 py-2">Actions</th> : null}
                </tr>
              </thead>
              <tbody>
                {project.units.map((unit) => (
                  <tr key={unit.id}>
                    <td className="table-cell font-medium text-ink">{unit.name}</td>
                    <td className="table-cell">{unit.floor ?? "-"}</td>
                    <td className="table-cell">{currency(Number(unit.monthlyRent))}</td>
                    <td className="table-cell">{unit.status.toLowerCase().replace("_", " ")}</td>
                    {canEdit ? (
                      <td className="table-cell align-top">
                        <div className="flex flex-wrap gap-2">
                          <details className="action-modal">
                            <summary>Edit</summary>
                            <form action={updateUnitAction} className="mt-3 grid min-w-80 gap-3">
                              <input type="hidden" name="projectId" value={project.id} />
                              <input type="hidden" name="unitId" value={unit.id} />
                              <input className="field" name="name" defaultValue={unit.name} required />
                              <input className="field" name="floor" defaultValue={unit.floor ?? ""} placeholder="Floor" />
                              <input className="field" name="monthlyRent" type="number" step="0.01" min="0" defaultValue={Number(unit.monthlyRent)} />
                              <select className="field" name="status" defaultValue={unit.status}>
                                <option value="VACANT">Vacant</option>
                                <option value="OCCUPIED">Occupied</option>
                                <option value="UNDER_RENOVATION">Under renovation</option>
                              </select>
                              <textarea className="field min-h-20" name="description" defaultValue={unit.description ?? ""} />
                              <textarea className="field min-h-20" name="notes" defaultValue={unit.notes ?? ""} />
                              <button className="btn-primary">Update unit</button>
                            </form>
                          </details>
                          <form action={deleteProjectScopedRecordAction}>
                            <input type="hidden" name="projectId" value={project.id} />
                            <input type="hidden" name="model" value="unit" />
                            <input type="hidden" name="id" value={unit.id} />
                            <input type="hidden" name="returnTo" value="/units" />
                            <DeleteButton label="Delete unit" message={`Delete unit ${unit.name}?`} />
                          </form>
                        </div>
                      </td>
                    ) : null}
                  </tr>
                ))}
              </tbody>
            </table>
            {project.units.length === 0 ? <div className="p-6 text-sm text-slate-600">No units yet.</div> : null}
          </div>
        </div>
      </section>
    </AppShell>
  );
}