'use client';

import React, { useState, useCallback } from 'react';
import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogTitle,
  DialogClose,
} from '@/components/ui/dialog';
import CommonImage from '@/components/common/CommonImage';
import { Text } from '@/components/ui/text';
import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
import { Button } from '@/components/ui/button';
import { globalApiGet } from '@/services/global/globalApiCalls';
import { API_ENDPOINTS } from '@/constants';
import { UnknownRecord, fnAny } from '@/types';
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from '@/components/ui/accordion';
import { COMMON_DECORATORS, formatDate } from '@/utils/decorators';
import { HistoryTable } from './HistoryTable';
import DataNotFound from '@/components/errors/DataNotFound';

type ViewHistoryButtonProps = {
  triggerIcon?: React.ReactNode;
  record: UnknownRecord;
  setActiveRow: fnAny;
};

const ViewHistoryButton: React.FC<ViewHistoryButtonProps> = ({
  triggerIcon,
  record,
  setActiveRow,
}) => {
  const [isDialogOpen, setIsDialogOpen] = useState(false);
  const [history, setHistory] = useState<UnknownRecord[]>([]);

  const handleOnOpen = useCallback(async () => {
    try {
      const historyData = await globalApiGet<UnknownRecord>(
        `${API_ENDPOINTS.VCM.COMMISSION_CONTRACT_EDIT_HISTORY}/${record.id}`,
      );
      setHistory(Array.isArray(historyData) ? historyData : []);
      setIsDialogOpen(true);
    } catch (error) {
      console.error('Failed to load history:', error);
    }
  }, [record.id]);

  const handleClose = () => {
    setIsDialogOpen(false);
    setActiveRow(null);
  };

  return (
    <Dialog open={isDialogOpen} onOpenChange={(open) => !open && handleClose()}>
      <DialogTrigger asChild>
        {triggerIcon || (
          <Button className="button-action" onClick={handleOnOpen}>
            <CommonImage
              src="/main/total-record.png"
              width={15}
              height={15}
              alt="View History"
              classname="info-icon"
            />
          </Button>
        )}
      </DialogTrigger>

      <DialogContent
        className="modal-common-widget w-full max-w-7xl p-0 m-0 table-modal-settings state-widget"
        onInteractOutside={(e) => e.preventDefault()}
        onEscapeKeyDown={(e) => e.preventDefault()}
        onClick={(e) => e.stopPropagation()}
        data-dialog-id="history-dialog"
      >
        <DialogTitle className="p-5 modal-header">
          Commission Contract History
        </DialogTitle>

        <DialogClose asChild>
          <button
            className="dialog-close absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none"
            aria-label="Close"
            onClick={handleClose}
          >
            <CommonImage
              src="/main/cross-arrow.webp"
              width={15}
              height={15}
              alt="Close"
              classname="dialog-close-img"
            />
          </button>
        </DialogClose>

        <VisuallyHidden>
          <DialogTitle>History Dialog</DialogTitle>
        </VisuallyHidden>

        <Text className="main-scroll-widget p-2">
          {history.length > 0 ? (
            <Accordion type="single" collapsible>
              {history.map((row, index) => (
                <AccordionItem key={index} value={`item-${index}`}>
                  <AccordionTrigger>
                    Edited on:{' '}
                    <strong>
                      {formatDate(
                        row.created as string,
                        'DD-MM-YYYY hh:mm:ss A',
                      )}{' '}
                      by {COMMON_DECORATORS.by_user(row, 'by_user')}
                    </strong>
                    {/* <span className="text-red-600 pl-1">*</span> */}
                  </AccordionTrigger>
                  <AccordionContent>
                    <HistoryTable record={row as any} />
                  </AccordionContent>
                </AccordionItem>
              ))}
            </Accordion>
          ) : (
            <div className="flex justify-center items-center">
              <DataNotFound />
            </div>
          )}
        </Text>
      </DialogContent>
    </Dialog>
  );
};

export default ViewHistoryButton;