import React, { useState } from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { motion } from "framer-motion";

export default function SeniorFitApp() {
  const [step, setStep] = useState(1);
  const [form, setForm] = useState({
    age: "",
    goal: "",
    pain: "",
    condition: "",
    surgery: "",
  });

  const handleChange = (e) => {
    setForm({ ...form, [e.target.name]: e.target.value });
  };

  const analyzeUser = () => {
    let risk = "low";
    let priority = "운동 시작 가능";
    let expert = "기초 체력 코치";

    if (form.pain.includes("무릎") || form.pain.includes("허리")) {
      risk = "medium";
      expert = "재활 전문 물리치료사";
      priority = "통증 관리 후 운동";
    }

    if (form.surgery === "yes") {
      risk = "high";
      expert = "재활 전문 물리치료사";
      priority = "병원/재활 상담 우선";
    }

    if (form.goal.includes("근력")) {
      expert = "시니어 전문 퍼스널 트레이너";
    }

    return { risk, priority, expert };
  };

  const result = analyzeUser();

  return (
    <div className="min-h-screen bg-gray-50 p-6">
      <div className="max-w-2xl mx-auto">
        <motion.h1
          initial={{ opacity: 0, y: -10 }}
          animate={{ opacity: 1, y: 0 }}
          className="text-3xl font-bold mb-6"
        >
          시니어핏 AI 상담
        </motion.h1>

        {step === 1 && (
          <Card className="p-6 space-y-4">
            <CardContent className="space-y-4">
              <input name="age" placeholder="나이" onChange={handleChange} className="w-full p-3 border rounded-xl" />
              <input name="goal" placeholder="목표 (근력, 재활, 체력)" onChange={handleChange} className="w-full p-3 border rounded-xl" />
              <input name="pain" placeholder="통증 부위" onChange={handleChange} className="w-full p-3 border rounded-xl" />
              <input name="condition" placeholder="현재 상태" onChange={handleChange} className="w-full p-3 border rounded-xl" />

              <select name="surgery" onChange={handleChange} className="w-full p-3 border rounded-xl">
                <option value="">수술 여부</option>
                <option value="yes">수술 경험 있음</option>
                <option value="no">없음</option>
              </select>

              <Button onClick={() => setStep(2)} className="w-full rounded-2xl">
                분석 결과 보기
              </Button>
            </CardContent>
          </Card>
        )}

        {step === 2 && (
          <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="space-y-4">
            <Card className="p-6">
              <CardContent className="space-y-3">
                <h2 className="text-xl font-semibold">상태 분석</h2>
                <p>위험도: <strong>{result.risk}</strong></p>
                <p>우선순위: <strong>{result.priority}</strong></p>
              </CardContent>
            </Card>

            <Card className="p-6">
              <CardContent className="space-y-3">
                <h2 className="text-xl font-semibold">추천 전문가</h2>
                <p className="text-lg font-bold">{result.expert}</p>
                <p className="text-sm text-gray-600">
                  현재 상태를 고려하면 무리한 운동보다는 단계적인 접근이 필요합니다.
                </p>
              </CardContent>
            </Card>

            <Card className="p-6">
              <CardContent className="space-y-3">
                <h2 className="text-xl font-semibold">다음 단계</h2>
                <ul className="list-disc pl-5 text-sm text-gray-700">
                  <li>전문가 상담 예약</li>
                  <li>통증 여부 지속 체크</li>
                  <li>무리 없는 범위에서 가벼운 움직임 시작</li>
                </ul>
              </CardContent>
            </Card>

            <Button variant="secondary" onClick={() => setStep(1)} className="w-full">
              다시 입력하기
            </Button>
          </motion.div>
        )}
      </div>
    </div>
  );
}