const KanoCalculator = () => {
  const [functional, setFunctional] = useState('');
  const [dysfunctional, setDysfunctional] = useState('');
  const [result, setResult] = useState(null);

  const options = [
    { value: 'like', label: '気に入る (Like)' },
    { value: 'expect', label: '当然である (Must-be)' },
    { value: 'neutral', label: '何とも感じない (Neutral)' },
    { value: 'live-with', label: '仕方なく許容する (Live with)' },
    { value: 'dislike', label: '気に入らない (Dislike)' },
  ];

  const calculateKano = () => {
    if (!functional || !dysfunctional) return;

    // Simplified Kano Logic Table
    // F\D | Like | Expect | Neutral | LiveWith | Dislike
    // Like | Q | A | A | A | P
    // Expect | R | I | I | I | M
    // Neutral| R | I | I | I | M
    // LiveWit| R | I | I | I | M
    // Dislike| R | R | R | R | Q
    
    // A=Attractive, P=Performance, M=Must-be, I=Indifferent, R=Reverse, Q=Questionable
    
    // Matrix representation for demo simplicity
    const matrix = {
      like: { like: 'Q', expect: 'A', neutral: 'A', 'live-with': 'A', dislike: 'P' },
      expect: { like: 'R', expect: 'I', neutral: 'I', 'live-with': 'I', dislike: 'M' },
      neutral: { like: 'R', expect: 'I', neutral: 'I', 'live-with': 'I', dislike: 'M' },
      'live-with': { like: 'R', expect: 'I', neutral: 'I', 'live-with': 'I', dislike: 'M' },
      dislike: { like: 'R', expect: 'R', neutral: 'R', 'live-with': 'R', dislike: 'Q' },
    };

    const typeCode = matrix[functional][dysfunctional];
    
    const types = {
      A: { name: '魅力的品質 (Attractive)', color: 'text-pink-500', desc: 'あると嬉しい！なくてもOK。差別化のチャンス。' },
      P: { name: '一元的品質 (Performance)', color: 'text-blue-500', desc: 'あればあるほど良い。競争力の源泉。' },
      M: { name: '当たり前品質 (Must-be)', color: 'text-orange-500', desc: 'ないと怒られる。あって当然。' },
      I: { name: '無関心品質 (Indifferent)', color: 'text-gray-500', desc: 'ユーザーは気にしない。リソースの無駄かも。' },
      R: { name: '逆品質 (Reverse)', color: 'text-red-500', desc: 'あると邪魔。ない方がいい。' },
      Q: { name: '懐疑的結果 (Questionable)', color: 'text-yellow-500', desc: '回答に矛盾があります。' },
    };

    setResult(types[typeCode]);
  };

  return (
    <div className="p-6 bg-card rounded-xl shadow-lg border max-w-md mx-auto">
      <h3 className="font-bold text-lg mb-4 text-center">狩野モデル判定デモ</h3>
      
      <div className="space-y-4 mb-6">
        <div>
          <label className="block text-sm font-medium mb-1">Q1. その機能が「ある」とき、どう感じますか？</label>
          <select 
            className="w-full p-2 rounded border bg-background"
            value={functional}
            onChange={(e) => { setFunctional(e.target.value); setResult(null); }}
          >
            <option value="">選択してください</option>
            {options.map(o => <option key={o.value} value={o.value}>{o.label}</option>)}
          </select>
        </div>

        <div>
          <label className="block text-sm font-medium mb-1">Q2. その機能が「ない」とき、どう感じますか？</label>
          <select 
            className="w-full p-2 rounded border bg-background"
            value={dysfunctional}
            onChange={(e) => { setDysfunctional(e.target.value); setResult(null); }}
          >
            <option value="">選択してください</option>
            {options.map(o => <option key={o.value} value={o.value}>{o.label}</option>)}
          </select>
        </div>
      </div>

      <button 
        onClick={calculateKano}
        disabled={!functional || !dysfunctional}
        className="w-full py-2 bg-primary text-primary-foreground font-bold rounded hover:opacity-90 disabled:opacity-50"
      >
        判定する
      </button>

      {result && (
        <div className="mt-6 p-4 bg-muted/50 rounded-lg text-center animate-in fade-in zoom-in duration-300">
          <p className="text-sm text-muted-foreground mb-1">この機能は...</p>
          <p className={`text-xl font-black ${result.color} mb-2`}>{result.name}</p>
          <p className="text-xs text-foreground">{result.desc}</p>
        </div>
      )}
    </div>
  );
};

render(<KanoCalculator />);