const InterviewPrepDemo = () => {
  const [topic, setTopic] = useState('ec_app'); // ec_app, fitness, remote_work
  const [showScript, setShowScript] = useState(false);

  const scripts = {
    ec_app: {
      title: "ECアプリの改善",
      questions: [
        { type: "導入", text: "今日はお時間をいただきありがとうございます。普段のお買い物について教えてください。" },
        { type: "事実確認", text: "最近、スマホで何か買ったのはいつですか？その時、どのアプリを使いましたか？" },
        { type: "課題探索", text: "その買い物の際、迷ったり困ったりした瞬間はありましたか？" },
        { type: "深掘り", text: "（もし「検索しにくかった」と言われたら）具体的にどんなキーワードで検索しましたか？その結果を見てどう感じましたか？" },
        { type: "競合比較", text: "なぜ他のアプリではなく、そのアプリを選んだのですか？" },
        { type: "NG質問例 ⚠️", text: "「もっと検索が早くなったら嬉しいですか？」（未来の誘導尋問なのでNG）" }
      ]
    },
    fitness: {
      title: "運動習慣の定着",
      questions: [
        { type: "導入", text: "普段の運動や健康管理について教えてください。" },
        { type: "事実確認", text: "最後に運動したのはいつですか？具体的に何をしましたか？" },
        { type: "課題探索", text: "「運動しようと思ったけどできなかった」日はありますか？その日は具体的にどんな状況でしたか？" },
        { type: "深掘り", text: "（もし「疲れていた」と言われたら）何が一番の疲れの原因でしたか？仕事ですか？睡眠不足ですか？" },
        { type: "動機", text: "そもそも、なぜ運動を続けたいと思っているのですか？（ラダリング）" }
      ]
    },
    remote_work: {
      title: "リモートワーク支援ツール",
      questions: [
        { type: "導入", text: "現在のお仕事の環境について教えてください。" },
        { type: "事実確認", text: "昨日の一日のスケジュールを、朝起きてから寝るまで時系列で教えてください。" },
        { type: "課題探索", text: "リモートワーク中に「寂しい」や「やりづらい」と感じた具体的なエピソードはありますか？" },
        { type: "ツール利用", text: "コミュニケーションのために、今はどんなツールを使っていますか？そのツールの不満点は？" },
        { type: "魔法の杖", text: "もし魔法が使えて、今の環境を一つだけ直せるとしたら、何をどう変えますか？" }
      ]
    }
  };

  return (
    <div className="p-6 bg-card rounded-xl shadow-lg border max-w-2xl mx-auto">
      <h3 className="font-bold text-lg mb-4 text-center">インタビューガイド作成</h3>
      
      <div className="flex gap-2 justify-center mb-6">
        <select 
          value={topic} 
          onChange={(e) => { setTopic(e.target.value); setShowScript(false); }}
          className="p-2 border rounded bg-background"
        >
          <option value="ec_app">テーマ: ECアプリの改善</option>
          <option value="fitness">テーマ: 運動習慣の定着</option>
          <option value="remote_work">テーマ: リモートワーク支援</option>
        </select>
        
        <button 
          onClick={() => setShowScript(true)}
          className="bg-primary text-primary-foreground px-4 py-2 rounded font-bold hover:opacity-90"
        >
          質問リストを表示
        </button>
      </div>

      {showScript && (
        <div className="space-y-4 animate-in fade-in slide-in-from-top-2">
          <div className="bg-muted p-4 rounded-lg">
            <h4 className="font-bold border-b border-muted-foreground/20 pb-2 mb-4">
              {scripts[topic].title} - 想定スクリプト
            </h4>
            <div className="space-y-3">
              {scripts[topic].questions.map((q, i) => (
                <div key={i} className="flex gap-3 text-sm">
                  <span className={`px-2 py-1 rounded text-xs font-bold h-fit shrink-0 ${q.type.includes('NG') ? 'bg-red-100 text-red-600' : 'bg-blue-100 text-blue-600 dark:bg-blue-900 dark:text-blue-200'}`}>
                    {q.type}
                  </span>
                  <p className="leading-relaxed">{q.text}</p>
                </div>
              ))}
            </div>
          </div>
          <p className="text-xs text-muted-foreground text-center">
            ※ これらはあくまで「たたき台」です。実際のインタビューでは、相手の回答に合わせて柔軟に深掘りしてください。
          </p>
        </div>
      )}
    </div>
  );
};

render(<InterviewPrepDemo />);