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

const Prospek = () => {
  const navigate = useNavigate();
  const [activeTab, setActiveTab] = useState('baru');
  const [searchQuery, setSearchQuery] = useState('');

  const prospekList = [
    {
      id: 1,
      initials: 'BP',
      initialsColor: 'bg-blue-200 text-blue-800',
      name: 'Bambang Pamungkas',
      subtitle: 'Ditambahkan hari ini',
      model: 'Chery Tiggo 8 Pro',
      lastActivity: 'Aktivitas terakhir: 2 jam lalu',
      status: 'HOT',
      statusColor: 'bg-green-100 text-green-700',
      type: 'baru'
    },
    {
      id: 2,
      initials: 'AS',
      initialsColor: 'bg-blue-200 text-blue-800',
      name: 'Anisa Salim',
      subtitle: 'Prospek dari IMS',
      model: 'Omoda 5 GT',
      lastActivity: 'Aktivitas terakhir: 5 jam lalu',
      status: 'WARM',
      statusColor: 'bg-yellow-100 text-yellow-700',
      type: 'tidak-lanjut'
    },
    {
      id: 3,
      initials: 'RW',
      initialsColor: 'bg-blue-200 text-blue-800',
      name: 'Rian Wijaya',
      subtitle: 'Website Inquiry',
      model: 'Tiggo 7 Pro',
      lastActivity: 'Aktivitas terakhir: 1 hari lalu',
      status: 'BARU',
      statusColor: 'bg-blue-100 text-blue-700',
      type: 'baru'
    }
  ];

  const filteredProspek = prospekList.filter(p => {
    const matchesSearch = p.name.toLowerCase().includes(searchQuery.toLowerCase()) || 
                         p.model.toLowerCase().includes(searchQuery.toLowerCase());
    const matchesTab = activeTab === 'baru' ? true : p.type === activeTab;
    return matchesSearch && matchesTab;
  });

  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 mb-4">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 bg-teal-700 rounded-full flex items-center justify-center text-white font-bold">
              D
            </div>
            <h1 className="text-lg font-bold text-gray-900">DMS AutoPRO</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>

        <h2 className="text-2xl font-bold text-gray-900 mb-4">Daftar Leads</h2>

        {/* Search Bar */}
        <div className="relative mb-4">
          <input
            type="text"
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            placeholder="Cari nama atau model mobil..."
            className="w-full pl-10 pr-4 py-3 bg-gray-100 border-0 rounded-xl text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-slate-800"
          />
          <svg className="w-5 h-5 text-gray-400 absolute left-3 top-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
          </svg>
        </div>

        {/* Tabs */}
        <div className="flex gap-2 overflow-x-auto pb-2">
          {[
            { id: 'baru', label: 'Baru' },
            { id: 'tidak-lanjut', label: 'Tindak Lanjut' },
            { id: 'hot', label: 'Hot' },
            { id: 'cold', label: 'Cold' }
          ].map((tab) => (
            <button
              key={tab.id}
              onClick={() => setActiveTab(tab.id)}
              className={`px-5 py-2 rounded-full font-semibold text-sm whitespace-nowrap transition-colors ${
                activeTab === tab.id
                  ? 'bg-slate-800 text-white'
                  : 'bg-gray-100 text-gray-700'
              }`}
            >
              {tab.label}
            </button>
          ))}
        </div>
      </div>
      
      <div className="flex-1 overflow-y-auto pb-20">
        <div className="p-4">
        {/* Prospek List */}
        <div className="space-y-3">
          {filteredProspek.map((prospek) => (
            <div 
              key={prospek.id} 
              onClick={() => navigate('/detail-aktivitas')}
              className="bg-white rounded-2xl p-4 shadow-sm cursor-pointer"
            >
              <div className="flex items-start gap-3 mb-3">
                <div className={`w-14 h-14 ${prospek.initialsColor} rounded-2xl flex items-center justify-center text-xl font-bold flex-shrink-0`}>
                  {prospek.initials}
                </div>
                <div className="flex-1">
                  <div className="flex items-center gap-2 mb-1">
                    <h3 className="font-bold text-gray-900">{prospek.name}</h3>
                    <span className={`${prospek.statusColor} text-xs px-2 py-0.5 rounded font-semibold`}>
                      {prospek.status}
                    </span>
                  </div>
                  <p className="text-xs text-gray-500 mb-2">{prospek.subtitle}</p>
                  
                  {/* Model Info */}
                  <div className="bg-gray-50 rounded-lg p-2 mb-2 flex items-center justify-between">
                    <div>
                      <p className="text-xs text-gray-500 mb-0.5">MOBIL MINAT</p>
                      <p className="text-sm font-bold text-gray-900">{prospek.model}</p>
                    </div>
                    <svg className="w-6 h-6 text-gray-400" 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>
                  </div>

                  {/* Last Activity */}
                  <div className="flex items-center gap-1 text-xs text-gray-500">
                    <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                    <span>{prospek.lastActivity}</span>
                  </div>
                </div>
              </div>

              {/* Action Button */}
              <button 
                onClick={(e) => {
                  e.stopPropagation();
                  navigate('/detail-aktivitas');
                }}
                className="w-full bg-slate-800 text-white py-3 rounded-xl text-sm font-semibold"
              >
                Detail
              </button>
            </div>
          ))}
        </div>

        {filteredProspek.length === 0 && (
          <div className="text-center py-12">
            <p className="text-gray-500">Tidak ada prospek ditemukan</p>
          </div>
        )}

        {/* Ask Dora Button */}
        <button 
          onClick={() => navigate('/ask-dora')}
          className="fixed bottom-24 right-4 bg-slate-800 text-white p-4 rounded-full shadow-lg flex flex-col items-center gap-1 z-10"
        >
          <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
          </svg>
        </button>
        </div>
      </div>

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

export default Prospek;
