"use client";

import Link from "next/link";

function formatSubmittedAt() {
  const now = new Date();
  const day = now.toLocaleDateString("en-GB", {
    day: "2-digit",
    month: "short",
  });
  const time = now.toLocaleTimeString("en-GB", {
    hour: "2-digit",
    minute: "2-digit",
  });

  return `${day}, ${time}`;
}

export default function SuccessPage() {
  const submittedAt = formatSubmittedAt();

  return (
    <div className="min-h-screen bg-surface flex items-center justify-center p-6">
      <div className="max-w-2xl w-full">
        {/* Badge */}
        <div className="inline-flex items-center gap-2 px-4 py-1.5 bg-primary/10 rounded-full mb-8">
          <span className="w-2 h-2 rounded-full bg-primary" />
          <span className="text-xs font-black uppercase tracking-widest text-primary">
            Submission Complete
          </span>
        </div>

        <div className="flex flex-col md:flex-row gap-12 items-start md:items-center">
          {/* Left: Text */}
          <div className="flex-1">
            <h1 className="font-headline font-black text-5xl md:text-6xl text-on-surface leading-tight tracking-tight mb-6">
              Data Submitted{" "}
              <span className="text-primary italic">Successfully</span>
            </h1>
            <p className="text-on-surface-variant leading-relaxed mb-8 max-w-sm">
              Profil UMKM institusional Anda telah tercatat dan sedang ditinjau
              oleh tim verifikasi kami. Setelah disetujui, Anda akan mendapat akses
              penuh ke protokol{" "}
              <span className="text-tertiary font-semibold">Trading Desk Alpha</span>.
              Lanjutkan ke dashboard untuk memantau status Anda.
            </p>

            <Link
              href="/dashboard"
              className="inline-flex items-center gap-3 editorial-gradient text-on-primary font-headline font-bold px-8 py-4 rounded-xl shadow-lg shadow-primary/20 hover:scale-[1.02] active:scale-95 transition-all text-lg"
            >
              Lanjutkan ke Dashboard
              <span className="material-symbols-outlined">arrow_forward</span>
            </Link>
          </div>

          {/* Right: Visual */}
          <div className="relative shrink-0">
            {/* Red card */}
            <div className="w-48 h-48 bg-primary rounded-2xl flex items-center justify-center shadow-xl shadow-primary/30">
              <div className="w-20 h-20 bg-white rounded-full flex items-center justify-center shadow-md">
                <span
                  className="material-symbols-outlined text-primary text-4xl"
                  style={{ fontVariationSettings: "'FILL' 1" }}
                >
                  check
                </span>
              </div>
            </div>
          </div>
        </div>

        {/* Timeline */}
        <div className="mt-20 flex items-start gap-0">
          {/* Submitted */}
          <div className="flex-1">
            <div className="h-0.5 bg-primary mb-3" />
            <p className="text-[10px] font-black uppercase tracking-widest text-primary">
              Submitted
            </p>
            <p className="text-xs text-on-surface-variant font-medium mt-0.5">
              {submittedAt}
            </p>
          </div>
          {/* Verification */}
          <div className="flex-1">
            <div className="h-0.5 bg-secondary mb-3" />
            <p className="text-[10px] font-black uppercase tracking-widest text-secondary">
              Verification
            </p>
            <p className="text-xs text-on-surface-variant font-medium mt-0.5">
              In Progress
            </p>
          </div>
          {/* Approval */}
          <div className="flex-1">
            <div className="h-0.5 bg-outline-variant mb-3" />
            <p className="text-[10px] font-black uppercase tracking-widest text-outline">
              Approval
            </p>
            <p className="text-xs text-on-surface-variant font-medium mt-0.5">
              Pending Review
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}