import React, { useState, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import axios from 'axios';
import './CaseDetail.css';

const CaseDetail = () => {
  const { id } = useParams();
  const navigate = useNavigate();
  const [caseData, setCase] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetchCase();
  }, [id]);

  const fetchCase = async () => {
    setLoading(true);
    try {
      const response = await axios.get(`/api/v1/cases/${id}`);
      setCase(response.data);
      setError(null);
    } catch (err) {
      setError('Ошибка загрузки карточки');
      console.error(err);
    } finally {
      setLoading(false);
    }
  };

  const formatDate = (dateString) => {
    if (!dateString) return 'Не указано';
    return new Date(dateString).toLocaleString('ru-RU');
  };

  const getPsychotypeDescription = (psychotype) => {
    const descriptions = {
      'explorer': {
        title: 'Исследователь',
        description: 'Активно исследует территорию, может уйти далеко от точки потери',
        searchTips: 'Расширенный радиус поиска, проверка интересных объектов'
      },
      'cautious': {
        title: 'Осторожный',
        description: 'Осторожен, держится знакомых мест',
        searchTips: 'Поиск вблизи точки потери, знакомые маршруты'
      },
      'passive': {
        title: 'Пассивный',
        description: 'Ждёт помощи, малоподвижен',
        searchTips: 'Тщательный осмотр укрытий, проверка мест для отдыха'
      },
      'panicker': {
        title: 'Паникёр',
        description: 'Паникует, может двигаться хаотично',
        searchTips: 'Проверка опасных мест, водоёмов, обрывов'
      }
    };
    return descriptions[psychotype] || { title: psychotype, description: '', searchTips: '' };
  };

  if (loading) return <div className="loading-state">Загрузка...</div>;
  if (error) return <div className="error-state">{error}</div>;
  if (!caseData) return <div className="error-state">Карточка не найдена</div>;

  const psychotypeInfo = caseData.psychotype_result 
    ? getPsychotypeDescription(caseData.psychotype_result)
    : null;

  return (
    <div className="case-detail">
      <div className="detail-header">
        <button className="btn-back" onClick={() => navigate('/admin/cases')}>
          ← Назад к списку
        </button>
        <h1>Карточка #{caseData.id}</h1>
      </div>

      <div className="detail-content">
        {/* Основная информация */}
        <section className="detail-section">
          <h2>Основная информация</h2>
          <div className="info-grid">
            <div className="info-item">
              <label>Возраст:</label>
              <span>{caseData.age || '—'} лет</span>
            </div>
            <div className="info-item">
              <label>Пол:</label>
              <span>{caseData.gender === 'male' ? 'Мужской' : caseData.gender === 'female' ? 'Женский' : '—'}</span>
            </div>
            <div className="info-item">
              <label>Дата создания:</label>
              <span>{formatDate(caseData.created_at)}</span>
            </div>
          </div>
        </section>

        {/* Диагнозы */}
        {caseData.diagnosis_type && caseData.diagnosis_type.length > 0 && (
          <section className="detail-section">
            <h2>Диагнозы</h2>
            <div className="diagnosis-list">
              {caseData.diagnosis_type.map((diagnosis, idx) => (
                <span key={idx} className="diagnosis-badge">{diagnosis}</span>
              ))}
            </div>
          </section>
        )}

        {/* Психотип */}
        {psychotypeInfo && (
          <section className="detail-section psychotype-section">
            <h2>Психотип: {psychotypeInfo.title}</h2>
            <div className="psychotype-info">
              <p className="psychotype-description">{psychotypeInfo.description}</p>
              <div className="search-tips">
                <h3>Рекомендации по поиску:</h3>
                <p>{psychotypeInfo.searchTips}</p>
              </div>
            </div>
          </section>
        )}

        {/* Ответы на вопросы психотипа */}
        {caseData.psychotype_answers && Object.keys(caseData.psychotype_answers).length > 0 && (
          <section className="detail-section">
            <h2>Ответы на вопросы</h2>
            <div className="answers-list">
              {caseData.psychotype_answers.unfamiliar_env && (
                <div className="answer-item">
                  <label>Поведение в незнакомой обстановке:</label>
                  <span>{caseData.psychotype_answers.unfamiliar_env}</span>
                </div>
              )}
              {caseData.psychotype_answers.stress_reaction && (
                <div className="answer-item">
                  <label>Реакция на стресс:</label>
                  <span>{caseData.psychotype_answers.stress_reaction}</span>
                </div>
              )}
              {caseData.psychotype_answers.group_role && (
                <div className="answer-item">
                  <label>Роль в группе:</label>
                  <span>{caseData.psychotype_answers.group_role}</span>
                </div>
              )}
              {caseData.psychotype_answers.risk_taking && (
                <div className="answer-item">
                  <label>Склонность к риску:</label>
                  <span>{caseData.psychotype_answers.risk_taking}</span>
                </div>
              )}
            </div>
          </section>
        )}
      </div>
    </div>
  );
};

export default CaseDetail;