'use client';

import { useState } from 'react';

interface AbsentModalProps {
  isOpen: boolean;
  onClose: () => void;
  passengerName: string;
  pickupLocation: string;
  onConfirm: (reason: string) => void;
}

const reasons = [
  'لم تنزل في الموعد',
  'أخبرتني مسبقاً',
  'لم أجدها',
  'سبب آخر',
];

export default function AbsentModal({ isOpen, onClose, passengerName, pickupLocation, onConfirm }: AbsentModalProps) {
  const [selectedReason, setSelectedReason] = useState('');
  const [showDropdown, setShowDropdown] = useState(false);

  if (!isOpen) return null;

  const handleConfirm = () => {
    onConfirm(selectedReason || 'لم يتم تحديد السبب');
    onClose();
  };

  return (
    <div className="fixed inset-0 z-50 flex items-end" dir="rtl" onClick={onClose}>
      <div className="absolute inset-0 bg-black/40"></div>
      
      <div
        className="relative w-full bg-white rounded-t-3xl p-6 animate-slide-up"
        style={{ maxWidth: '390px', margin: '0 auto', boxShadow: '0 -4px 20px rgba(0,0,0,0.15)' }}
        onClick={(e) => e.stopPropagation()}
      >
        <div className="w-10 h-1 bg-slate-200 rounded-full mx-auto mb-5"></div>

        <div className="text-center mb-5">
          <div className="w-14 h-14 rounded-full flex items-center justify-center mx-auto mb-3" style={{ background: '#fee2e2' }}>
            <i className="ri-user-unfollow-line text-3xl" style={{ color: '#dc2626' }}></i>
          </div>
          <h2 className="text-xl font-bold mb-2" style={{ color: '#dc2626', fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>
            تسجيل غياب
          </h2>
        </div>

        <div className="bg-red-50 rounded-xl p-3 mb-5">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 rounded-full flex items-center justify-center" style={{ background: '#fecaca' }}>
              <span className="text-sm font-bold" style={{ color: '#dc2626', fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>
                {passengerName.split(' ')[0].charAt(0)}{passengerName.split(' ')[1]?.charAt(0) || ''}
              </span>
            </div>
            <div className="flex-1 text-right">
              <p className="text-sm font-semibold text-slate-800 mb-0.5" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>
                {passengerName}
              </p>
              <p className="text-xs text-slate-500 flex items-center justify-end gap-1" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>
                <span>{pickupLocation}</span>
                <i className="ri-map-pin-line text-xs"></i>
              </p>
            </div>
          </div>
        </div>

        <div className="mb-5 relative">
          <label className="block text-sm font-semibold text-slate-700 mb-2 text-right" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>
            سبب الغياب (اختياري)
          </label>
          <button
            onClick={() => setShowDropdown(!showDropdown)}
            className="w-full h-14 rounded-xl border-2 border-slate-200 bg-white px-4 flex items-center justify-between cursor-pointer hover:border-slate-300 transition-colors"
          >
            <i className="ri-arrow-down-s-line text-slate-400 text-xl"></i>
            <span className="text-sm text-slate-800" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>
              {selectedReason || 'اختر السبب'}
            </span>
          </button>

          {showDropdown && (
            <div className="absolute top-full left-0 right-0 mt-2 bg-white rounded-xl border-2 border-slate-200 overflow-hidden z-10" style={{ boxShadow: '0 4px 12px rgba(0,0,0,0.1)' }}>
              {reasons.map((reason, index) => (
                <button
                  key={index}
                  onClick={() => {
                    setSelectedReason(reason);
                    setShowDropdown(false);
                  }}
                  className="w-full px-4 py-3 text-right text-sm hover:bg-slate-50 transition-colors cursor-pointer border-b border-slate-100 last:border-b-0"
                  style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif', color: '#1e293b' }}
                >
                  {reason}
                </button>
              ))}
            </div>
          )}
        </div>

        <div className="bg-amber-50 rounded-xl p-3 mb-6">
          <div className="flex items-start gap-2">
            <i className="ri-alert-line text-lg mt-0.5" style={{ color: '#f59e0b' }}></i>
            <p className="text-xs text-amber-700 flex-1 text-right leading-relaxed" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>
              سيُحذف موقفها من مسار الرحلة تلقائياً
            </p>
          </div>
        </div>

        <div className="flex gap-3">
          <button
            onClick={onClose}
            className="flex-1 h-12 rounded-xl font-bold text-sm cursor-pointer whitespace-nowrap border-2 border-slate-200 bg-white text-slate-600"
            style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}
          >
            إلغاء
          </button>
          <button
            onClick={handleConfirm}
            className="flex-1 h-12 rounded-xl font-bold text-sm cursor-pointer whitespace-nowrap text-white"
            style={{ background: '#dc2626', fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}
          >
            تأكيد الغياب
          </button>
        </div>
      </div>
    </div>
  );
}