import React from 'react';
import moment from 'moment';
import { useTransactionContext } from '../hooks/useTransactionContext';
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogBody
} from '@/components/ui/dialog';

type StatusCode = 'W' | 'O' | 'F' | 'D';

interface StatusInfo {
  label: string;
  bg: string;
  text: string;
}

const statusMap: Record<StatusCode, StatusInfo> = {
  W: { label: 'Waiting Schedule', bg: 'bg-yellow-100', text: 'text-yellow-600' },
  O: { label: 'On Process', bg: 'bg-blue-100', text: 'text-blue-600' },
  F: { label: 'Fail', bg: 'bg-red-100', text: 'text-red-600' },
  D: { label: 'Done', bg: 'bg-green-100', text: 'text-green-600' }
};

export const renderStatusBadge = (statusRaw: string | null | undefined) => {
  const status = statusRaw as StatusCode;
  const { label, bg, text } = statusMap[status] ?? {
    label: 'Unknown',
    bg: 'bg-gray-100',
    text: 'text-gray-600'
  };

  return (
    <span className={`px-2 py-1 text-xs font-semibold rounded-full ${bg} ${text}`}>{label}</span>
  );
};

const TransactionLogViewer = () => {
  const { showDetailLogDialog, setShowDetailLogDialog, detailLogData } = useTransactionContext();

  return (
    <Dialog open={showDetailLogDialog} onOpenChange={setShowDetailLogDialog}>
      <DialogContent className="container-fixed max-w-[1280px] w-full h-[90vh] flex flex-col p-6 overflow-hidden">
        <DialogHeader>
          <DialogTitle>Detail Record</DialogTitle>
        </DialogHeader>
        <DialogBody className="overflow-y-auto max-h-[70vh] scroll-smooth scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-100">
          {detailLogData ? (
            <div className="py-4 overflow-y-auto">
              <div className="space-y-4">
                <div className="border rounded-lg overflow-x-auto">
                  <table className="min-w-full table-auto">
                    <tbody>
                      <tr className="border-t">
                        <td className="px-4 py-2 text-sm text-gray-500">Log ID</td>
                        <td className="px-4 py-2 text-sm text-gray-800">{detailLogData.id}</td>
                      </tr>
                      {detailLogData.customer && (
                        <>
                          <tr className="border-t">
                            <td className="px-4 py-2 text-sm text-gray-500">Customer ID</td>
                            <td className="px-4 py-2 text-sm text-gray-800">
                              {detailLogData.customer.id}
                            </td>
                          </tr>
                          <tr className="border-t">
                            <td className="px-4 py-2 text-sm text-gray-500">Username</td>
                            <td className="px-4 py-2 text-sm text-gray-800">
                              {detailLogData.customer.username}
                            </td>
                          </tr>
                          <tr className="border-t">
                            <td className="px-4 py-2 text-sm text-gray-500">Fullname</td>
                            <td className="px-4 py-2 text-sm text-gray-800">
                              {detailLogData.customer.fullname}
                            </td>
                          </tr>
                          {detailLogData.customer.email && (
                            <tr className="border-t">
                              <td className="px-4 py-2 text-sm text-gray-500">Email</td>
                              <td className="px-4 py-2 text-sm text-gray-800">
                                {detailLogData.customer.email}
                              </td>
                            </tr>
                          )}
                          {detailLogData.customer.bank_name && (
                            <tr className="border-t">
                              <td className="px-4 py-2 text-sm text-gray-500">Bank Name</td>
                              <td className="px-4 py-2 text-sm text-gray-800">
                                {detailLogData.customer.bank_name}
                              </td>
                            </tr>
                          )}
                          {detailLogData.customer.bank_account && (
                            <tr className="border-t">
                              <td className="px-4 py-2 text-sm text-gray-500">Bank Account</td>
                              <td className="px-4 py-2 text-sm text-gray-800">
                                {detailLogData.customer.bank_account}
                              </td>
                            </tr>
                          )}
                        </>
                      )}

                      <tr className="border-t">
                        <td className="px-4 py-2 text-sm text-gray-500">Amount</td>
                        <td className="px-4 py-2 text-sm text-gray-800">{detailLogData.amount}</td>
                      </tr>
                      <tr className="border-t">
                        <td className="px-4 py-2 text-sm text-gray-500">Remark</td>
                        <td className="px-4 py-2 text-sm text-gray-800">{detailLogData.remark}</td>
                      </tr>
                      <tr className="border-t">
                        <td className="px-4 py-2 text-sm text-gray-500">Remark 1</td>
                        <td className="px-4 py-2 text-sm text-gray-800">
                          {detailLogData.remark_1}
                        </td>
                      </tr>
                      <tr className="border-t">
                        <td className="px-4 py-2 text-sm text-gray-500">Remark 2</td>
                        <td className="px-4 py-2 text-sm text-gray-800">
                          {detailLogData.remark_2}
                        </td>
                      </tr>
                      <tr className="border-t">
                        <td className="px-4 py-2 text-sm text-gray-500">Remark 3</td>
                        <td className="px-4 py-2 text-sm text-gray-800">
                          {detailLogData.remark_3}
                        </td>
                      </tr>
                      <tr className="border-t">
                        <td className="px-4 py-2 text-sm text-gray-500">Reference Number</td>
                        <td className="px-4 py-2 text-sm text-gray-800">
                          {detailLogData.reference ?? '-'}
                        </td>
                      </tr>
                      <tr className="border-t">
                        <td className="px-4 py-2 text-sm text-gray-500">Payment Request</td>
                        <td className="px-4 py-2 text-sm text-gray-800">
                          <pre className="whitespace-pre-wrap break-words max-w-full overflow-auto bg-gray-100 p-2 rounded text-sm">
                            {detailLogData.payment_request ?? '-'}
                          </pre>
                        </td>
                      </tr>
                      <tr className="border-t">
                        <td className="px-4 py-2 text-sm text-gray-500">Payment Response</td>
                        <td className="px-4 py-2 text-sm text-gray-800">
                          <pre className="whitespace-pre-wrap break-words max-w-full overflow-auto bg-gray-100 p-2 rounded text-sm">
                            {detailLogData.payment_response ?? '-'}
                          </pre>
                        </td>
                      </tr>
                      <tr className="border-t">
                        <td className="px-4 py-2 text-sm text-gray-500">Status</td>
                        <td className="px-4 py-2 text-sm text-gray-800">
                          {renderStatusBadge(detailLogData.status)}
                        </td>
                      </tr>
                      <tr className="border-t">
                        <td className="px-4 py-2 text-sm text-gray-500">Request Date</td>
                        <td className="px-4 py-2 text-sm text-gray-800">
                          {detailLogData.request_date &&
                          moment(detailLogData.request_date).isValid()
                            ? moment(detailLogData.request_date).format('DD/MM/YYYY HH:mm:ss')
                            : '-'}
                        </td>
                      </tr>
                      <tr className="border-t">
                        <td className="px-4 py-2 text-sm text-gray-500">Response Date</td>
                        <td className="px-4 py-2 text-sm text-gray-800">
                          {detailLogData.response_date &&
                          moment(detailLogData.response_date).isValid()
                            ? moment(detailLogData.response_date).format('DD/MM/YYYY HH:mm:ss')
                            : '-'}
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          ) : (
            <div className="text-center text-sm text-gray-400 py-10">No data available</div>
          )}
        </DialogBody>
      </DialogContent>
    </Dialog>
  );
};

export default TransactionLogViewer;
