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

const InputProspek = () => {
  const navigate = useNavigate();
  const [showSuccessModal, setShowSuccessModal] = useState(false);
  const [selectedBrand, setSelectedBrand] = useState('Chery');
  const [selectedUnit, setSelectedUnit] = useState(null);
  const [selectedSources, setSelectedSources] = useState([]);
  
  const [formData, setFormData] = useState({
    namaCustomer: '',
    noHP: '',
    catatanTambahan: ''
  });

  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 sumberLeadOptions = [
    { id: 'walk-in', label: 'Walk-in', icon: '🚶' },
    { id: 'website', label: 'Website', icon: '🌐' },
    { id: 'instagram', label: 'Instagram', icon: '📷' },
    { id: 'referral', label: 'Referral', icon: '👥' }
  ];

  const handleSumberToggle = (id) => {
    setSelectedSources(prev =>
      prev.includes(id)
        ? prev.filter(s => s !== id)
        : [...prev, id]
    );
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('Form 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 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-semibold text-gray-900">Tambah Lead Baru</h1>
        </div>
      </div>
      
      <div className="flex-1 overflow-y-auto pb-20">
        <div className="p-4">
          {/* Header Section */}
          <div className="bg-slate-800 rounded-2xl p-5 mb-6 text-white">
            <p className="text-xs text-gray-300 mb-1">Manajemen Prospek</p>
            <h1 className="text-xl font-bold mb-2">Kualifikasi Prospek</h1>
            <p className="text-sm text-gray-300">
              Lengkapi data calon pelanggan untuk memulai proses sales funnel.
            </p>
          </div>

          <form onSubmit={handleSubmit} className="space-y-5">
            {/* Nama Customer */}
            <div>
              <label className="block text-sm font-semibold text-gray-700 mb-2">
                Nama Customer
              </label>
              <input
                type="text"
                value={formData.namaCustomer}
                onChange={(e) => setFormData({...formData, namaCustomer: e.target.value})}
                placeholder="Contoh: Budi Santoso"
                className="w-full px-4 py-3 bg-white border border-gray-200 rounded-xl text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-slate-800 focus:border-transparent"
                required
              />
            </div>

            {/* Nomor HP / WhatsApp */}
            <div>
              <label className="block text-sm font-semibold text-gray-700 mb-2">
                Nomor HP / u hatsApp
              </label>
              <input
                type="tel"
                value={formData.noHP}
                onChange={(e) => setFormData({...formData, noHP: e.target.value})}
                placeholder="+62  812 3456 7890"
                className="w-full px-4 py-3 bg-white border border-gray-200 rounded-xl text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-slate-800 focus:border-transparent"
                required
              />
            </div>

            {/* Unit yang Diminati */}
            <div>
              <label className="block text-sm font-semibold text-gray-700 mb-3">
                Unit yang Diminati
              </label>
              
              <div className="mb-3">
                <label className="block text-xs text-gray-500 mb-2">PILIH BRAND</label>
                <select
                  className="w-full px-4 py-3 bg-white border border-gray-200 rounded-xl text-gray-900 focus:outline-none focus:ring-2 focus:ring-slate-800"
                  value={selectedBrand}
                  onChange={(e) => setSelectedBrand(e.target.value)}
                >
                  <option>Chery</option>
                  <option>Jaecoo</option>
                </select>
              </div>

              <div className="space-y-3">
                {units.map((unit) => (
                  <button
                    key={unit.id}
                    type="button"
                    onClick={() => setSelectedUnit(unit.id)}
                    className={`w-full bg-white rounded-xl p-4 border-2 transition-all text-left ${
                      selectedUnit === unit.id
                        ? 'border-slate-800 shadow-md'
                        : 'border-gray-200'
                    }`}
                  >
                    <div className="flex items-start justify-between">
                      <div className="flex-1">
                        <div className="flex items-center gap-2 mb-1">
                          <h3 className="font-bold text-base text-gray-900">{unit.name}</h3>
                          <span className={`${unit.badgeColor} text-xs px-2 py-0.5 rounded font-semibold`}>
                            {unit.badge}
                          </span>
                        </div>
                        <p className="text-base font-bold text-gray-900 mb-1">{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>

            {/* Sumber Lead */}
            <div>
              <label className="block text-sm font-semibold text-gray-700 mb-3">
                Sumber Lead
              </label>
              <div className="grid grid-cols-2 gap-3">
                {sumberLeadOptions.map((option) => (
                  <button
                    key={option.id}
                    type="button"
                    onClick={() => handleSumberToggle(option.id)}
                    className={`flex items-center justify-center gap-2 px-4 py-3 rounded-xl border-2 transition-all ${
                      selectedSources.includes(option.id)
                        ? 'bg-slate-800 border-slate-800 text-white'
                        : 'bg-white border-gray-200 text-gray-700'
                    }`}
                  >
                    <span className="text-lg">{option.icon}</span>
                    <span className="font-medium text-sm">{option.label}</span>
                  </button>
                ))}
              </div>
            </div>

            {/* Catatan Tambahan */}
            <div>
              <label className="block text-sm font-semibold text-gray-700 mb-2">
                Catatan Tambahan
              </label>
              <textarea
                value={formData.catatanTambahan}
                onChange={(e) => setFormData({...formData, catatanTambahan: e.target.value})}
                placeholder="Tambahkan preferensi warna, budget, atau jadwal test drive..."
                rows="4"
                className="w-full px-4 py-3 bg-white border border-gray-200 rounded-xl text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-slate-800 focus:border-transparent resize-none"
              />
            </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 hover:bg-slate-700 transition-colors"
            >
              Simpan Lead
              <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>
      </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-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>

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

            {/* Description */}
            <p className="text-sm text-gray-600 text-center mb-8">
              Data prospek baru telah berhasil disimpan dan siap untuk proses tindak lanjut berikutnya.
            </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={() => navigate('/prospek')}
                className="w-full bg-white text-slate-800 py-4 rounded-xl font-semibold border-2 border-transparent hover:border-slate-800 transition-colors"
              >
                Lihat Daftar Prospek
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default InputProspek;
