import { useMemo, useState } from 'react';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Textarea } from '@/components/ui/textarea';
// No separate reason field per UI; comments & remarks only
import { Badge } from '@/components/ui/badge';
import { XCircle, AlertCircle } from 'lucide-react';

type RejectionModalProps = {
  open: boolean;
  onClose: () => void;
  onConfirm: (description: string) => Promise<void> | void;
  defaultDescription?: string;
  title?: string;
  requestIdDisplay?: string;
  requestTitle?: string;
};

export function RejectionModal({
  open,
  onClose,
  onConfirm,
  defaultDescription = '',
  title = 'Reject Request',
  requestIdDisplay,
  requestTitle,
}: RejectionModalProps) {
  const [description, setDescription] = useState(defaultDescription);
  const [submitting, setSubmitting] = useState(false);
  const charsUsed = (description?.length || 0);
  const limitedDescription = useMemo(() => description.slice(0, 500), [description]);

  const handleSubmit = async () => {
    if (!limitedDescription.trim()) {
      alert('Comments & remarks are required');
      return;
    }
    try {
      setSubmitting(true);
      await onConfirm(limitedDescription);
      onClose();
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <Dialog open={open} onOpenChange={(v) => !v && onClose()}>
      <DialogContent className="sm:max-w-[640px] bg-white">
        <DialogHeader>
          <div className="flex items-start gap-3">
            <div className="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center">
              <XCircle className="w-7 h-7 text-red-600" />
            </div>
            <div>
              <DialogTitle className="text-lg">{title}</DialogTitle>
              <p className="text-sm text-gray-500 mt-1">Please provide detailed reasons for rejection</p>
            </div>
          </div>
        </DialogHeader>

        {/* Request Info Card */}
        <div className="border rounded-lg p-4 bg-white">
          <div className="flex items-center justify-between mb-3">
            <span className="text-xs font-bold text-gray-800">Request ID</span>
            <span className="text-xs bg-gray-100 border border-gray-300 text-gray-800 rounded-full px-2 py-0.5">
              {requestIdDisplay || '—'}
            </span>
          </div>
          {/* Title - keep original stacked style without spacing between */}
          <div className="mb-3">
            <span className="text-xs font-bold text-gray-800 block">Title</span>
            <p className="text-sm text-gray-600 mt-1 truncate">{requestTitle || '—'}</p>
          </div>
          {/* Action - label and badge inline without justify-between */}
          <div className="flex items-center gap-2">
            <span className="text-xs font-bold text-gray-800">Action</span>
            <Badge className="bg-red-100 text-red-800 border-red-200" variant="outline">REJECT</Badge>
          </div>
        </div>

        {/* Comments */}
        <div className="space-y-3 mt-4">
          <label className="text-sm font-semibold text-gray-800">Comments & Remarks *</label>
          <Textarea
            value={limitedDescription}
            onChange={(e) => setDescription(e.target.value)}
            rows={5}
            placeholder="Enter detailed reasons for rejection and any suggestions for improvement..."
            className="border-gray-300"
          />
          <div className="flex items-center justify-between text-xs text-gray-500">
            <span>Comments are required and will be visible to all participants</span>
            <span>{Math.min(charsUsed, 500)}/500</span>
          </div>
        </div>

        {/* Guidelines */}
        <div className="mt-4 border rounded-lg p-3 bg-red-50 border-red-200 text-red-900 flex items-start gap-2">
          <div className="mt-0.5">
            <AlertCircle className="w-4 h-4" />
          </div>
          <div className="text-sm">
            <div className="font-semibold">Rejection Guidelines</div>
            <div>Please provide specific, actionable feedback to help the initiator improve their request.</div>
          </div>
        </div>

        <DialogFooter className="mt-4">
          <Button variant="outline" onClick={onClose} disabled={submitting}>Cancel</Button>
          <Button variant="destructive" onClick={handleSubmit} disabled={submitting}>
            <XCircle className="w-4 h-4 mr-2" />
            {submitting ? 'Rejecting...' : 'Reject Request'}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}