import Link from "next/link";
import { notFound } from "next/navigation";
import { prisma } from "@/lib/prisma";
import { requireCrmAdmin } from "@/lib/crm/admin-access";
import CustomerAdminShell from "../../CustomerAdminShell";
import { updateProject } from "../actions";
import { createRequirement } from "../../requirements/actions";
import { createProjectTask, updateProjectTask } from "../../tasks/actions";

export const dynamic = "force-dynamic";

const statuses = [
  "DRAFT",
  "PLANNING",
  "ACTIVE",
  "ON_HOLD",
  "CLIENT_REVIEW",
  "COMPLETED",
  "CANCELLED",
  "ARCHIVED",
];

export default async function ProjectDetailsPage({
  params,
}: {
  params: Promise<{ projectCode: string }>;
}) {
  await requireCrmAdmin();

  const { projectCode } = await params;

  const project = await prisma.project.findUnique({
    where: { projectCode },
    select: {
      id: true,
      projectCode: true,
      name: true,
      description: true,
      status: true,
      progress: true,
      client: { select: { name: true, clientCode: true } },
      requirements: {
        orderBy: { createdAt: "desc" },
        take: 50,
        select: {
          requirementCode: true,
          title: true,
          description: true,
          status: true,
          approvedAt: true,
          createdAt: true,
        },
      },

      milestones: {
        orderBy: [
          { sequence: "asc" },
          { createdAt: "asc" },
        ],
        take: 100,
        select: {
          milestoneCode: true,
          title: true,
          status: true,
          sequence: true,
          startDate: true,
          dueDate: true,
          completedAt: true,
          _count: {
            select: {
              tasks: true,
            },
          },
        },
      },

      tasks: {
        orderBy: { createdAt: "desc" },
        take: 100,
        select: {
          taskCode: true,
          title: true,
          description: true,
          status: true,
          priority: true,
          dueDate: true,
          completedAt: true,
          milestone: {
            select: {
              milestoneCode: true,
              title: true,
            },
          },
          assignee: {
            select: {
              name: true,
              userCode: true,
            },
          },
        },
      },
    },
  });

  if (!project) {
    notFound();
  }

  // PROJECT_DELIVERY_DASHBOARD_STEP170
  // Display-only delivery metrics. This does NOT write project.progress.
  const now = new Date();

  const requirementTotal = project.requirements.length;
  const requirementImplemented =
    project.requirements.filter(
      (item) => item.status === "IMPLEMENTED",
    ).length;
  const requirementApproved =
    project.requirements.filter(
      (item) =>
        item.status === "APPROVED" ||
        item.status === "IMPLEMENTED",
    ).length;

  const milestoneTotal = project.milestones.length;
  const milestoneCompleted =
    project.milestones.filter(
      (item) => item.status === "COMPLETED",
    ).length;
  const milestoneActive =
    project.milestones.filter(
      (item) =>
        item.status === "IN_PROGRESS" ||
        item.status === "CLIENT_REVIEW",
    ).length;
  const milestoneOverdue =
    project.milestones.filter(
      (item) =>
        item.dueDate &&
        item.dueDate.getTime() < now.getTime() &&
        item.status !== "COMPLETED",
    ).length;

  const taskTotal = project.tasks.length;
  const taskCompleted =
    project.tasks.filter(
      (item) => item.status === "COMPLETED",
    ).length;
  const taskCancelled =
    project.tasks.filter(
      (item) => item.status === "CANCELLED",
    ).length;
  const taskBlocked =
    project.tasks.filter(
      (item) => item.status === "BLOCKED",
    ).length;
  const taskOverdue =
    project.tasks.filter(
      (item) =>
        item.dueDate &&
        item.dueDate.getTime() < now.getTime() &&
        item.status !== "COMPLETED" &&
        item.status !== "CANCELLED",
    ).length;

  const actionableTaskTotal =
    Math.max(0, taskTotal - taskCancelled);

  const taskProgress =
    actionableTaskTotal > 0
      ? Math.round(
          (taskCompleted / actionableTaskTotal) * 100,
        )
      : null;

  const milestoneProgress =
    milestoneTotal > 0
      ? Math.round(
          (milestoneCompleted / milestoneTotal) * 100,
        )
      : null;

  const requirementProgress =
    requirementTotal > 0
      ? Math.round(
          (requirementImplemented / requirementTotal) * 100,
        )
      : null;

  const progressSignals = [
    taskProgress,
    milestoneProgress,
    requirementProgress,
  ].filter(
    (value): value is number => value !== null,
  );

  const calculatedProgress =
    progressSignals.length > 0
      ? Math.round(
          progressSignals.reduce(
            (sum, value) => sum + value,
            0,
          ) / progressSignals.length,
        )
      : 0;

  const deliveryHealth =
    taskBlocked > 0 ||
    taskOverdue > 0 ||
    milestoneOverdue > 0
      ? "ATTENTION"
      : calculatedProgress === 100 &&
          progressSignals.length > 0
        ? "COMPLETE"
        : taskTotal === 0 &&
            milestoneTotal === 0 &&
            requirementTotal === 0
          ? "NOT STARTED"
          : "ON TRACK";

  const formatDeliveryDate = (
    value: Date | null,
  ) =>
    value
      ? new Intl.DateTimeFormat("en-IN", {
          timeZone: "Asia/Kolkata",
          dateStyle: "medium",
        }).format(value)
      : "—";

  return (
    <CustomerAdminShell>
      <main className="mx-auto max-w-5xl space-y-7 px-5 py-8">
        <Link href="/admin/projects" className="text-blue-600">
          ← All Projects
        </Link>

        <h1 className="text-3xl font-bold">{project.name}</h1>
        <p>{project.projectCode}</p>
        <p>
          Customer: {project.client.name} ({project.client.clientCode})
        </p>

        <section className="rounded-2xl border bg-white p-6">
          <h2 className="mb-4 text-xl font-bold">Project Status</h2>

          <form action={updateProject} className="grid gap-4">
            <input
              type="hidden"
              name="projectCode"
              value={project.projectCode}
            />

            <select
              name="status"
              defaultValue={project.status}
              className="rounded-xl border p-3"
            >
              {statuses.map((status) => (
                <option key={status} value={status}>{status}</option>
              ))}
            </select>

            <input
              name="progress"
              type="number"
              min="0"
              max="100"
              required
              defaultValue={project.progress}
              className="rounded-xl border p-3"
            />

            <button
              type="submit"
              className="rounded-xl bg-blue-600 p-3 font-bold text-white"
            >
              Save Project
            </button>
          </form>

          {project.description && (
            <p className="mt-5 whitespace-pre-wrap">
              {project.description}
            </p>
          )}
        </section>

        {/* PROJECT_DELIVERY_DASHBOARD_STEP170_UI */}
        <section className="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm">
          <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
            <div>
              <p className="text-xs font-black uppercase tracking-[0.18em] text-blue-700">
                Delivery Control Center
              </p>

              <h2 className="mt-1 text-2xl font-black text-slate-950">
                Project Delivery Dashboard
              </h2>

              <p className="mt-2 max-w-3xl text-sm text-slate-600">
                Calculated from requirements, milestones and tasks.
                Recorded project progress remains separately editable
                and is not automatically overwritten.
              </p>
            </div>

            <div className="rounded-2xl border bg-slate-50 px-5 py-4">
              <p className="text-xs font-bold uppercase tracking-wide text-slate-500">
                Delivery Health
              </p>

              <p className="mt-1 text-xl font-black text-slate-950">
                {deliveryHealth}
              </p>
            </div>
          </div>

          <div className="mt-6 grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
            <div className="rounded-2xl border bg-slate-50 p-5">
              <p className="text-xs font-bold uppercase tracking-wide text-slate-500">
                Calculated Progress
              </p>

              <p className="mt-2 text-3xl font-black text-slate-950">
                {calculatedProgress}%
              </p>

              <div className="mt-3 h-2 overflow-hidden rounded-full bg-slate-200">
                <div
                  className="h-full rounded-full bg-slate-900"
                  style={{
                    width: `${Math.min(
                      100,
                      Math.max(0, calculatedProgress),
                    )}%`,
                  }}
                />
              </div>
            </div>

            <div className="rounded-2xl border bg-slate-50 p-5">
              <p className="text-xs font-bold uppercase tracking-wide text-slate-500">
                Recorded Progress
              </p>

              <p className="mt-2 text-3xl font-black text-slate-950">
                {project.progress}%
              </p>

              <p className="mt-2 text-xs text-slate-500">
                Manual project record
              </p>
            </div>

            <div className="rounded-2xl border bg-slate-50 p-5">
              <p className="text-xs font-bold uppercase tracking-wide text-slate-500">
                Overdue
              </p>

              <p className="mt-2 text-3xl font-black text-slate-950">
                {taskOverdue + milestoneOverdue}
              </p>

              <p className="mt-2 text-xs text-slate-500">
                {taskOverdue} tasks · {milestoneOverdue} milestones
              </p>
            </div>

            <div className="rounded-2xl border bg-slate-50 p-5">
              <p className="text-xs font-bold uppercase tracking-wide text-slate-500">
                Blocked Tasks
              </p>

              <p className="mt-2 text-3xl font-black text-slate-950">
                {taskBlocked}
              </p>

              <p className="mt-2 text-xs text-slate-500">
                Requires delivery attention
              </p>
            </div>
          </div>

          <div className="mt-6 grid gap-4 lg:grid-cols-3">
            <div className="rounded-2xl border p-5">
              <div className="flex items-center justify-between gap-3">
                <h3 className="font-black text-slate-950">
                  Requirements
                </h3>

                <span className="rounded-full bg-slate-100 px-3 py-1 text-xs font-bold">
                  {requirementProgress ?? 0}%
                </span>
              </div>

              <div className="mt-4 grid grid-cols-3 gap-2 text-center">
                <div className="rounded-xl bg-slate-50 p-3">
                  <p className="text-xl font-black">
                    {requirementTotal}
                  </p>
                  <p className="text-xs text-slate-500">
                    Total
                  </p>
                </div>

                <div className="rounded-xl bg-slate-50 p-3">
                  <p className="text-xl font-black">
                    {requirementApproved}
                  </p>
                  <p className="text-xs text-slate-500">
                    Approved
                  </p>
                </div>

                <div className="rounded-xl bg-slate-50 p-3">
                  <p className="text-xl font-black">
                    {requirementImplemented}
                  </p>
                  <p className="text-xs text-slate-500">
                    Implemented
                  </p>
                </div>
              </div>
            </div>

            <div className="rounded-2xl border p-5">
              <div className="flex items-center justify-between gap-3">
                <h3 className="font-black text-slate-950">
                  Milestones
                </h3>

                <span className="rounded-full bg-slate-100 px-3 py-1 text-xs font-bold">
                  {milestoneProgress ?? 0}%
                </span>
              </div>

              <div className="mt-4 grid grid-cols-3 gap-2 text-center">
                <div className="rounded-xl bg-slate-50 p-3">
                  <p className="text-xl font-black">
                    {milestoneTotal}
                  </p>
                  <p className="text-xs text-slate-500">
                    Total
                  </p>
                </div>

                <div className="rounded-xl bg-slate-50 p-3">
                  <p className="text-xl font-black">
                    {milestoneActive}
                  </p>
                  <p className="text-xs text-slate-500">
                    Active
                  </p>
                </div>

                <div className="rounded-xl bg-slate-50 p-3">
                  <p className="text-xl font-black">
                    {milestoneCompleted}
                  </p>
                  <p className="text-xs text-slate-500">
                    Complete
                  </p>
                </div>
              </div>
            </div>

            <div className="rounded-2xl border p-5">
              <div className="flex items-center justify-between gap-3">
                <h3 className="font-black text-slate-950">
                  Tasks
                </h3>

                <span className="rounded-full bg-slate-100 px-3 py-1 text-xs font-bold">
                  {taskProgress ?? 0}%
                </span>
              </div>

              <div className="mt-4 grid grid-cols-3 gap-2 text-center">
                <div className="rounded-xl bg-slate-50 p-3">
                  <p className="text-xl font-black">
                    {taskTotal}
                  </p>
                  <p className="text-xs text-slate-500">
                    Total
                  </p>
                </div>

                <div className="rounded-xl bg-slate-50 p-3">
                  <p className="text-xl font-black">
                    {taskCompleted}
                  </p>
                  <p className="text-xs text-slate-500">
                    Complete
                  </p>
                </div>

                <div className="rounded-xl bg-slate-50 p-3">
                  <p className="text-xl font-black">
                    {taskOverdue}
                  </p>
                  <p className="text-xs text-slate-500">
                    Overdue
                  </p>
                </div>
              </div>
            </div>
          </div>

          {project.milestones.length > 0 && (
            <div className="mt-6">
              <div className="flex flex-wrap items-center justify-between gap-3">
                <h3 className="text-lg font-black text-slate-950">
                  Delivery Timeline
                </h3>

                <Link
                  href="/admin/milestones"
                  className="text-sm font-bold text-blue-700"
                >
                  Manage Milestones →
                </Link>
              </div>

              <div className="mt-3 space-y-3">
                {project.milestones.map((milestone) => (
                  <div
                    key={milestone.milestoneCode}
                    className="grid gap-3 rounded-2xl border p-4 md:grid-cols-[1fr_auto]"
                  >
                    <div>
                      <div className="flex flex-wrap items-center gap-2">
                        <p className="font-black text-slate-950">
                          {milestone.title}
                        </p>

                        <span className="rounded-lg bg-slate-100 px-2 py-1 text-xs font-bold">
                          {milestone.status.replaceAll("_", " ")}
                        </span>
                      </div>

                      <p className="mt-1 text-xs text-slate-500">
                        {milestone.milestoneCode} · Sequence{" "}
                        {milestone.sequence} · {milestone._count.tasks} tasks
                      </p>
                    </div>

                    <div className="text-sm text-slate-600 md:text-right">
                      <p>
                        Start: {formatDeliveryDate(milestone.startDate)}
                      </p>
                      <p>
                        Due: {formatDeliveryDate(milestone.dueDate)}
                      </p>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          )}
        </section>

        {/* PROJECT_REQUIREMENTS_STEP108 */}
        <section className="rounded-2xl border bg-white p-6">
          <div className="flex flex-wrap items-center justify-between gap-3">
            <div>
              <h2 className="text-xl font-bold">
                Project Requirements
              </h2>
              <p className="mt-1 text-sm text-slate-500">
                Requirements linked to this project.
              </p>
            </div>

            <Link
              href="/admin/requirements"
              className="rounded-xl border px-4 py-2 text-sm font-semibold text-blue-700 hover:bg-slate-50"
            >
              Manage All Requirements
            </Link>
          </div>

          <form
            action={createRequirement}
            className="mt-6 grid gap-4 rounded-xl border bg-slate-50 p-5"
          >
            <h3 className="font-bold">
              Add Requirement
            </h3>

            <input
              type="hidden"
              name="projectId"
              value={project.id}
            />

            <input
              name="title"
              required
              maxLength={191}
              placeholder="Requirement Title"
              className="w-full rounded-xl border bg-white p-3"
            />

            <textarea
              name="description"
              required
              maxLength={10000}
              rows={4}
              placeholder="Requirement Description"
              className="w-full rounded-xl border bg-white p-3"
            />

            <button
              type="submit"
              className="w-fit rounded-xl bg-blue-700 px-5 py-3 text-sm font-bold text-white"
            >
              Add Requirement
            </button>
          </form>

          <div className="mt-6 space-y-3">
            {project.requirements.length === 0 ? (
              <p className="rounded-xl border p-4 text-sm text-slate-500">
                No requirements have been added to this project yet.
              </p>
            ) : (
              project.requirements.map((requirement) => (
                <article
                  key={requirement.requirementCode}
                  className="rounded-xl border p-4"
                >
                  <div className="flex flex-wrap items-start justify-between gap-3">
                    <div className="min-w-0">
                      <h3 className="break-words font-bold">
                        {requirement.title}
                      </h3>
                      <p className="mt-1 break-all text-xs text-slate-500">
                        {requirement.requirementCode}
                      </p>
                    </div>

                    <span className="rounded-lg bg-slate-100 px-3 py-1 text-xs font-semibold">
                      {requirement.status}
                    </span>
                  </div>

                  <p className="mt-3 whitespace-pre-wrap break-words text-sm text-slate-700">
                    {requirement.description}
                  </p>

                  <p className="mt-3 text-xs text-slate-500">
                    Created:{" "}
                    {new Intl.DateTimeFormat("en-IN", {
                      timeZone: "Asia/Kolkata",
                      dateStyle: "medium",
                    }).format(requirement.createdAt)}
                  </p>
                </article>
              ))
            )}
          </div>

          {project.requirements.length === 50 && (
            <p className="mt-4 text-sm text-slate-500">
              Showing the latest 50 requirements.
              Open Requirements Management to view other records.
            </p>
          )}
        </section>


        
        {/* PROJECT_DELIVERY_STEP168 */}
        {/* PROJECT_MILESTONE_LINK_STEP163 */}
        <section className="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm">
          <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
            <div>
              <h2 className="text-xl font-black text-slate-950">
                Project Milestones
              </h2>
              <p className="mt-1 text-sm text-slate-600">
                Plan delivery stages, dates, task-to-milestone assignment and completion workflow for this project.
              </p>
            </div>
            <a
              href="/admin/milestones"
              className="inline-flex rounded-xl bg-slate-950 px-4 py-2.5 text-sm font-extrabold text-white transition hover:bg-slate-800"
            >
              Manage Milestones
            </a>
          </div>
        </section>

        {/* PROJECT_TASKS_STEP132 */}
        <section className="rounded-2xl border bg-white p-6">
          <div className="flex flex-wrap items-center justify-between gap-3">
            <div>
              <h2 className="text-xl font-bold">Project Tasks</h2>
              <p className="mt-1 text-sm text-slate-500">
                Create tasks and track implementation work for this project.
              </p>
            </div>

            <Link
              href="/admin/tasks"
              className="rounded-xl border px-4 py-2 text-sm font-semibold text-blue-700 hover:bg-slate-50"
            >
              Manage All Tasks
            </Link>
          </div>

          <form
            action={createProjectTask}
            className="mt-6 grid gap-4 rounded-xl border bg-slate-50 p-5"
          >
            <input
              type="hidden"
              name="projectCode"
              value={project.projectCode}
            />

            <h3 className="font-bold">Add Task</h3>

            <input
              name="title"
              required
              maxLength={191}
              placeholder="Task Title"
              className="w-full rounded-xl border bg-white p-3"
            />

            <textarea
              name="description"
              maxLength={10000}
              rows={4}
              placeholder="Task Description"
              className="w-full rounded-xl border bg-white p-3"
            />

            <select
              name="priority"
              defaultValue="NORMAL"
              className="rounded-xl border bg-white p-3"
            >
              <option value="LOW">Low Priority</option>
              <option value="NORMAL">Normal Priority</option>
              <option value="HIGH">High Priority</option>
              <option value="URGENT">Urgent Priority</option>
            </select>

            <button
              type="submit"
              className="w-fit rounded-xl bg-blue-700 px-5 py-3 text-sm font-bold text-white"
            >
              Create Task
            </button>
          </form>

          <div className="mt-6 space-y-3">
            {project.tasks.length === 0 ? (
              <p className="rounded-xl border p-4 text-sm text-slate-500">
                No tasks have been created for this project yet.
              </p>
            ) : (
              project.tasks.map((task) => (
                <article
                  key={task.taskCode}
                  className="rounded-xl border p-4"
                >
                  <div className="flex flex-wrap items-start justify-between gap-3">
                    <div className="min-w-0">
                      <h3 className="break-words font-bold">
                        {task.title}
                      </h3>

                      <p className="mt-1 break-all text-xs text-slate-500">
                        {task.taskCode} · {task.priority}
                      </p>
                    </div>

                    <span className="rounded-lg bg-slate-100 px-3 py-1 text-xs font-semibold">
                      {task.status}
                    </span>
                  </div>

                  {task.description && (
                    <p className="mt-3 whitespace-pre-wrap break-words text-sm text-slate-700">
                      {task.description}
                    </p>
                  )}

                  <div className="mt-3 flex flex-wrap gap-x-5 gap-y-1 text-xs text-slate-500">
                    <span>
                      Assignee:{" "}
                      {task.assignee
                        ? `${task.assignee.name} (${task.assignee.userCode})`
                        : "Unassigned"}
                    </span>

                    {task.dueDate && (
                      <span>
                        Due:{" "}
                        {new Intl.DateTimeFormat("en-IN", {
                          timeZone: "Asia/Kolkata",
                          dateStyle: "medium",
                        }).format(task.dueDate)}
                      </span>
                    )}
                  </div>

                  <form
                    action={updateProjectTask}
                    className="mt-4 flex flex-wrap items-center gap-3"
                  >
                    <input
                      type="hidden"
                      name="projectCode"
                      value={project.projectCode}
                    />

                    <input
                      type="hidden"
                      name="taskCode"
                      value={task.taskCode}
                    />

                    <select
                      name="status"
                      defaultValue={task.status}
                      className="rounded-xl border p-2 text-sm"
                    >
                      {/* PROJECT_TASK_UI_LIFECYCLE_STEP172 */}
                      {(
                        {
                          TODO: [
                            "TODO",
                            "IN_PROGRESS",
                            "BLOCKED",
                            "CANCELLED",
                          ],
                          IN_PROGRESS: [
                            "IN_PROGRESS",
                            "CODE_REVIEW",
                            "BLOCKED",
                            "CANCELLED",
                          ],
                          CODE_REVIEW: [
                            "CODE_REVIEW",
                            "IN_PROGRESS",
                            "QA_TESTING",
                            "BLOCKED",
                            "CANCELLED",
                          ],
                          QA_TESTING: [
                            "QA_TESTING",
                            "CODE_REVIEW",
                            "CLIENT_REVIEW",
                            "BLOCKED",
                            "CANCELLED",
                          ],
                          CLIENT_REVIEW: [
                            "CLIENT_REVIEW",
                            "QA_TESTING",
                            "COMPLETED",
                            "BLOCKED",
                            "CANCELLED",
                          ],
                          COMPLETED: ["COMPLETED"],
                          BLOCKED: [
                            "BLOCKED",
                            "TODO",
                            "IN_PROGRESS",
                            "CODE_REVIEW",
                            "QA_TESTING",
                            "CLIENT_REVIEW",
                            "CANCELLED",
                          ],
                          CANCELLED: ["CANCELLED"],
                        } as Record<
                          typeof task.status,
                          readonly typeof task.status[]
                        >
                      )[task.status].map((status) => (
                        <option
                          key={status}
                          value={status}
                        >
                          {status.replaceAll("_", " ")}
                        </option>
                      ))}
                    </select>

                    <button
                      type="submit"
                      className="rounded-xl bg-blue-600 px-4 py-2 text-sm font-bold text-white"
                    >
                      Update Task
                    </button>
                  </form>
                </article>
              ))
            )}
          </div>

          {project.tasks.length === 100 && (
            <p className="mt-4 text-sm text-slate-500">
              Showing the latest 100 tasks.
              Open Task Management to view other records.
            </p>
          )}
        </section>

      </main>
    </CustomerAdminShell>
  );
}