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

const KonfirmasiDeal = () => {
  const navigate = useNavigate();
  const [metodePembayaran, setMetodePembayaran] = useState('cash');

  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 flex items-center justify-between shadow-sm">
        <button onClick={() => navigate(-1)} 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 19l-7-7 7-7" />
          </svg>
        </button>
        <span className="font-semibold text-gray-800">Konfirmasi Deal</span>
        <button className="w-8 h-8 bg-gray-200 rounded-full flex items-center justify-center">
          <span className="text-sm">👤</span>
        </button>
      </div>

      <div className="flex-1 overflow-y-auto pb-20">
        <div className="p-4 space-y-4">
        {/* Status Badge */}
        <div className="bg-blue-50 rounded-xl p-3 flex items-center gap-3">
          <div className="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center">
            <svg className="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
          </div>
          <div>
            <p className="text-xs text-blue-600 font-semibold">STATUS DEAL</p>
            <p className="text-sm font-bold text-blue-900">Pending Review</p>
          </div>
        </div>

        {/* Customer Info */}
        <div className="bg-white rounded-xl p-4 shadow-sm">
          <div className="flex items-center gap-2 mb-3">
            <svg className="w-5 h-5 text-gray-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>
            <span className="text-xs text-gray-500 font-semibold">KLIK</span>
          </div>
          <h3 className="text-sm text-gray-600 mb-1">Nama Customer</h3>
          <p className="text-lg font-bold text-gray-900">Aditya Pramana</p>
        </div>

        {/* Unit Info */}
        <div className="bg-slate-800 rounded-xl p-4 text-white">
          <div className="flex items-center gap-2 mb-2">
            <svg className="w-5 h-5" 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>
            <span className="text-xs text-gray-300">UNIT TERPILIH</span>
          </div>
          <h2 className="text-2xl font-bold mb-1">Hyundai IONIQ 5</h2>
          <p className="text-sm text-gray-300 mb-4">Signature Long Range</p>
          
          <div className="border-t border-gray-600 pt-3">
            <p className="text-xs text-gray-300 mb-1">HARGA FINAL</p>
            <p className="text-3xl font-bold">Rp 1.250.000.000</p>
          </div>
        </div>

        {/* Metode Pembayaran */}
        <div className="bg-white rounded-xl p-4 shadow-sm">
          <div className="flex items-center gap-2 mb-3">
            <svg className="w-5 h-5 text-gray-600" 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>
            <h3 className="font-bold text-gray-900">Metode Pembayaran</h3>
          </div>

          <div className="grid grid-cols-2 gap-3">
            <button
              onClick={() => setMetodePembayaran('cash')}
              className={`p-4 rounded-xl border-2 transition-all ${
                metodePembayaran === 'cash'
                  ? 'bg-slate-800 border-slate-800 text-white'
                  : 'bg-white border-gray-200 text-gray-700'
              }`}
            >
              <div className="text-center">
                <p className="font-bold mb-1">Cash</p>
                <div className="flex items-center justify-center gap-1">
                  <p className="text-sm">Pelunasan</p>
                  {metodePembayaran === 'cash' && (
                    <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                      <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
                    </svg>
                  )}
                </div>
                <p className="text-xs mt-1">Langsung</p>
              </div>
            </button>

            <button
              onClick={() => setMetodePembayaran('leasing')}
              className={`p-4 rounded-xl border-2 transition-all ${
                metodePembayaran === 'leasing'
                  ? 'bg-slate-800 border-slate-800 text-white'
                  : 'bg-white border-gray-200 text-gray-700'
              }`}
            >
              <div className="text-center">
                <p className="font-bold mb-1">Leasing</p>
                <p className="text-sm">Cicilan</p>
                <p className="text-xs mt-1">Pembiayaan</p>
              </div>
            </button>
          </div>
        </div>

        {/* Upload Dokumen */}
        <div className="bg-white rounded-xl p-4 shadow-sm">
          <div className="flex items-center gap-2 mb-3">
            <svg className="w-5 h-5 text-gray-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>
            <h3 className="font-bold text-gray-900">Upload Dokumen</h3>
          </div>

          <div className="space-y-3">
            {/* KTP Upload */}
            <div className="border-2 border-dashed border-gray-300 rounded-xl p-6 text-center">
              <div className="w-12 h-12 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-3">
                <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="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>
              <p className="font-semibold text-gray-900 mb-1">Kartu Identitas (KTP)</p>
              <p className="text-xs text-gray-500 mb-3">JPEG atau PDF (Maks 5MB)</p>
              <button className="bg-blue-50 text-blue-600 px-4 py-2 rounded-lg text-sm font-semibold">
                Pilih File
              </button>
            </div>

            {/* SPK Upload */}
            <div className="border-2 border-dashed border-gray-300 rounded-xl p-6 text-center">
              <div className="w-12 h-12 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-3">
                <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="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>
              <p className="font-semibold text-gray-900 mb-1">Surat Pemesanan (SPK)</p>
              <p className="text-xs text-gray-500 mb-3">Tanda tangan sudah digital</p>
              <button className="bg-blue-50 text-blue-600 px-4 py-2 rounded-lg text-sm font-semibold">
                Pilih File
              </button>
            </div>
          </div>
        </div>

        {/* Info Note */}
        <div className="bg-blue-50 rounded-xl p-4 flex gap-3">
          <div className="flex-shrink-0">
            <svg className="w-5 h-5 text-blue-600" 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>
          </div>
          <p className="text-sm text-gray-700">
            Pastikan semua data sudah sesuai dengan KTP dan SPK. Perubahan setelah konfirmasi memerlukan persetujuan Head of Sales.
          </p>
        </div>

        {/* Submit Button */}
        <button className="w-full bg-slate-800 text-white py-4 rounded-xl font-semibold flex items-center justify-center gap-2">
          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
          Konfirmasi Deal 🚀
        </button>
        </div>
      </div>

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

export default KonfirmasiDeal;
