import RookLogo from "@/components/RookLogo";
import UpdateCreativeForm from "@/components/UpdateCreativeForm";
import { prisma } from "@/lib/prisma";
import type { Metadata } from "next";
import Link from "next/link";

export const metadata: Metadata = {
  title: "Preview Dashboard | Rook Creative Preview Platform",
  description: "Manage and track Rook creative previews.",
};

export const dynamic = "force-dynamic";

const statusDetails = {
  pending: {
    label: "Pending",
    badge: "border-amber-300/70 bg-amber-100 text-amber-900",
    dot: "bg-amber-500",
    accent: "bg-amber-400",
    icon: "bg-amber-100 text-amber-700",
    panel: "border-amber-300/60 bg-amber-50/70",
  },
  approved: {
    label: "Approved",
    badge: "border-emerald-300/70 bg-emerald-100 text-emerald-900",
    dot: "bg-emerald-500",
    accent: "bg-emerald-500",
    icon: "bg-emerald-100 text-emerald-700",
    panel: "border-emerald-300/60 bg-emerald-50/70",
  },
  changes_requested: {
    label: "Changes Requested",
    badge: "border-rose-300/70 bg-rose-100 text-rose-900",
    dot: "bg-rose-500",
    accent: "bg-rose-500",
    icon: "bg-rose-100 text-rose-700",
    panel: "border-rose-300/60 bg-rose-50/70",
  },
} as const;

function formatDate(date: Date) {
  return new Intl.DateTimeFormat("en-ZA", {
    day: "2-digit",
    month: "short",
    year: "numeric",
  }).format(date);
}

function formatVendor(vendor: string) {
  return vendor.replaceAll("_", " ").toUpperCase();
}

function ArrowIcon() {
  return (
    <svg
      aria-hidden="true"
      className="h-4 w-4 transition-transform group-hover:translate-x-1"
      fill="none"
      viewBox="0 0 20 20"
    >
      <path
        d="M4 10h12m-4-4 4 4-4 4"
        stroke="currentColor"
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth="1.7"
      />
    </svg>
  );
}

function SearchIcon() {
  return (
    <svg
      aria-hidden="true"
      className="h-4 w-4"
      fill="none"
      viewBox="0 0 20 20"
    >
      <circle
        cx="8.5"
        cy="8.5"
        r="5"
        stroke="currentColor"
        strokeWidth="1.6"
      />
      <path
        d="m12.3 12.3 3.7 3.7"
        stroke="currentColor"
        strokeLinecap="round"
        strokeWidth="1.6"
      />
    </svg>
  );
}

function PreviewIcon() {
  return (
    <svg aria-hidden="true" className="h-6 w-6" fill="none" viewBox="0 0 24 24">
      <rect
        height="15"
        rx="2.5"
        stroke="currentColor"
        strokeWidth="1.6"
        width="19"
        x="2.5"
        y="3.5"
      />
      <path
        d="M8 21h8M12 18.5V21"
        stroke="currentColor"
        strokeLinecap="round"
        strokeWidth="1.6"
      />
      <path
        d="m10 8 5 3-5 3V8Z"
        fill="currentColor"
        stroke="currentColor"
        strokeLinejoin="round"
        strokeWidth="1.2"
      />
    </svg>
  );
}

function ResponseIcon({ status }: { status: keyof typeof statusDetails }) {
  if (status === "approved") {
    return (
      <svg
        aria-hidden="true"
        className="h-5 w-5"
        fill="none"
        viewBox="0 0 20 20"
      >
        <path
          d="m4.5 10.2 3.3 3.3 7.7-7.7"
          stroke="currentColor"
          strokeLinecap="round"
          strokeLinejoin="round"
          strokeWidth="1.8"
        />
      </svg>
    );
  }

  if (status === "changes_requested") {
    return (
      <svg
        aria-hidden="true"
        className="h-5 w-5"
        fill="none"
        viewBox="0 0 20 20"
      >
        <path
          d="M4 5.5h12M4 10h8M4 14.5h5"
          stroke="currentColor"
          strokeLinecap="round"
          strokeWidth="1.7"
        />
        <path
          d="m13.5 13 1.3 1.3 2.7-2.8"
          stroke="currentColor"
          strokeLinecap="round"
          strokeLinejoin="round"
          strokeWidth="1.6"
        />
      </svg>
    );
  }

  return (
    <svg aria-hidden="true" className="h-5 w-5" fill="none" viewBox="0 0 20 20">
      <circle cx="10" cy="10" r="6.5" stroke="currentColor" strokeWidth="1.6" />
      <path
        d="M10 6.5v3.8l2.4 1.4"
        stroke="currentColor"
        strokeLinecap="round"
        strokeWidth="1.6"
      />
    </svg>
  );
}

