'use client';

import { useState, useCallback } from 'react';
import { motion } from 'framer-motion';
import {
  HeartPulse,
  Search,
  Pill,
  Stethoscope,
  FileText,
  AlertTriangle,
  Clock,
  Loader2,
  Sparkles,
  Activity,
  Thermometer,
  Brain,
  Eye,
  Bone,
  Wind,
  Droplet,
  Shield,
} from 'lucide-react';

interface Symptom {
  id: string;
  name: string;
  icon: React.ElementType;
  category: string;
}

interface Article {
  id: string;
  title: string;
  category: string;
  readTime: string;
  icon: string;
}

const commonSymptoms: Symptom[] = [
  { id: '1', name: 'Головная боль', icon: Brain, category: 'Неврология' },
  { id: '2', name: 'Температура', icon: Thermometer, category: 'Общие' },
  { id: '3', name: 'Боль в горле', icon: Wind, category: 'ЛОР' },
  { id: '4', name: 'Боль в спине', icon: Bone, category: 'Ортопедия' },
  { id: '5', name: 'Проблемы со зрением', icon: Eye, category: 'Офтальмология' },
  { id: '6', name: 'Давление', icon: Activity, category: 'Кардиология' },
  { id: '7', name: 'Аллергия', icon: Droplet, category: 'Аллергология' },
  { id: '8', name: 'Усталость', icon: HeartPulse, category: 'Общие' },
];

const healthArticles: Article[] = [
  {
    id: '1',
    title: 'Как укрепить иммунитет зимой',
    category: 'Профилактика',
    readTime: '5 мин',
    icon: '🛡️',
  },
  {
    id: '2',
    title: 'Правильное питание для сердца',
    category: 'Кардиология',
    readTime: '7 мин',
    icon: '❤️',
  },
  {
    id: '3',
    title: 'Упражнения для здоровой спины',
    category: 'Ортопедия',
    readTime: '6 мин',
    icon: '🏃',
  },
  {
    id: '4',
    title: 'Как справиться со стрессом',
    category: 'Психология',
    readTime: '8 мин',
    icon: '🧘',
  },
];

const quickServices = [
  { icon: Stethoscope, label: 'Найти врача', color: 'bg-blue-500/10 text-blue-600' },
  { icon: Pill, label: 'Справочник лекарств', color: 'bg-green-500/10 text-green-600' },
  { icon: FileText, label: 'Анализы', color: 'bg-purple-500/10 text-purple-600' },
  { icon: Sparkles, label: 'AI Консультант', color: 'active-gradient text-gradient' },
];

function SymptomButton({ symptom, onClick }: { symptom: Symptom; onClick: () => void }) {
  return (
    <button
      onClick={onClick}
      className="flex items-center gap-2 px-3 py-2 bg-surface/50 border border-border/40 rounded-lg hover:border-border hover:bg-surface/70 transition-all text-left"
    >
      <symptom.icon className="w-4 h-4 text-muted flex-shrink-0" />
      <span className="text-sm text-secondary truncate">{symptom.name}</span>
    </button>
  );
}

function ArticleCard({ article, delay }: { article: Article; delay: number }) {
  return (
    <motion.div
      initial={{ opacity: 0, x: -8 }}
      animate={{ opacity: 1, x: 0 }}
      transition={{ delay }}
      className="flex items-center gap-3 p-3 bg-elevated/40 border border-border/40 rounded-xl hover:border-border transition-all cursor-pointer group"
    >
      <div className="w-10 h-10 rounded-xl bg-surface/60 flex items-center justify-center text-xl flex-shrink-0">
        {article.icon}
      </div>
      <div className="flex-1 min-w-0">
        <h3 className="text-sm font-medium text-primary group-hover:text-gradient transition-colors truncate">
          {article.title}
        </h3>
        <div className="flex items-center gap-2 text-xs text-muted">
          <span>{article.category}</span>
          <span>•</span>
          <span className="flex items-center gap-1">
            <Clock className="w-3 h-3" />
            {article.readTime}
          </span>
        </div>
      </div>
    </motion.div>
  );
}

