car_mms/app/components/vehicles/VehicleDetailsView.tsx

import { Link } from "@remix-run/react";
import { Button } from "~/components/ui/Button";
import { Flex } from "~/components/layout/Flex";
import { useSettings } from "~/contexts/SettingsContext";
import { TRANSMISSION_TYPES, FUEL_TYPES, USE_TYPES, BODY_TYPES } from "~/lib/constants";
import type { VehicleWithOwner, VehicleWithRelations } from "~/types/database";

interface VehicleDetailsViewProps {
  vehicle: VehicleWithOwner | VehicleWithRelations;
  onEdit?: () => void;
  onClose?: () => void;
  isLoadingVisits?: boolean;
}

export function VehicleDetailsView({ vehicle, onEdit, onClose, isLoadingVisits }: VehicleDetailsViewProps) {
  const { formatDate, formatCurrency, formatNumber } = useSettings();
  // Helper functions to get display labels
  const getTransmissionLabel = (value: string) => {
    return TRANSMISSION_TYPES.find(t => t.value === value)?.label || value;
  };

  const getFuelLabel = (value: string) => {
    return FUEL_TYPES.find(f => f.value === value)?.label || value;
  };

  const getUseTypeLabel = (value: string) => {
    return USE_TYPES.find(u => u.value === value)?.label || value;
  };

  const getBodyTypeLabel = (value: string) => {
    return BODY_TYPES.find(b => b.value === value)?.label || value;
  };

  return (
    <div className="space-y-6">
      {/* Enhanced Vehicle Information Section */}
      <div className="bg-gradient-to-r from-green-50 to-emerald-50 p-6 rounded-xl border border-green-100">
        <div className="flex items-center justify-between mb-4">
          <h3 className="text-xl font-bold text-gray-900 flex items-center">
            <span className="text-green-600 ml-2">🚗</span>
            معلومات المركبة
          </h3>
          <span className="text-sm text-gray-500 bg-white px-3 py-1 rounded-full">
            المركبة #{vehicle.id}
          </span>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          <div className="bg-white p-4 rounded-lg shadow-sm">
            <label className="block text-sm font-medium text-gray-600 mb-1">رقم اللوحة</label>
            <p className="text-xl font-bold text-gray-900 font-mono tracking-wider">
              {vehicle.plateNumber}
            </p>
          </div>

          <div className="bg-white p-4 rounded-lg shadow-sm">
            <label className="block text-sm font-medium text-gray-600 mb-1">الشركة المصنعة</label>
            <p className="text-lg font-semibold text-gray-900">{vehicle.manufacturer}</p>
          </div>

          <div className="bg-white p-4 rounded-lg shadow-sm">
            <label className="block text-sm font-medium text-gray-600 mb-1">الموديل</label>
            <p className="text-lg font-semibold text-gray-900">{vehicle.model}</p>
          </div>

          <div className="bg-white p-4 rounded-lg shadow-sm">
            <label className="block text-sm font-medium text-gray-600 mb-1">سنة الصنع</label>
            <p className="text-lg font-semibold text-gray-900">{vehicle.year}</p>
          </div>

          <div className="bg-white p-4 rounded-lg shadow-sm">
            <label className="block text-sm font-medium text-gray-600 mb-1">نوع الهيكل</label>
            <p className="text-gray-900">{getBodyTypeLabel(vehicle.bodyType)}</p>
          </div>

          {vehicle.trim && (
            <div className="bg-white p-4 rounded-lg shadow-sm">
              <label className="block text-sm font-medium text-gray-600 mb-1">الفئة</label>
              <p className="text-gray-900">{vehicle.trim}</p>
            </div>
          )}
        </div>
      </div>

      {/* Technical Specifications */}
      <div className="bg-white rounded-xl border border-gray-200 overflow-hidden">
        <div className="bg-gray-50 px-6 py-4 border-b border-gray-200">
          <h3 className="text-lg font-semibold text-gray-900 flex items-center">
            <span className="text-gray-600 text-xl ml-2">⚙️</span>
            المواصفات التقنية
          </h3>
        </div>

        <div className="p-6">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <div className="bg-gray-50 p-4 rounded-lg">
              <label className="block text-sm font-medium text-gray-600 mb-1">ناقل الحركة</label>
              <p className="text-gray-900 font-medium">{getTransmissionLabel(vehicle.transmission)}</p>
            </div>

            <div className="bg-gray-50 p-4 rounded-lg">
              <label className="block text-sm font-medium text-gray-600 mb-1">نوع الوقود</label>
              <p className="text-gray-900 font-medium">{getFuelLabel(vehicle.fuel)}</p>
            </div>

            <div className="bg-gray-50 p-4 rounded-lg">
              <label className="block text-sm font-medium text-gray-600 mb-1">نوع الاستخدام</label>
              <p className="text-gray-900 font-medium">{getUseTypeLabel(vehicle.useType)}</p>
            </div>

            {vehicle.cylinders && (
              <div className="bg-gray-50 p-4 rounded-lg">
                <label className="block text-sm font-medium text-gray-600 mb-1">عدد الأسطوانات</label>
                <p className="text-gray-900 font-medium">{vehicle.cylinders}</p>
              </div>
            )}

            {vehicle.engineDisplacement && (
              <div className="bg-gray-50 p-4 rounded-lg">
                <label className="block text-sm font-medium text-gray-600 mb-1">سعة المحرك</label>
                <p className="text-gray-900 font-medium">{vehicle.engineDisplacement} لتر</p>
              </div>
            )}
          </div>
        </div>
      </div>

      {/* Owner Information */}
      <div className="bg-white rounded-xl border border-gray-200 overflow-hidden">
        <div className="bg-gray-50 px-6 py-4 border-b border-gray-200">
          <Flex justify="between" align="center">
            <h3 className="text-lg font-semibold text-gray-900 flex items-center">
              <span className="text-gray-600 text-xl ml-2">👤</span>
              معلومات المالك
            </h3>
            <Link
              to={`/customers?search=${encodeURIComponent(vehicle.owner.name)}`}
              target="_blank"
              className="inline-flex items-center px-3 py-1 text-sm font-medium text-blue-600 bg-blue-50 border border-blue-200 rounded-lg hover:bg-blue-100 transition-colors"
            >
              <span className="ml-2">👁️</span>
              عرض تفاصيل المالك
            </Link>
          </Flex>
        </div>

        <div className="p-6">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <div className="bg-blue-50 p-4 rounded-lg">
              <label className="block text-sm font-medium text-gray-600 mb-1">اسم المالك</label>
              <p className="text-lg font-semibold text-gray-900">{vehicle.owner.name}</p>
            </div>

            {vehicle.owner.phone && (
              <div className="bg-blue-50 p-4 rounded-lg">
                <label className="block text-sm font-medium text-gray-600 mb-1">رقم الهاتف</label>
                <a
                  href={`tel:${vehicle.owner.phone}`}
                  className="text-blue-600 hover:text-blue-800 font-medium"
                  dir="ltr"
                >
                  📞 {vehicle.owner.phone}
                </a>
              </div>
            )}

            {vehicle.owner.email && (
              <div className="bg-blue-50 p-4 rounded-lg">
                <label className="block text-sm font-medium text-gray-600 mb-1">البريد الإلكتروني</label>
                <a
                  href={`mailto:${vehicle.owner.email}`}
                  className="text-blue-600 hover:text-blue-800 font-medium"
                  dir="ltr"
                >
                  ✉️ {vehicle.owner.email}
                </a>
              </div>
            )}

            {vehicle.owner.address && (
              <div className="bg-blue-50 p-4 rounded-lg md:col-span-2 lg:col-span-3">
                <label className="block text-sm font-medium text-gray-600 mb-1">العنوان</label>
                <p className="text-gray-900">{vehicle.owner.address}</p>
              </div>
            )}
          </div>
        </div>
      </div>

      {/* Maintenance Status */}
      <div className="bg-white rounded-xl border border-gray-200 overflow-hidden">
        <div className="bg-gray-50 px-6 py-4 border-b border-gray-200">
          <Flex justify="between" align="center">
            <h3 className="text-lg font-semibold text-gray-900 flex items-center">
              <span className="text-gray-600 text-xl ml-2">🔧</span>
              حالة الصيانة
            </h3>
            <Link
              to={`/maintenance-visits?vehicleId=${vehicle.id}`}
              target="_blank"
              className="inline-flex items-center px-3 py-1 text-sm font-medium text-green-600 bg-green-50 border border-green-200 rounded-lg hover:bg-green-100 transition-colors"
            >
              <span className="ml-2">📋</span>
              عرض جميع زيارات الصيانة
            </Link>
          </Flex>
        </div>

        <div className="p-6">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            <div className="bg-green-50 p-4 rounded-lg">
              <label className="block text-sm font-medium text-gray-600 mb-1">آخر زيارة صيانة</label>
              <p className="text-gray-900 font-medium">
                {vehicle.lastVisitDate
                  ? formatDate(vehicle.lastVisitDate)
                  : <span className="text-gray-400">لا توجد زيارات</span>
                }
              </p>
            </div>

            {vehicle.suggestedNextVisitDate && (
              <div className="bg-orange-50 p-4 rounded-lg">
                <label className="block text-sm font-medium text-gray-600 mb-1">الزيارة المقترحة التالية</label>
                <p className="text-orange-600 font-bold">
                  {formatDate(vehicle.suggestedNextVisitDate)}
                </p>
              </div>
            )}

            <div className="bg-gray-50 p-4 rounded-lg">
              <label className="block text-sm font-medium text-gray-600 mb-1">تاريخ التسجيل</label>
              <p className="text-gray-900">
                {formatDate(vehicle.createdDate)}
              </p>
            </div>

            <div className="bg-gray-50 p-4 rounded-lg">
              <label className="block text-sm font-medium text-gray-600 mb-1">آخر تحديث</label>
              <p className="text-gray-900">
                {formatDate(vehicle.updateDate)}
              </p>
            </div>
          </div>
        </div>
      </div>

      {/* Recent Maintenance Visits
      <div className="bg-white rounded-xl border border-gray-200 overflow-hidden">
        <div className="bg-gray-50 px-6 py-4 border-b border-gray-200">
          <h3 className="text-lg font-semibold text-gray-900 flex items-center">
            <span className="text-gray-600 text-xl ml-2">🔧</span>
            آخر زيارات الصيانة
          </h3>
        </div>

        <div className="p-6">
          {isLoadingVisits ? (
            <div className="text-center py-12">
              <div className="text-gray-400 text-4xl mb-4">🔧</div>
              <h4 className="text-lg font-medium text-gray-900 mb-2">جاري تحميل زيارات الصيانة...</h4>
              <div className="flex items-center justify-center">
                <svg className="animate-spin h-6 w-6 text-gray-400" fill="none" viewBox="0 0 24 24">
                  <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                  <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                </svg>
              </div>
            </div>
          ) : !('maintenanceVisits' in vehicle) || !vehicle.maintenanceVisits || vehicle.maintenanceVisits.length === 0 ? (
            <div className="text-center py-12">
              <div className="text-gray-400 text-4xl mb-4">🔧</div>
              <h4 className="text-lg font-medium text-gray-900 mb-2">لا توجد زيارات صيانة</h4>
              <p className="text-gray-500 mb-4">لم يتم تسجيل أي زيارات صيانة لهذه المركبة بعد</p>
              <Link
                to="/maintenance-visits"
                className="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-green-600 rounded-lg hover:bg-green-700 transition-colors"
              >
                تسجيل زيارة صيانة جديدة
              </Link>
            </div>
          ) : (
            <div className="space-y-4">
              {('maintenanceVisits' in vehicle ? vehicle.maintenanceVisits : []).slice(0, 3).map((visit: any) => (
                <div
                  key={visit.id}
                  className="bg-gray-50 rounded-lg p-4 border border-gray-200 hover:border-green-300 hover:bg-green-50 transition-all"
                >
                  <div className="flex items-start justify-between mb-3">
                    <div className="flex-1">
                      <h4 className="font-semibold text-gray-900 text-lg">
                        {(() => {
                          try {
                            const jobs = JSON.parse(visit.maintenanceJobs);
                            return jobs.length > 1 
                              ? `${jobs.length} أعمال صيانة` 
                              : jobs[0]?.job || 'نوع صيانة غير محدد';
                          } catch {
                            return 'نوع صيانة غير محدد';
                          }
                        })()}
                      </h4>
                      <p className="text-sm text-gray-500">زيارة #{visit.id}</p>
                    </div>
                    <div className="text-left">
                      <div className="text-lg font-bold text-green-600">
                        {formatCurrency(visit.cost)}
                      </div>
                      <span className={`inline-flex px-2 py-1 text-xs font-semibold rounded-full ${visit.paymentStatus === "paid"
                        ? 'bg-green-100 text-green-800'
                        : visit.paymentStatus === 'pending'
                          ? 'bg-yellow-100 text-yellow-800'
                          : 'bg-red-100 text-red-800'
                        }`}>
                        {visit.paymentStatus === 'paid' ? 'مدفوع' :
                          visit.paymentStatus === 'pending' ? 'معلق' : 'غير مدفوع'}
                      </span>
                    </div>
                  </div>

                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
                    <div className="flex justify-between">
                      <span className="text-gray-600">تاريخ الزيارة:</span>
                      <span className="font-medium text-gray-900">
                        {formatDate(visit.visitDate)}
                      </span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-gray-600">عداد الكيلومترات:</span>
                      <span className="font-medium text-gray-900">
                        {visit.kilometers ? formatNumber(visit.kilometers) : 'غير محدد'} كم
                      </span>
                    </div>
                    {visit.description && (
                      <div className="md:col-span-2">
                        <span className="text-gray-600">الوصف:</span>
                        <p className="text-gray-900 mt-1">{visit.description}</p>
                      </div>
                    )}
                  </div>
                </div>
              ))}

              {('maintenanceVisits' in vehicle ? vehicle.maintenanceVisits : []).length > 3 && (
                <div className="text-center py-4 border-t border-gray-200">
                  <p className="text-sm text-gray-500 mb-3">
                    عرض 3 من أصل {('maintenanceVisits' in vehicle ? vehicle.maintenanceVisits : []).length} زيارة صيانة
                  </p>
                  <Link
                    to={`/maintenance-visits?vehicleId=${vehicle.id}`}
                    target="_blank"
                    className="inline-flex items-center px-4 py-2 text-sm font-medium text-green-600 bg-green-50 border border-green-200 rounded-lg hover:bg-green-100 transition-colors"
                  >
                    <span className="ml-2">📋</span>
                    عرض جميع الزيارات ({('maintenanceVisits' in vehicle ? vehicle.maintenanceVisits : []).length})
                  </Link>
                </div>
              )}
            </div>
          )}
        </div>
      </div> */}

      {/* Action Buttons */}
      {(onEdit || onClose) && (
        <div className="flex flex-col sm:flex-row gap-3 pt-6 border-t border-gray-200">
          {onEdit && (
            <Button
              onClick={onEdit}
              className="bg-blue-600 hover:bg-blue-700 flex-1 sm:flex-none"
            >
              <span className="ml-2">✏️</span>
              تعديل المركبة
            </Button>
          )}

          {onClose && (
            <Button
              variant="outline"
              onClick={onClose}
              className="flex-1 sm:flex-none"
            >
              إغلاق
            </Button>
          )}
        </div>
      )}
    </div>
  );
}