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 [formData, setFormData] = useState({
    namaCustomer: '',
    noHP: '',
    unitDiminati: '',
    sumberLead: [],
    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-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 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) => {
    setFormData(prev => ({
      ...prev,
      sumberLead: prev.sumberLead.includes(id)
        ? prev.sumberLead.filter(s => s !== id)
        : [...prev.sumberLead, 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 flex items-center 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="ml-3 font-semibold text-gray-800">Tambah Lead Baru</span>
      </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="space-y-3">
              {units.map((unit) => (
                <button
                  key={unit.id}
                  type="button"
                  onClick={() => setFormData({...formData, unitDiminati: unit.id})}
                  className={`w-full bg-white rounded-xl p-4 border-2 transition-all text-left ${
                    formData.unitDiminati === unit.id
                      ? 'border-slate-800 shadow-md'
                      : 'border-gray-200'
                  }`}
                >
                  <div className="flex items-start justify-between mb-2">
                    <div className="flex-1">
                      <div className="flex items-center gap-2 mb-1">
                        <h3 className="font-bold 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-lg 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" 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 ${
                    formData.sumberLead.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;