export default function MedicinePage() {
  const [searchQuery, setSearchQuery] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const [aiResponse, setAiResponse] = useState<string | null>(null);

  const handleAIConsult = useCallback(async () => {
    if (!searchQuery.trim()) return;
    setIsLoading(true);
    setAiResponse(null);
    await new Promise((resolve) => setTimeout(resolve, 2000));
    setAiResponse(
      'На основе описанных симптомов рекомендую обратиться к терапевту для первичного осмотра. ' +
        'Это может быть связано с несколькими причинами, которые требуют диагностики. ' +
        'До визита к врачу: пейте больше жидкости, отдыхайте, избегайте переохлаждения.'
    );
    setIsLoading(false);
  }, [searchQuery]);

  const handleSymptomClick = (symptomName: string) => {
    setSearchQuery(symptomName);
  };

  return (
    <div className="h-full overflow-y-auto">
      <div className="max-w-2xl mx-auto px-4 sm:px-6 py-6 sm:py-8">
        {/* Header */}
        <div className="mb-6 sm:mb-8">
          <h1 className="text-xl sm:text-2xl font-semibold text-primary mb-1 sm:mb-2">Медицина</h1>
          <p className="text-sm text-secondary">AI-помощник по здоровью и медицине</p>
        </div>

        {/* Disclaimer */}
        <div className="flex items-start gap-3 p-4 bg-amber-500/5 border border-amber-500/20 rounded-xl mb-6">
          <AlertTriangle className="w-5 h-5 text-amber-600 flex-shrink-0 mt-0.5" />
          <div>
            <p className="text-sm font-medium text-amber-600 mb-1">Важно</p>
            <p className="text-xs text-muted">
              Информация носит справочный характер и не заменяет консультацию врача.
              При серьёзных симптомах обратитесь к специалисту.
            </p>
          </div>
        </div>

        {/* AI Search */}
        <div className="bg-elevated/40 border border-border/40 rounded-xl p-4 mb-6">
          <div className="relative mb-4">
            <Sparkles className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-gradient" />
            <input
              type="text"
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              onKeyDown={(e) => e.key === 'Enter' && handleAIConsult()}
              placeholder="Опишите симптомы или задайте вопрос о здоровье..."
              className="w-full h-12 pl-12 pr-4 bg-surface/50 border border-border/50 rounded-xl text-sm text-primary placeholder:text-muted focus:outline-none focus:border-accent/50 focus:ring-1 focus:ring-accent/20 transition-all"
            />
          </div>

          <button
            onClick={handleAIConsult}
            disabled={isLoading || !searchQuery.trim()}
            className="w-full h-11 flex items-center justify-center gap-2 active-gradient text-gradient font-medium text-sm rounded-xl disabled:opacity-50 disabled:cursor-not-allowed transition-opacity"
          >
            {isLoading ? (
              <>
                <Loader2 className="w-4 h-4 animate-spin" />
                AI анализирует...
              </>
            ) : (
              <>
                <Search className="w-4 h-4" />
                Получить консультацию AI
              </>
            )}
          </button>

          {/* AI Response */}
          {aiResponse && (
            <motion.div
              initial={{ opacity: 0, y: 8 }}
              animate={{ opacity: 1, y: 0 }}
              className="mt-4 p-4 bg-surface/50 border border-border/40 rounded-xl"
            >
              <div className="flex items-center gap-2 mb-2">
                <Shield className="w-4 h-4 text-gradient" />
                <span className="text-xs font-medium text-gradient">Рекомендация AI</span>
              </div>
              <p className="text-sm text-secondary leading-relaxed">{aiResponse}</p>
            </motion.div>
          )}
        </div>

        {/* Quick Services */}
        <div className="grid grid-cols-4 gap-2 sm:gap-3 mb-6 sm:mb-8">
          {quickServices.map((service) => (
            <button
              key={service.label}
              className={`flex flex-col items-center gap-2 p-3 sm:p-4 rounded-xl border border-border/40 hover:border-border transition-all ${service.color}`}
            >
              <service.icon className="w-5 h-5 sm:w-6 sm:h-6" />
              <span className="text-[10px] sm:text-xs font-medium text-center leading-tight">
                {service.label}
              </span>
            </button>
          ))}
        </div>

        {/* Common Symptoms */}
        <div className="mb-6 sm:mb-8">
          <div className="flex items-center gap-3 mb-4">
            <div className="w-9 h-9 rounded-xl bg-red-500/10 flex items-center justify-center">
              <HeartPulse className="w-4 h-4 text-red-600" />
            </div>
            <h2 className="text-sm font-medium text-primary">Частые симптомы</h2>
          </div>

          <div className="grid grid-cols-2 gap-2">
            {commonSymptoms.map((symptom) => (
              <SymptomButton
                key={symptom.id}
                symptom={symptom}
                onClick={() => handleSymptomClick(symptom.name)}
              />
            ))}
          </div>
        </div>

        {/* Health Articles */}
        <div className="mb-6">
          <div className="flex items-center gap-3 mb-4">
            <div className="w-9 h-9 rounded-xl bg-green-500/10 flex items-center justify-center">
              <FileText className="w-4 h-4 text-green-600" />
            </div>
            <h2 className="text-sm font-medium text-primary">Полезные статьи</h2>
          </div>

          <div className="space-y-2">
            {healthArticles.map((article, i) => (
              <ArticleCard key={article.id} article={article} delay={i * 0.05} />
            ))}
          </div>
        </div>

        {/* Emergency Info */}
        <div className="bg-red-500/5 border border-red-500/20 rounded-xl p-4">
          <div className="flex items-center gap-2 mb-2">
            <AlertTriangle className="w-4 h-4 text-red-600" />
            <span className="text-sm font-medium text-red-600">Экстренная помощь</span>
          </div>
          <p className="text-sm text-muted mb-3">
            При угрозе жизни немедленно вызывайте скорую помощь
          </p>
          <div className="flex gap-3">
            <a
              href="tel:103"
              className="flex-1 h-10 flex items-center justify-center gap-2 bg-red-500/10 border border-red-500/30 text-red-600 font-medium text-sm rounded-lg hover:bg-red-500/20 transition-colors"
            >
              📞 103
            </a>
            <a
              href="tel:112"
              className="flex-1 h-10 flex items-center justify-center gap-2 bg-red-500/10 border border-red-500/30 text-red-600 font-medium text-sm rounded-lg hover:bg-red-500/20 transition-colors"
            >
              📞 112
            </a>
          </div>
        </div>
      </div>
    </div>
  );
}