// disbursement/history-transaction/blocks/DetailTransaction.tsx
import { KeenIcon } from '@/components';
import { useTransactionContext } from '../hooks/useTransactionContext';
import { useCallApi } from '@/hooks';
import { apiConfig } from '@/config/api.config';
import { useEffect, useState } from 'react';
import moment from 'moment';
import { getAuth } from '@/auth';
import { toast } from 'sonner';
import {
  Dialog,
  DialogBody,
  DialogContent,
  DialogHeader,
  DialogTitle
} from '@/components/ui/dialog';

const API_URL = apiConfig.service_disbursement;

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 DetailTransaction = () => {
  const { GetData } = useCallApi();
  const {
    showDetailDialog,
    setShowDetailDialog,
    selectedTransactionId,
    setShowDetailLogDialog,
    setDetailLogData
  } = useTransactionContext();

  const [transactionDetails, setTransactionDetails] = useState<any>(null);
  const [isLoading, setIsLoading] = useState(false);
  const [isExporting, setIsExporting] = useState(false);

  useEffect(() => {
    const fetchTransactionDetails = async () => {
      setIsLoading(true);
      if (selectedTransactionId) {
        try {
          const response = await GetData(
            `${API_URL}/transaction/history/${selectedTransactionId}`,
            {
              id: selectedTransactionId
            }
          );
          setTransactionDetails(response?.data);
        } catch (error) {
          console.error('Error fetching transaction', error);
        } finally {
          setIsLoading(false);
        }
      }
    };

    if (showDetailDialog && selectedTransactionId) {
      fetchTransactionDetails();
    }
  }, [showDetailDialog, selectedTransactionId, GetData]);

  const resetForm = () => {
    setTransactionDetails(null);
  };

  useEffect(() => {
    if (!showDetailDialog) {
      resetForm();
    }
  }, [showDetailDialog]);

  const handleExport = async () => {
    if (!selectedTransactionId || !transactionDetails) return;

    setIsExporting(true);
    try {
      const response = await fetch(
        `${API_URL}/transaction/export?id_disbursment=${selectedTransactionId}`,
        {
          method: 'GET',
          headers: {
            Authorization: `Bearer ${getAuth()?.access_token}`
          }
        }
      );

      if (!response.ok) {
        throw new Error('Failed to fetch file');
      }

      const blob = await response.blob();
      const contentDisposition = response.headers.get('content-disposition');

      const executionDate = transactionDetails.execution_date;
      const formattedDate = executionDate
        ? moment(executionDate).format('YYYYMMDD_HHmm')
        : moment().format('YYYYMMDD_HHmm');

      let filename = `transaction_${formattedDate}.xlsx`;

      if (contentDisposition) {
        const filenameMatch = contentDisposition.match(/filename\*?=(?:UTF-8'')?"?([^;"\n]*)"?/);
        if (filenameMatch && filenameMatch[1]) {
          filename = decodeURIComponent(filenameMatch[1]);
        }
      }

      const url = window.URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = filename;
      a.click();
      window.URL.revokeObjectURL(url);

      toast.success('Export successful');
    } catch (error) {
      console.error('Error exporting transaction:', error);
      toast.error('Failed to export transaction');
    } finally {
      setIsExporting(false);
    }
  };

  return (
    <Dialog open={showDetailDialog} onOpenChange={setShowDetailDialog}>
      <DialogContent className="container-fixed max-w-[1280px] w-full h-[90vh] flex flex-col p-6 overflow-hidden">
        <DialogHeader>
          <DialogTitle className="text-2xl font-bold">Transaction Details</DialogTitle>
        </DialogHeader>
        <DialogBody className="flex flex-col overflow-hidden h-full">
          <div className="py-4 overflow-y-auto max-h-[600px] space-y-6">
            {/* Summary Info */}
            {transactionDetails && (
              <div className="grid grid-cols-2 gap-y-4 gap-x-6 border rounded-lg p-4 bg-gray-50">
                <div>
                  <p className="text-sm text-gray-500">Filename Upload</p>
                  <p className="text-base text-gray-800">{transactionDetails.file_name ?? '-'}</p>
                </div>
                <div>
                  <p className="text-sm text-gray-500">Total Amount</p>
                  <p className="text-base text-gray-800">{transactionDetails.amount ?? '-'}</p>
                </div>
                <div>
                  <p className="text-sm text-gray-500">Total Record</p>
                  <p className="text-base text-gray-800">
                    {transactionDetails.total_record ?? '-'}
                  </p>
                </div>
                <div>
                  <p className="text-sm text-gray-500">Success Record</p>
                  <p className="text-base text-gray-800">
                    {transactionDetails.total_success ?? '-'}
                  </p>
                </div>
                <div>
                  <p className="text-sm text-gray-500">Fail Record</p>
                  <p className="text-base text-gray-800">{transactionDetails.total_fail ?? '-'}</p>
                </div>
                <div>
                  <p className="text-sm text-gray-500">Pending Record</p>
                  <p className="text-base text-gray-800">
                    {transactionDetails.total_pending ?? '-'}
                  </p>
                </div>
                <div>
                  <p className="text-sm text-gray-500">Status</p>
                  <p className="text-base text-gray-800">
                    {renderStatusBadge(transactionDetails.status)}
                  </p>
                </div>
                <div>
                  <p className="text-sm text-gray-500">Execution Date</p>
                  <p className="text-base text-gray-800">
                    {transactionDetails.execution_date
                      ? moment(transactionDetails.execution_date).format('DD/MM/YYYY HH:mm')
                      : '-'}
                  </p>
                </div>
                <div>
                  <p className="text-sm text-gray-500">Done Date</p>
                  <p className="text-base text-gray-800">
                    {transactionDetails.done_date
                      ? moment(transactionDetails.done_date).format('DD/MM/YYYY HH:mm')
                      : '-'}
                  </p>
                </div>
              </div>
            )}

            <div className="border rounded-lg overflow-x-auto">
              {isLoading ? (
                <div className="flex flex-col items-center justify-center p-8">
                  <div className="animate-pulse flex space-x-4 w-full">
                    <div className="flex-1 space-y-4 py-1">
                      <div className="h-4 bg-gray-200 rounded w-3/4"></div>
                      <div className="space-y-2">
                        <div className="h-4 bg-gray-200 rounded"></div>
                        <div className="h-4 bg-gray-200 rounded w-5/6"></div>
                      </div>
                    </div>
                  </div>
                  <p className="mt-4 text-gray-500">Loading Logs Details...</p>
                </div>
              ) : (
                <>
                  <div className="flex justify-end m-5">
                    <button
                      className={`px-5 py-2 bg-green-600 text-white font-semibold rounded-lg hover:bg-green-700 transition-colors flex items-center ${isExporting ? 'opacity-50 pointer-events-none' : ''}`}
                      onClick={() => {
                        if (!isExporting) {
                          handleExport();
                        }
                      }}
                    >
                      {isExporting ? (
                        <>
                          <span className="animate-spin ">
                            <KeenIcon icon="spinner" />
                          </span>
                          Exporting...
                        </>
                      ) : (
                        <>
                          <KeenIcon icon="download" />
                          Export
                        </>
                      )}
                    </button>
                  </div>
                  <div className="max-h-[900px] overflow-y-auto border rounded-lg">
                    <table className="min-w-full table-auto">
                      <thead>
                        <tr className="bg-gray-100">
                          <th className="px-4 py-2 text-left text-sm text-gray-500">Username</th>
                          <th className="px-4 py-2 text-left text-sm text-gray-500">Fullname</th>
                          <th className="px-4 py-2 text-left text-sm text-gray-500">Amount</th>
                          <th className="px-4 py-2 text-left text-sm text-gray-500">Status</th>
                          <th className="px-4 py-2 text-left text-sm text-gray-500">
                            Process Date
                          </th>
                          <th className="px-4 py-2 text-left text-sm text-gray-500">
                            Invoice Number
                          </th>
                          <th className="px-4 py-2 text-left text-sm text-gray-500">Remark 1</th>
                          <th className="px-4 py-2 text-left text-sm text-gray-500">Remark 2</th>
                          <th className="px-4 py-2 text-left text-sm text-gray-500">Remark 3</th>
                          <th className="px-4 py-2 text-left text-sm text-gray-500">Actions</th>
                        </tr>
                      </thead>
                      <tbody>
                        {transactionDetails?.log && transactionDetails.log.length > 0 ? (
                          transactionDetails.log.map((log: any, index: number) => (
                            <tr key={index} className="border-t">
                              <td className="px-4 py-2 text-sm text-gray-500">
                                {log.customer?.username ?? 'Not Found'}
                              </td>
                              <td className="px-4 py-2 text-sm text-gray-500">
                                {log.customer?.fullname ?? 'Not Found'}
                              </td>
                              <td className="px-4 py-2 text-sm text-gray-500">
                                {log.amount ?? '-'}
                              </td>
                              <td className="px-4 py-2 text-sm text-gray-500">
                                {renderStatusBadge(log.status) ?? '-'}
                              </td>
                              <td className="px-4 py-2 text-sm text-gray-500">
                                {log.request_date && moment(log.request_date).isValid()
                                  ? moment(log.request_date).format('DD/MM/YYYY HH:mm')
                                  : '-'}
                              </td>
                              <td className="px-4 py-2 text-sm text-gray-500">
                                {log.reference ?? '-'}
                              </td>
                              <td className="px-4 py-2 text-sm text-gray-500">
                                {log.remark_1 ?? '-'}
                              </td>
                              <td className="px-4 py-2 text-sm text-gray-500">
                                {log.remark_2 ?? '-'}
                              </td>
                              <td className="px-4 py-2 text-sm text-gray-500">
                                {log.remark_3 ?? '-'}
                              </td>
                              <td className="px-4 py-2 text-sm text-gray-500">
                                <button
                                  className="btn btn-sm btn-icon btn-clear btn-light"
                                  onClick={() => {
                                    setDetailLogData(log);
                                    setShowDetailLogDialog(true);
                                  }}
                                >
                                  <KeenIcon icon="eye" />
                                </button>
                              </td>
                            </tr>
                          ))
                        ) : (
                          <tr>
                            <td
                              colSpan={10}
                              className="px-4 py-2 text-center text-sm text-gray-500"
                            >
                              No logs available
                            </td>
                          </tr>
                        )}
                      </tbody>
                    </table>
                  </div>
                </>
              )}
            </div>
          </div>
        </DialogBody>
      </DialogContent>
    </Dialog>
  );
};

export default DetailTransaction;