'use client';
import React, { useState } from 'react';
import { useTranslations } from 'next-intl';
import { ArrowRight, Download } from 'lucide-react';
import { HistoryTableRowProps } from '../lib/types';
import { formatDate } from '../lib/utils';
import { useRouter } from '@/shared/config/i18n/navigation';
import { useMutation } from '@tanstack/react-query';
import { apiRequest } from '@/shared/request/apiRequest';
import { links } from '@/shared/request/links';
import { toast } from 'react-toastify';
import { PaymentModal } from '@/features/modals/paymentModal/ui/Paymentmodal';
import { PLAGIAT_SERVICE_FEE, SERTIFICATE_PRICE } from '@/shared/lib/metadata';

// ─── State badge ───────────────────────────────────────────────────────────────

export const StateBadge: React.FC<{ state: 'paid' | 'unpaid' }> = ({
  state,
}) => {
  const isPaid = state === 'paid';
  const t = useTranslations();
  return (
    <span
      className={[
        'inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-semibold whitespace-nowrap select-none',
        isPaid ? 'bg-emerald-50 text-emerald-700' : 'bg-rose-50 text-rose-600',
      ].join(' ')}
    >
      <span
        className={[
          'w-1.5 h-1.5 rounded-full shrink-0',
          isPaid ? 'bg-emerald-500' : 'bg-rose-500',
        ].join(' ')}
      />
      {isPaid ? t('Cabinet.paid') : t('Cabinet.unpaid')}
    </span>
  );
};

// ─── Row ───────────────────────────────────────────────────────────────────────

export const HistoryTableRow: React.FC<
  HistoryTableRowProps & { index: number }
> = ({ item, index }) => {
  const router = useRouter();
  const tUnknown = useTranslations();
  const [isPaymentOpen, setIsPaymentOpen] = useState(false);

  const payment = useMutation({
    mutationKey: ['payment', item.order_id],
    mutationFn: ({ order_id }: { order_id: number }) =>
      apiRequest<{ payment_link: string }>('POST', links.payment(order_id)),
    onSuccess: (res) => {
      window.open(res.data.payment_link, '_self');
      setIsPaymentOpen(false);
    },
    onError: (err) => {
      toast.error(err instanceof Error ? err.message : 'Xatolik yuz berdi');
      setIsPaymentOpen(false);
    },
  });

  const price = item.price_calculation ?? {
    service_fee: item.state === 'unpaid' ? PLAGIAT_SERVICE_FEE : 0,
    discount: 0,
    certificate: item.certificate ? SERTIFICATE_PRICE : 0,
    total_price: 41200,
    currency: 'UZS',
  };

  return (
    <>
      <tr className="hover:bg-slate-50/60 transition-colors">
        {/* # */}
        <td className="px-5 py-3.5 text-slate-400 font-mono text-xs">
          {String(index).padStart(2, '0')}
        </td>

        {/* Sarlavha */}
        <td className="px-5 py-3.5">
          <span className="text-slate-800 font-medium max-w-45 truncate block text-sm">
            {item.title || '—'}
          </span>
        </td>

        {/* Fayl */}
        <td className="px-5 py-3.5">
          {item.file ? (
            <a
              href={item.file}
              target="_blank"
              rel="noopener noreferrer"
              className="inline-flex items-center gap-1.5 text-slate-500 hover:text-blue-600 transition-colors"
              aria-label={tUnknown('file')}
            >
              <Download size={14} />
              <span className="text-xs font-medium">{tUnknown('file')}</span>
            </a>
          ) : (
            <span className="text-slate-200 text-xs">—</span>
          )}
        </td>

        {/* Sana */}
        <td className="px-5 py-3.5 text-slate-500 text-sm whitespace-nowrap">
          {formatDate(item.created_at)}
        </td>

        {/* Holat */}
        <td className="px-5 py-3.5">
          <span
            onClick={() => {
              if (item.state === 'unpaid') setIsPaymentOpen(true);
            }}
            className={item.state === 'unpaid' ? 'cursor-pointer' : ''}
          >
            <StateBadge state={item.state} />
          </span>
        </td>

        {/* Amal */}
        <td className="px-5 py-3.5 text-right">
          <button
            onClick={() => {
              if (item.state === 'unpaid') {
                toast.error("To'lov qilinmagan");
              } else {
                router.push(`/${item.id}`);
              }
            }}
            className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium text-slate-600 bg-white border border-slate-200 hover:border-slate-300 hover:text-slate-900 hover:bg-slate-50 active:scale-95 transition-all duration-150"
          >
            {tUnknown('HistoryPage.view')}
            <ArrowRight size={11} />
          </button>
        </td>
      </tr>

      <PaymentModal
        isOpen={isPaymentOpen}
        onClose={() => setIsPaymentOpen(false)}
        price={price}
        onConfirmPayment={() =>
          payment.mutate({ order_id: Number(item.order_id) })
        }
        isLoading={payment.isPending}
        hasSertificate={item.certificate}
      />
    </>
  );
};