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

interface LogType {
  id: string;
  amount: number;
  remark: string;
  reference: string;
  response_date: string;
  status: string;
  customer?: {
    username: string;
    fullname: string;
  };
  payment_response?: string;
}

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 >
							{/* Tab Content */}
							{detailLogData && detailLogData != null ? (
								<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">ID</td>
														<td className="px-4 py-2 text-sm text-gray-500">{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-500">{detailLogData.customer.username}</td>
													</tr>
													<tr className='border-t'>
														<td className="px-4 py-2 text-sm text-gray-500">Name</td>
														<td className="px-4 py-2 text-sm text-gray-500">{detailLogData.customer.fullname}</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-500">{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-500">{detailLogData.remark}</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-500"><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-500"><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-500">{renderStatusBadge(detailLogData.status)}</td>
													</tr>
													<tr className='border-t'>
														<td className="px-4 py-2 text-sm text-gray-500">Prosess Date</td>
														<td className="px-4 py-2 text-sm text-gray-500">{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-500">{detailLogData.response_date && moment(detailLogData.response_date).isValid() ? moment(detailLogData.response_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">Reference Number</td>
														<td className="px-4 py-2 text-sm text-gray-500">{detailLogData.reference}</td>
													</tr>
												</tbody>
											</table>
										</div>
									</div>
								</div>
							) : (<div></div>)}
            </DialogBody>
        </DialogContent>
    </Dialog>
  );
};

export default TransactionLogViewer;