'use client';

import { useEffect } from 'react';
import { Receipt } from 'lucide-react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { EmptyState } from '@/components/shared/EmptyState';
import { PageLoader } from '@/components/shared/Loader';
import { useAppDispatch, useAppSelector } from '@/hooks/useRedux';
import { fetchTransactions } from '@/store/slices/paymentSlice';
import { formatDateTime, formatCurrency, getTransactionBadgeClass } from '@/utils';
import { cn } from '@/utils';

interface BillingHistorySectionProps {
  showHeader?: boolean;
  embedded?: boolean;
}

export function BillingHistorySection({
  showHeader = true,
  embedded = false,
}: BillingHistorySectionProps) {
  const dispatch = useAppDispatch();
  const { transactions, isLoading } = useAppSelector((s) => s.payment);

  useEffect(() => {
    dispatch(fetchTransactions());
  }, [dispatch]);

  const content = (
    <>
      {isLoading ? (
        <PageLoader text="Loading transactions…" />
      ) : transactions.length === 0 ? (
        <EmptyState
          icon={Receipt}
          title="No transactions yet"
          description="Your payment history will appear here once you subscribe to a plan."
        />
      ) : (
        <div className="space-y-0 -mx-6">
          <div className="hidden sm:grid grid-cols-5 gap-4 px-6 py-3 text-xs font-medium text-muted-foreground border-b border-border">
            <span className="col-span-2">Plan</span>
            <span>Amount</span>
            <span>Status</span>
            <span>Date</span>
          </div>

          {transactions.map((tx) => (
            <div
              key={tx.id}
              className="grid grid-cols-1 sm:grid-cols-5 gap-2 sm:gap-4 px-6 py-4 hover:bg-accent/50 transition-colors border-b border-border/50 last:border-0"
            >
              <div className="sm:col-span-2">
                <p className="font-medium text-sm">{tx.plan_name || '-'}</p>
                <p className="text-xs text-muted-foreground mt-0.5 font-mono truncate">
                  #{String(tx.id).padStart(8, '0')}
                </p>
              </div>

              <div className="flex items-center justify-between sm:justify-start gap-2">
                <span className="text-xs text-muted-foreground sm:hidden">Amount</span>
                <div>
                  <span className="text-sm font-semibold">
                    {formatCurrency(tx.amount, tx.currency)}
                  </span>
                  <span className="text-xs text-muted-foreground ml-1 uppercase">
                    {tx.currency}
                  </span>
                </div>
              </div>

              <div className="flex items-center justify-between sm:justify-start gap-2">
                <span className="text-xs text-muted-foreground sm:hidden">Status</span>
                <span
                  className={`inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-semibold capitalize ${getTransactionBadgeClass(tx.status)}`}
                >
                  {tx.status}
                </span>
              </div>

              <div className="flex items-center justify-between sm:justify-start gap-2">
                <span className="text-xs text-muted-foreground sm:hidden">Date</span>
                <span className="text-xs text-muted-foreground">
                  {formatDateTime(tx.created_at)}
                </span>
              </div>
            </div>
          ))}
        </div>
      )}
    </>
  );

  if (embedded) {
    return (
      <div className="space-y-4">
        {showHeader && (
          <div>
            <h2 className="text-xl font-bold">Billing History</h2>
            <p className="text-sm text-muted-foreground mt-1">
              All your payment transactions in one place.
            </p>
          </div>
        )}
        <Card>
          <CardHeader>
            <CardTitle className="text-base flex items-center gap-2">
              <Receipt className="h-4 w-4 text-brand-500 dark:text-brand-300" /> Transactions
            </CardTitle>
          </CardHeader>
          <CardContent>{content}</CardContent>
        </Card>
        {/* <p className="text-xs text-muted-foreground text-center">
          Need help with a payment?{' '}
          <a
            href="mailto:support@activateabundanate.com"
            className="text-brand-500 dark:text-brand-300 hover:underline"
          >
            Contact support
          </a>
        </p> */}
      </div>
    );
  }

  return (
    <div className={cn('space-y-6', showHeader && 'animate-fade-in')}>
      {showHeader && (
        <div>
          <h1 className="text-3xl font-bold">Billing History</h1>
          <p className="text-muted-foreground mt-1">
            All your payment transactions in one place.
          </p>
        </div>
      )}

      <Card>
        <CardHeader>
          <CardTitle className="text-base flex items-center gap-2">
            <Receipt className="h-4 w-4 text-brand-500 dark:text-brand-300" /> Transactions
          </CardTitle>
        </CardHeader>
        <CardContent>{content}</CardContent>
      </Card>

      {/* <p className="text-xs text-muted-foreground text-center">
        Need help with a payment?{' '}
        <a
          href="mailto:support@activateabundanate.com"
          className="text-brand-500 dark:text-brand-300 hover:underline"
        >
          Contact support
        </a>
      </p> */}
    </div>
  );
}