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

const FollowUp = () => {
  const navigate = useNavigate();
  const [formData, setFormData] = useState({
    tanggalWaktu: '',
    hasilFollowUp: 'Tertarik',
    catatanAktivitas: ''
  });

  const riwayatInteraksi = [
    {
      type: 'TELEPON KELUAR',
      typeColor: 'bg-blue-100 text-blue-700',
      date: '12 Okt, 14:20',
      title: 'Hasil: Tanya Harga',
      description: 'Menanyakan diskon akhir tahun untuk unit warna hitam. Belum bisa janji temu minggu ini.'
    },
    {
      type: 'WHATSAPP',
      typeColor: 'bg-green-100 text-green-700',
      date: '10 Okt, 09:15',
      title: 'Hasil: Tertarik',
      description: 'Mengirimkan brosur digital. Respon sangat positif terhadap fitur keamanan baru.'
    }
  ];

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('Follow up data:', formData);
    navigate('/detail-aktivitas');
  };

  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="w-10 h-10 bg-slate-800 rounded-full flex items-center justify-center text-white">
              <svg className="w-5 h-5" 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-lg font-bold text-gray-900">Input Aktivitas</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="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
            </svg>
          </button>
        </div>
      </div>

      <div className="flex-1 overflow-y-auto pb-20">
        <div className="p-4 space-y-4">
          {/* Customer Info */}
          <div className="bg-blue-50 rounded-2xl p-4">
            <div className="flex items-center gap-3">
              <div className="w-12 h-12 bg-blue-200 rounded-full flex items-center justify-center">
                <svg className="w-6 h-6 text-blue-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>
              </div>
              <div>
                <p className="text-xs text-gray-600 mb-1">SEDANG FOLLOW -UP</p>
                <h3 className="font-bold text-gray-900">Budi Santoso</h3>
                <p className="text-sm text-gray-600">Minat: Su V Premium u-100</p>
              </div>
            </div>
          </div>

          {/* Form */}
          <form onSubmit={handleSubmit} className="space-y-4">
            {/* Tanggal & Waktu */}
            <div>
              <label className="block text-sm font-semibold text-gray-700 mb-2">
                Tanggal & u aktu
              </label>
              <input
                type="datetime-local"
                value={formData.tanggalWaktu}
                onChange={(e) => setFormData({...formData, tanggalWaktu: e.target.value})}
                placeholder="mm/dd/yyyy, --:-- --"
                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>

            {/* Hasil Follow-up */}
            <div>
              <label className="block text-sm font-semibold text-gray-700 mb-2">
                Hasil Follow-up
              </label>
              <select
                value={formData.hasilFollowUp}
                onChange={(e) => setFormData({...formData, hasilFollowUp: e.target.value})}
                className="w-full px-4 py-3 bg-white border border-gray-200 rounded-xl text-gray-900 appearance-none focus:outline-none focus:ring-2 focus:ring-slate-800 focus:border-transparent"
              >
                <option value="Tertarik">Tertarik</option>
                <option value="Sangat Tertarik">Sangat Tertarik</option>
                <option value="Perlu Waktu">Perlu Waktu</option>
                <option value="Tidak Tertarik">Tidak Tertarik</option>
                <option value="Tidak Terjangkau">Tidak Terjangkau</option>
              </select>
            </div>

            {/* Catatan Aktivitas */}
            <div>
              <label className="block text-sm font-semibold text-gray-700 mb-2">
                Catatan Aktivitas
              </label>
              <textarea
                value={formData.catatanAktivitas}
                onChange={(e) => setFormData({...formData, catatanAktivitas: e.target.value})}
                placeholder="Masukkan detail percakapan atau langkah selanjutnya..."
                rows="5"
                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 hover:bg-slate-700 transition-colors"
            >
              Simpan Aktivitas
            </button>
          </form>

          {/* Riwayat Interaksi */}
          <div>
            <h3 className="font-bold text-gray-900 mb-3">Riwayat Interaksi</h3>
            <div className="space-y-3">
              {riwayatInteraksi.map((item, index) => (
                <div key={index} className="bg-white rounded-2xl p-4 shadow-sm">
                  <div className="flex items-start justify-between mb-2">
                    <span className={`${item.typeColor} text-xs px-3 py-1 rounded-full font-semibold`}>
                      {item.type}
                    </span>
                    <span className="text-xs text-gray-500">{item.date}</span>
                  </div>
                  <h4 className="font-bold text-gray-900 mb-1">{item.title}</h4>
                  <p className="text-sm text-gray-600">{item.description}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

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

export default FollowUp;
