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

const Beranda = () => {
  const navigate = useNavigate();

  const recentActivities = [
    {
      name: 'Budi Santoso',
      activity: 'Janji Temu',
      detail: 'Hari Ini, 14:00',
      status: 'HOT',
      statusColor: 'bg-red-100 text-red-700',
      icon: '📅',
      iconBg: 'bg-gray-100'
    },
    {
      name: 'Siti Aminah',
      activity: 'Penawaran Terkirim',
      detail: 'Kemarin',
      status: 'WARM',
      statusColor: 'bg-yellow-100 text-yellow-700',
      icon: '📧',
      iconBg: 'bg-gray-100'
    },
    {
      name: 'Aris Kurniawan',
      activity: 'Panggilan Terlewat',
      detail: '2 jam yang lalu',
      status: 'COLD',
      statusColor: 'bg-blue-100 text-blue-700',
      icon: '📞',
      iconBg: 'bg-gray-100'
    }
  ];

  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">
            <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>
      </div>
      
      <div className="flex-1 overflow-y-auto pb-20">
        <div className="p-4 space-y-4">
        {/* Greeting */}
        <div>
          <h2 className="text-2xl font-bold text-gray-900 mb-1">Selamat datang, Sales</h2>
          <p className="text-sm text-gray-600 flex items-center gap-1">
            Semangat closing hari ini 🚀
          </p>
        </div>

        {/* Stats Cards */}
        <div className="grid grid-cols-2 gap-4">
          <div>
            <p className="text-xs text-gray-600 font-medium mb-1">TOTAL LEAD</p>
            <p className="text-4xl font-bold text-gray-900">12</p>
            <div className="w-16 h-1 bg-slate-800 rounded-full mt-2"></div>
          </div>

          <div>
            <p className="text-xs text-gray-600 font-medium mb-1">FOLLOW-UP</p>
            <p className="text-4xl font-bold text-gray-900">05</p>
            <div className="w-16 h-1 bg-blue-500 rounded-full mt-2"></div>
          </div>
        </div>

        {/* Menu Utama */}
        <div>
          <h3 className="text-sm font-bold text-gray-600 mb-3">MENU UTAMA</h3>
          <div className="grid grid-cols-3 gap-3">
            <button 
              onClick={() => navigate('/buat-penawaran')}
              className="bg-white rounded-2xl p-4 shadow-sm flex flex-col items-center gap-2"
            >
              <div className="w-14 h-14 bg-blue-100 rounded-2xl flex items-center justify-center">
                <svg className="w-7 h-7 text-blue-600" 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>
              <span className="text-xs font-bold text-gray-900 text-center">SALES</span>
            </button>

            <button 
              onClick={() => navigate('/prospek')}
              className="bg-white rounded-2xl p-4 shadow-sm flex flex-col items-center gap-2"
            >
              <div className="w-14 h-14 bg-orange-100 rounded-2xl flex items-center justify-center">
                <svg className="w-7 h-7 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
                </svg>
              </div>
              <span className="text-xs font-bold text-gray-900 text-center">PROSPEK</span>
            </button>

            <button 
              onClick={() => navigate('/prospek/input')}
              className="bg-white rounded-2xl p-4 shadow-sm flex flex-col items-center gap-2"
            >
              <div className="w-14 h-14 bg-green-100 rounded-2xl flex items-center justify-center">
                <svg className="w-7 h-7 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" />
                </svg>
              </div>
              <span className="text-xs font-bold text-gray-900 text-center">LEADS</span>
            </button>

            <button 
              onClick={() => navigate('/activities')}
              className="bg-white rounded-2xl p-4 shadow-sm flex flex-col items-center gap-2"
            >
              <div className="w-14 h-14 bg-purple-100 rounded-2xl flex items-center justify-center">
                <svg className="w-7 h-7 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                </svg>
              </div>
              <span className="text-xs font-bold text-gray-900 text-center">TRACKING</span>
            </button>
          </div>
        </div>

        {/* Aktivitas Terakhir */}
        <div>
          <div className="flex justify-between items-center mb-3">
            <h3 className="font-bold text-gray-900">Aktifitas Terakhir</h3>
            <button 
              onClick={() => navigate('/activities')}
              className="text-blue-600 text-sm font-semibold"
            >
              Lihat Detail
            </button>
          </div>
          
          <div className="space-y-3">
            {recentActivities.map((activity, index) => (
              <button
                key={index}
                onClick={() => navigate('/detail-aktivitas')}
                className="w-full bg-white rounded-2xl p-4 shadow-sm flex items-center gap-3"
              >
                <div className={`w-12 h-12 ${activity.iconBg} rounded-full flex items-center justify-center text-xl`}>
                  {activity.icon}
                </div>
                <div className="flex-1 text-left">
                  <h4 className="font-bold text-gray-900 text-sm mb-1">{activity.name}</h4>
                  <p className="text-xs text-gray-600">{activity.activity} • {activity.detail}</p>
                </div>
              </button>
            ))}
          </div>
        </div>

        {/* Ask Dora Button */}
        <button 
          onClick={() => navigate('/ask-dora')}
          className="fixed bottom-24 right-4 bg-slate-800 text-white px-4 py-3 rounded-full shadow-lg flex items-center gap-2 z-10"
        >
          <svg className="w-5 h-5" 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>
          <span className="text-sm font-semibold">ASK DORA</span>
        </button>
        </div>
      </div>

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

export default Beranda;
