const EvidenceBoard = () => {
  const levels = [
    { label: 'メタ分析・システマティックレビュー', score: 5, color: 'bg-green-500', desc: '複数研究の統合。最も信頼性が高い。' },
    { label: 'A/Bテスト（自社データ）', score: 4, color: 'bg-blue-500', desc: '自社ユーザーでの実証実験。文脈適合性が高い。' },
    { label: '観察研究・ユーザビリティテスト', score: 3, color: 'bg-yellow-500', desc: 'ユーザー行動の体系的な観察。' },
    { label: '専門家の意見・ケーススタディ', score: 2, color: 'bg-orange-500', desc: 'NNGroupなど専門機関の知見。参考にはなるが検証が必要。' },
    { label: '個人の経験・直感', score: 1, color: 'bg-red-500', desc: '出発点にはなるが、単独では根拠として弱い。' },
  ];

  const [selected, setSelected] = React.useState(null);
  const [evidence, setEvidence] = React.useState('');
  const [decision, setDecision] = React.useState('');

  return (
    <div className="p-6 bg-card rounded-xl shadow-lg border max-w-xl mx-auto">
      <h3 className="font-bold text-base mb-1 text-card-foreground">エビデンス評価ボード</h3>
      <p className="text-xs text-muted-foreground mb-4">デザイン判断の根拠となるエビデンスを評価する</p>

      <div className="mb-4">
        <label className="block text-xs font-bold text-muted-foreground mb-1">デザイン判断の内容</label>
        <input
          type="text"
          className="w-full p-2 rounded border bg-background text-sm"
          placeholder="例: CTAボタンをページ上部に固定する"
          value={decision}
          onChange={(e) => setDecision(e.target.value)}
        />
      </div>

      <div className="mb-4">
        <p className="text-xs font-bold text-muted-foreground mb-2">根拠となるエビデンスのレベルを選択</p>
        <div className="space-y-2">
          {levels.map((level, i) => (
            <button
              key={i}
              onClick={() => setSelected(i)}
              className={`w-full text-left p-2 rounded-lg border transition-all ${selected === i ? 'border-primary bg-primary/5' : 'border-border hover:border-primary/50'}`}
            >
              <div className="flex items-center gap-2">
                <div className="flex gap-0.5">
                  {[...Array(5)].map((_, j) => (
                    <div key={j} className={`w-2 h-2 rounded-full ${j < level.score ? level.color : 'bg-muted'}`} />
                  ))}
                </div>
                <span className="text-xs font-medium text-card-foreground">{level.label}</span>
              </div>
            </button>
          ))}
        </div>
      </div>

      {selected !== null && (
        <div className="bg-muted rounded-lg p-3 mb-4">
          <p className="text-xs font-bold text-muted-foreground mb-1">選択したエビデンスレベルの説明</p>
          <p className="text-sm text-card-foreground">{levels[selected].desc}</p>
        </div>
      )}

      <div>
        <label className="block text-xs font-bold text-muted-foreground mb-1">具体的なエビデンスの内容</label>
        <textarea
          className="w-full p-2 rounded border bg-background text-sm resize-none"
          rows={2}
          placeholder="例: 自社A/Bテスト（2024年Q3）でCTA固定表示がコンバージョン率+12%を記録"
          value={evidence}
          onChange={(e) => setEvidence(e.target.value)}
        />
      </div>

      {decision && selected !== null && evidence && (
        <div className="mt-4 bg-primary/5 border border-primary/20 rounded-lg p-3 relative">
          <div className="absolute -top-3 left-4 bg-background px-2 text-xs font-bold text-primary">生成されたエビデンス記録</div>
          <p className="text-sm text-card-foreground">
            <strong>判断:</strong> {decision}<br/>
            <strong>根拠レベル:</strong> {levels[selected].label}<br/>
            <strong>エビデンス:</strong> {evidence}
          </p>
        </div>
      )}
    </div>
  );
};

render(<EvidenceBoard />);