import Link from "next/link";
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 { createPartnerAction, createProjectAction, deleteProjectAction, deleteProjectScopedRecordAction, updateProjectAction, updateProjectPartnerAction } from "@/app/actions";
import { currency, dateInput, shortDate } from "@/lib/format";
import { getSelectedProject } from "@/lib/projects";

export default async function ProjectsPage({
  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, "project.view");
  const ownershipTotal =
    project?.partners.reduce((sum, partner) => sum + Number(partner.ownershipPercentage), 0) ?? 0;
  const canCreateProject = Boolean(permissions?.["project.create"] || user.role === "ADMIN" || user.role === "OWNER");
  const canEditProject = Boolean(permissions?.["project.edit"]);
  const canDeleteProject = Boolean(permissions?.["project.delete"] || permissions?.["project.archive"]);
  const canCreatePartner = Boolean(permissions?.["partners.create"]);
  const canEditPartner = Boolean(permissions?.["partners.edit"] || permissions?.["partners.editOwnership"]);
  const canDeletePartner = Boolean(permissions?.["partners.delete"] || permissions?.["partners.archive"]);

  return (
    <AppShell projects={projects} selectedProjectId={project?.id} username={user.name ?? user.username ?? user.email} role={projectRole ?? user.role} permissions={permissions}>
      <PageHeader title="Projects" description="Manage properties, ownership, and partner membership." />
      <StatusMessage updated={params.updated} deleted={params.deleted} error={params.error} />

      <section className="grid gap-6 xl:grid-cols-[0.85fr_1.15fr]">
        {canCreateProject ? (
          <form action={createProjectAction} className="panel grid gap-4 p-4">
            <h3 className="font-semibold text-ink">New Project</h3>
            <label className="grid gap-2">
              <span className="label">Project name</span>
              <input className="field" name="name" required />
            </label>
            <label className="grid gap-2">
              <span className="label">Property address</span>
              <input className="field" name="address" />
            </label>
            <div className="grid gap-4 md:grid-cols-2">
              <label className="grid gap-2">
                <span className="label">Purchase date</span>
                <input className="field" name="purchaseDate" type="date" />
              </label>
              <label className="grid gap-2">
                <span className="label">Purchase price</span>
                <input className="field" name="purchasePrice" type="number" min="0" step="0.01" />
              </label>
            </div>
            <label className="grid gap-2">
              <span className="label">Status</span>
              <select className="field" name="status" defaultValue="RENOVATING">
                <option value="BUYING">Buying</option>
                <option value="RENOVATING">Renovating</option>
                <option value="RENTED">Rented</option>
                <option value="SOLD">Sold</option>
                <option value="ARCHIVED">Archived</option>
              </select>
            </label>
            <label className="grid gap-2">
              <span className="label">Notes</span>
              <textarea className="field min-h-24" name="notes" />
            </label>
            <button className="btn-primary">Create project</button>
          </form>
        ) : null}

        <div className="panel overflow-hidden">
          <div className="border-b border-line px-4 py-3">
            <h3 className="font-semibold text-ink">Project List</h3>
          </div>
          {projects.length === 0 ? (
            <div className="p-4">
              <EmptyState title="No projects yet." />
            </div>
          ) : (
            <div className="overflow-x-auto">
              <table className="w-full">
                <thead className="table-head">
                  <tr>
                    <th className="px-3 py-2">Project</th>
                    <th className="px-3 py-2">Status</th>
                    <th className="px-3 py-2">Purchase</th>
                    <th className="px-3 py-2">Price</th>
                    {canEditProject || canDeleteProject ? <th className="px-3 py-2">Actions</th> : null}
                  </tr>
                </thead>
                <tbody>
                  {projects.map((item) => (
                    <tr key={item.id}>
                      <td className="table-cell font-medium text-ink">{item.name}</td>
                      <td className="table-cell">{item.status.toLowerCase().replace("_", " ")}</td>
                      <td className="table-cell">{shortDate(item.purchaseDate)}</td>
                      <td className="table-cell">{currency(Number(item.purchasePrice))}</td>
                      {canEditProject || canDeleteProject ? (
                        <td className="table-cell align-top">
                          <div className="flex flex-wrap gap-2">
                            <Link className="btn-secondary" href={`/documents?projectId=${item.id}`}>Documents</Link>
                            {canEditProject ? <details className="action-modal">
                              <summary>Edit</summary>
                              <form action={updateProjectAction} className="mt-3 grid min-w-80 gap-3">
                                <input type="hidden" name="projectId" value={item.id} />
                                <input className="field" name="name" defaultValue={item.name} required />
                                <input className="field" name="address" defaultValue={item.address ?? ""} />
                                <input className="field" name="purchaseDate" type="date" defaultValue={dateInput(item.purchaseDate)} />
                                <input className="field" name="purchasePrice" type="number" min="0" step="0.01" defaultValue={Number(item.purchasePrice)} />
                                <select className="field" name="status" defaultValue={item.status}>
                                  <option value="BUYING">Buying</option>
                                  <option value="RENOVATING">Renovating</option>
                                  <option value="RENTED">Rented</option>
                                  <option value="SOLD">Sold</option>
                                  <option value="ARCHIVED">Archived</option>
                                </select>
                                <textarea className="field min-h-20" name="notes" defaultValue={item.notes ?? ""} />
                                <button className="btn-primary">Update project</button>
                              </form>
                            </details> : null}
                            {canDeleteProject ? <form action={deleteProjectAction}>
                              <input type="hidden" name="projectId" value={item.id} />
                              <DeleteButton label="Delete project" message={`Delete ${item.name}? This removes its partners, expenses, tenants, rent payments, and reports.`} />
                            </form> : null}
                          </div>
                        </td>
                      ) : null}
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
        </div>
      </section>

      {project ? (
        <section className="mt-6 grid gap-6 xl:grid-cols-[0.85fr_1.15fr]">
          {canCreatePartner ? (
            <form action={createPartnerAction} className="panel grid gap-4 p-4">
              <h3 className="font-semibold text-ink">Add Partner</h3>
              <input type="hidden" name="projectId" value={project.id} />
              <label className="grid gap-2">
                <span className="label">Partner 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">Ownership %</span>
                <input className="field" name="ownershipPercentage" type="number" step="0.01" min="0" defaultValue="0" />
              </label>
              <label className="flex items-center gap-2 text-sm text-slate-700">
                <input name="active" type="checkbox" defaultChecked className="h-4 w-4 rounded border-line" />
                Active
              </label>
              <label className="grid gap-2">
                <span className="label">Notes</span>
                <textarea className="field min-h-20" name="projectNotes" />
              </label>
              <button className="btn-primary">Save partner</button>
            </form>
          ) : null}

          <div className="panel overflow-hidden">
            <div className="flex flex-col gap-2 border-b border-line px-4 py-3 md:flex-row md:items-center md:justify-between">
              <h3 className="font-semibold text-ink">Partners in {project.name}</h3>
              <p className={`text-sm font-medium ${Math.abs(ownershipTotal - 100) > 0.01 ? "text-amber-700" : "text-emerald-700"}`}>
                Ownership total: {ownershipTotal.toFixed(2)}%
              </p>
            </div>
            <div className="overflow-x-auto">
              <table className="w-full">
                <thead className="table-head">
                  <tr>
                    <th className="px-3 py-2">Partner</th>
                    <th className="px-3 py-2">Ownership</th>
                    <th className="px-3 py-2">Status</th>
                    <th className="px-3 py-2">Contact</th>
                    {canEditPartner || canDeletePartner ? <th className="px-3 py-2">Actions</th> : null}
                  </tr>
                </thead>
                <tbody>
                  {project.partners.map((partner) => (
                    <tr key={partner.id}>
                      <td className="table-cell font-medium text-ink">{partner.partner.name}</td>
                      <td className="table-cell">{Number(partner.ownershipPercentage).toFixed(2)}%</td>
                      <td className="table-cell">{partner.active ? "Active" : "Inactive"}</td>
                      <td className="table-cell">{partner.partner.email ?? partner.partner.phone ?? "-"}</td>
                      {canEditPartner || canDeletePartner ? (
                        <td className="table-cell align-top">
                          <div className="flex flex-wrap gap-2">
                            {canEditPartner ? <details className="action-modal">
                              <summary>Edit</summary>
                              <form action={updateProjectPartnerAction} className="mt-3 grid min-w-80 gap-3">
                                <input type="hidden" name="projectId" value={project.id} />
                                <input type="hidden" name="projectPartnerId" value={partner.id} />
                                <input className="field" name="name" defaultValue={partner.partner.name} required />
                                <input className="field" name="phone" defaultValue={partner.partner.phone ?? ""} placeholder="Phone" />
                                <input className="field" name="email" type="email" defaultValue={partner.partner.email ?? ""} placeholder="Email" />
                                <input className="field" name="ownershipPercentage" type="number" step="0.01" min="0" defaultValue={Number(partner.ownershipPercentage)} />
                                <label className="flex items-center gap-2 text-sm text-slate-700">
                                  <input name="active" type="checkbox" defaultChecked={partner.active} className="h-4 w-4 rounded border-line" />
                                  Active
                                </label>
                                <textarea className="field min-h-20" name="projectNotes" defaultValue={partner.notes ?? ""} />
                                <button className="btn-primary">Update partner</button>
                              </form>
                            </details> : null}
                            {canDeletePartner ? <form action={deleteProjectScopedRecordAction}>
                              <input type="hidden" name="projectId" value={project.id} />
                              <input type="hidden" name="model" value="projectPartner" />
                              <input type="hidden" name="id" value={partner.id} />
                              <input type="hidden" name="returnTo" value="/projects" />
                              <DeleteButton label="Remove partner" message={`Remove ${partner.partner.name} from this project?`} />
                            </form> : null}
                          </div>
                        </td>
                      ) : null}
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        </section>
      ) : null}
    </AppShell>
  );
}