import { auth } from "@/lib/auth";
import { redirect } from "next/navigation";
import prisma from "@/lib/prisma";
import Link from "next/link";

// D.5: progress wizard. The previous version silently redirected to the
// next-incomplete step, so users could never see the overall checklist —
// they were always one form away from a hidden goal. Now render the full
// list with a progress bar; auto-advance only on the very first visit
// (when no steps are complete). Light-mode CSS tokens replaced with the
// dark-theme equivalents.
export default async function OnboardingPage() {
  const session = await auth();
  if (!session) redirect("/login");

  const step = await prisma.step.findUnique({
    where: { user_id: Number(session.user.id) },
  });

  const steps = [
    { name: "Personal Info", href: "/onboarding/personal", done: !!step?.step_1 },
    { name: "Characteristics", href: "/onboarding/characteristics", done: !!step?.step_2 },
    { name: "Services", href: "/onboarding/services", done: !!step?.step_3 },
    { name: "Rates", href: "/onboarding/rates", done: !!step?.step_4 },
    { name: "Working Times", href: "/onboarding/working-times", done: !!step?.step_5 },
    { name: "Photos", href: "/onboarding/photos", done: !!step?.step_6 },
  ];

  const completedCount = steps.filter((s) => s.done).length;
  const totalCount = steps.length;
  const percent = Math.round((completedCount / totalCount) * 100);
  const nextIncomplete = steps.find((s) => !s.done);

  // First-visit shortcut only: if literally nothing is done yet, drop the
  // user straight into step 1. Otherwise show the checklist so they can
  // jump to any step they want to revisit.
  if (completedCount === 0 && nextIncomplete) {
    redirect(nextIncomplete.href);
  }

  return (
    <div className="max-w-2xl mx-auto px-4 py-8">
      <h1 className="text-3xl font-bold text-text mb-2">Complete Your Profile</h1>
      <p className="text-text-muted mb-6">
        {completedCount === totalCount
          ? "Everything's done — your profile is fully set up."
          : `${completedCount} of ${totalCount} sections complete (${percent}%)`}
      </p>

      {/* Progress bar */}
      <div className="w-full h-2 rounded-full bg-surface-light mb-6 overflow-hidden">
        <div
          className="h-full bg-primary transition-all duration-500"
          style={{ width: `${percent}%` }}
          aria-hidden="true"
        />
      </div>

      <div className="space-y-3">
        {steps.map((s, i) => (
          <Link
            key={i}
            href={s.href}
            className={`flex items-center gap-3 p-4 rounded-lg border transition-colors ${
              s.done
                ? "bg-green-500/10 border-green-500/30 hover:bg-green-500/15"
                : "bg-surface border-surface-light hover:border-primary hover:bg-surface-light"
            }`}
          >
            <span
              className={`flex items-center justify-center w-8 h-8 rounded-full shrink-0 text-sm font-semibold ${
                s.done
                  ? "bg-green-500 text-black"
                  : "bg-surface-light text-text-muted"
              }`}
              aria-hidden="true"
            >
              {s.done ? "✓" : i + 1}
            </span>
            <span className={`flex-1 font-medium ${s.done ? "text-text-muted line-through" : "text-text"}`}>
              {s.name}
            </span>
            <span className="text-text-muted text-sm">
              {s.done ? "Edit" : "Continue →"}
            </span>
          </Link>
        ))}
      </div>

      {nextIncomplete && completedCount > 0 && (
        <Link
          href={nextIncomplete.href}
          className="mt-8 block bg-primary hover:bg-primary-dark text-white text-center font-semibold py-3 rounded-lg transition-colors"
        >
          Continue: {nextIncomplete.name}
        </Link>
      )}
    </div>
  );
}