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

const BuatPenawaran = () => {
  const navigate = useNavigate();
  const [activeTab, setActiveTab] = useState('kredit');
  const [showSuccessModal, setShowSuccessModal] = useState(false);
  const [formData, setFormData] = useState({
    namaPelanggan: '',
    noWhatsapp: '',
    namaCustomer: '',
    alamatPengiriman: '',
    tanggalTestDrive: '',
    pilihBrand: 'Chery',
    metodePembayaran: 'kredit',
    tenor: '12',
    uangMuka: '15.000.000',
    diskon: '',
    bookingFee: ''
  });

  const units = [
    {
      id: 'tiggo-8-pro-max',
      name: 'Tiggo 8 Pro Max 2026',
      price: 'Rp 650.000.000',
      specs: '2.0T AWD • 250 HP • 7 Seater',
      badge: 'READY STOCK',
      badgeColor: 'bg-green-100 text-green-700'
    },
    {
      id: 'omoda-5-gt',
      name: 'Omoda 5 GT 2026',
      price: 'Rp 480.000.000',
      specs: '1.6T DCT • 197 HP • Futuristic SUV',
      badge: 'INDENT',
      badgeColor: 'bg-orange-100 text-orange-700'
    },
    {
      id: 'tiggo-7-pro-hybrid',
      name: 'Tiggo 7 Pro Hybrid 2026',
      price: 'Rp 520.000.000',
      specs: '1.5T HEV • 170 HP • Efficient Hybrid',
      badge: 'READY STOCK',
      badgeColor: 'bg-green-100 text-green-700'
    }
  ];

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('Penawaran data:', formData);
    setShowSuccessModal(true);
  };

  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">
          <div className="flex items-center gap-3">
            <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>
            <h1 className="font-semibold text-gray-800">Input Pesanan/Penjualan</h1>
          </div>
          <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="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
            </svg>
          </button>
        </div>
      </div>

      <div className="flex-1 overflow-y-auto pb-20">
        <form onSubmit={handleSubmit} className="p-4 space-y-4">
          {/* Data Pelanggan */}
          <div className="bg-white rounded-2xl p-4 shadow-sm">
            <div className="flex items-center gap-2 mb-4">
              <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>
              <h3 className="font-bold text-gray-900">Data Pelanggan</h3>
            </div>

            <div className="space-y-3">
              <div>
                <label className="block text-sm text-gray-600 mb-2">Nama Pelanggan</label>
                <input
                  type="text"
                  value={formData.namaPelanggan}
                  onChange={(e) => setFormData({...formData, namaPelanggan: e.target.value})}
                  placeholder="Masukkan nama lengkap"
                  className="w-full px-4 py-3 bg-gray-50 border-0 rounded-xl text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-slate-800"
                />
              </div>

              <div>
                <label className="block text-sm text-gray-600 mb-2">NO WHATSAPP / HP</label>
                <input
                  type="tel"
                  value={formData.noWhatsapp}
                  onChange={(e) => setFormData({...formData, noWhatsapp: e.target.value})}
                  placeholder="Contoh: 08123456789"
                  className="w-full px-4 py-3 bg-gray-50 border-0 rounded-xl text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-slate-800"
                />
              </div>

              <div>
                <label className="block text-sm text-gray-600 mb-2">NIK / CUSTOMER ID</label>
                <input
                  type="text"
                  value={formData.namaCustomer}
                  onChange={(e) => setFormData({...formData, namaCustomer: e.target.value})}
                  placeholder="16 digit NIK"
                  className="w-full px-4 py-3 bg-gray-50 border-0 rounded-xl text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-slate-800"
                />
              </div>
            </div>
          </div>

          {/* Detail Pengiriman */}
          <div className="bg-white rounded-2xl p-4 shadow-sm">
            <div className="flex items-center gap-2 mb-4">
              <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">Detail Pengiriman</h3>
            </div>

            <div className="space-y-3">
              <div>
                <label className="block text-sm text-gray-600 mb-2">ALAMAT PENGIRIMAN</label>
                <textarea
                  value={formData.alamatPengiriman}
                  onChange={(e) => setFormData({...formData, alamatPengiriman: e.target.value})}
                  placeholder="Masukkan alamat lengkap"
                  rows="3"
                  className="w-full px-4 py-3 bg-gray-50 border-0 rounded-xl text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-slate-800 resize-none"
                />
              </div>

              <div>
                <label className="block text-sm text-gray-600 mb-2">TANGGAL TEST DRIVE</label>
                <input
                  type="date"
                  value={formData.tanggalTestDrive}
                  onChange={(e) => setFormData({...formData, tanggalTestDrive: e.target.value})}
                  placeholder="mm/dd/yyyy"
                  className="w-full px-4 py-3 bg-gray-50 border-0 rounded-xl text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-slate-800"
                />
              </div>
            </div>
          </div>

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

            <div className="space-y-3">
              <div>
                <label className="block text-sm text-gray-600 mb-2">PILIH BRAND</label>
                <select
                  value={formData.pilihBrand}
                  onChange={(e) => setFormData({...formData, pilihBrand: e.target.value})}
                  className="w-full px-4 py-3 bg-gray-50 border-0 rounded-xl text-gray-900 appearance-none focus:outline-none focus:ring-2 focus:ring-slate-800"
                >
                  <option value="Chery">Chery</option>
                  <option value="Hyundai">Hyundai</option>
                  <option value="Toyota">Toyota</option>
                </select>
              </div>

              {/* Unit List */}
              <div className="space-y-2">
                {units.map((unit) => (
                  <div
                    key={unit.id}
                    className="bg-gray-50 rounded-xl p-3 flex items-center justify-between cursor-pointer hover:bg-gray-100 transition-colors"
                  >
                    <div className="flex-1">
                      <div className="flex items-center gap-2 mb-1">
                        <h4 className="font-bold text-gray-900 text-sm">{unit.name}</h4>
                        <span className={`${unit.badgeColor} text-xs px-2 py-0.5 rounded font-semibold`}>
                          {unit.badge}
                        </span>
                      </div>
                      <p className="text-sm font-bold text-gray-900 mb-0.5">{unit.price}</p>
                      <p className="text-xs text-gray-600">{unit.specs}</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 5l7 7-7 7" />
                    </svg>
                  </div>
                ))}
              </div>
            </div>
          </div>

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

            <div className="flex gap-2 mb-4">
              <button
                type="button"
                onClick={() => setActiveTab('kredit')}
                className={`flex-1 py-2 rounded-lg font-semibold text-sm transition-colors ${
                  activeTab === 'kredit'
                    ? 'bg-slate-800 text-white'
                    : 'bg-gray-100 text-gray-700'
                }`}
              >
                Kredit
              </button>
              <button
                type="button"
                onClick={() => setActiveTab('cash')}
                className={`flex-1 py-2 rounded-lg font-semibold text-sm transition-colors ${
                  activeTab === 'cash'
                    ? 'bg-slate-800 text-white'
                    : 'bg-gray-100 text-gray-700'
                }`}
              >
                Cash
              </button>
            </div>

            {activeTab === 'kredit' && (
              <div className="space-y-3">
                <div>
                  <label className="block text-sm text-gray-600 mb-2">TENOR (BULAN)</label>
                  <select
                    value={formData.tenor}
                    onChange={(e) => setFormData({...formData, tenor: e.target.value})}
                    className="w-full px-4 py-3 bg-gray-50 border-0 rounded-xl text-gray-900 appearance-none focus:outline-none focus:ring-2 focus:ring-slate-800"
                  >
                    <option value="12">12 Bulan</option>
                    <option value="24">24 Bulan</option>
                    <option value="36">36 Bulan</option>
                    <option value="48">48 Bulan</option>
                    <option value="60">60 Bulan</option>
                  </select>
                </div>

                <div>
                  <label className="block text-sm text-gray-600 mb-2">UANG MUKA</label>
                  <input
                    type="text"
                    value={formData.uangMuka}
                    onChange={(e) => setFormData({...formData, uangMuka: e.target.value})}
                    placeholder="Masukkan nominal"
                    className="w-full px-4 py-3 bg-gray-50 border-0 rounded-xl text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-slate-800"
                  />
                </div>

                {/* Cicilan Preview */}
                <div className="bg-blue-50 rounded-xl p-4">
                  <p className="text-xs text-gray-600 mb-1">Cicilan Perbulan</p>
                  <p className="text-2xl font-bold text-gray-900">Rp 12.400.000</p>
                  <p className="text-xs text-gray-600 mt-2">
                    Estimasi bunga 6.5% per tahun. Syarat dan ketentuan berlaku.
                  </p>
                </div>
              </div>
            )}

            {activeTab === 'cash' && (
              <div className="space-y-3">
                <div>
                  <label className="block text-sm text-gray-600 mb-2">HARGA JUAL</label>
                  <div className="bg-gray-50 rounded-xl p-4">
                    <p className="text-2xl font-bold text-gray-900">Rp 488.800.000</p>
                  </div>
                </div>

                <div>
                  <label className="block text-sm text-gray-600 mb-2">DISKON</label>
                  <input
                    type="text"
                    value={formData.diskon}
                    onChange={(e) => setFormData({...formData, diskon: e.target.value})}
                    placeholder="Mendapatkan potongan harga khusus pembayaran tunai"
                    className="w-full px-4 py-3 bg-gray-50 border-0 rounded-xl text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-slate-800"
                  />
                </div>

                <div>
                  <label className="block text-sm text-gray-600 mb-2">BOOKING FEE</label>
                  <input
                    type="text"
                    value={formData.bookingFee}
                    onChange={(e) => setFormData({...formData, bookingFee: e.target.value})}
                    placeholder="Nominal minimal booking fee"
                    className="w-full px-4 py-3 bg-gray-50 border-0 rounded-xl text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-slate-800"
                  />
                </div>
              </div>
            )}
          </div>

          {/* Total Harga */}
          <div className="bg-slate-800 rounded-2xl p-5 text-white">
            <p className="text-xs text-gray-300 mb-1">TOTAL HARGA</p>
            <p className="text-4xl font-bold">Rp 488.800.000</p>
          </div>

          {/* Dokumen Operasional */}
          <div className="bg-white rounded-2xl p-4 shadow-sm">
            <div className="flex items-center gap-2 mb-4">
              <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">Dokumen Operasional</h3>
            </div>

            <div className="space-y-3">
              <button
                type="button"
                className="w-full bg-gray-50 rounded-xl p-4 flex items-center gap-3 text-left"
              >
                <div className="w-10 h-10 bg-gray-200 rounded-lg flex items-center justify-center">
                  <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="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-1">
                  <p className="font-semibold text-gray-900">Upload KTP</p>
                  <p className="text-xs text-gray-500">Maks 5MB (JPG, PNG)</p>
                </div>
              </button>

              <button
                type="button"
                className="w-full bg-gray-50 rounded-xl p-4 flex items-center gap-3 text-left"
              >
                <div className="w-10 h-10 bg-gray-200 rounded-lg flex items-center justify-center">
                  <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>
                </div>
                <div className="flex-1">
                  <p className="font-semibold text-gray-900">Kartu Keluarga</p>
                  <p className="text-xs text-gray-500">Maks 5MB (JPG, PNG)</p>
                </div>
              </button>

              <button
                type="button"
                className="w-full bg-gray-50 rounded-xl p-4 flex items-center gap-3 text-left"
              >
                <div className="w-10 h-10 bg-gray-200 rounded-lg flex items-center justify-center">
                  <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>
                </div>
                <div className="flex-1">
                  <p className="font-semibold text-gray-900">NPWP</p>
                  <p className="text-xs text-gray-500">Maks 5MB (JPG, PNG)</p>
                </div>
              </button>
            </div>
          </div>

          {/* Submit Button */}
          <button
            type="submit"
            className="w-full bg-slate-800 text-white py-4 rounded-xl font-semibold flex items-center justify-center gap-2"
          >
            Simpan & Proses Pesanan
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" />
            </svg>
          </button>
        </form>
      </div>

      <BottomNav />

      {/* Success Modal */}
      {showSuccessModal && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
          <div className="bg-white rounded-3xl p-8 max-w-sm w-full mx-4 animate-scale-in">
            {/* Success Icon */}
            <div className="flex justify-center mb-6">
              <div className="w-24 h-24 bg-green-500 rounded-full flex items-center justify-center shadow-lg">
                <svg className="w-12 h-12 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
                </svg>
              </div>
            </div>

            {/* Title */}
            <h2 className="text-2xl font-bold text-gray-900 text-center mb-3">
              SPK Berhasil Disimpan
            </h2>

            {/* Description */}
            <p className="text-sm text-gray-600 text-center mb-8">
              Pesanan telah diteruskan ke tim <span className="font-bold text-gray-900">Back Office Admin</span> untuk diproses lebih lanjut
            </p>

            {/* Buttons */}
            <div className="space-y-3">
              <button
                onClick={() => navigate('/')}
                className="w-full bg-slate-800 text-white py-4 rounded-xl font-semibold hover:bg-slate-700 transition-colors"
              >
                Kembali ke Beranda
              </button>
              <button
                onClick={() => {
                  setShowSuccessModal(false);
                  navigate('/prospek');
                }}
                className="w-full bg-white text-gray-600 py-4 rounded-xl font-semibold hover:bg-gray-50 transition-colors"
              >
                Lihat Daftar SPK
              </button>
            </div>

            {/* Reference ID */}
            <div className="mt-6 pt-6 border-t border-gray-200 flex items-center justify-between">
              <span className="text-xs text-gray-500 font-semibold">REF ID</span>
              <span className="text-xs text-gray-700 bg-gray-100 px-3 py-1 rounded font-mono">SPK-2023-08922</span>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default BuatPenawaran;
