import React from 'react'
import { FaUser, FaUserCheck, FaUserClock } from 'react-icons/fa'
import dayjs from 'dayjs'
import { mockVisitors } from '../../../mocks/mockIntranet'

const Visitors: React.FC = () => {
  const todayVisitors = mockVisitors.filter((visitor) => 
    dayjs(visitor.visitDate).isSame(dayjs(), 'day')
  )

  const getStatusIcon = (status: string) => {
    switch (status) {
      case 'checked-in':
        return <FaUserCheck className="w-4 h-4 text-green-600" />
      case 'checked-out':
        return <FaUser className="w-4 h-4 text-gray-600" />
      case 'scheduled':
        return <FaUserClock className="w-4 h-4 text-blue-600" />
      default:
        return <FaUser className="w-4 h-4 text-gray-600" />
    }
  }

  const getStatusText = (status: string) => {
    switch (status) {
      case 'checked-in':
        return 'Giriş Yaptı'
      case 'checked-out':
        return 'Çıkış Yaptı'
      case 'scheduled':
        return 'Planlandı'
      default:
        return 'Bilinmiyor'
    }
  }

  const getStatusColor = (status: string) => {
    switch (status) {
      case 'checked-in':
        return 'bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800'
      case 'checked-out':
        return 'bg-gray-50 dark:bg-gray-900/20 border-gray-200 dark:border-gray-700'
      case 'scheduled':
        return 'bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800'
      default:
        return 'bg-gray-50 dark:bg-gray-900/20 border-gray-200 dark:border-gray-700'
    }
  }

  return (
    <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
      <div className="p-6 border-b border-gray-200 dark:border-gray-700">
        <h2 className="text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2">
          <FaUser className="w-5 h-5" />
          Bugünkü Ziyaretçiler
        </h2>
      </div>
      <div className="p-4 space-y-3">
        {todayVisitors.length > 0 ? (
          todayVisitors.map((visitor) => (
            <div
              key={visitor.id}
              className={`p-3 rounded-lg border ${getStatusColor(visitor.status)}`}
            >
              <div className="flex items-start gap-3">
                <img
                  src={visitor.photo}
                  alt={visitor.fullName}
                  className="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-600"
                />
                <div className="flex-1 min-w-0">
                  <div className="flex items-center justify-between mb-1">
                    <h4 className="text-sm font-medium text-gray-900 dark:text-white truncate">
                      {visitor.fullName}
                    </h4>
                    <div className="flex items-center gap-1">
                      {getStatusIcon(visitor.status)}
                    </div>
                  </div>
                  <p className="text-xs text-gray-600 dark:text-gray-400 truncate">
                    {visitor.company}
                  </p>
                  <p className="text-xs text-gray-500 dark:text-gray-500 mt-1">
                    {visitor.purpose}
                  </p>
                  <div className="flex items-center justify-between mt-2">
                    <span className="text-xs text-gray-500 dark:text-gray-500">
                      {dayjs(visitor.visitDate).format('HH:mm')}
                    </span>
                    <span className="text-xs px-2 py-1 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400">
                      {getStatusText(visitor.status)}
                    </span>
                  </div>
                  {visitor.host && (
                    <p className="text-xs text-gray-500 dark:text-gray-500 mt-1">
                      Karşılayan: {visitor.host.fullName}
                    </p>
                  )}
                </div>
              </div>
            </div>
          ))
        ) : (
          <p className="text-sm text-gray-500 dark:text-gray-400 text-center py-4">
            Bugün ziyaretçi yok
          </p>
        )}
      </div>
    </div>
  )
}

export default Visitors