"use client";

import Link from "next/link";
import DynamicTable, {
  TableColumn,
} from "../../../../../components/ui/DynamicTable";
import CreditsCard from "../../../../../components/dashboard/packages/CreditsCard";
import { BuyPackageSection } from "../../../../../components/dashboard/packages/PackageBuySection";
import LicenseKeyCard from "../../../../../components/dashboard/packages/LicenseCard";

type DashboardState = "NEW_USER" | "ACTIVE_USER";

type TransactionRow = {
  purchaseDate: string;
  title: string;
  amount: string;
  credits: number;
  paymentStatus: "Pending" | "Failed" | "Success";
  invoice: string;
};

const dashboardState: DashboardState = "ACTIVE_USER";

const transactions: TransactionRow[] = [
  {
    purchaseDate: "2 Jun 2026",
    title: "Starter",
    amount: "$10.00",
    credits: 100,
    paymentStatus: "Pending",
    invoice: "Download",
  },
  {
    purchaseDate: "1 Jun 2026",
    title: "Standard",
    amount: "$25.00",
    credits: 300,
    paymentStatus: "Failed",
    invoice: "Download",
  },
  {
    purchaseDate: "5 May 2026",
    title: "Pro",
    amount: "$50.00",
    credits: 700,
    paymentStatus: "Success",
    invoice: "Download",
  },
];

const columns: TableColumn<TransactionRow>[] = [
  { key: "purchaseDate", title: "Purchase Date" },
  { key: "title", title: "Title" },
  { key: "amount", title: "Amount" },
  { key: "credits", title: "Credits" },
  {
    key: "paymentStatus",
    title: "Payment Status",
    render: (row) => {
      const statusClass =
        row.paymentStatus === "Success"
          ? "bg-[#DDFBEF] text-[#00A35C]"
          : row.paymentStatus === "Failed"
            ? "bg-[#FFE2E2] text-[#C93B3B]"
            : "bg-[#FFF3D6] text-[#F59E00]";

      return (
        <span className={`rounded-full px-3 py-1 text-sm ${statusClass}`}>
          {row.paymentStatus}
        </span>
      );
    },
  },
  {
    key: "invoice",
    title: "Invoice",
    render: (row) => (
      <button type="button" className="text-link-1 underline">
        {row.invoice}
      </button>
    ),
  },
];

export default function PackagesPage() {
  const isNewUser = dashboardState === "NEW_USER";

  return (
    <div className="container-k">
      <div className="mb-6 lg:mb-10">
        <div className="mb-5 flex items-center gap-3 font-body text-sm lg:mb-7.5 lg:text-xl">
          <Link href="/dashboard" className="text-heading">
            Dashboard
          </Link>
          <span>/</span>
          <span className="font-semibold text-link-1">Packages</span>
        </div>

        <h1 className="font-heading text-3xl font-medium leading-12.5 text-heading md:text-[40px]">
          Packages
        </h1>

        <p className="mt-2.5 text-base text-text sm:text-lg 2xl:text-xl 2xl:leading-7">
          Use credits anytime. No expiry. No limits
        </p>
      </div>

      {!isNewUser && (
        <div className="mb-6 grid gap-6 lg:grid-cols-2">
          <CreditsCard />
          <LicenseKeyCard />
        </div>
      )}

      <BuyPackageSection />

      <div className="mt-5 rounded-2xl p-4 glass-card-v2 sm:p-5 md:p-7.5">
        <div className="relative z-10">
          <h2 className="mb-6 font-heading text-xl font-semibold text-heading md:mb-8 md:text-2xl">
            Transaction History
          </h2>

          <DynamicTable
            columns={columns}
            data={isNewUser ? [] : transactions}
            pageSize={5}
            emptyImage="/images/no-transaction.svg"
            emptyTitle="No transactions yet"
            emptyDescription="Once you purchase a credit package, your invoices and transaction history will appear here."
          />
        </div>
      </div>
    </div>
  );
}