'use client';

import React, { useState, useRef } from 'react';
import CommonImage from '@/components/common/CommonImage';
import { ConfirmDialog } from '../ConfirmDialog';
import { useToast } from '@/hooks/use-toast';
import { exportToCSV } from '@/utils/exportCsv';
import { globalApiPost } from '@/services/global/globalApiCalls';
import { store } from '@/store/store';
import { BucketProp, TableDataProps, UnknownRecord } from '@/types';
import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogTitle,
} from '@/components/ui/dialog';
import { RECORDS_PER_EXPORT } from '@/constants';
import { formatDate } from '@/utils/decorators';

interface DownloadButtonProps extends BucketProp {
  tableData: TableDataProps;
  total: number;
}

const DownloadButton = ({ bucket, total }: DownloadButtonProps) => {
  const [mainOpen, setMainOpen] = useState(false);
  const confirmTriggerRef = useRef<HTMLButtonElement>(null);
  const [selectedRange, setSelectedRange] = useState<[number, number] | null>(
    null,
  );
  const [page, setPage] = useState<number>(0);
  const [allExported, setAllExported] = useState<boolean>(false);
  const [exportedPages, setExportedPages] = useState<number[]>([]);
  const [currentPageIndex, setCurrentPageIndex] = useState<number | null>(null);
  const { toast } = useToast();

  const RECORDS_TOTAL = total;
  const totalPages = Math.ceil(RECORDS_TOTAL / RECORDS_PER_EXPORT);

  const handleExportCsv = async (exportPage: number) => {
    try {
      const baseParams =
        store.getState().filters.arguments || bucket?.default_params || {};

      const response = (await globalApiPost(
        bucket?.crud?.view?.endpoint || '',
        {
          ...baseParams,
          page: exportPage,
          per_page: RECORDS_PER_EXPORT,
          is_csv: true,
        },
      )) as UnknownRecord & { list: unknown[] };
      const date = new Date().toString();
      console.log({ date });
      const filename = `${bucket.heading.replace(' ', '-')}-${formatDate(date, 'YYYY-MM-DD-hh-mm-ss-A')}${exportPage > 0 ? `-Sheet-${exportPage}` : ''}.csv`;
      const dataList = response?.list;

      if (!Array.isArray(dataList) || dataList.length === 0) {
        throw new Error('No data to export');
      }

      const columns = store.getState().tableSettings.data;
      const exported = exportToCSV(
        dataList as UnknownRecord[],
        columns,
        bucket,
        filename,
      );

      if (exported === null) {
        throw new Error('No data to export');
      }

      toast({
        variant: 'success',
        title: 'CSV file downloaded successfully.',
        duration: 2000,
      });

      if (
        currentPageIndex !== null &&
        !exportedPages.includes(currentPageIndex)
      ) {
        setExportedPages((prev) => [...prev, currentPageIndex]);
      }
    } catch (error) {
      const message = error instanceof Error ? error.message : String(error);
      console.error('CSV Export Error:', message);
      toast({ variant: 'destructive', title: message, duration: 2000 });
    }
  };

  const handleRangeClick = (start: number, end: number) => {
    setSelectedRange([start, end]);
    setMainOpen(true);
    setTimeout(() => confirmTriggerRef.current?.click(), 100);
  };

  const handleExportAllCsvSheets = async () => {
    for (let i = 0; i < totalPages; i++) {
      setCurrentPageIndex(i);
      setPage(i + 1);
      await handleExportCsv(i + 1);
      setExportedPages((prev) => [...prev, i]);
    }
    setAllExported(true);
  };

  return (
    <>
      {RECORDS_TOTAL > RECORDS_PER_EXPORT ? (
        <>
          <Dialog open={mainOpen} onOpenChange={setMainOpen}>
            <DialogTrigger asChild>
              <button
                aria-label="Export to CSV"
                className="download-icn wo-fts-filter-bts flex justify-content items-start"
                onClick={() => {
                  setExportedPages([]);
                  setAllExported(false);
                }}
              >
                <CommonImage
                  src="/main/download-icn.webp"
                  width={20}
                  height={20}
                  alt="Export CSV"
                  classname="refresh-icon"
                />
              </button>
            </DialogTrigger>

            <DialogContent
              className="max-w-4xl p-0 pb-0 m-0 dialog-box-bg export-sheets-modal"
              onInteractOutside={(e) => e.preventDefault()}
              onEscapeKeyDown={(e) => e.preventDefault()}
            >
              <DialogTitle className="text-xl font-bold pb-2 modal-header">
                Export sheets
                {!allExported && (
                  <ConfirmDialog
                    message="You want to export all CSV sheets!"
                    onConfirm={handleExportAllCsvSheets}
                    trigger={
                      <button className="download-all-button">
                        {' '}
                        - Export All
                      </button>
                    }
                  />
                )}
              </DialogTitle>

              <div className="space-y-2 max-h-96 overflow-y-auto p-2 m-0 dialog-box-body">
                {Array.from({ length: totalPages }, (_, i) => {
                  const start = i * RECORDS_PER_EXPORT + 1;
                  const end = Math.min(
                    (i + 1) * RECORDS_PER_EXPORT,
                    RECORDS_TOTAL,
                  );

                  return (
                    <div
                      key={i}
                      className="flex justify-between items-center border border-area p-2 rounded"
                    >
                      <span>
                        Export records from {start} to {end}
                      </span>

                      <button
                        className={`p-4 py-2 rounded export-sheet-button ${
                          exportedPages.includes(i)
                            ? 'bg-gray-400 cursor-not-allowed'
                            : 'bg-black text-white hover:bg-gray-900'
                        }`}
                        onClick={() => {
                          setCurrentPageIndex(i);
                          setPage(i);
                          handleRangeClick(start, end);
                        }}
                        disabled={exportedPages.includes(i)}
                      >
                        {exportedPages.includes(i)
                          ? `Exported Sheet: ${i + 1}`
                          : `Export Sheet: ${i + 1}`}
                      </button>
                    </div>
                  );
                })}
              </div>
            </DialogContent>
          </Dialog>

          <ConfirmDialog
            message={
              selectedRange
                ? `Export records from ${selectedRange[0]} to ${selectedRange[1]} into CSV?`
                : 'Export as CSV?'
            }
            onConfirm={() => handleExportCsv(page + 1)}
            trigger={
              <button ref={confirmTriggerRef} style={{ display: 'none' }} />
            }
          />
        </>
      ) : (
        <ConfirmDialog
          message="You want to export CSV!"
          onConfirm={() => handleExportCsv(1)}
          trigger={
            <button
              aria-label="Export to CSV"
              className="download-icn wo-fts-filter-bts flex justify-content items-start"
            >
              <CommonImage
                src="/main/download-icn.webp"
                width={20}
                height={20}
                alt="Export CSV"
                classname="refresh-icon"
              />
            </button>
          }
        />
      )}
    </>
  );
};

export default DownloadButton;