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

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

  return (
    <div className="flex flex-col h-screen bg-gray-50">
      <Header />
      
      <div className="flex-1 overflow-y-auto pb-20">
        <div className="p-4">
        <h1 className="text-2xl font-bold mb-1">Transaksi</h1>
        <p className="text-gray-600 mb-6">Riwayat dan status transaksi penjualan</p>

        <div className="space-y-4">
          {/* Transaksi Card 1 */}
          <div className="bg-white rounded-xl p-4 shadow-sm border-l-4 border-green-500">
            <div className="flex justify-between items-start mb-3">
              <div>
                <div className="flex items-center gap-2 mb-1">
                  <h3 className="font-bold">Alexander Sterling</h3>
                  <span className="bg-green-100 text-green-700 text-xs px-2 py-1 rounded-full">
                    SELESAI
                  </span>
                </div>
                <p className="text-sm text-gray-600">2024 Executive Sport Sedan LX</p>
                <p className="text-xs text-gray-500 mt-1">#DMS-2024-8802</p>
              </div>
            </div>
            <div className="flex justify-between items-center pt-3 border-t">
              <div>
                <p className="text-xs text-gray-500">Total</p>
                <p className="font-bold text-primary">Rp 835.000.000</p>
              </div>
              <button className="text-primary font-semibold text-sm">
                Lihat Detail →
              </button>
            </div>
          </div>

          {/* Transaksi Card 2 */}
          <div className="bg-white rounded-xl p-4 shadow-sm border-l-4 border-blue-500">
            <div className="flex justify-between items-start mb-3">
              <div>
                <div className="flex items-center gap-2 mb-1">
                  <h3 className="font-bold">Sarah Jenkins</h3>
                  <span className="bg-blue-100 text-blue-700 text-xs px-2 py-1 rounded-full">
                    PROSES
                  </span>
                </div>
                <p className="text-sm text-gray-600">GT Hybrid Sedan</p>
                <p className="text-xs text-gray-500 mt-1">#DMS-2024-8801</p>
              </div>
            </div>
            <div className="flex justify-between items-center pt-3 border-t">
              <div>
                <p className="text-xs text-gray-500">Total</p>
                <p className="font-bold text-primary">Rp 720.000.000</p>
              </div>
              <button className="text-primary font-semibold text-sm">
                Lihat Detail →
              </button>
            </div>
          </div>

          {/* Transaksi Card 3 */}
          <div className="bg-white rounded-xl p-4 shadow-sm border-l-4 border-orange-500">
            <div className="flex justify-between items-start mb-3">
              <div>
                <div className="flex items-center gap-2 mb-1">
                  <h3 className="font-bold">Marcus Vane</h3>
                  <span className="bg-orange-100 text-orange-700 text-xs px-2 py-1 rounded-full">
                    MENUNGGU
                  </span>
                </div>
                <p className="text-sm text-gray-600">Roadster Z - Carbon Pack</p>
                <p className="text-xs text-gray-500 mt-1">#DMS-2024-8800</p>
              </div>
            </div>
            <div className="flex justify-between items-center pt-3 border-t">
              <div>
                <p className="text-xs text-gray-500">Total</p>
                <p className="font-bold text-primary">Rp 950.000.000</p>
              </div>
              <button className="text-primary font-semibold text-sm">
                Lihat Detail →
              </button>
            </div>
          </div>
        </div>
        </div>
      </div>

      {/* Ask Dora Button */}
      <button 
        onClick={() => navigate('/ask-dora')}
        className="fixed bottom-24 left-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>

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

export default Transaksi;
