"use client";

import Image from "next/image";
import Link from "next/link";
import type { ReactNode } from "react";

import { DataTable } from "../../../../components/table/DataTable";
import {
  transactionColumns,
  type Transaction,
} from "../../../../features/users/columns/transactionColumns";
import {
  creditHistoryColumns,
  type CreditHistory,
} from "../../../../features/users/columns/creditHistoryColumns";
import Button from "../../../../components/ui/Button";
import ManualCreditAdjustment from "../../../../features/users/components/ManualCreditAdjustment";
import { useModal } from "../../../../lib/modal-system/ModalContext";

const user = {
  id: 2,
  name: "Steve",
  avatar: "/images/user.png",
  email: "steve@gmail.com",
  joined: "Jun 12, 2026 ; 10:50 AM",
  licenseKey: "AIX-4P92-KM28-RT71",
  creditBalance: 100,
  lastPackPrice: "$10",
  lastPackName: "Starter",
  totalSpent: 21,
};

const transactions: Transaction[] = [
  {
    id: 1,
    date: "12 Jun 2026",
    title: "Starter",
    amount: "$10",
    credits: "100",
    status: "Success",
  },
  {
    id: 2,
    date: "12 Jun 2026",
    title: "Starter",
    amount: "$10",
    credits: "100",
    status: "Failed",
  },
  {
    id: 3,
    date: "12 Jun 2026",
    title: "Manual",
    amount: "-",
    credits: "+100",
    status: "Success",
  },
  {
    id: 4,
    date: "12 Jun 2026",
    title: "Manual",
    amount: "-",
    credits: "-100",
    status: "Success",
  },
];

const creditHistory: CreditHistory[] = [
  {
    id: 1,
    date: "12 Jun 2026",
    preview: "/images/live-demo.jpg",
    url: "pinterest.com/pin/8821",
    spent: 2,
  },
  {
    id: 2,
    date: "12 Jun 2026",
    preview: "/images/history-2.jpg",
    url: "pinterest.com/pin/8827",
    spent: 2,
  },
];

const tableClassNames = {
  root: "w-full overflow-x-auto",
  toolbar: "mb-1",
  table: "min-w-[650px] xl:min-w-full",
  tableThead: "admin-table relative",
  tableTheadRow: "whitespace-nowrap",
  tableTheadCell:
    "px-4 py-2.5 text-left font-body text-base font-medium text-heading relative",
  tableTbody: "",
  tableTbodyRow: `
    hover:bg-link-1/10 transition-colors
    [&>td]:border-b [&>td]:border-[#E7E7E8]
  `,
  tableTbodyCell:
    "px-4 py-5 font-body font-medium text-base text-table-text relative",
  pagination: "hidden",
};

export default function UserDetailPage() {
  const { openModal } = useModal();
  return (
    <section className="w-full overflow-hidden p-4 md:p-8">
      <div className="w-full">
        <div className="mb-5 flex flex-wrap items-center gap-2 text-base xl:gap-4 xl:text-xl">
          <Link href="/admin/users" className="text-heading">
            Users
          </Link>
          <span className="text-text">/</span>
          <span className="font-semibold text-link-1">{user.name}</span>
        </div>

        <div className="glass-card-v2 rounded-xl p-4">
          <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
            <div className="flex min-w-0 items-start gap-3 sm:items-center sm:gap-4">
              <div className="relative h-12.5 w-12.5 shrink-0 overflow-hidden rounded-full">
                <Image
                  src={user.avatar}
                  alt={user.name}
                  fill
                  sizes="50px"
                  className="object-cover"
                />
              </div>

              <div className="min-w-0">
                <h2 className="font-body text-lg font-medium text-heading xl:text-xl">
                  {user.name}
                </h2>

                <div className="mt-1 flex flex-col gap-1 text-sm text-table-text sm:flex-row sm:flex-wrap sm:items-center sm:gap-2.5 xl:text-base">
                  <span className="break-all">{user.email}</span>
                  <span className="hidden h-1 w-1 rounded-full bg-[#C7C3D4] sm:block" />
                  <span>Joined {user.joined}</span>
                </div>
              </div>
            </div>

            <div className="grid grid-cols-2 gap-3 sm:flex sm:flex-wrap sm:gap-4">
              <Button
                variant="white"
                className="w-full sm:w-auto"
                onClick={() => openModal("DEACTIVATE_USER", {})}
                buttonClassName="shadow-none! h-12! w-full sm:w-auto"
                BtnInnerclassName="px-4.5! py-3.5! w-full"
              >
                Deactivate
              </Button>

              <Button
                variant="white"
                className="w-full sm:w-auto"
                onClick={() => openModal("DELETE_USER", {})}
                buttonClassName="shadow-none! p-0! h-12! w-full sm:w-auto"
                BtnInnerclassName="border border-[#F87171] text-danger! px-4.5! py-3.5! w-full"
              >
                Delete
              </Button>
            </div>
          </div>
        </div>

        <div className="mt-5 grid gap-4 sm:grid-cols-2 xl:gap-6 2xl:grid-cols-4">
          <InfoCard title="License Key">
            <span className="inline-flex max-w-full rounded-full border border-link-1/20 bg-[#FBF8FF] px-4 py-2.5 text-sm font-semibold text-link break-all sm:px-5 xl:text-lg xl:leading-5">
              {user.licenseKey}
            </span>
          </InfoCard>

          <InfoCard title="Credit Balance">
            <p className="text-xl font-semibold text-heading xl:text-28 xl:leading-9.5">
              {user.creditBalance}
            </p>
          </InfoCard>

          <InfoCard title="Last Pack">
            <div className="flex flex-wrap items-center gap-3">
              <p className="text-xl font-semibold text-heading xl:text-28 xl:leading-9.5">
                {user.lastPackPrice}
              </p>
              <p className="text-base font-medium text-heading">
                {user.lastPackName}
              </p>
            </div>
          </InfoCard>

          <InfoCard title="Total Spent">
            <p className="text-3xl font-semibold text-heading">
              {user.totalSpent}
            </p>
          </InfoCard>
        </div>

        <ManualCreditAdjustment />

        <div className="mt-5 grid gap-4 xl:gap-6 2xl:grid-cols-2">
          <div className="glass-card-v2 min-w-0 rounded-xl p-4 xl:p-6">
            <DataTable
              data={transactions}
              columns={transactionColumns}
              appearance="default"
              size="md"
              getRowId={(row) => String(row.id)}
              toolbar={
                <h3 className="text-lg font-semibold text-heading xl:text-xl">
                  Transaction History
                </h3>
              }
              classNames={tableClassNames}
            />
          </div>

          <div className="glass-card-v2 min-w-0 rounded-xl p-4 xl:p-6">
            <DataTable
              data={creditHistory}
              columns={creditHistoryColumns}
              appearance="default"
              size="md"
              getRowId={(row) => String(row.id)}
              toolbar={
                <h3 className="text-lg font-medium text-heading xl:text-xl">
                  Credit History
                </h3>
              }
              classNames={tableClassNames}
            />
          </div>
        </div>
      </div>
    </section>
  );
}

function InfoCard({
  title,
  children,
}: {
  title: string;
  children: ReactNode;
}) {
  return (
    <div className="glass-card-v2 min-w-0 rounded-xl p-4 xl:p-6">
      <p className="mb-4 text-sm font-medium text-table-text xl:mb-5 xl:text-base">
        {title}
      </p>
      {children}
    </div>
  );
}