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

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

  const spkList = [
    {
      id: 1,
      nomorDokumen: 'SPK/2024/08/0129',
      pelanggan: 'Bambang Wijaya',
      unitKendaraan: 'Chery Tiggo 8 Pro',
      tanggal: '24 Ags 2024',
      status: 'APPROVED',
      statusColor: 'bg-green-100 text-green-700'
    },
    {
      id: 2,
      nomorDokumen: 'SPK/2024/08/0130',
      pelanggan: 'Siti Maesaroh',
      unitKendaraan: 'Omoda 5 GT AWD',
      tanggal: '25 Ags 2024',
      status: 'PENDING',
      statusColor: 'bg-yellow-100 text-yellow-700'
    },
    {
      id: 3,
      nomorDokumen: 'SPK/2024/08/0131',
      pelanggan: 'Hendri Kusuma',
      unitKendaraan: 'Chery Omoda E5',
      tanggal: '25 Ags 2024',
      status: 'PROCESSING',
      statusColor: 'bg-blue-100 text-blue-700'
    }
  ];

  const filteredSPK = spkList.filter(spk => {
    const matchesSearch = spk.nomorDokumen.toLowerCase().includes(searchQuery.toLowerCase()) || 
                         spk.pelanggan.toLowerCase().includes(searchQuery.toLowerCase());
    const matchesTab = activeTab === 'semua' ? true : 
                      activeTab === 'menunggu' ? spk.status === 'PENDING' :
                      activeTab === 'disetujui' ? spk.status === 'APPROVED' : true;
    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">
          <div className="flex items-center gap-3">
            <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">Monitoring SPK</h1>
          </div>
          <button className="w-10 h-10 bg-teal-700 rounded-full flex items-center justify-center text-white font-bold">
            D
          </button>
        </div>

        {/* Search Bar */}
        <div className="relative mb-4">
          <input
            type="text"
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            placeholder="Cari No. SPK atau Nama Pelanggan"
            className="w-full pl-10 pr-4 py-3 bg-gray-100 border-0 rounded-xl text-gray-900 placeholder-gray-400 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 overflow-x-auto pb-2">
          {[
            { id: 'semua', label: 'Semua' },
            { id: 'menunggu', label: 'Menunggu' },
            { id: 'disetujui', label: 'Disetujui' }
          ].map((tab) => (
            <button
              key={tab.id}
              onClick={() => setActiveTab(tab.id)}
              className={`px-5 py-2 rounded-full font-semibold text-sm whitespace-nowrap transition-colors ${
                activeTab === tab.id
                  ? 'bg-slate-800 text-white'
                  : 'bg-gray-100 text-gray-700'
              }`}
            >
              {tab.label}
            </button>
          ))}
        </div>
      </div>
      
      <div className="flex-1 overflow-y-auto pb-20">
        <div className="p-4">
        {/* SPK List */}
        <div className="space-y-3">
          {filteredSPK.map((spk) => (
            <div 
              key={spk.id} 
              className="bg-white rounded-2xl p-4 shadow-sm"
            >
              <div className="flex items-start justify-between mb-3">
                <div className="flex-1">
                  <p className="text-xs text-gray-500 mb-1">NOMOR DOKUMEN</p>
                  <h3 className="font-bold text-gray-900 mb-2">{spk.nomorDokumen}</h3>
                </div>
                <span className={`${spk.statusColor} text-xs px-3 py-1 rounded-full font-semibold`}>
                  {spk.status}
                </span>
              </div>

              <div className="space-y-2 mb-3">
                <div className="flex items-center gap-2">
                  <svg className="w-4 h-4 text-gray-400" 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>
                    <p className="text-xs text-gray-500">PELANGGAN</p>
                    <p className="text-sm font-semibold text-gray-900">{spk.pelanggan}</p>
                  </div>
                </div>

                <div className="flex items-center gap-2">
                  <svg className="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M18.92 6.01C18.72 5.42 18.16 5 17.5 5h-11c-.66 0-1.21.42-1.42 1.01L3 12v8c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h12v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-8l-2.08-5.99zM6.5 16c-.83 0-1.5-.67-1.5-1.5S5.67 13 6.5 13s1.5.67 1.5 1.5S7.33 16 6.5 16zm11 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM5 11l1.5-4.5h11L19 11H5z"/>
                  </svg>
                  <div>
                    <p className="text-xs text-gray-500">UNIT KENDARAAN</p>
                    <p className="text-sm font-semibold text-gray-900">{spk.unitKendaraan}</p>
                  </div>
                </div>
              </div>

              <div className="flex items-center justify-between pt-3 border-t border-gray-100">
                <div className="flex items-center gap-1 text-xs 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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                  </svg>
                  <span>{spk.tanggal}</span>
                </div>
                <button 
                  onClick={() => navigate('/detail-spk')}
                  className="text-blue-600 text-sm font-semibold flex items-center gap-1"
                >
                  Detail
                  <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>

        {filteredSPK.length === 0 && (
          <div className="text-center py-12">
            <p className="text-gray-500">Tidak ada SPK ditemukan</p>
          </div>
        )}

        {/* Ask Dora Button */}
        <button 
          onClick={() => navigate('/ask-dora')}
          className="fixed bottom-24 right-4 bg-slate-800 text-white px-4 py-3 rounded-full shadow-lg flex items-center gap-2 z-10"
        >
          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
          </svg>
          <span className="text-sm font-semibold">ASK DORA</span>
        </button>
        </div>
      </div>

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

export default Activities;
