/**
 * CreditNoteSAPModal Component
 * Modal for Step 8: Credit Note from SAP
 * Allows Finance team to review credit note details and send to dealer
 */

import { useState } from 'react';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Label } from '@/components/ui/label';
import { Receipt, CircleCheckBig, Hash, Calendar, DollarSign, Building, FileText, Download, Send } from 'lucide-react';
import { toast } from 'sonner';
import { formatDateTime } from '@/utils/dateFormatter';

interface CreditNoteSAPModalProps {
  isOpen: boolean;
  onClose: () => void;
  onDownload?: () => Promise<void>;
  onSendToDealer?: () => Promise<void>;
  creditNoteData?: {
    creditNoteNumber?: string;
    creditNoteDate?: string;
    creditNoteAmount?: number;
    transactionNo?: string;
    tdsAmount?: number;
    creditAmount?: number;
    status?: 'PENDING' | 'APPROVED' | 'ISSUED' | 'SENT' | 'CONFIRMED';
    items?: Array<{
      slNo: number;
      transactionNo?: string;
      description?: string;
      hsnCd?: string;
      amount?: number;
      claimAmount?: number;
      tdsAmount?: number;
      creditAmount?: number;
    }>;
  };
  dealerInfo?: {
    dealerName?: string;
    dealerCode?: string;
    dealerEmail?: string;
  };
  activityName?: string;
  requestNumber?: string;
  requestId?: string;
  dueDate?: string;
  taxationType?: string | null;
}

