'use client';

import { useState } from 'react';
import { userReportsService } from '@/services/user-reports.service';

const REPORT_REASONS = [
  'Spam or scam',
  'Harassment or bullying',
  'Inappropriate content',
  'Fake profile',
  'Unprofessional behavior',
  'Other',
];

interface ReportUserModalProps {
  isOpen: boolean;
  onClose: () => void;
  reportedUserId: string;
  reportedUserName: string;
  conversationId?: string;
}

export function ReportUserModal({
  isOpen,
  onClose,
  reportedUserId,
  reportedUserName,
  conversationId,
}: ReportUserModalProps) {
  const [selectedReason, setSelectedReason] = useState('');
  const [description, setDescription] = useState('');
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [submitted, setSubmitted] = useState(false);
  const [error, setError] = useState('');

  if (!isOpen) return null;

  const handleSubmit = async () => {
    if (!selectedReason) {
      setError('Please select a reason');
      return;
    }

    setIsSubmitting(true);
    setError('');

    try {
      await userReportsService.createReport({
        reportedUserId,
        conversationId,
        reason: selectedReason,
        description: description.trim() || undefined,
      });
      setSubmitted(true);
    } catch (err: unknown) {
      const message = err instanceof Error ? err.message : 'Failed to submit report';
      // Check for axios error response
      const axiosErr = err as { response?: { data?: { message?: string } } };
      setError(axiosErr?.response?.data?.message || message);
    } finally {
      setIsSubmitting(false);
    }
  };

  const handleClose = () => {
    setSelectedReason('');
    setDescription('');
    setSubmitted(false);
    setError('');
    onClose();
  };

  return (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
      <div className="bg-white rounded-[20px] w-full max-w-[440px] overflow-hidden">
        {submitted ? (
          // Success state
          <div className="p-6 text-center">
            <div className="w-14 h-14 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
              <svg className="w-7 h-7 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
              </svg>
            </div>
            <h3 className="font-fractul font-bold text-[18px] text-[#00293D] mb-2">Report Submitted</h3>
            <p className="font-serif text-[14px] text-[#00293D]/70 mb-6">
              Thank you for reporting. Our team will review this and take appropriate action.
            </p>
            <button
              onClick={handleClose}
              className="px-6 py-2.5 bg-[#E58625] text-white rounded-full font-serif font-semibold text-[14px] hover:bg-[#E58625]/90 transition-colors cursor-pointer"
            >
              Done
            </button>
          </div>
        ) : (
          // Report form
          <>
            <div className="px-6 py-4 border-b border-[#00293d]/10">
              <h3 className="font-fractul font-bold text-[16px] text-[#00293D]">
                Report {reportedUserName}
              </h3>
              <p className="font-serif text-[13px] text-[#00293D]/60 mt-1">
                Select a reason for reporting this user
              </p>
            </div>

            <div className="px-6 py-4 space-y-2 max-h-[300px] overflow-y-auto">
              {REPORT_REASONS.map((reason) => (
                <label
                  key={reason}
                  className={`flex items-center gap-3 p-3 rounded-[10px] cursor-pointer transition-colors ${
                    selectedReason === reason
                      ? 'bg-[#E58625]/10 border border-[#E58625]'
                      : 'border border-[#00293d]/10 hover:bg-[#00293d]/5'
                  }`}
                >
                  <input
                    type="radio"
                    name="report-reason"
                    value={reason}
                    checked={selectedReason === reason}
                    onChange={() => setSelectedReason(reason)}
                    className="w-4 h-4 text-[#E58625] accent-[#E58625]"
                  />
                  <span className="font-serif text-[14px] text-[#00293D]">{reason}</span>
                </label>
              ))}

              {selectedReason && (
                <textarea
                  value={description}
                  onChange={(e) => setDescription(e.target.value)}
                  placeholder="Add more details (optional)"
                  rows={3}
                  className="w-full mt-3 px-3 py-2 border border-[#00293d]/10 rounded-[10px] font-serif text-[14px] text-[#00293D] placeholder:text-[#00293D]/40 focus:outline-none focus:border-[#E58625] resize-none"
                />
              )}

              {error && (
                <p className="text-red-500 font-serif text-[13px] mt-2">{error}</p>
              )}
            </div>

            <div className="px-6 py-4 border-t border-[#00293d]/10 flex justify-end gap-3">
              <button
                onClick={handleClose}
                className="px-5 py-2.5 border border-[#00293d]/20 rounded-full font-serif font-medium text-[14px] text-[#00293D] hover:bg-[#00293d]/5 transition-colors cursor-pointer"
              >
                Cancel
              </button>
              <button
                onClick={handleSubmit}
                disabled={!selectedReason || isSubmitting}
                className="px-5 py-2.5 bg-red-600 text-white rounded-full font-serif font-semibold text-[14px] hover:bg-red-700 transition-colors disabled:opacity-50 cursor-pointer"
              >
                {isSubmitting ? 'Submitting...' : 'Submit Report'}
              </button>
            </div>
          </>
        )}
      </div>
    </div>
  );
}
