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

const Penawaran = () => {
  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">
        <div className="bg-white rounded-xl p-4 shadow-sm mb-4">
          <div className="flex items-center gap-2 mb-4">
            <span className="text-gray-500">← MENUNGGU / DISETUJUI / SELESAI</span>
          </div>
          
          <h1 className="text-2xl font-bold mb-1">Finalisasi Transaksi</h1>
          <div className="flex items-center gap-2 mb-4">
            <div className="w-3 h-3 bg-green-500 rounded-full"></div>
            <span className="text-sm font-semibold text-green-600">Status: Disetujui</span>
          </div>

          <div className="grid grid-cols-2 gap-4 mb-4">
            <div>
              <p className="text-xs text-gray-500 mb-1">NAMA PELANGGAN</p>
              <p className="font-bold">Alexander</p>
              <p className="font-bold">Sterling</p>
            </div>
            <div>
              <p className="text-xs text-gray-500 mb-1">ID TRANSAKSI</p>
              <p className="font-semibold text-sm">#DMS-2024-</p>
              <p className="font-semibold text-sm">8802</p>
            </div>
          </div>
        </div>

        {/* Car Image */}
        <div className="bg-white rounded-xl p-4 shadow-sm mb-4">
          <div className="bg-gradient-to-br from-teal-400 to-teal-600 rounded-lg h-40 flex items-center justify-center mb-3">
            <div className="text-white text-center">
              <p className="text-lg font-bold">2024 Executive Sport</p>
              <p className="text-sm">Sedan LX</p>
            </div>
          </div>
          <p className="text-xs text-gray-500 mb-1">MODEL MOBIL</p>
          <p className="font-bold">2024 Executive Sport</p>
          <p className="font-bold">Sedan LX</p>
        </div>

        {/* Harga */}
        <div className="bg-white rounded-xl p-4 shadow-sm mb-4">
          <div className="grid grid-cols-2 gap-4 mb-4">
            <div>
              <p className="text-xs text-gray-500 mb-1">HARGA DASAR</p>
              <p className="font-bold">Rp</p>
              <p className="font-bold">806.250.000</p>
            </div>
            <div>
              <p className="text-xs text-gray-500 mb-1">TAMBAHAN</p>
              <p className="font-bold">Rp</p>
              <p className="font-bold">28.750.000</p>
            </div>
          </div>
          
          <div className="bg-gray-50 rounded-lg p-3">
            <p className="text-xs text-gray-500 mb-1">HARGA AKHIR</p>
            <p className="text-2xl font-bold text-primary">Rp 835.000.000</p>
          </div>
        </div>

        {/* Metode Pembayaran */}
        <div className="bg-white rounded-xl p-4 shadow-sm mb-4">
          <p className="text-xs text-gray-500 font-semibold mb-3">METODE PEMBAYARAN</p>
          
          <div className="space-y-3">
            <div className="flex items-center justify-between p-3 border-2 border-primary rounded-lg bg-blue-50">
              <div className="flex items-center gap-3">
                <div className="w-5 h-5 rounded-full border-2 border-primary flex items-center justify-center">
                  <div className="w-3 h-3 rounded-full bg-primary"></div>
                </div>
                <div>
                  <p className="font-semibold">Tunai / Langsung</p>
                  <p className="text-xs text-gray-600">Pelunasan dalam 48 jam</p>
                </div>
              </div>
              <svg className="w-6 h-6 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z" />
              </svg>
            </div>

            <div className="flex items-center justify-between p-3 border-2 border-gray-200 rounded-lg">
              <div className="flex items-center gap-3">
                <div className="w-5 h-5 rounded-full border-2 border-gray-300"></div>
                <div>
                  <p className="font-semibold">Skema Kredit/Leasing</p>
                  <p className="text-xs text-gray-600">Tenor 36 Bulan, Bunga 3.5%</p>
                </div>
              </div>
              <svg className="w-6 h-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
              </svg>
            </div>
          </div>
        </div>

        {/* Action Button */}
        <div className="bg-primary rounded-xl p-4 text-white mb-4">
          <p className="text-sm font-semibold mb-2">LANGKAH SELANJUTNYA</p>
          <p className="text-lg font-bold mb-3">Buat Surat Perjanjian Jual Beli dan</p>
          <p className="text-lg font-bold mb-4">Tanda Tangan!</p>
          
          <button className="w-full bg-white text-primary font-semibold py-3 rounded-lg flex items-center justify-center gap-2">
            Konfirmasi Transaksi
            <svg className="w-5 h-5" 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>

        {/* Upload Dokumen */}
        <div className="bg-white rounded-xl p-4 shadow-sm">
          <div className="flex justify-between items-center mb-3">
            <p className="text-xs text-gray-500 font-semibold">UNDOAH DOKUMEN (KTP, SURAT PERJANJIAN)</p>
            <p className="text-xs text-gray-500">2 dari 2</p>
            <p className="text-xs text-gray-500">Terupload</p>
          </div>

          <div className="space-y-3">
            <div className="flex items-center gap-3 p-3 bg-blue-50 rounded-lg border border-blue-200">
              <div className="w-10 h-10 bg-blue-100 rounded 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="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                </svg>
              </div>
              <div className="flex-1">
                <p className="font-semibold text-sm">KTP Pelanggan</p>
                <p className="text-xs text-gray-600">Menunggu verifikasi (872.pdf)</p>
              </div>
              <svg className="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
              </svg>
            </div>

            <div className="flex items-center gap-3 p-3 bg-blue-50 rounded-lg border border-blue-200">
              <div className="w-10 h-10 bg-blue-100 rounded 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="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                </svg>
              </div>
              <div className="flex-1">
                <p className="font-semibold text-sm">Surat Perjanjian</p>
                <p className="text-xs text-gray-600">Menunggu unggahan tanda</p>
                <p className="text-xs text-gray-600">tangan</p>
              </div>
              <svg className="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
              </svg>
            </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 Penawaran;