type AdminPreviewsPageProps = {
  searchParams: Promise<{
    status?: string;
    q?: string;
  }>;
};

export default async function AdminPreviewsPage({
  searchParams,
}: AdminPreviewsPageProps) {
  const { status: requestedStatus, q } = await searchParams;

  const rawSearchQuery = q?.trim() ?? "";
  const searchQuery = rawSearchQuery.toLowerCase();

  const activeStatus =
    requestedStatus === "pending" ||
    requestedStatus === "approved" ||
    requestedStatus === "changes_requested"
      ? requestedStatus
      : "all";

  const previews = await prisma.preview.findMany({
    where: {
      archived: false,
    },
    include: {
      campaign: true,
      approvals: {
        orderBy: {
          createdAt: "desc",
        },
      },
    },
    orderBy: {
      createdAt: "desc",
    },
  });

  const totalCount = previews.length;

  const pendingCount = previews.filter(
    (preview: any) => preview.status === "pending",
  ).length;

  const approvedCount = previews.filter(
    (preview: any) => preview.status === "approved",
  ).length;

  const changesCount = previews.filter(
    (preview: any) => preview.status === "changes_requested",
  ).length;

  const decidedCount = approvedCount + changesCount;

  const decisionRate =
    totalCount === 0 ? 0 : Math.round((decidedCount / totalCount) * 100);

  const filteredPreviews = previews.filter((preview: any) => {
    const matchesStatus =
      activeStatus === "all" || preview.status === activeStatus;

    const matchesSearch =
      !searchQuery ||
      preview.creativeName.toLowerCase().includes(searchQuery) ||
      preview.campaign.name.toLowerCase().includes(searchQuery) ||
      preview.campaign.clientName.toLowerCase().includes(searchQuery);

    return matchesStatus && matchesSearch;
  });

  const activeFilterLabel =
    activeStatus === "pending"
      ? "Awaiting review"
      : activeStatus === "approved"
        ? "Approved"
        : activeStatus === "changes_requested"
          ? "Changes requested"
          : "All previews";

  const encodedSearch = encodeURIComponent(rawSearchQuery);

  const allHref = searchQuery
    ? `/admin/previews?q=${encodedSearch}`
    : "/admin/previews";

  const pendingHref = searchQuery
    ? `/admin/previews?status=pending&q=${encodedSearch}`
    : "/admin/previews?status=pending";

  const approvedHref = searchQuery
    ? `/admin/previews?status=approved&q=${encodedSearch}`
    : "/admin/previews?status=approved";

  const changesHref = searchQuery
    ? `/admin/previews?status=changes_requested&q=${encodedSearch}`
    : "/admin/previews?status=changes_requested";

  return (
    <main className="min-h-screen overflow-x-hidden bg-[#E7EEF1] text-[#071722]">
      <section className="relative overflow-hidden bg-[#071722] pb-32 text-white">
        <div
          aria-hidden="true"
          className="absolute inset-0 opacity-[0.07]"
          style={{
            backgroundImage:
              "linear-gradient(rgba(255,255,255,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.16) 1px, transparent 1px)",
            backgroundSize: "68px 68px",
          }}
        />

        <div
          aria-hidden="true"
          className="absolute -left-40 top-10 h-[460px] w-[460px] rounded-full bg-[#309FC3]/20 blur-[130px]"
        />

        <div
          aria-hidden="true"
          className="absolute -right-40 -top-52 h-[600px] w-[600px] rounded-full bg-[#79D4EF]/10 blur-[150px]"
        />

        <header className="relative z-10 border-b border-white/10">
          <div className="mx-auto flex max-w-[1440px] items-center justify-between gap-4 px-5 py-5 sm:px-8 lg:px-12">
            <RookLogo priority />

            <div className="flex items-center gap-3">
              <span className="hidden rounded-full border border-white/10 bg-white/[0.06] px-4 py-2 text-xs font-semibold tracking-[0.08em] text-slate-300 uppercase backdrop-blur-md sm:block">
                Admin workspace
              </span>

              <Link
                className="hidden rounded-full border border-white/10 bg-white/[0.06] px-4 py-2 text-xs font-semibold text-slate-300 transition hover:bg-white/[0.12] hover:text-white sm:block"
                href="/admin/previews/bin"
              >
                Bin
              </Link>

              <Link
                className="group flex min-h-11 items-center gap-2 rounded-full bg-[#309FC3] px-4 text-sm font-semibold text-white shadow-lg shadow-[#309FC3]/20 transition hover:-translate-y-0.5 hover:bg-[#46B5D7] sm:px-5"
                href="/admin/previews/new"
              >
                <svg
                  aria-hidden="true"
                  className="h-4 w-4"
                  fill="none"
                  viewBox="0 0 20 20"
                >
                  <path
                    d="M10 4v12M4 10h12"
                    stroke="currentColor"
                    strokeLinecap="round"
                    strokeWidth="1.8"
                  />
                </svg>

                <span className="hidden sm:inline">Create Preview</span>
                <span className="sm:hidden">Create</span>
              </Link>
            </div>
          </div>
        </header>

        <div className="relative z-10 mx-auto max-w-[1440px] px-5 pt-12 sm:px-8 sm:pt-16 lg:px-12">
          <div className="grid gap-10 lg:grid-cols-[minmax(0,1fr)_390px] lg:items-end">
            <div>
              <div className="inline-flex items-center gap-2 rounded-full border border-[#79D4EF]/20 bg-[#309FC3]/10 px-4 py-2">
                <span className="h-2 w-2 rounded-full bg-[#79D4EF]" />

                <span className="text-[11px] font-bold tracking-[0.18em] text-[#BDECF8] uppercase">
                  Preview management
                </span>
              </div>

              <h1 className="mt-6 max-w-4xl text-4xl leading-[1.05] font-semibold tracking-[-0.045em] sm:text-5xl lg:text-6xl">
                Every client review,
                <span className="block text-[#79D4EF]">in one place.</span>
              </h1>

              <p className="mt-6 max-w-2xl text-base leading-8 text-slate-300 sm:text-lg">
                Track every creative sent for review, see the latest client
                response, and reopen any live preview without digging through
                separate links.
              </p>
            </div>

            <div className="rounded-[2rem] border border-white/10 bg-white/[0.07] p-6 shadow-2xl shadow-black/20 backdrop-blur-xl sm:p-7">
              <div className="flex items-start justify-between gap-5">
                <div>
                  <p className="text-[11px] font-bold tracking-[0.16em] text-[#79D4EF] uppercase">
                    Decision progress
                  </p>

                  <p className="mt-3 text-3xl font-semibold tracking-[-0.04em] text-white">
                    {decidedCount} of {totalCount}
                  </p>

                  <p className="mt-1 text-sm text-slate-400">
                    previews have a recorded decision
                  </p>
                </div>

                <span className="rounded-full border border-white/10 bg-white/[0.07] px-3 py-1.5 text-xs font-bold text-white">
                  {decisionRate}%
                </span>
              </div>

              <div className="mt-6 h-2 overflow-hidden rounded-full bg-white/10">
                <div
                  className="h-full rounded-full bg-gradient-to-r from-[#309FC3] to-[#79D4EF]"
                  style={{ width: `${decisionRate}%` }}
                />
              </div>

              <div className="mt-5 flex items-center justify-between text-xs text-slate-400">
                <span>{pendingCount} awaiting review</span>
                <span>{decidedCount} completed</span>
              </div>
            </div>
          </div>

          <div className="mt-12 grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
            <Link
              className={`group rounded-2xl border p-5 backdrop-blur-md transition hover:-translate-y-1 ${
                activeStatus === "all"
                  ? "border-[#79D4EF]/50 bg-white/[0.12] ring-2 ring-[#79D4EF]/20"
                  : "border-white/10 bg-white/[0.06] hover:bg-white/[0.10]"
              }`}
              href={allHref}
            >
              <div className="flex items-center justify-between gap-3">
                <p className="text-xs font-semibold tracking-[0.1em] text-slate-400 uppercase">
                  Total previews
                </p>

                <span className="text-[10px] font-bold tracking-[0.08em] text-[#79D4EF] uppercase">
                  View
                </span>
              </div>

              <p className="mt-3 text-3xl font-semibold tracking-[-0.04em]">
                {totalCount}
              </p>
            </Link>

            <Link
              className={`group rounded-2xl border p-5 backdrop-blur-md transition hover:-translate-y-1 ${
                activeStatus === "pending"
                  ? "border-amber-300/50 bg-amber-300/[0.12] ring-2 ring-amber-300/15"
                  : "border-amber-300/15 bg-amber-300/[0.06] hover:bg-amber-300/[0.10]"
              }`}
              href={pendingHref}
            >
              <div className="flex items-center justify-between gap-3">
                <p className="text-xs font-semibold tracking-[0.1em] text-slate-400 uppercase">
                  Awaiting review
                </p>
                <span className="h-2.5 w-2.5 rounded-full bg-amber-400" />
              </div>

              <p className="mt-3 text-3xl font-semibold tracking-[-0.04em]">
                {pendingCount}
              </p>
            </Link>

            <Link
              className={`group rounded-2xl border p-5 backdrop-blur-md transition hover:-translate-y-1 ${
                activeStatus === "approved"
                  ? "border-emerald-300/50 bg-emerald-300/[0.12] ring-2 ring-emerald-300/15"
                  : "border-emerald-300/15 bg-emerald-300/[0.06] hover:bg-emerald-300/[0.10]"
              }`}
              href={approvedHref}
            >
              <div className="flex items-center justify-between gap-3">
                <p className="text-xs font-semibold tracking-[0.1em] text-slate-400 uppercase">
                  Approved
                </p>
                <span className="h-2.5 w-2.5 rounded-full bg-emerald-400" />
              </div>

              <p className="mt-3 text-3xl font-semibold tracking-[-0.04em]">
                {approvedCount}
              </p>
            </Link>

            <Link
              className={`group rounded-2xl border p-5 backdrop-blur-md transition hover:-translate-y-1 ${
                activeStatus === "changes_requested"
                  ? "border-rose-300/50 bg-rose-300/[0.12] ring-2 ring-rose-300/15"
                  : "border-rose-300/15 bg-rose-300/[0.06] hover:bg-rose-300/[0.10]"
              }`}
              href={changesHref}
            >
              <div className="flex items-center justify-between gap-3">
                <p className="text-xs font-semibold tracking-[0.1em] text-slate-400 uppercase">
                  Changes requested
                </p>
                <span className="h-2.5 w-2.5 rounded-full bg-rose-400" />
              </div>

              <p className="mt-3 text-3xl font-semibold tracking-[-0.04em]">
                {changesCount}
              </p>
            </Link>
          </div>
        </div>
      </section>

      <section className="relative z-20 mx-auto -mt-16 max-w-[1440px] px-5 pb-16 sm:px-8 lg:px-12">
        <div className="rounded-[2.25rem] border border-white/70 bg-[#F7FAFB]/95 p-4 shadow-[0_30px_90px_rgba(7,23,34,0.16)] backdrop-blur-xl sm:p-6 lg:p-8">
          <div className="flex flex-col gap-5 border-b border-slate-300/70 px-1 pb-6 lg:flex-row lg:items-end lg:justify-between">
            <div>
              <p className="text-[11px] font-bold tracking-[0.16em] text-[#309FC3] uppercase">
                Creative library
              </p>

              <h2 className="mt-2 text-2xl font-semibold tracking-[-0.035em] text-[#071722] sm:text-3xl">
                {activeFilterLabel}
              </h2>

              <p className="mt-2 text-sm leading-6 text-slate-500">
                Showing {filteredPreviews.length} of {totalCount} previews.
              </p>
            </div>

            <div className="flex w-full flex-col gap-3 lg:w-auto lg:items-end">
              <form
                action="/admin/previews"
                className="flex w-full gap-2 sm:w-[440px]"
                method="GET"
              >
                {activeStatus !== "all" && (
                  <input name="status" type="hidden" value={activeStatus} />
                )}

                <div className="relative flex-1">
                  <span className="pointer-events-none absolute inset-y-0 left-4 flex items-center text-slate-400">
                    <SearchIcon />
                  </span>

                  <input
                    className="h-12 w-full rounded-full border border-[#C8D6DC] bg-white pl-11 pr-4 text-sm font-medium text-[#071722] outline-none transition placeholder:text-slate-400 hover:border-[#AFC3CA] focus:border-[#309FC3] focus:ring-4 focus:ring-[#309FC3]/10"
                    defaultValue={rawSearchQuery}
                    name="q"
                    placeholder="Search client, campaign or creative..."
                    type="search"
                  />
                </div>

                <button
                  className="h-12 rounded-full bg-[#071722] px-5 text-sm font-semibold text-white transition hover:bg-[#309FC3]"
                  type="submit"
                >
                  Search
                </button>
              </form>

              <div className="flex flex-wrap items-center justify-end gap-3">
                {searchQuery && (
                  <Link
                    className="rounded-full border border-slate-300 bg-white px-4 py-2 text-xs font-bold text-slate-600 transition hover:border-[#309FC3] hover:text-[#287F9C]"
                    href={
                      activeStatus === "all"
                        ? "/admin/previews"
                        : `/admin/previews?status=${activeStatus}`
                    }
                  >
                    Clear search
                  </Link>
                )}

                {activeStatus !== "all" && (
                  <Link
                    className="rounded-full border border-[#309FC3]/20 bg-[#EAF6F9] px-4 py-2 text-xs font-bold text-[#287F9C] transition hover:bg-[#309FC3] hover:text-white"
                    href={allHref}
                  >
                    Show all
                  </Link>
                )}

                <div className="flex flex-wrap items-center gap-3 text-xs text-slate-500">
                  <span className="flex items-center gap-2">
                    <span className="h-2 w-2 rounded-full bg-amber-400" />
                    Pending
                  </span>

                  <span className="flex items-center gap-2">
                    <span className="h-2 w-2 rounded-full bg-emerald-500" />
                    Approved
                  </span>

                  <span className="flex items-center gap-2">
                    <span className="h-2 w-2 rounded-full bg-rose-500" />
                    Changes
                  </span>
                </div>
              </div>
            </div>
          </div>

          {searchQuery && (
            <div className="mt-5 flex items-center gap-2 text-sm text-slate-500">
              <span>Search results for</span>
              <span className="rounded-full bg-[#DCE9ED] px-3 py-1 font-semibold text-[#20343E]">
                “{rawSearchQuery}”
              </span>
            </div>
          )}

          {filteredPreviews.length === 0 ? (
            <div className="flex min-h-80 flex-col items-center justify-center rounded-[1.75rem] bg-[#E8EFF2] px-6 py-14 text-center">
              <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-[#D8E8ED] text-[#309FC3]">
                {searchQuery ? <SearchIcon /> : <PreviewIcon />}
              </div>

              <h3 className="mt-6 text-xl font-semibold text-[#071722]">
                {searchQuery ? "No matching previews" : "No previews found"}
              </h3>

              <p className="mt-2 max-w-md text-sm leading-6 text-slate-500">
                {searchQuery
                  ? "Try another client, campaign or creative name."
                  : "There are currently no previews matching this filter."}
              </p>

              {searchQuery ? (
                <Link
                  className="group mt-6 flex min-h-12 items-center gap-2 rounded-full bg-[#309FC3] px-6 text-sm font-semibold text-white transition hover:-translate-y-0.5 hover:bg-[#268DAE]"
                  href={
                    activeStatus === "all"
                      ? "/admin/previews"
                      : `/admin/previews?status=${activeStatus}`
                  }
                >
                  Clear search
                </Link>
              ) : activeStatus !== "all" ? (
                <Link
                  className="group mt-6 flex min-h-12 items-center gap-2 rounded-full bg-[#309FC3] px-6 text-sm font-semibold text-white transition hover:-translate-y-0.5 hover:bg-[#268DAE]"
                  href="/admin/previews"
                >
                  Show all previews
                  <ArrowIcon />
                </Link>
              ) : (
                <Link
                  className="group mt-6 flex min-h-12 items-center gap-2 rounded-full bg-[#309FC3] px-6 text-sm font-semibold text-white transition hover:-translate-y-0.5 hover:bg-[#268DAE]"
                  href="/admin/previews/new"
                >
                  Create first preview
                  <ArrowIcon />
                </Link>
              )}
            </div>
          ) : (
            <div className="mt-6 space-y-5">
              {filteredPreviews.map((preview, index) => {
                const status = statusDetails[preview.status];

                return (
                  <article
                    className="group relative overflow-hidden rounded-[1.75rem] border border-[#BCCDD3] bg-[#E3EBEE] shadow-[0_8px_30px_rgba(7,23,34,0.06)] transition duration-300 hover:-translate-y-0.5 hover:border-[#309FC3]/45 hover:bg-[#DFE8EB] hover:shadow-[0_20px_55px_rgba(7,23,34,0.12)]"
                    key={preview.id}
                  >
                    <span
                      aria-hidden="true"
                      className={`absolute inset-y-0 left-0 w-1.5 ${status.accent}`}
                    />

                    <div className="absolute left-7 top-5 z-20 sm:left-8">
                      <span
                        className={`inline-flex items-center gap-2 rounded-full border px-3 py-1.5 text-[11px] font-bold shadow-sm ${status.badge}`}
                      >
                        <span
                          className={`h-1.5 w-1.5 rounded-full ${status.dot}`}
                        />
                        {status.label}
                      </span>
                    </div>

                    <div className="grid gap-6 p-5 pl-7 pt-18 sm:p-6 sm:pl-8 sm:pt-20 xl:grid-cols-[minmax(0,1.05fr)_minmax(320px,0.95fr)_180px] xl:items-center">
                      <div className="min-w-0">
                        <div className="flex items-start gap-4">
                          <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl border border-[#C7DDE3] bg-[#D7E8ED] text-[#258AAA]">
                            <PreviewIcon />
                          </div>

                          <div className="min-w-0 flex-1">
                            <p className="text-[10px] font-bold tracking-[0.16em] text-slate-500 uppercase">
                              Preview {String(index + 1).padStart(2, "0")}
                            </p>

                            <h3 className="mt-2 break-words text-xl font-semibold tracking-[-0.025em] text-[#071722] sm:text-2xl">
                              {preview.creativeName}
                            </h3>
                          </div>
                        </div>

                        <dl className="mt-6 grid grid-cols-2 gap-x-5 gap-y-4 sm:grid-cols-4 xl:grid-cols-2 2xl:grid-cols-4">
                          <div>
                            <dt className="text-[10px] font-bold tracking-[0.12em] text-slate-500 uppercase">
                              Client
                            </dt>
                            <dd className="mt-1 break-words text-sm font-semibold text-[#20343E]">
                              {preview.campaign.clientName}
                            </dd>
                          </div>

                          <div>
                            <dt className="text-[10px] font-bold tracking-[0.12em] text-slate-500 uppercase">
                              Campaign
                            </dt>
                            <dd className="mt-1 break-words text-sm font-semibold text-[#20343E]">
                              {preview.campaign.name}
                            </dd>
                          </div>

                          <div>
                            <dt className="text-[10px] font-bold tracking-[0.12em] text-slate-500 uppercase">
                              Vendor
                            </dt>
                            <dd className="mt-1 text-sm font-semibold text-[#20343E]">
                              {formatVendor(preview.vendor)}
                            </dd>
                          </div>

                          <div>
                            <dt className="text-[10px] font-bold tracking-[0.12em] text-slate-500 uppercase">
                              Created
                            </dt>
                            <dd className="mt-1 text-sm font-semibold text-[#20343E]">
                              {formatDate(preview.createdAt)}
                            </dd>
                          </div>
                        </dl>
                      </div>

                      <div
                        className={`rounded-2xl border p-5 shadow-sm ${status.panel}`}
                      >
                        <div className="flex items-start gap-3">
                          <span
                            className={`flex h-10 w-10 shrink-0 items-center justify-center rounded-xl ${status.icon}`}
                          >
                            <ResponseIcon status={preview.status} />
                          </span>

                          {preview.approvals.length > 0 ? (
                            <div className="min-w-0 w-full">
                              <div className="flex items-center justify-between gap-3">
                                <p className="text-[10px] font-bold tracking-[0.14em] text-slate-500 uppercase">
                                  Client responses
                                </p>

                                <span className="rounded-full bg-white/80 px-2.5 py-1 text-[10px] font-bold text-slate-500">
                                  {preview.approvals.length}
                                </span>
                              </div>

                              <div className="mt-3 space-y-3">
                                {preview.approvals.map(
                                  (approval, responseIndex) => (
                                    <div
                                      className="rounded-xl border border-black/[0.07] bg-white/80 p-3 shadow-sm"
                                      key={approval.id}
                                    >
                                      <div className="flex flex-wrap items-center justify-between gap-2">
                                        <p className="break-words text-sm font-semibold text-[#071722]">
                                          {approval.reviewerName}
                                        </p>

                                        <span className="text-[10px] font-bold tracking-[0.08em] text-slate-400 uppercase">
                                          {responseIndex === 0
                                            ? "Latest"
                                            : `Response ${
                                                preview.approvals.length -
                                                responseIndex
                                              }`}
                                        </span>
                                      </div>

                                      <p className="mt-1 break-all text-xs text-slate-500">
                                        {approval.reviewerEmail}
                                      </p>

                                      <p className="mt-3 break-words text-sm leading-6 text-slate-600">
                                        {approval.notes?.trim() ||
                                          "No written feedback was provided."}
                                      </p>
                                    </div>
                                  ),
                                )}
                              </div>
                            </div>
                          ) : (
                            <div>
                              <p className="text-[10px] font-bold tracking-[0.14em] text-slate-500 uppercase">
                                Client response
                              </p>

                              <p className="mt-2 text-sm font-semibold text-[#071722]">
                                Awaiting a decision
                              </p>

                              <p className="mt-1 text-xs leading-5 text-slate-500">
                                No client response has been submitted yet.
                              </p>
                            </div>
                          )}
                        </div>
                      </div>

                      <div className="flex flex-col gap-3 xl:items-stretch">
                        <Link
                          aria-label={`Open ${preview.creativeName} preview`}
                          className="group flex min-h-12 items-center justify-center gap-2 rounded-full bg-[#071722] px-5 text-sm font-semibold text-white shadow-lg shadow-[#071722]/10 transition hover:-translate-y-0.5 hover:bg-[#309FC3]"
                          href={`/preview/${preview.publicToken}`}
                          rel="noreferrer"
                          target="_blank"
                        >
                          Open Preview
                          <ArrowIcon />
                        </Link>

                        <UpdateCreativeForm
                          previewId={preview.id}
                          currentUrl={preview.vendorUrl}
                          clientEmail={preview.approvals[0]?.reviewerEmail}
                          publicToken={preview.publicToken}
                          currentStatus={preview.status}
                        />

                        <p className="text-center text-[10px] font-medium tracking-[0.08em] text-slate-500 uppercase">
                          Opens client view
                        </p>
                      </div>
                    </div>
                  </article>
                );
              })}
            </div>
          )}
        </div>
      </section>

      <footer className="border-t border-[#071722]/10 bg-[#DDE7EA] px-5 py-7 sm:px-8 lg:px-12">
        <div className="mx-auto flex max-w-[1440px] flex-col gap-2 text-xs text-slate-500 sm:flex-row sm:items-center sm:justify-between">
          <span>Rook Creative Preview Platform</span>
          <span>Internal preview management</span>
        </div>
      </footer>
    </main>
  );
}