import React, { useState, useEffect } from 'react';
import { 
  Droplets, 
  Utensils, 
  AlertTriangle, 
  Heart, 
  Search, 
  Info, 
  CheckCircle, 
  XCircle,
  Menu,
  Phone
} from 'lucide-react';

const FoodGuide = () => {
  const [activeTab, setActiveTab] = useState('guia');
  const [waterCount, setWaterCount] = useState(0);
  const [mood, setMood] = useState('neutral');
  const [searchTerm, setSearchTerm] = useState('');

  // Persistir dados básicos no localStorage
  useEffect(() => {
    const savedWater = localStorage.getItem('kyra_water');
    if (savedWater) setWaterCount(parseInt(savedWater));
  }, []);

  const addWater = () => {
    const newCount = waterCount + 1;
    setWaterCount(newCount);
    localStorage.setItem('kyra_water', newCount.toString());
  };

  const resetWater = () => {
    setWaterCount(0);
    localStorage.setItem('kyra_water', '0');
  };

  // Base de dados de alimentos baseada no documento original
  const foodDatabase = [
    { name: 'Água de Coco', category: 'Líquidos', allowed: true, icon: '🥥', desc: 'Natural e repõe eletrólitos' },
    { name: 'Sucos Ácidos (Laranja/Limão)', category: 'Evitar', allowed: false, icon: '🍊', desc: 'Causa dor e ardor' },
    { name: 'Sorvete de Massa', category: 'Gelados', allowed: true, icon: '🍦', desc: 'Ajuda no inchaço e dor' },
    { name: 'Gelatina', category: 'Gelados', allowed: true, icon: '🍮', desc: 'Fácil de engolir e fresca' },
    { name: 'Purê de Batata', category: 'Pastosos', allowed: true, icon: '🥔', desc: 'Servir morno ou frio' },
    { name: 'Torradas/Biscoitos', category: 'Evitar', allowed: false, icon: '🍪', desc: 'Pode arranhar a garganta' },
    { name: 'Sopa Quente', category: 'Evitar', allowed: false, icon: '🍲', desc: 'O calor aumenta o risco de sangramento' },
    { name: 'Ovo Mexido Cremoso', category: 'Proteína', allowed: true, icon: '🍳', desc: 'Bem macio e frio/morno' },
    { name: 'Banana Amassada', category: 'Frutas', allowed: true, icon: '🍌', desc: 'Não ácida e macia' },
    { name: 'Refrigerante', category: 'Evitar', allowed: false, icon: '🥤', desc: 'Gás incomoda a cirurgia' },
    { name: 'Iogurte Natural', category: 'Laticínios', allowed: true, icon: '🥣', desc: 'Sem pedaços de frutas' },
    { name: 'Pipoca', category: 'Evitar', allowed: false, icon: '🍿', desc: 'Casquinhas são perigosas' },
  ];

  const filteredFoods = foodDatabase.filter(food => 
    food.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
    food.category.toLowerCase().includes(searchTerm.toLowerCase())
  );

  return (
    <div className="min-h-screen bg-pink-50 font-sans text-gray-700 pb-20">
      {/* Header */}
      <header className="bg-white p-6 rounded-b-3xl shadow-sm border-b border-pink-100">
        <div className="flex justify-between items-center">
          <div>
            <h1 className="text-2xl font-bold text-pink-600">Recuperação da Kyra 💖</h1>
            <p className="text-sm text-gray-500">Pós-operatório Adenoide</p>
          </div>
          <div className="bg-pink-100 p-2 rounded-full">
            <Heart className="text-pink-500 fill-current" size={24} />
          </div>
        </div>
      </header>

      {/* Main Content Area */}
      <main className="p-4 max-w-2xl mx-auto space-y-6">

        {/* VIEW: GUIA ALIMENTAR */}
        {activeTab === 'guia' && (
          <div className="animate-fade-in">
            <div className="bg-white p-4 rounded-2xl shadow-sm mb-6">
              <h2 className="text-lg font-bold text-teal-700 mb-2 flex items-center gap-2">
                <Search size={20} /> O que a Kyra pode comer?
              </h2>
              <input 
                type="text" 
                placeholder="Busque por 'sorvete', 'pão', etc..."
                className="w-full p-3 bg-gray-50 rounded-xl border border-gray-200 focus:outline-none focus:border-pink-300 transition-colors"
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
              />
            </div>

            <div className="space-y-3">
              {filteredFoods.map((food, index) => (
                <div key={index} className={`flex items-center p-4 rounded-xl border-l-4 shadow-sm bg-white ${food.allowed ? 'border-teal-400' : 'border-red-400'}`}>
                  <span className="text-3xl mr-4">{food.icon}</span>
                  <div className="flex-1">
                    <h3 className="font-bold text-gray-800">{food.name}</h3>
                    <p className="text-xs text-gray-500">{food.desc}</p>
                  </div>
                  {food.allowed ? (
                    <CheckCircle className="text-teal-500" />
                  ) : (
                    <XCircle className="text-red-500" />
                  )}
                </div>
              ))}
              
              {/* Fallback do Guia Original se não estiver buscando */}
              {searchTerm === '' && (
                <div className="mt-8 space-y-4">
                  <div className="bg-teal-50 p-4 rounded-xl border border-teal-100">
                    <h3 className="font-bold text-teal-800 mb-2">💧 Bebidas Recomendadas</h3>
                    <ul className="text-sm space-y-2 list-disc list-inside text-teal-700">
                      <li>Água Filtrada ou Mineral</li>
                      <li>Água de Coco Natural</li>
                      <li>Sucos não ácidos (melão, maçã) coados</li>
                      <li>Chás frios (camomila)</li>
                    </ul>
                  </div>

                  <div className="bg-blue-50 p-4 rounded-xl border border-blue-100">
                    <h3 className="font-bold text-blue-800 mb-2">🥣 Alimentos Macios</h3>
                    <p className="text-xs mb-2">Sempre frios ou mornos!</p>
                    <ul className="text-sm space-y-2 list-disc list-inside text-blue-700">
                      <li>Sorvetes de massa e gelatinas</li>
                      <li>Purês (batata, mandioquinha)</li>
                      <li>Sopas batidas e coadas</li>
                      <li>Mingau de aveia bem liso</li>
                    </ul>
                  </div>

                  <div className="bg-red-50 p-4 rounded-xl border border-red-100">
                    <h3 className="font-bold text-red-800 mb-2">🚫 Estritamente Proibido</h3>
                    <ul className="text-sm space-y-2 list-disc list-inside text-red-700">
                      <li>Crocantes (torradas, batata frita)</li>
                      <li>Ácidos (laranja, limão, tomate)</li>
                      <li>Muito quentes</li>
                      <li>Gaseificados</li>
                    </ul>
                  </div>
                </div>
              )}
            </div>
          </div>
        )}

        {/* VIEW: DIÁRIO INTERATIVO */}
        {activeTab === 'diario' && (
          <div className="animate-fade-in space-y-6">
            {/* Water Tracker */}
            <div className="bg-white p-6 rounded-2xl shadow-sm text-center border-2 border-blue-100">
              <h2 className="text-xl font-bold text-blue-600 mb-4">Hidratação da Kyra 💧</h2>
              <div className="text-6xl font-bold text-blue-500 mb-2">{waterCount}</div>
              <p className="text-gray-400 text-sm mb-6">copinhos hoje</p>
              
              <div className="flex gap-4 justify-center">
                <button 
                  onClick={addWater}
                  className="bg-blue-500 hover:bg-blue-600 active:scale-95 transition-transform text-white px-6 py-3 rounded-full font-bold shadow-lg flex items-center gap-2"
                >
                  <Droplets size={20} /> Bebeu Água!
                </button>
                <button 
                  onClick={resetWater}
                  className="text-gray-400 px-4 py-2 rounded-full hover:bg-gray-100 text-sm"
                >
                  Zerar
                </button>
              </div>
              <p className="mt-4 text-xs text-blue-400 bg-blue-50 p-2 rounded-lg">
                Dica: Ofereça pequenos goles a cada 30 minutos.
              </p>
            </div>

            {/* Mood Tracker */}
            <div className="bg-white p-6 rounded-2xl shadow-sm">
              <h2 className="text-lg font-bold text-gray-700 mb-4">Como ela está se sentindo?</h2>
              <div className="flex justify-between px-2">
                <button onClick={() => setMood('sad')} className={`text-4xl transition-transform hover:scale-110 ${mood === 'sad' ? 'opacity-100 scale-110' : 'opacity-40 grayscale'}`}>🤕</button>
                <button onClick={() => setMood('neutral')} className={`text-4xl transition-transform hover:scale-110 ${mood === 'neutral' ? 'opacity-100 scale-110' : 'opacity-40 grayscale'}`}>😐</button>
                <button onClick={() => setMood('happy')} className={`text-4xl transition-transform hover:scale-110 ${mood === 'happy' ? 'opacity-100 scale-110' : 'opacity-40 grayscale'}`}>🥰</button>
              </div>
              <div className="mt-4 text-center text-sm text-gray-500">
                {mood === 'sad' && "Dor ou desconforto. Hora do remédio?"}
                {mood === 'neutral' && "Estável. Continue hidratando."}
                {mood === 'happy' && "Ótima recuperação! Continue assim."}
              </div>
            </div>
          </div>
        )}

        {/* VIEW: ALERTAS MÉDICOS */}
        {activeTab === 'alertas' && (
          <div className="animate-fade-in">
            <div className="bg-orange-50 border-2 border-orange-200 rounded-2xl p-6 mb-6">
              <div className="flex items-center gap-3 mb-4">
                <AlertTriangle className="text-orange-500" size={32} />
                <h2 className="text-xl font-bold text-orange-700">Sinais de Alerta</h2>
              </div>
              <p className="text-orange-800 mb-4 font-medium">Contate o médico imediatamente se notar:</p>
              <ul className="space-y-3">
                {[
                  "Febre acima de 38°C persistente",
                  "Sangramento ativo (boca ou nariz)",
                  "Dor intensa que remédio não alivia",
                  "Recusa total de líquidos (6-8h)",
                  "Sinais de desidratação (boca seca, sem urina)"
                ].map((item, i) => (
                  <li key={i} className="flex items-start gap-2 text-orange-900 bg-orange-100 p-2 rounded-lg text-sm">
                    <span className="font-bold">•</span> {item}
                  </li>
                ))}
              </ul>
            </div>
            
            <div className="bg-white p-4 rounded-xl shadow-sm text-center">
              <h3 className="font-bold text-gray-600 mb-2">Lembrete Importante</h3>
              <p className="text-sm text-gray-500">
                Este aplicativo é um guia de apoio. Siga sempre as orientações específicas passadas pelo cirurgião da Kyra.
              </p>
            </div>
          </div>
        )}

      </main>

      {/* Bottom Navigation */}
      <nav className="fixed bottom-0 w-full bg-white border-t border-gray-100 shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.05)] px-6 py-3 flex justify-between items-center z-50">
        <button 
          onClick={() => setActiveTab('guia')}
          className={`flex flex-col items-center gap-1 ${activeTab === 'guia' ? 'text-pink-500' : 'text-gray-400'}`}
        >
          <Utensils size={24} />
          <span className="text-xs font-medium">Comida</span>
        </button>
        
        <button 
          onClick={() => setActiveTab('diario')}
          className={`flex flex-col items-center gap-1 ${activeTab === 'diario' ? 'text-blue-500' : 'text-gray-400'}`}
        >
          <Droplets size={24} />
          <span className="text-xs font-medium">Diário</span>
        </button>

        <button 
          onClick={() => setActiveTab('alertas')}
          className={`flex flex-col items-center gap-1 ${activeTab === 'alertas' ? 'text-orange-500' : 'text-gray-400'}`}
        >
          <AlertTriangle size={24} />
          <span className="text-xs font-medium">Alertas</span>
        </button>
      </nav>
    </div>
  );
};

export default FoodGuide;