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

const AskDora = () => {
  const navigate = useNavigate();
  const [message, setMessage] = useState('');

  const quickActions = [
    { icon: '📊', text: 'Cek target bulan ini' },
    { icon: '📋', text: 'Daftar follow-up hari ini' },
    { icon: '📝', text: 'Bantuan input SPK' }
  ];

  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 justify-between shadow-sm">
        <div className="flex items-center gap-3">
          <button onClick={() => navigate('/')} 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>
          <div className="w-10 h-10 bg-slate-800 rounded-full flex items-center justify-center">
            <span className="text-white text-xl">🤖</span>
          </div>
          <div>
            <h1 className="font-bold text-gray-900">DORA</h1>
            <p className="text-xs text-green-600">ONLINE</p>
          </div>
        </div>
        <div className="flex items-center gap-3">
          <button className="text-gray-600">
            <svg className="w-6 h-6" 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>
          </button>
          <button className="text-gray-600">
            <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
            </svg>
          </button>
        </div>
      </div>

      {/* Content */}
      <div className="flex-1 overflow-y-auto pb-24">
        <div className="p-4 space-y-4">
        {/* Welcome Message */}
        <div className="text-center py-8">
          <h2 className="text-2xl font-bold text-gray-900 mb-2">Selamat Pagi, Rian</h2>
          <p className="text-gray-600">
            Kelola unit, prospek, dan target penjualan Anda dengan asisten AI yang lebih cerdas.
          </p>
        </div>

        {/* DORA Message */}
        <div className="flex gap-3">
          <div className="w-10 h-10 bg-slate-800 rounded-full flex items-center justify-center flex-shrink-0">
            <span className="text-white text-xl">🤖</span>
          </div>
          <div className="flex-1">
            <div className="bg-white rounded-2xl rounded-tl-none p-4 shadow-sm">
              <p className="text-gray-800">
                Halo, Rian! Saya DORA, asisten digital Anda. Ada yang bisa saya bantu untuk mempermudah pekerjaan Anda hari ini? 😊
              </p>
            </div>
            <p className="text-xs text-gray-500 mt-1 ml-2">09:41 AM</p>
          </div>
        </div>

        {/* Quick Actions */}
        <div className="space-y-2">
          {quickActions.map((action, index) => (
            <button
              key={index}
              className="w-full bg-white rounded-xl p-4 shadow-sm text-left flex items-center gap-3 hover:bg-gray-50 transition-colors"
            >
              <span className="text-2xl">{action.icon}</span>
              <span className="text-gray-800 font-medium">{action.text}</span>
              <svg className="w-5 h-5 text-gray-400 ml-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
              </svg>
            </button>
          ))}
        </div>
        </div>
      </div>

      {/* Input Area - Above Bottom Nav */}
      <div className="sticky bottom-16 z-40 bg-gray-50 border-t border-gray-200 px-4 py-3">
        <div className="flex items-center gap-3">
          <button className="text-gray-400 hover:text-gray-600">
            <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
          </button>
          <input
            type="text"
            value={message}
            onChange={(e) => setMessage(e.target.value)}
            placeholder="Tulis pesan..."
            className="flex-1 bg-white rounded-lg px-4 py-3 text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-slate-800 border border-gray-200"
          />
          <button className="bg-slate-800 text-white p-3 rounded-full hover:bg-slate-700 transition-colors flex-shrink-0">
            <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14 5l7 7m0 0l-7 7m7-7H3" />
            </svg>
          </button>
        </div>
      </div>

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

export default AskDora;
