/**
 * DeptLeadIOApprovalModal Component
 * Modal for Step 3: Dept Lead Approval and IO Organization
 * Allows department lead to approve request and organize IO details
 */

import { useState, useMemo } from 'react';
import * as React from 'react';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';
import { Badge } from '@/components/ui/badge';
import { CircleCheckBig, CircleX, Receipt, TriangleAlert } from 'lucide-react';
import { toast } from 'sonner';
import './DeptLeadIOApprovalModal.css';

interface DeptLeadIOApprovalModalProps {
  isOpen: boolean;
  onClose: () => void;
  onApprove: (data: {
    ioNumber: string;
    comments: string;
  }) => Promise<void>;
  onReject: (comments: string) => Promise<void>;
  requestTitle?: string;
  requestId?: string;
  // Pre-filled IO data from IO table
  preFilledIONumber?: string;
  preFilledBlockedAmount?: number;
  preFilledRemainingBalance?: number;
}

export function DeptLeadIOApprovalModal({
  isOpen,
  onClose,
  onApprove,
  onReject,
  requestTitle,
  requestId: _requestId,
  preFilledIONumber,
  preFilledBlockedAmount,
  preFilledRemainingBalance,
}: DeptLeadIOApprovalModalProps) {
  const [actionType, setActionType] = useState<'approve' | 'reject'>('approve');
  const [comments, setComments] = useState('');
  const [submitting, setSubmitting] = useState(false);

  // Get IO number from props (read-only, from IO table)
  const ioNumber = preFilledIONumber || '';

  // Reset form when modal opens/closes
  React.useEffect(() => {
    if (isOpen) {
      setComments('');
      setActionType('approve');
    }
  }, [isOpen]);

  const commentsChars = comments.length;
  const maxCommentsChars = 500;

  // Validate form
  const isFormValid = useMemo(() => {
    if (actionType === 'reject') {
      return comments.trim().length > 0;
    }
    // For approve, need IO number (from table) and comments
    return (
      ioNumber.trim().length > 0 && // IO number must exist from IO table
      comments.trim().length > 0
    );
  }, [actionType, ioNumber, comments]);

  const handleSubmit = async () => {
    if (!isFormValid) {
      if (actionType === 'approve') {
        if (!ioNumber.trim()) {
          toast.error('IO number is required. Please block amount from IO tab first.');
          return;
        }
      }
      if (!comments.trim()) {
        toast.error('Please provide comments');
        return;
      }
      return;
    }

    try {
      setSubmitting(true);
      
      if (actionType === 'approve') {
        await onApprove({
          ioNumber: ioNumber.trim(),
          comments: comments.trim(),
        });
      } else {
        await onReject(comments.trim());
      }
      
      handleReset();
      onClose();
    } catch (error) {
      console.error(`Failed to ${actionType} request:`, error);
      toast.error(`Failed to ${actionType} request. Please try again.`);
    } finally {
      setSubmitting(false);
    }
  };

  const handleReset = () => {
    setActionType('approve');
    setComments('');
  };

  const handleClose = () => {
    if (!submitting) {
      handleReset();
      onClose();
    }
  };

  return (
    <Dialog open={isOpen} onOpenChange={handleClose}>
      <DialogContent className="dept-lead-io-modal overflow-hidden flex flex-col">
        <DialogHeader className="flex-shrink-0 px-6 pt-6 pb-3">
          <div className="flex items-center gap-2 lg:gap-3 mb-2">
            <div className="p-1.5 lg:p-2 rounded-lg bg-green-100">
              <CircleCheckBig className="w-5 h-5 lg:w-6 lg:h-6 text-green-600" />
            </div>
            <div className="flex-1">
              <DialogTitle className="font-semibold text-lg lg:text-xl">
                Approve and Organise IO
              </DialogTitle>
              <DialogDescription className="text-xs lg:text-sm mt-1">
                Review IO details and provide your approval comments
              </DialogDescription>
            </div>
          </div>

          {/* Request Info Card */}
          <div className="space-y-2 lg:space-y-3 p-3 lg:p-4 bg-gray-50 rounded-lg border">
            <div className="flex items-center justify-between">
              <span className="font-medium text-sm lg:text-base text-gray-900">Workflow Step:</span>
              <Badge variant="outline" className="font-mono text-xs">Step 3</Badge>
            </div>
            <div>
              <span className="font-medium text-sm lg:text-base text-gray-900">Title:</span>
              <p className="text-xs lg:text-sm text-gray-700 mt-1">{requestTitle || '—'}</p>
            </div>
            <div className="flex items-center gap-2">
              <span className="font-medium text-sm lg:text-base text-gray-900">Action:</span>
              <Badge className="bg-green-100 text-green-800 border-green-200 text-xs">
                <CircleCheckBig className="w-3 h-3 mr-1" />
                APPROVE
              </Badge>
            </div>
          </div>
        </DialogHeader>

        <div className="flex-1 overflow-y-auto overflow-x-hidden py-3 lg:py-4 px-6">
          <div className="space-y-3 lg:space-y-4">
            {/* Action Toggle Buttons */}
            <div className="flex gap-2 p-1 bg-gray-100 rounded-lg">
              <Button
                type="button"
                onClick={() => setActionType('approve')}
                className={`flex-1 text-sm lg:text-base ${
                  actionType === 'approve'
                    ? 'bg-green-600 text-white shadow-sm'
                    : 'text-gray-700 hover:bg-gray-200'
                }`}
                variant={actionType === 'approve' ? 'default' : 'ghost'}
              >
                <CircleCheckBig className="w-4 h-4 mr-1" />
                Approve
              </Button>
              <Button
                type="button"
                onClick={() => setActionType('reject')}
                className={`flex-1 text-sm lg:text-base ${
                  actionType === 'reject'
                    ? 'bg-red-600 text-white shadow-sm'
                    : 'text-gray-700 hover:bg-gray-200'
                }`}
                variant={actionType === 'reject' ? 'destructive' : 'ghost'}
              >
                <CircleX className="w-4 h-4 mr-1" />
                Reject
              </Button>
            </div>

            {/* Main Content Area - Two Column Layout on Large Screens */}
            <div className="space-y-3 lg:space-y-0 lg:grid lg:grid-cols-2 lg:gap-6">
              {/* Left Column - IO Organisation Details (Only shown when approving) */}
              {actionType === 'approve' && (
                <div className="p-3 lg:p-4 bg-blue-50 border border-blue-200 rounded-lg space-y-3">
                  <div className="flex items-center gap-2">
                    <Receipt className="w-4 h-4 lg:w-5 lg:h-5 text-blue-600" />
                    <h4 className="font-semibold text-sm lg:text-base text-blue-900">IO Organisation Details</h4>
                  </div>
                  
                  {/* IO Number - Read-only from IO table */}
                  <div className="space-y-1">
                    <Label htmlFor="ioNumber" className="text-xs lg:text-sm font-semibold text-gray-900 flex items-center gap-2">
                      IO Number <span className="text-red-500">*</span>
                    </Label>
                    <Input
                      id="ioNumber"
                      value={ioNumber || '—'}
                      disabled
                      readOnly
                      className="bg-gray-100 h-8 lg:h-9 cursor-not-allowed text-xs lg:text-sm"
                    />
                    {!ioNumber && (
                      <p className="text-xs text-red-600 mt-1">
                        ⚠️ IO number not found. Please block amount from IO tab first.
                      </p>
                    )}
                    {ioNumber && (
                      <p className="text-xs text-blue-600 mt-1">
                        ✓ Loaded from IO table
                      </p>
                    )}
                  </div>

                  {/* IO Balance Information - Read-only */}
                  <div className="grid grid-cols-2 gap-2">
                    {/* Blocked Amount Display */}
                    {preFilledBlockedAmount !== undefined && preFilledBlockedAmount > 0 && (
                      <div className="p-2 bg-green-50 border border-green-200 rounded">
                        <div className="flex flex-col">
                          <span className="text-xs font-semibold text-gray-700">Blocked Amount:</span>
                          <span className="text-xs lg:text-sm font-bold text-green-700 mt-1">
                            ₹{preFilledBlockedAmount.toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
                          </span>
                        </div>
                      </div>
                    )}

                    {/* Remaining Balance Display */}
                    {preFilledRemainingBalance !== undefined && preFilledRemainingBalance !== null && (
                      <div className="p-2 bg-blue-50 border border-blue-200 rounded">
                        <div className="flex flex-col">
                          <span className="text-xs font-semibold text-gray-700">Remaining Balance:</span>
                          <span className="text-xs lg:text-sm font-bold text-blue-700 mt-1">
                            ₹{preFilledRemainingBalance.toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
                          </span>
                        </div>
                      </div>
                    )}
                  </div>

                </div>
              )}

              {/* Right Column - Comments & Remarks */}
              <div className={`space-y-1.5 ${actionType === 'approve' ? '' : 'lg:col-span-2'}`}>
                <Label htmlFor="comment" className="text-xs lg:text-sm font-semibold text-gray-900 flex items-center gap-2">
                  Comments & Remarks <span className="text-red-500">*</span>
                </Label>
                <Textarea
                  id="comment"
                  placeholder={
                    actionType === 'approve'
                      ? 'Enter your approval comments and any conditions or notes...'
                      : 'Enter detailed reasons for rejection...'
                  }
                  value={comments}
                  onChange={(e) => {
                    const value = e.target.value;
                    if (value.length <= maxCommentsChars) {
                      setComments(value);
                    }
                  }}
                  rows={4}
                  className="text-xs lg:text-sm min-h-[80px] lg:min-h-[100px] resize-none"
                />
                <div className="flex items-center justify-between text-xs text-gray-500">
                  <div className="flex items-center gap-1">
                    <TriangleAlert className="w-3 h-3" />
                    Required and visible to all
                  </div>
                  <span>{commentsChars}/{maxCommentsChars}</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <DialogFooter className="flex-shrink-0 flex flex-col-reverse sm:flex-row sm:justify-end gap-2 px-6 pb-6 pt-3 border-t">
          <Button
            variant="outline"
            onClick={handleClose}
            disabled={submitting}
            className="text-sm lg:text-base"
          >
            Cancel
          </Button>
          <Button
            onClick={handleSubmit}
            disabled={!isFormValid || submitting}
            className={`text-sm lg:text-base ${
              actionType === 'approve'
                ? 'bg-green-600 hover:bg-green-700'
                : 'bg-red-600 hover:bg-red-700'
            } text-white`}
          >
            {submitting ? (
              `${actionType === 'approve' ? 'Approving' : 'Rejecting'}...`
            ) : (
              <>
                <CircleCheckBig className="w-4 h-4 mr-2" />
                {actionType === 'approve' ? 'Approve Request' : 'Reject Request'}
              </>
            )}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}
