"use client";

import Image from "next/image";
import Link from "next/link";
import { BiSolidGridAlt } from "react-icons/bi";
import { FiFileText } from "react-icons/fi";

import DashboardSectionTitle from "../../../../components/dashboard/DashboardSectionTitle";
import CreditOverviewCard from "../../../../components/dashboard/CreditOverviewCard";
import DynamicTable, {
  TableColumn,
} from "../../../../components/ui/DynamicTable";
import type { DashboardState } from "../../../../types/dashboard";


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

// const dashboardState: DashboardState = "ACTIVE_USER";
const dashboardState: DashboardState = "NEW_USER";

const transactionData: 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",
    render: (row) => (
      <div className="flex items-center gap-2">
        <Image
          src="/images/credits-icon.svg"
          alt="Credits"
          width={20}
          height={20}
        />
        <span>{row.credits}</span>
      </div>
    ),
  },
  {
    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={`inline-flex rounded-full px-3 py-1 text-sm font-medium ${statusClass}`}
        >
          {row.paymentStatus}
        </span>
      );
    },
  },
  {
    key: "invoice",
    title: "Invoice",
    render: (row) => (
      <button
        type="button"
        className="font-body text-base font-medium text-link-1 underline"
      >
        {row.invoice}
      </button>
    ),
  },
];

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

  return (
    <div className="container-k">
      <p className="mb-5 lg:mb-7.5 flex items-center gap-3 font-body text-sm lg:text-xl text-link-1 font-semibold">
        Dashboard
      </p>

      <div className="mb-6 lg:mb-10">
        <h1 className="font-heading text-3xl font-medium text-heading md:text-[40px] leading-12.5">
          Hello, Jenny!
        </h1>

        <p className="mt-2.5 text-base text-text sm:text-lg 2xl:text-xl 2xl:leading-7">
          {isNewUser
            ? "Get started by purchasing your first credit package to begin analyzing images."
            : "Welcome back! Check your available credits, explore packages and manage your account effortlessly."}
        </p>
      </div>

      <DashboardSectionTitle
        icon={<BiSolidGridAlt size={22} />}
        title="Overview"
      />

      <CreditOverviewCard
        dashboardState={dashboardState}
        usedCredits={600}
        totalCredits={800}
        availableCredits={200}
      />

      <div className="mt-10">
        <DashboardSectionTitle
          icon={<FiFileText size={20} />}
          title="Transaction History"
          right={
            !isNewUser && (
              <Link
                href="/credit-history"
                className="font-body text-base font-medium text-link-1 underline"
              >
                View All
              </Link>
            )
          }
        />

        <DynamicTable
          columns={columns}
          data={isNewUser ? [] : transactionData}
          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>
  );
}