import React from 'react';
import { useNavigate } from 'react-router-dom';
import BottomNav from '../components/BottomNav';

const DetailMonitoring = () => {
  const navigate = useNavigate();

  const timelineSteps = [
    {
      id: 1,
      title: 'SPK Dibuat',
      description: 'Dokumen Surat Pemesanan Kendaraan telah divalidasi oleh sistem',
      date: '3 Okt 2023, 08:20',
      status: 'completed',
      icon: 'check'
    },
    {
      id: 2,
      title: 'Pembayaran DP',
      description: 'Down Payment sebesar Rp 50.000.000 telah diterima dan dikonfirmasi',
      date: '03 Okt 2023, 08:35',
      status: 'completed',
      icon: 'check'
    },
    {
      id: 3,
      title: 'Unit Ready',
      description: 'Pengecekan kualitas awal, PDI seeding dilakukan oleh tim teknis',
      date: '',
      status: 'current',
      icon: 'current',
      badges: [
        { label: 'QUALITY CHECK', color: 'bg-gray-100 text-gray-700' },
        { label: 'CLEANING', color: 'bg-gray-100 text-gray-700' }
      ]
    },
    {
      id: 4,
      title: 'Pengiriman',
      description: 'Unit akan dikirimkan ke alamat konsumen sesuai jadwal',
      date: '',
      status: 'pending',
      icon: 'pending'
    }
  ];

  return (
    <div className="flex flex-col h-screen bg-gray-50">
      {/* Header */}
      <div className="sticky top-0 z-50 bg-white px-4 py-3 shadow-sm">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-3">
            <button onClick={() => navigate(-1)} className="w-10 h-10 bg-slate-800 rounded-full flex items-center justify-center text-white">
              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
              </svg>
            </button>
            <h1 className="text-base font-bold text-gray-900">DMS AutoPRO</h1>
          </div>
          <button className="text-gray-700">
            <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
            </svg>
          </button>
        </div>
      </div>

      <div className="flex-1 overflow-y-auto pb-20">
        <div className="p-4 space-y-4">
          {/* Back Link */}
          <button onClick={() => navigate(-1)} className="flex items-center gap-1 text-gray-500 text-sm">
            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
            </svg>
            KEMBALI
          </button>

          {/* Title */}
          <div>
            <h2 className="text-2xl font-bold text-gray-900 mb-1">Status Pesanan</h2>
            <p className="text-sm text-gray-500">Order ID: #SPK-2023-09012</p>
          </div>

          {/* Status Card */}
          <div className="bg-white rounded-2xl p-4 shadow-sm">
            <div className="grid grid-cols-2 gap-4">
              <div>
                <p className="text-xs text-gray-500 mb-1">STATUS</p>
                <p className="text-sm font-bold text-blue-600">UNIT READY</p>
              </div>
              <div>
                <p className="text-xs text-gray-500 mb-1">ESTIMASI PENGIRIMAN</p>
                <p className="text-sm font-bold text-gray-900">15 Okt 2023</p>
              </div>
            </div>
            <div className="flex gap-2 mt-4">
              <button className="flex-1 bg-gray-100 text-gray-700 py-2 rounded-lg text-xs font-semibold">
                PEMESANAN
              </button>
              <button className="flex-1 bg-slate-800 text-white py-2 rounded-lg text-xs font-semibold">
                PROSES
              </button>
              <button className="flex-1 bg-gray-100 text-gray-700 py-2 rounded-lg text-xs font-semibold">
                SELESAI
              </button>
            </div>
          </div>

          {/* Timeline Progress */}
          <div className="bg-white rounded-2xl p-4 shadow-sm">
            <h3 className="text-sm font-bold text-gray-900 mb-4">TIMELINE PROGRESS</h3>
            
            <div className="space-y-4">
              {timelineSteps.map((step, index) => (
                <div key={step.id} className="flex gap-3">
                  {/* Icon */}
                  <div className="flex flex-col items-center">
                    <div className={`w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0 ${
                      step.status === 'completed' ? 'bg-green-500' :
                      step.status === 'current' ? 'bg-blue-500' :
                      'bg-gray-300'
                    }`}>
                      {step.status === 'completed' && (
                        <svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                        </svg>
                      )}
                      {step.status === 'current' && (
                        <svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                      )}
                      {step.status === 'pending' && (
                        <svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" />
                        </svg>
                      )}
                    </div>
                    {index < timelineSteps.length - 1 && (
                      <div className={`w-0.5 h-16 ${
                        step.status === 'completed' ? 'bg-green-500' : 'bg-gray-300'
                      }`}></div>
                    )}
                  </div>

                  {/* Content */}
                  <div className="flex-1 pb-4">
                    <h4 className="text-base font-bold text-gray-900 mb-1">{step.title}</h4>
                    <p className="text-sm text-gray-600 mb-2">{step.description}</p>
                    {step.date && (
                      <p className="text-xs text-gray-400">{step.date}</p>
                    )}
                    {step.badges && (
                      <div className="flex gap-2 mt-2">
                        {step.badges.map((badge, idx) => (
                          <span key={idx} className={`text-xs px-3 py-1 rounded-full font-semibold ${badge.color}`}>
                            {badge.label}
                          </span>
                        ))}
                      </div>
                    )}
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* Detail Unit */}
          <div className="bg-slate-800 rounded-2xl p-4 shadow-sm">
            <p className="text-xs text-gray-400 mb-3">DETAIL UNIT</p>
            
            <div className="bg-white rounded-xl p-3 mb-3">
              <img 
                src="/images/SUV-premium-x-series-phantom-black.png" 
                alt="SUV Premium X-Series"
                className="w-full h-32 object-contain"
                onError={(e) => {
                  e.target.style.display = 'none';
                  e.target.nextSibling.style.display = 'flex';
                }}
              />
              <div className="hidden w-full h-32 items-center justify-center bg-gray-100 rounded-lg">
                <svg className="w-16 h-16 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
                  <path d="M8 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM15 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z" />
                  <path d="M3 4a1 1 0 00-1 1v10a1 1 0 001 1h1.05a2.5 2.5 0 014.9 0H10a1 1 0 001-1V5a1 1 0 00-1-1H3zM14 7a1 1 0 00-1 1v6.05A2.5 2.5 0 0115.95 16H17a1 1 0 001-1v-5a1 1 0 00-.293-.707l-2-2A1 1 0 0015 7h-1z" />
                </svg>
              </div>
            </div>

            <h3 className="text-lg font-bold text-white mb-1">SUV Premium X-Series</h3>
            <p className="text-sm text-gray-300 mb-4">Phantom Black • All Wheel Drive</p>

            <div className="border-t border-gray-600 pt-3">
              <div className="flex justify-between items-center">
                <span className="text-sm text-gray-300">Harga OTR</span>
                <div className="flex items-center gap-2">
                  <span className="text-lg font-bold text-white">Rp 845.000.000</span>
                  <button className="w-5 h-5 bg-gray-600 rounded-full flex items-center justify-center">
                    <svg className="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                  </button>
                </div>
              </div>
            </div>
          </div>

          {/* Kontak Pelanggan */}
          <div className="bg-white rounded-2xl p-4 shadow-sm">
            <p className="text-xs text-gray-500 mb-3">KONTAK PELANGGAN</p>
            <div className="flex items-center gap-3 mb-3">
              <div className="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center">
                <svg className="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                </svg>
              </div>
              <div>
                <p className="text-sm font-bold text-gray-900">Bpk. Adhi Wijaya</p>
                <p className="text-xs text-gray-500">+62 812 3456 7890</p>
              </div>
            </div>
            <button className="w-full bg-blue-500 text-white py-3 rounded-xl font-semibold flex items-center justify-center gap-2">
              <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                <path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z" />
              </svg>
              Hubungi Pelanggan
            </button>
          </div>
        </div>
      </div>

      <BottomNav />
    </div>
  );
};

export default DetailMonitoring;
