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

const Tracking = () => {
  const navigate = useNavigate();
  const [activeTab, setActiveTab] = useState('semua');
  const [searchQuery, setSearchQuery] = useState('');

  const orders = [
    {
      id: 'SPK-2023-09012',
      unit: 'SUV Premium X-Series',
      status: 'UNIT READY',
      statusColor: 'bg-blue-100 text-blue-700',
      progress: 85,
      progressLabel: 'Persiapan Unit Akhir',
      lastUpdate: 'Est. 2 Hari Lagi',
      action: 'DETAIL MONITORING',
      image: '/images/suv-premium.png',
      category: 'unit-ready'
    },
    {
      id: 'SPK-2023-09045',
      unit: 'Volt E-Sedan 500',
      status: 'PROSES',
      statusColor: 'bg-gray-100 text-gray-700',
      progress: 40,
      progressLabel: 'Pemeriksaan Kelayakan Jalan',
      lastUpdate: 'Est. 5 Hari Lagi',
      action: 'DETAIL MONITORING',
      image: '/images/volt-sedan.png',
      category: 'proses'
    },
    {
      id: 'SPK-2023-08991',
      unit: 'Grand Tourer V-8',
      status: 'PENGIRIMAN',
      statusColor: 'bg-blue-500 text-white',
      progress: 95,
      progressLabel: 'Menuju Lokasi Konsumen',
      lastUpdate: 'Dalam Perjalanan',
      action: 'DETAIL MONITORING',
      image: '/images/grand-tourer.png',
      category: 'unit-ready'
    }
  ];

  const filteredOrders = orders.filter(order => {
    const matchesSearch = order.id.toLowerCase().includes(searchQuery.toLowerCase()) ||
                         order.unit.toLowerCase().includes(searchQuery.toLowerCase());
    const matchesTab = activeTab === 'semua' || 
                      (activeTab === 'proses' && order.category === 'proses') ||
                      (activeTab === 'unit-ready' && order.category === 'unit-ready');
    return matchesSearch && matchesTab;
  });

  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 mb-4">
          <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="M4 6h16M4 12h16M4 18h16" />
            </svg>
          </button>
          <h1 className="text-lg font-bold text-gray-900">DMS AutoPRO</h1>
          <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">
          {/* Title */}
          <h2 className="text-2xl font-bold text-gray-900">Monitoring Pesanan</h2>

          {/* Search Bar */}
          <div className="relative">
            <input
              type="text"
              placeholder="Cari ID Pesanan atau Unit..."
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="w-full pl-10 pr-4 py-3 bg-gray-100 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-slate-800"
            />
            <svg className="w-5 h-5 text-gray-400 absolute left-3 top-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
            </svg>
          </div>

          {/* Tabs */}
          <div className="flex gap-2">
            <button
              onClick={() => setActiveTab('semua')}
              className={`px-6 py-2 rounded-full text-sm font-semibold transition-colors ${
                activeTab === 'semua'
                  ? 'bg-slate-800 text-white'
                  : 'bg-gray-100 text-gray-600'
              }`}
            >
              Semua
            </button>
            <button
              onClick={() => setActiveTab('proses')}
              className={`px-6 py-2 rounded-full text-sm font-semibold transition-colors ${
                activeTab === 'proses'
                  ? 'bg-slate-800 text-white'
                  : 'bg-gray-100 text-gray-600'
              }`}
            >
              Proses
            </button>
            <button
              onClick={() => setActiveTab('unit-ready')}
              className={`px-6 py-2 rounded-full text-sm font-semibold transition-colors ${
                activeTab === 'unit-ready'
                  ? 'bg-slate-800 text-white'
                  : 'bg-gray-100 text-gray-600'
              }`}
            >
              Unit Ready
            </button>
          </div>

          {/* Order Cards */}
          <div className="space-y-4">
            {filteredOrders.map((order) => (
              <div key={order.id} className="bg-white rounded-2xl p-4 shadow-sm">
                <div className="flex gap-3 mb-3">
                  <div className="w-16 h-16 bg-gray-800 rounded-xl flex items-center justify-center overflow-hidden flex-shrink-0">
                    <svg className="w-10 h-10 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 className="flex-1">
                    <div className="flex items-start justify-between mb-1">
                      <p className="text-xs text-gray-500 font-medium">{order.id}</p>
                      <span className={`text-xs px-3 py-1 rounded-full font-semibold ${order.statusColor}`}>
                        {order.status}
                      </span>
                    </div>
                    <h3 className="text-base font-bold text-gray-900">{order.unit}</h3>
                  </div>
                </div>

                {/* Progress */}
                <div className="mb-3">
                  <div className="flex justify-between items-center mb-2">
                    <p className="text-sm text-gray-700">{order.progressLabel}</p>
                    <p className="text-sm font-bold text-blue-600">{order.progress}%</p>
                  </div>
                  <div className="w-full bg-gray-200 rounded-full h-2">
                    <div
                      className="bg-slate-800 h-2 rounded-full transition-all"
                      style={{ width: `${order.progress}%` }}
                    ></div>
                  </div>
                </div>

                {/* Footer */}
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-1 text-gray-500">
                    <svg className="w-4 h-4" 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>
                    <span className="text-xs">{order.lastUpdate}</span>
                  </div>
                  <button 
                    onClick={() => navigate('/detail-monitoring')}
                    className="text-blue-600 text-xs font-semibold flex items-center gap-1 hover:text-blue-700 transition-colors"
                  >
                    {order.action}
                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                    </svg>
                  </button>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

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

export default Tracking;
