"use client";

import Image from "next/image";
import { useRouter } from "next/navigation";
import { BiArrowBack } from "react-icons/bi";
import { FiSliders } from "react-icons/fi";

import DynamicTable, {
  TableColumn,
} from "../../../../components/ui/DynamicTable";

type CreditHistoryRow = {
  date: string;
  image: string;
  preview: string;
  spent: number;
};

const creditHistoryData: CreditHistoryRow[] = [
  {
    date: "7 Jun 2026",
    image: "/images/history-1.jpg",
    preview: "pinterest.com/pin/8821",
    spent: 2,
  },
  {
    date: "7 Jun 2026",
    image: "/images/history-2.jpg",
    preview: "reddit.com/r/art",
    spent: 1,
  },
  {
    date: "6 Jun 2026",
    image: "/images/history-3.jpg",
    preview: "twitter.com/user/photo",
    spent: 4,
  },
  {
    date: "5 Jun 2026",
    image: "/images/history-4.jpg",
    preview: "instagram.com/p/AB12",
    spent: 3,
  },
  {
    date: "2 Jun 2026",
    image: "/images/history-5.jpg",
    preview: "twitter.com/user/photo/34",
    spent: 10,
  },
  {
    date: "7 Jun 2026",
    image: "/images/history-1.jpg",
    preview: "pinterest.com/pin/8821",
    spent: 2,
  },
  {
    date: "7 Jun 2026",
    image: "/images/history-2.jpg",
    preview: "reddit.com/r/art",
    spent: 1,
  },
  {
    date: "6 Jun 2026",
    image: "/images/history-3.jpg",
    preview: "twitter.com/user/photo",
    spent: 4,
  },
  {
    date: "5 Jun 2026",
    image: "/images/history-4.jpg",
    preview: "instagram.com/p/AB12",
    spent: 3,
  },
  {
    date: "2 Jun 2026",
    image: "/images/history-5.jpg",
    preview: "twitter.com/user/photo/34",
    spent: 10,
  },
  {
    date: "7 Jun 2026",
    image: "/images/history-1.jpg",
    preview: "pinterest.com/pin/8821",
    spent: 2,
  },
  {
    date: "7 Jun 2026",
    image: "/images/history-2.jpg",
    preview: "reddit.com/r/art",
    spent: 1,
  },
  {
    date: "6 Jun 2026",
    image: "/images/history-3.jpg",
    preview: "twitter.com/user/photo",
    spent: 4,
  },
  {
    date: "5 Jun 2026",
    image: "/images/history-4.jpg",
    preview: "instagram.com/p/AB12",
    spent: 3,
  },
  {
    date: "2 Jun 2026",
    image: "/images/history-5.jpg",
    preview: "twitter.com/user/photo/34",
    spent: 10,
  },
];

const columns: TableColumn<CreditHistoryRow>[] = [
  {
    key: "date",
    title: "Date",
  },
  {
    key: "preview",
    title: "Preview",
    render: (row) => (
      <div className="flex items-center gap-3">
        <Image
          src={row.image}
          alt={row.preview}
          width={80}
          height={48}
          className="h-12 w-20 rounded-lg object-cover"
        />

        <span className="font-body text-base text-heading">
          {row.preview}
        </span>
      </div>
    ),
  },
  {
    key: "spent",
    title: "Spent",
    render: (row) => (
      <div className="flex items-center gap-2">
        <Image
          src="/images/credits-icon.svg"
          alt="Credits"
          width={20}
          height={20}
        />

        <span>{row.spent}</span>
      </div>
    ),
  },
];

export default function CreditHistoryPage() {
  const router = useRouter();

  return (
    <div className="container-k">
      {/* Header */}
      <div className="mb-8 flex items-center justify-between">
        <button
          type="button"
          onClick={() => router.back()}
          className="flex items-center gap-3 text-link-1 cursor-pointer"
        >
          <BiArrowBack size={28} />

          <div className="font-body text-2xl font-bold text-heading">
            Credit History
          </div>
        </button>

        <button
          type="button"
          className="
            flex h-12 w-12 items-center justify-center
            rounded-full border border-white
            bg-white/70 text-link-1
            shadow-button
          "
        >
          <FiSliders size={20} />
        </button>
      </div>

      {/* Table */}
      <DynamicTable
        columns={columns}
        data={creditHistoryData}
        pageSize={5}
        emptyImage="/images/no-transaction.svg"
        emptyTitle="No credit history yet"
        emptyDescription="Your analyzed images and spent credits will appear here."
      />
    </div>
  );
}