export function CreditNoteSAPModal({
  isOpen,
  onClose,
  onDownload,
  onSendToDealer,
  creditNoteData,
  dealerInfo,
  activityName,
  requestNumber,
  requestId: _requestId,
  dueDate,
  taxationType,
}: CreditNoteSAPModalProps) {
  const [downloading, setDownloading] = useState(false);
  const [sending, setSending] = useState(false);

  const isNonGst = taxationType === 'Non GST' || taxationType === 'Non-GST';

  const hasCreditNote = creditNoteData?.creditNoteNumber && creditNoteData?.creditNoteNumber !== '';
  const creditNoteNumber = creditNoteData?.creditNoteNumber || '';
  const creditNoteDate = creditNoteData?.creditNoteDate
    ? formatDateTime(creditNoteData.creditNoteDate, { includeTime: false, format: 'short' })
    : '';
  const creditNoteAmount = creditNoteData?.creditNoteAmount || 0;
  const transactionNo = creditNoteData?.transactionNo || '';
  const tdsAmount = creditNoteData?.tdsAmount || 0;
  const creditAmount = creditNoteData?.creditAmount || 0;
  const status = creditNoteData?.status || 'PENDING';
  const items = creditNoteData?.items || [];

  const dealerName = dealerInfo?.dealerName || 'Jaipur Royal Enfield';
  const dealerCode = dealerInfo?.dealerCode || 'RE-JP-009';
  const activity = activityName || 'Activity';
  const requestIdDisplay = requestNumber || 'RE-REQ-2024-CM-101';
  const dueDateDisplay = dueDate
    ? formatDateTime(dueDate, { includeTime: false, format: 'short' })
    : 'Jan 4, 2026';

  // Calculate Transaction Display (Single or Range)
  const transactionDisplay = (() => {
    if (items.length > 1) {
      const firstCode = items[0]?.transactionNo;
      const lastCode = items[items.length - 1]?.transactionNo;
      if (firstCode && lastCode && firstCode !== lastCode) {
        return `${firstCode} - ${lastCode}`;
      }
      return firstCode || transactionNo || 'N/A';
    }
    return transactionNo || 'N/A';
  })();

  const handleDownload = async () => {
    if (onDownload) {
      try {
        setDownloading(true);
        await onDownload();
        toast.success('Credit note downloaded successfully');
      } catch (error) {
        console.error('Failed to download credit note:', error);
        toast.error('Failed to download credit note. Please try again.');
      } finally {
        setDownloading(false);
      }
    } else {
      // Default behavior: show info message
      toast.info('Credit note will be automatically saved to Documents tab');
    }
  };

  const handleSendToDealer = async () => {
    if (onSendToDealer) {
      try {
        setSending(true);
        await onSendToDealer();
        toast.success('Credit note sent to dealer successfully');
        onClose();
      } catch (error) {
        console.error('Failed to send credit note to dealer:', error);
        toast.error('Failed to send credit note. Please try again.');
      } finally {
        setSending(false);
      }
    } else {
      // Default behavior: show info message
      toast.info('Email notification will be sent to dealer with credit note attachment');
    }
  };

  const formatCurrency = (amount: number) => {
    return `₹${amount.toLocaleString('en-IN', { minimumFractionDigits: 0, maximumFractionDigits: 0 })}`;
  };

  return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="sm:max-w-lg lg:max-w-[1000px] max-w-4xl max-h-[90vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle className="font-semibold flex items-center gap-2 text-2xl flex-wrap">
            <div className="flex items-center gap-2">
              <Receipt className="w-6 h-6 text-[--re-green]" />
              Credit Note Details
            </div>
            {taxationType && (
              <Badge className={`ml-2 border-none shadow-sm ${!isNonGst ? 'bg-emerald-600 text-white hover:bg-emerald-700' : 'bg-indigo-600 text-white hover:bg-indigo-700'}`}>
                {!isNonGst ? 'GST Claim' : 'Non-GST Claim'}
              </Badge>
            )}
          </DialogTitle>
          <DialogDescription className="text-base">
            Review and send credit note to dealer
          </DialogDescription>
        </DialogHeader>

        <div className="space-y-5 py-4">
          {hasCreditNote ? (
            <>
              {/* Credit Note Document Card */}
              <div className="bg-gradient-to-r from-green-50 to-emerald-50 border-2 border-green-200 rounded-lg p-6">
                <div className="flex items-center justify-between mb-4">
                  <div>
                    <h3 className="font-semibold text-green-900 text-xl mb-1">Royal Enfield</h3>
                    <p className="text-sm text-green-700">Credit Note Document</p>
                  </div>
                  <Badge className="bg-green-600 text-white px-4 py-2 text-base">
                    <CircleCheckBig className="w-4 h-4 mr-2" />
                    {status === 'APPROVED' ? 'Approved' : status === 'ISSUED' ? 'Issued' : status === 'SENT' ? 'Sent' : 'Confirmed'}
                  </Badge>
                </div>
                <div className="grid grid-cols-2 md:grid-cols-3 gap-4 mt-4">
                  <div className="bg-white rounded-lg p-3 border border-green-100 shadow-sm">
                    <Label className="font-medium text-[10px] text-gray-500 uppercase tracking-wider flex items-center gap-1">
                      <Hash className="w-3 h-3" />
                      Credit Note No
                    </Label>
                    <p className="font-bold text-gray-900 mt-1">{creditNoteNumber}</p>
                  </div>
                  <div className="bg-white rounded-lg p-3 border border-green-100 shadow-sm">
                    <Label className="font-medium text-[10px] text-gray-500 uppercase tracking-wider flex items-center gap-1">
                      <Calendar className="w-3 h-3" />
                      Issue Date
                    </Label>
                    <p className="font-semibold text-gray-900 mt-1">{creditNoteDate}</p>
                  </div>
                  <div className="bg-white rounded-lg p-3 border border-green-100 shadow-sm col-span-2 md:col-span-1">
                    <Label className="font-medium text-[10px] text-gray-500 uppercase tracking-wider flex items-center gap-1">
                      <FileText className="w-3 h-3" />
                      Transaction ID
                    </Label>
                    <p className="font-bold text-emerald-700 mt-1 break-all">{transactionDisplay}</p>
                  </div>
                </div>
              </div>

              {/* Financial Summary */}
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div className="bg-blue-50 border-2 border-blue-200 rounded-lg p-4">
                  <Label className="font-medium text-[10px] text-gray-600 uppercase tracking-wider flex items-center gap-1 mb-2">
                    <DollarSign className="w-3 h-3" />
                    Gross Amount
                  </Label>
                  <p className="text-2xl font-bold text-blue-700">{formatCurrency(creditNoteAmount)}</p>
                </div>
                <div className="bg-orange-50 border-2 border-orange-200 rounded-lg p-4">
                  <Label className="font-medium text-[10px] text-gray-600 uppercase tracking-wider flex items-center gap-1 mb-2">
                    <DollarSign className="w-3 h-3" />
                    TDS Amount
                  </Label>
                  <p className="text-2xl font-bold text-orange-700">{formatCurrency(tdsAmount)}</p>
                </div>
                <div className="bg-emerald-50 border-2 border-emerald-200 rounded-lg p-4">
                  <Label className="font-medium text-[10px] text-gray-600 uppercase tracking-wider flex items-center gap-1 mb-2">
                    <DollarSign className="w-3 h-3" />
                    Net Credit Amount
                  </Label>
                  <p className="text-2xl font-bold text-emerald-700">{formatCurrency(creditAmount)}</p>
                </div>
              </div>

              {/* Line Items Section */}
              {items && items.length > 0 && (
                <div className="border border-slate-200 rounded-lg overflow-hidden mt-2">
                  <div className="bg-slate-50 px-4 py-2 border-b border-slate-200 flex items-center justify-between">
                    <h4 className="font-semibold text-slate-900 text-sm flex items-center gap-2">
                      <FileText className="w-4 h-4 text-slate-500" />
                      Line Item Breakdown
                    </h4>
                    <Badge variant="outline" className="text-[10px] font-medium uppercase tracking-wider">
                      {items.length} {items.length === 1 ? 'Item' : 'Items'}
                    </Badge>
                  </div>
                  <div className="max-h-60 overflow-y-auto">
                    <table className="w-full text-sm text-left border-collapse">
                      <thead className="bg-white sticky top-0 shadow-sm z-10">
                        <tr className="border-b border-slate-200">
                          <th className="px-4 py-2.5 font-semibold text-slate-700 text-[11px] uppercase whitespace-nowrap">Sl No</th>
                          <th className="px-4 py-2.5 font-semibold text-slate-700 text-[11px] uppercase whitespace-nowrap">Transaction Code</th>
                          <th className="px-4 py-2.5 font-semibold text-slate-700 text-[11px] uppercase whitespace-nowrap">HSN/SAC</th>
                          <th className="px-4 py-2.5 font-semibold text-slate-700 text-[11px] uppercase whitespace-nowrap text-right">Claim Amount</th>
                          <th className="px-4 py-2.5 font-semibold text-slate-700 text-[11px] uppercase whitespace-nowrap text-right">TDS</th>
                          <th className="px-4 py-2.5 font-semibold text-slate-700 text-[11px] uppercase whitespace-nowrap text-right">Net Credit</th>
                        </tr>
                      </thead>
                      <tbody>
                        {items.map((item, idx) => (
                          <tr key={idx} className="border-b border-slate-100 hover:bg-slate-50/50 transition-colors">
                            <td className="px-4 py-2.5 text-slate-600">{item.slNo}</td>
                            <td className="px-4 py-2.5 font-medium text-slate-900 font-mono text-[11px]">{item.transactionNo || 'N/A'}</td>
                            <td className="px-4 py-2.5 text-slate-600">{item.hsnCd || 'N/A'}</td>
                            <td className="px-4 py-2.5 text-right font-medium text-slate-700">{formatCurrency(item.claimAmount || 0)}</td>
                            <td className="px-4 py-2.5 text-right text-orange-600 font-medium">{formatCurrency(item.tdsAmount || 0)}</td>
                            <td className="px-4 py-2.5 text-right text-emerald-700 font-bold">{formatCurrency(item.creditAmount || 0)}</td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                  </div>
                </div>
              )}
            </>
          ) : (
            /* No Credit Note Available */
            <div className="bg-gray-50 border-2 border-gray-300 rounded-lg p-8 text-center">
              <div className="flex flex-col items-center justify-center space-y-4">
                <div className="w-16 h-16 bg-gray-200 rounded-full flex items-center justify-center">
                  <Receipt className="w-8 h-8 text-gray-400" />
                </div>
                <div>
                  <h3 className="text-lg font-semibold text-gray-700 mb-2">No Credit Note Available</h3>
                  <p className="text-sm text-gray-500">
                    Credit note has not been generated yet. Please wait for the credit note to be generated from DMS.
                  </p>
                </div>
              </div>
            </div>
          )}

          {/* Dealer Information */}
          <div className="bg-purple-50 border-2 border-purple-200 rounded-lg p-5">
            <h3 className="font-semibold text-purple-900 mb-4 flex items-center gap-2">
              <Building className="w-5 h-5" />
              Dealer Information
            </h3>
            <div className="grid grid-cols-2 gap-4">
              <div className="bg-white rounded-lg p-3 border border-purple-100">
                <Label className="flex items-center gap-2 font-medium text-xs text-gray-600 uppercase tracking-wider">
                  Dealer Name
                </Label>
                <p className="font-semibold text-gray-900 mt-1">{dealerName}</p>
              </div>
              <div className="bg-white rounded-lg p-3 border border-purple-100">
                <Label className="flex items-center gap-2 font-medium text-xs text-gray-600 uppercase tracking-wider">
                  Dealer Code
                </Label>
                <p className="font-semibold text-gray-900 mt-1">{dealerCode}</p>
              </div>
              <div className="bg-white rounded-lg p-3 border border-purple-100">
                <Label className="flex items-center gap-2 font-medium text-xs text-gray-600 uppercase tracking-wider">
                  Activity
                </Label>
                <p className="font-semibold text-gray-900 mt-1">{activity}</p>
              </div>
            </div>
          </div>

          {/* Reference Details */}
          <div className="bg-gray-50 border border-gray-200 rounded-lg p-4">
            <h3 className="font-semibold text-gray-900 mb-3 flex items-center gap-2">
              <FileText className="w-4 h-4" />
              Reference Details
            </h3>
            <div className="grid grid-cols-2 gap-3 text-sm">
              <div>
                <Label className="flex items-center gap-2 font-medium text-xs text-gray-600">
                  Request ID
                </Label>
                <p className="font-medium text-gray-900 mt-1">{requestIdDisplay}</p>
              </div>
              <div>
                <Label className="flex items-center gap-2 font-medium text-xs text-gray-600">
                  Due Date
                </Label>
                <p className="font-medium text-gray-900 mt-1">{dueDateDisplay}</p>
              </div>
            </div>
          </div>

          {/* Available Actions Info */}
          <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 flex items-start gap-3">
            <FileText className="w-5 h-5 text-blue-600 flex-shrink-0 mt-0.5" />
            <div className="text-sm text-blue-800">
              <p className="font-semibold mb-2">Available Actions</p>
              <ul className="list-disc list-inside space-y-1 text-xs">
                <li>
                  <strong>Download:</strong> Credit note will be automatically saved to Documents tab
                </li>
                <li>
                  <strong>Send to Dealer:</strong> Email notification will be sent to dealer with credit note attachment
                </li>
                <li>All actions will be recorded in activity trail for audit purposes</li>
              </ul>
            </div>
          </div>
        </div>

        <DialogFooter className="flex-col-reverse gap-2 sm:flex-row flex items-center justify-between sm:justify-between">
          <Button
            variant="outline"
            onClick={onClose}
            disabled={downloading || sending}
            className="border-2"
          >
            Close
          </Button>
          <div className="flex gap-2">
            {hasCreditNote && (
              <>
                <Button
                  variant="outline"
                  onClick={handleDownload}
                  disabled={downloading || sending}
                  className="border-blue-600 text-blue-600 hover:bg-blue-50"
                >
                  <Download className="w-4 h-4 mr-2" />
                  {downloading ? 'Downloading...' : 'Download'}
                </Button>
                <Button
                  onClick={handleSendToDealer}
                  disabled={downloading || sending}
                  className="bg-green-600 hover:bg-green-700 text-white shadow-md"
                >
                  <Send className="w-4 h-4 mr-2" />
                  {sending ? 'Sending...' : 'Send to Dealer'}
                </Button>
              </>
            )}
          </div>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}
