'use client';

import { useState } from 'react';

interface Passenger {
  id: string;
  name: string;
  pickup: string;
  status: 'pending' | 'picked' | 'absent';
}

const avatarColors = [
  { bg: '#EEF2FF', text: '#1E3A8A' },
  { bg: '#E0E7FF', text: '#4338ca' },
  { bg: '#ede9fe', text: '#7c3aed' },
  { bg: '#fce7f3', text: '#db2777' },
  { bg: '#fef3c7', text: '#d97706' },
  { bg: '#dbeafe', text: '#2563eb' },
];

export default function PassengerCard({
  passenger,
  onPickup,
  onAbsent,
}: {
  passenger: Passenger;
  onPickup: (id: string) => void;
  onAbsent: (id: string) => void;
}) {
  const [swipeX, setSwipeX] = useState(0);
  const [startX, setStartX] = useState(0);

  const colorIndex = parseInt(passenger.id) % avatarColors.length;
  const color = avatarColors[colorIndex];

  const getInitials = (name: string) => {
    const parts = name.trim().split(' ');
    return parts[0][0] + (parts[1] ? parts[1][0] : '');
  };

  const handleTouchStart = (e: React.TouchEvent) => setStartX(e.touches[0].clientX);

  const handleTouchMove = (e: React.TouchEvent) => {
    const diff = startX - e.touches[0].clientX;
    if (diff > 0 && diff < 100) setSwipeX(diff);
  };

  const handleTouchEnd = () => {
    if (swipeX > 50) setSwipeX(80);
    else setSwipeX(0);
  };

  const statusConfig = {
    picked: { label: 'في الباص', bg: '#EEF2FF', text: '#1E3A8A', icon: 'ri-checkbox-circle-fill' },
    absent: { label: 'غائبة', bg: '#fee2e2', text: '#dc2626', icon: 'ri-close-circle-fill' },
    pending: { label: 'في الانتظار', bg: '#fef3c7', text: '#d97706', icon: 'ri-time-fill' },
  };

  const s = statusConfig[passenger.status];

  return (
    <div className="relative mb-2 overflow-hidden rounded-2xl">
      {passenger.status === 'pending' && (
        <div
          className="absolute inset-0 flex items-center justify-end px-4 cursor-pointer rounded-2xl"
          style={{ background: '#fee2e2' }}
          onClick={() => { onAbsent(passenger.id); setSwipeX(0); }}
        >
          <div className="flex flex-col items-center gap-1">
            <div className="w-10 h-10 bg-red-500 rounded-xl flex items-center justify-center">
              <i className="ri-user-unfollow-fill text-white text-lg"></i>
            </div>
            <span className="text-[10px] font-bold text-red-600" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>غياب</span>
          </div>
        </div>
      )}

      <div
        className="bg-white rounded-2xl p-3.5 flex items-center justify-between relative"
        style={{
          boxShadow: '0 1px 6px rgba(0,0,0,0.06)',
          border: '1px solid #f1f5f9',
          transform: `translateX(-${swipeX}px)`,
          transition: swipeX === 0 || swipeX === 80 ? 'transform 0.3s ease' : 'none',
          opacity: passenger.status === 'absent' ? 0.75 : 1,
        }}
        onTouchStart={passenger.status === 'pending' ? handleTouchStart : undefined}
        onTouchMove={passenger.status === 'pending' ? handleTouchMove : undefined}
        onTouchEnd={passenger.status === 'pending' ? handleTouchEnd : undefined}
      >
        <div className="flex items-center gap-3 flex-1">
          <div
            className="w-11 h-11 rounded-2xl flex items-center justify-center text-sm font-bold flex-shrink-0"
            style={{ background: color.bg, color: color.text, fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}
          >
            {getInitials(passenger.name)}
          </div>

          <div className="flex-1 min-w-0">
            <h3 className="text-sm font-bold text-slate-800 truncate" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>
              {passenger.name}
            </h3>
            <div className="flex items-center gap-1 mt-0.5">
              <div className="w-3 h-3 flex items-center justify-center">
                <i className="ri-map-pin-line text-slate-400 text-[10px]"></i>
              </div>
              <span className="text-[11px] text-slate-400 truncate" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>
                {passenger.pickup}
              </span>
            </div>
          </div>
        </div>

        <div className="flex-shrink-0 mr-2">
          {passenger.status === 'pending' && (
            <button
              onClick={() => onPickup(passenger.id)}
              className="h-9 px-4 rounded-xl text-xs font-bold whitespace-nowrap cursor-pointer transition-all active:scale-95 flex items-center gap-1.5 text-white"
              style={{ background: '#1E3A8A', fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}
            >
              <i className="ri-check-line text-sm"></i>
              ركبت
            </button>
          )}
          {passenger.status !== 'pending' && (
            <span
              className="flex items-center gap-1.5 text-xs font-bold px-3 py-1.5 rounded-xl"
              style={{ background: s.bg, color: s.text, fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}
            >
              <i className={`${s.icon} text-sm`}></i>
              {s.label}
            </span>
          )}
        </div>
      </div>
    </div>
  );
}