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

const InputPesanan = () => {
  const navigate = useNavigate();
  const [selectedBrand, setSelectedBrand] = useState('Chery');
  const [selectedUnit, setSelectedUnit] = useState(null);
  const [paymentMethod, setPaymentMethod] = useState('kredit');
  const [showSuccessModal, setShowSuccessModal] = useState(false);

  const [formData, setFormData] = useState({
    namaPelanggan: '',
    noWhatsapp: '',
    nik: '',
    alamatPengiriman: '',
    tanggalTersediaPengiriman: '',
    tenor: '',
    uangMuka: '',
    cicilanPerBulan: '',
    hargaJual: '',
    diskon: '',
    bookingFee: '',
    totalBiaya: ''
  });

  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-500 text-white'
    },
    {
      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-500 text-white'
    },
    {
      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-500 text-white'
    }
  ];

  const handleSubmit = (e) => {
    e.preventDefault();
    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="text-base font-bold text-gray-900">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-700" 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-xs text-gray-500 mb-1">NAMA PELANGGAN</label>
                <input
                  type="text"
                  placeholder="Masukkan nama lengkap"
                  className="w-full px-3 py-2 bg-gray-50 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-slate-800"
                  value={formData.namaPelanggan}
                  onChange={(e) => setFormData({...formData, namaPelanggan: e.target.value})}
                />
              </div>

              <div>
                <label className="block text-xs text-gray-500 mb-1">NO WHATSAPP / HP</label>
                <input
                  type="tel"
                  placeholder="08xxxxxxxxxx"
                  className="w-full px-3 py-2 bg-gray-50 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-slate-800"
                  value={formData.noWhatsapp}
                  onChange={(e) => setFormData({...formData, noWhatsapp: e.target.value})}
                />
              </div>

              <div>
                <label className="block text-xs text-gray-500 mb-1">NIK / CUSTOMER ID</label>
                <input
                  type="text"
                  placeholder="16 digit NIK"
                  className="w-full px-3 py-2 bg-gray-50 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-slate-800"
                  value={formData.nik}
                  onChange={(e) => setFormData({...formData, nik: e.target.value})}
                />
              </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-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
              </svg>
              <h3 className="font-bold text-gray-900">Detail Pengiriman</h3>
            </div>

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

              <div>
                <label className="block text-xs text-gray-500 mb-1">TANGGAL TERSEDIA PENGIRIMAN</label>
                <input
                  type="text"
                  placeholder="mm/dd/yyyy"
                  className="w-full px-3 py-2 bg-gray-50 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-slate-800"
                  value={formData.tanggalTersediaPengiriman}
                  onChange={(e) => setFormData({...formData, tanggalTersediaPengiriman: e.target.value})}
                />
              </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-700" fill="currentColor" viewBox="0 0 20 20">
                <path d="M8 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM15 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z" />
                <path d="M3 4a1 1 0 00-1 1v10a1 1 0 001 1h1.05a2.5 2.5 0 014.9 0H10a1 1 0 001-1V5a1 1 0 00-1-1H3zM14 7a1 1 0 00-1 1v6.05A2.5 2.5 0 0115.95 16H17a1 1 0 001-1v-5a1 1 0 00-.293-.707l-2-2A1 1 0 0015 7h-1z" />
              </svg>
              <h3 className="font-bold text-gray-900">Pemilihan Unit</h3>
            </div>

            <div>
              <label className="block text-xs text-gray-500 mb-2">PILIH BRAND</label>
              <select
                className="w-full px-3 py-2 bg-gray-50 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-slate-800 mb-4"
                value={selectedBrand}
                onChange={(e) => setSelectedBrand(e.target.value)}
              >
                <option>Chery</option>
                <option>Omoda</option>
              </select>

              <div className="space-y-2">
                {units.map((unit) => (
                  <button
                    key={unit.id}
                    type="button"
                    onClick={() => setSelectedUnit(unit.id)}
                    className={`w-full bg-gray-50 rounded-xl p-3 text-left border-2 transition-all ${
                      selectedUnit === unit.id ? 'border-slate-800' : 'border-transparent'
                    }`}
                  >
                    <div className="flex items-start justify-between">
                      <div className="flex-1">
                        <div className="flex items-center gap-2 mb-1">
                          <h4 className="font-bold text-sm text-gray-900">{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 flex-shrink-0 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                      </svg>
                    </div>
                  </button>
                ))}
              </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-700" 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="flex gap-2 mb-4">
              <button
                type="button"
                onClick={() => setPaymentMethod('kredit')}
                className={`flex-1 py-2 rounded-lg text-sm font-semibold transition-colors ${
                  paymentMethod === 'kredit'
                    ? 'bg-slate-800 text-white'
                    : 'bg-gray-100 text-gray-700'
                }`}
              >
                Kredit
              </button>
              <button
                type="button"
                onClick={() => setPaymentMethod('cash')}
                className={`flex-1 py-2 rounded-lg text-sm font-semibold transition-colors ${
                  paymentMethod === 'cash'
                    ? 'bg-slate-800 text-white'
                    : 'bg-gray-100 text-gray-700'
                }`}
              >
                Cash
              </button>
            </div>

            {paymentMethod === 'kredit' ? (
              <div className="space-y-3">
                <div>
                  <label className="block text-xs text-gray-500 mb-1">NAMA LEASING</label>
                  <select
                    className="w-full px-3 py-2 bg-gray-50 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-slate-800 mb-4">
                    <option>ADIRA MULTIFINANCE (ADIRA)</option>
                    <option>MANDIRI UTAMA FINANCE (MUF)</option>
                </select>
                </div>
                <div>
                  <label className="block text-xs text-gray-500 mb-1">TENOR (BULAN)</label>
                  <input
                    type="text"
                    placeholder="Masukkan tenor"
                    className="w-full px-3 py-2 bg-gray-50 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-slate-800"
                    value={formData.tenor}
                    onChange={(e) => setFormData({...formData, tenor: e.target.value})}
                  />
                </div>
                <div>
                  <label className="block text-xs text-gray-500 mb-1">UANG MUKA</label>
                  <input
                    type="text"
                    placeholder="Rp 0"
                    className="w-full px-3 py-2 bg-gray-50 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-slate-800"
                    value={formData.uangMuka}
                    onChange={(e) => setFormData({...formData, uangMuka: e.target.value})}
                  />
                </div>
                <div>
                  <label className="block text-xs text-gray-500 mb-1">CICILAN PER BULAN</label>
                  <input
                    type="text"
                    placeholder="Rp 0"
                    className="w-full px-3 py-2 bg-gray-50 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-slate-800"
                    value={formData.cicilanPerBulan}
                    onChange={(e) => setFormData({...formData, cicilanPerBulan: e.target.value})}
                  />
                </div>
              </div>
            ) : (
              <div className="space-y-3">
                <div>
                  <label className="block text-xs text-gray-500 mb-1">HARGA JUAL</label>
                  <input
                    type="text"
                    placeholder="Rp 0"
                    className="w-full px-3 py-2 bg-gray-50 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-slate-800"
                    value={formData.hargaJual}
                    onChange={(e) => setFormData({...formData, hargaJual: e.target.value})}
                  />
                </div>
                <div>
                  <label className="block text-xs text-gray-500 mb-1">DISKON</label>
                  <input
                    type="text"
                    placeholder="Rp 0"
                    className="w-full px-3 py-2 bg-gray-50 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-slate-800"
                    value={formData.diskon}
                    onChange={(e) => setFormData({...formData, diskon: e.target.value})}
                  />
                </div>
                <div>
                  <label className="block text-xs text-gray-500 mb-1">BOOKING FEE</label>
                  <input
                    type="text"
                    placeholder="Rp 10.000.000"
                    className="w-full px-3 py-2 bg-gray-50 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-slate-800"
                    value={formData.bookingFee}
                    onChange={(e) => setFormData({...formData, bookingFee: e.target.value})}
                  />
                </div>
              </div>
            )}

            <div className="mt-4 pt-4 border-t">
              <div className="flex justify-between items-center">
                <span className="text-sm text-gray-600">Total Biaya</span>
                <span className="text-xl font-bold text-gray-900">Rp 488.800.000</span>
              </div>
            </div>
          </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-700" 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-2">
              <button type="button" className="w-full flex items-center gap-3 p-3 bg-gray-50 rounded-lg">
                <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="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" />
                  </svg>
                </div>
                <div className="flex-1 text-left">
                  <p className="text-sm font-semibold text-gray-900">Foto KTP</p>
                  <p className="text-xs text-gray-500">Upload foto KTP</p>
                </div>
              </button>

              <button type="button" className="w-full flex items-center gap-3 p-3 bg-gray-50 rounded-lg">
                <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 text-left">
                  <p className="text-sm font-semibold text-gray-900">Kartu Keluarga</p>
                  <p className="text-xs text-gray-500">Upload kartu keluarga</p>
                </div>
              </button>

              <button type="button" className="w-full flex items-center gap-3 p-3 bg-gray-50 rounded-lg">
                <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 text-left">
                  <p className="text-sm font-semibold text-gray-900">NPWP</p>
                  <p className="text-xs text-gray-500">Upload NPWP</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 animate-scale-in">
            <div className="flex justify-center mb-6">
              <div className="w-20 h-20 bg-green-500 rounded-full flex items-center justify-center">
                <svg className="w-10 h-10 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>
            <h2 className="text-2xl font-bold text-gray-900 text-center mb-3">
              Pesanan Berhasil!
            </h2>
            <p className="text-sm text-gray-600 text-center mb-8">
              Pesanan telah berhasil dibuat dan akan diproses segera.
            </p>
            <button
              onClick={() => {
                setShowSuccessModal(false);
                navigate('/activities');
              }}
              className="w-full bg-slate-800 text-white py-4 rounded-xl font-semibold"
            >
              Lihat Status Pesanan
            </button>
          </div>
        </div>
      )}
    </div>
  );
};

export default InputPesanan;
