import React from "react";
import { CircleIcon } from "@/modules/icons/circle-icon";

type Step = {
  label: string;
  description: string;
  color: string; // hex color for the dot
};

const columns: {
  title: string;
  bg: string; // custom bg color
  steps: Step[];
}[] = [
  {
    title: "Issue",
    bg: "#fa8072", // salmon red
    steps: [
      {
        label: "Awaiting Artwork",
        description: "We have not received the artwork files for this job",
        color: "#fa8072",
      },
      {
        label: "Awaiting Preview Approval",
        description:
          "Preview(s) for your job have been created and emailed to you for approval. Not all jobs receive previews",
        color: "#fa8072",
      },
      {
        label: "On Hold",
        description:
          "There is a problem with your art files or we are waiting on approval/action from you. The accompanying description will explain more.",
        color: "#fa8072",
      },
      {
        label: "Status Adjustment",
        description:
          "Your job is progressing normally, but the status is being adjusted",
        color: "#fa8072",
      },
      {
        label: "Quality Control Reprint",
        description: "Your job is being reprinted, due to a quality issue",
        color: "#fa8072",
      },
      {
        label: "Reprint",
        description: "Your job is being reprinted",
        color: "#fa8072",
      },
      {
        label: "Discarded",
        description: "Your job has been discarded, per your request.",
        color: "#fa8072",
      },
      {
        label: "Canceled",
        description: "Your job has been canceled.",
        color: "#fa8072",
      },
    ],
  },
  {
    title: "Pre-Press",
    bg: "#f0e68c", // khaki yellow
    steps: [
      { label: "New", description: "The job is received", color: "#f0e68c" },
      {
        label: "New Pre-Flight",
        description: "Your job is being checked for errors",
        color: "#f0e68c",
      },
      {
        label: "Batch Staging",
        description: "Your job is being prepared for imposition",
        color: "#f0e68c",
      },
      {
        label: "Batch Imposition",
        description:
          "Your job is in imposition. Your job is being prepared to be batched for print.",
        color: "#f0e68c",
      },
      {
        label: "Pre-Press",
        description: "Your job is prepared to be plated",
        color: "#f0e68c",
      },
    ],
  },
  {
    title: "Printing",
    bg: "#90ee90", // light green
    steps: [
      {
        label: "Plated",
        description: "Your job has been etched onto Printing Plates",
        color: "#90ee90",
      },
      {
        label: "On Press",
        description: "Your job is being printed",
        color: "#90ee90",
      },
    ],
  },
  {
    title: "Post-Press",
    bg: "#228b22", // forest green
    steps: [
      {
        label: "UV Coating",
        description: "Your job is in the coating process",
        color: "#228b22",
      },
      {
        label: "Cutting",
        description: "Your job is in our cutting dept.",
        color: "#228b22",
      },
      {
        label: "Finishing",
        description: "Your job is in the finishing dept.",
        color: "#228b22",
      },
      {
        label: "Bindery",
        description: "Your job is in the bindery dept.",
        color: "#228b22",
      },
      {
        label: "Bindery Complete",
        description: "Your job's bindery is complete.",
        color: "#228b22",
      },
      {
        label: "Mailing",
        description: "Your mailing job is in the mailing dept.",
        color: "#228b22",
      },
      {
        label: "Mailing Addressing",
        description: "Your mailing job is being addressed",
        color: "#228b22",
      },
    ],
  },
  {
    title: "Delivery",
    bg: "#add8e6", // light blue
    steps: [
      {
        label: "Packaging",
        description: "Your job is being packaged",
        color: "#add8e6",
      },
      {
        label: "Delivery Pending",
        description: "Your job is being prepared for delivery",
        color: "#add8e6",
      },
      {
        label: "On Pallet for Delivery",
        description: "Your job is on a pallet, prepared for delivery",
        color: "#add8e6",
      },
      {
        label: "Out for Local Delivery",
        description: "Your job is on the truck ready for delivery",
        color: "#add8e6",
      },
      {
        label: "Delivered",
        description: "Your job has been delivered",
        color: "#add8e6",
      },
      {
        label: "Pickup Staging",
        description: "Your job is being prepared for pickup, but is not ready",
        color: "#add8e6",
      },
      {
        label: "OK to Pickup",
        description: "Your job is now ready for pickup",
        color: "#add8e6",
      },
      {
        label: "Picked Up",
        description: "Your job has been picked up",
        color: "#add8e6",
      },
      {
        label: "Mailed",
        description: "Your mailing job has been mailed",
        color: "#add8e6",
      },
      {
        label: "Shipped",
        description:
          "Your job has shipped. It may take up to 24 hours before tracking status is available from UPS.",
        color: "#add8e6",
      },
      {
        label: "Complete",
        description: "Your job is Complete",
        color: "#add8e6",
      },
    ],
  },
];

export default async function Page() {
  return (
    <div className="main-container mobile-container relative py-5 lg:py-10">
      <h3 className="text-xl md:text-4xl font-semibold mb-3 text-[#585858] text-center sm:text-left">
        Understanding Vibrant Printing &amp; Graphics Production Steps :
      </h3>
      <p className="text-sm md:text-base mb-4 text-gray-600 text-center sm:text-left">
        The table below is provided to help you understand where each step is in
        the production process.
      </p>

      <div className="overflow-x-auto">
        <table className="min-w-[768px] border border-gray-300">
          <thead>
            <tr className="text-white">
              {columns.map((col, idx) => (
                <th
                  key={idx}
                  className="px-3 py-2 border border-gray-300 text-black"
                  style={{ backgroundColor: col.bg, minWidth: "13rem" }}
                >
                  {col.title}
                </th>
              ))}
            </tr>
          </thead>
          <tbody>
            <tr>
              {columns.map((col, idx) => (
                <td key={idx} className="align-top border border-gray-300 p-3">
                  <ul className="space-y-2">
                    {col.steps.map((step, i) => (
                      <li key={i} className="text-base">
                        <span className="inline-flex items-center">
                          <CircleIcon color={step.color} />
                          <b>{step.label} : </b>
                        </span>
                        {step.description}
                      </li>
                    ))}
                  </ul>
                </td>
              ))}
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  );
}