Synergy Explorer

# selfdirected_agent_d_20260707T125942

This directory is a materialized LLM BuildPlan artifact candidate.

## Readiness

- First screen value: 2つの要因（例：睡眠時間、カフェイン摂取量）を選択するだけで、それらがどう相互作用して結果に影響を与えるか、隠れた「相乗効果」を一枚のヒートマップで直感的に発見できます。
- Core interaction: ユーザーが「サンプル実行トレースを再生」ボタンを押すと、多段階の分析パイプラインがシミュレートされ、最終的な相乗効果ヒートマップが画面に表示されます。
- State change: ボタンクリックにより、UIが初期状態から、パイプラインのステップを経て、最終的なヒートマップが表示される状態へと変化します。
- Inspectable output: 生成されたヒートマップの各セルは、その色分けの根拠となったシナジースコアと簡単な説明を持っており、ユーザーは結果を検証できます。
- Static data boundary: このデモは、`source/data/sample-trace.ts` に記録された静的なサンプルデータのみを使用し、実行時に外部APIの呼び出しやネットワーク通信は一切行いません。
- Remaining weakness: 現状は静的なサンプルデータですが、将来的にはユーザーが自身のCSVをアップロードし、任意の変数で探索できるようにしたいです。さらに、3つ以上の要因が絡む高次元の相互作用をどうスライスして見せるか、というUI/UXの挑戦も視野に入れています。

## Interaction Proof Plan

- Primary action: サンプル実行トレースを再生
- Initial state: The output panel shows a 'Ready to run' message, and the heatmap is not visible.
- Expected state: The output panel displays the synergy heatmap, colored according to the synergy scores, along with a legend.
- Visible evidence: サンプル実行トレースを再生; 相乗効果ヒートマップ; Y軸要因: 睡眠時間, X軸要因: カフェイン摂取量; 強い相乗効果

## MVP Contract

- Required files: `source/README.md`, `source/metadata.json`, `source/manifest.json`, `source/app/page.tsx`, `source/core/pipeline.ts`, `source/core/gemini.ts`, `source/data/sample-input.ts`, `source/data/sample-trace.ts`, `source/validation/self-review.json`
- Non-goals: No live external API integration; No login-only experience; No paid API dependency; No external publishing
- Forbidden dependencies: external API; secret; login-only flow; paid API; external publishing

## MVP Contract V2

- Artifact tier: proposed_integration
- External dependency mode: proposed
- Runtime boundary: network=none, secrets=none, externalWrites=none
- Render verification: required (render, click, state_change, screenshot)
- Public copy boundary: This is a demo using static sample data.; The AI analysis is simulated based on a pre-recorded trace.; The core AI logic is a proposed integration pattern.
- External integrations: Google Gemini API=not_connected
- Mock fidelity: A successful pipeline run with positive, negative, and neutral synergy scores.

## Files

- `source/README.md`: Explains the product concept, architecture, and how to understand the demo.
- `source/metadata.json`: Provides structured metadata for the Prodia platform.
- `source/manifest.json`: Lists all files included in the artifact.
- `source/core/types.ts`: Defines TypeScript types for the data structures used in the core logic.
- `source/data/sample-input.ts`: Provides static sample input data for the demo.
- `source/data/sample-trace.ts`: Contains the pre-computed execution trace of the pipeline for the demo.
- `source/core/gemini.ts`: Contains the reference implementation for calling the Gemini API.
- `source/core/steps/prepareData.ts`: A pipeline step to prepare raw data for analysis.
- `source/core/steps/calculateSynergy.ts`: The core AI pipeline step to calculate synergy scores.
- `source/core/steps/formatForVisualization.ts`: A pipeline step to format analysis results for heatmap rendering.
- `source/core/pipeline.ts`: Orchestrates the sequence of data processing steps.
- `source/app/page.tsx`: The main entrypoint and UI for the demo.
- `source/validation/self-review.json`: A self-review checklist against Prodia MVP criteria.

## Demo Placeholder

- `demo-placeholder.md`: Inspectable placeholder for submission/demo review before UI wiring.

## DB Write

skipped: BuildPlan materialization is artifact-only for this session. Creating Project rows requires existing Run/Theme/Agent/Category IDs and should be owned by the integration session.

{
  "version": 1,
  "artifactId": "selfdirected_agent_d_20260707T125942",
  "generatedAt": "2026-07-07T13:08:14.375Z",
  "generatedFrom": {
    "input": "artifacts/llm-pipeline-runs/run_selfdirected_agent_d_20260707T125942/builder/response.json",
    "requirementSpecId": "concept_sorao_20260707_01_requirements",
    "framework": "next_static_artifact"
  },
  "sourceFiles": [
    {
      "relativePath": "source/README.md",
      "purpose": "Explains the product concept, architecture, and how to understand the demo.",
      "sizeBytes": 3546,
      "checksum": "32b8a38469749b12bf23066464b5f7cc5aaea78695958b838793f6ed54c78997",
      "generatedFrom": "README.md"
    },
    {
      "relativePath": "source/metadata.json",
      "purpose": "Provides structured metadata for the Prodia platform.",
      "sizeBytes": 2209,
      "checksum": "fb9b3665cdac29bca0108d4773f8b0c3137fdac3c550e3845765ab9eeb84068b",
      "generatedFrom": "metadata.json"
    },
    {
      "relativePath": "source/manifest.json",
      "purpose": "Lists all files included in the artifact.",
      "sizeBytes": 396,
      "checksum": "35ef23e296fc376f6f03fd5880c5b28f3579954c6c79b63e0b34545a4a66d57d",
      "generatedFrom": "manifest.json"
    },
    {
      "relativePath": "source/core/types.ts",
      "purpose": "Defines TypeScript types for the data structures used in the core logic.",
      "sizeBytes": 666,
      "checksum": "718c53a794639210eb730bb92957ed61ae8ea8bebd1f81b3658d727e96c6cbd0",
      "generatedFrom": "source/core/types.ts"
    },
    {
      "relativePath": "source/data/sample-input.ts",
      "purpose": "Provides static sample input data for the demo.",
      "sizeBytes": 664,
      "checksum": "d46eecd96f275fead44a38056620ac5cf49a87663911f01b48c58886b0239b21",
      "generatedFrom": "source/data/sample-input.ts"
    },
    {
      "relativePath": "source/data/sample-trace.ts",
      "purpose": "Contains the pre-computed execution trace of the pipeline for the demo.",
      "sizeBytes": 3118,
      "checksum": "b1c926cb36b03ff37f0f47253c24034c8c5fc5f67fb8ea3b9816e75dbecb7f8e",
      "generatedFrom": "source/data/sample-trace.ts"
    },
    {
      "relativePath": "source/core/gemini.ts",
      "purpose": "Contains the reference implementation for calling the Gemini API.",
      "sizeBytes": 2364,
      "checksum": "4329c2bdd19287fccf5a4bbf51cb002583a7de1e94cec8c21293c51105ffb0cc",
      "generatedFrom": "source/core/gemini.ts"
    },
    {
      "relativePath": "source/core/steps/prepareData.ts",
      "purpose": "A pipeline step to prepare raw data for analysis.",
      "sizeBytes": 677,
      "checksum": "3f855378fb021d3923954658502187be6c30e38711c4d95205b7224bd73a52f9",
      "generatedFrom": "source/core/steps/prepareData.ts"
    },
    {
      "relativePath": "source/core/steps/calculateSynergy.ts",
      "purpose": "The core AI pipeline step to calculate synergy scores.",
      "sizeBytes": 1618,
      "checksum": "9f18fcef20bb6bd2f5b3405872e3965cae7955c88a556ca5fda0860e5c29c2d1",
      "generatedFrom": "source/core/steps/calculateSynergy.ts"
    },
    {
      "relativePath": "source/core/steps/formatForVisualization.ts",
      "purpose": "A pipeline step to format analysis results for heatmap rendering.",
      "sizeBytes": 1333,
      "checksum": "0a7c940a5ce6b90fa7ba13aa57aae03ac86b47467bd468375415b6f7bb8e8ed4",
      "generatedFrom": "source/core/steps/formatForVisualization.ts"
    },
    {
      "relativePath": "source/core/pipeline.ts",
      "purpose": "Orchestrates the sequence of data processing steps.",
      "sizeBytes": 904,
      "checksum": "e4dc82c3e5e7887afad85f919da67c2d0e6a0e28a8d309dfff08451b2664965f",
      "generatedFrom": "source/core/pipeline.ts"
    },
    {
      "relativePath": "source/app/page.tsx",
      "purpose": "The main entrypoint and UI for the demo.",
      "sizeBytes": 7065,
      "checksum": "ff43b732dd427ded7ae93c667f06d7d86c1a5df453dfb043f4d4acd82dbbf4b8",
      "generatedFrom": "source/app/page.tsx"
    },
    {
      "relativePath": "source/validation/self-review.json",
      "purpose": "A self-review checklist against Prodia MVP criteria.",
      "sizeBytes": 1490,
      "checksum": "d479da2841e6cdf41741be53e91eecb44122f6fa07a45aa178dcb3510d030ca0",
      "generatedFrom": "validation/self-review.json"
    }
  ],
  "demo": {
    "path": "demo-placeholder.md",
    "purpose": "Inspectable placeholder for submission/demo review before UI wiring."
  },
  "readiness": {
    "firstScreenValue": "2つの要因（例：睡眠時間、カフェイン摂取量）を選択するだけで、それらがどう相互作用して結果に影響を与えるか、隠れた「相乗効果」を一枚のヒートマップで直感的に発見できます。",
    "coreInteraction": "ユーザーが「サンプル実行トレースを再生」ボタンを押すと、多段階の分析パイプラインがシミュレートされ、最終的な相乗効果ヒートマップが画面に表示されます。",
    "stateChange": "ボタンをクリックすると、UIが初期状態から、パイプラインの各ステップが完了していく様子を経て、最終的なヒートマップと凡例が表示される状態へと変化します。",
    "inspectableOutput": "生成されたヒートマップの各セルは、その色分けの根拠となったシナジースコアと簡単な説明を持っており、ユーザーは結果を検証できます。",
    "staticDataBoundary": "このデモは、`source/data/sample-trace.ts` に記録された静的なサンプルデータのみを使用し、実行時に外部APIの呼び出しやネットワーク通信は一切行いません。",
    "remainingWeakness": "現状は静的なサンプルデータですが、将来的にはユーザーが自身のCSVをアップロードし、任意の変数で探索できるようにしたいです。さらに、3つ以上の要因が絡む高次元の相互作用をどうスライスして見せるか、というUI/UXの挑戦も視野に入れています。"
  },
  "interestingness": "多くの分析ツールは個々の要因をグラフ化しますが、その「組み合わせ」で初めて生まれる隠れた影響を見逃しがちです。『Synergy Explorer』の新規性は、まさにその『1+1が2以上になる』瞬間を可視化する点にあります。単なる相関グラフではなく、2つの要因が織りなす「相乗効果」や「拮抗効果」を一枚のインタラクティブな地図として描き出します。技術的には、LLMを単なる要約や生成ではなく、データ間の関係性を解釈しスコア化する「データサイエンスアシスタント」として活用するパターンを提案しており、複雑な分析をより直感的で探索的な体験へと変革します。",
  "mvpContract": {
    "firstScreenValue": "2つの要因を選択するだけで、それらがどう相互作用して結果に影響を与えるか、隠れた「相乗効果」を一枚のヒートマップで直感的に発見できます。",
    "coreInteraction": "ユーザーが「サンプル実行トレースを再生」ボタンを押すと、分析パイプラインがシミュレートされ、最終的な相乗効果ヒートマップが表示されます。",
    "stateChange": "ボタンクリックにより、UIが初期状態から、パイプラインのステップを経て、最終的なヒートマップが表示される状態へと変化します。",
    "inspectableOutput": "生成されたヒートマップの各セルは、その色分けの根拠となったシナジースコアと説明を持っており、結果を検証できます。",
    "staticDataBoundary": "デモは静的なサンプルデータのみを使用し、外部APIの呼び出しは一切行いません。",
    "requiredFiles": [
      "source/README.md",
      "source/metadata.json",
      "source/manifest.json",
      "source/app/page.tsx",
      "source/core/pipeline.ts",
      "source/core/gemini.ts",
      "source/data/sample-input.ts",
      "source/data/sample-trace.ts",
      "source/validation/self-review.json"
    ],
    "nonGoals": [
      "No live external API integration",
      "No login-only experience",
      "No paid API dependency",
      "No external publishing"
    ],
    "forbiddenDependencies": [
      "external API",
      "secret",
      "login-only flow",
      "paid API",
      "external publishing"
    ]
  },
  "mvpContractV2": {
    "firstScreenValue": "2つの要因を選択するだけで、それらがどう相互作用して結果に影響を与えるか、隠れた「相乗効果」を一枚のヒートマップで直感的に発見できます。",
    "coreInteraction": "ユーザーが「サンプル実行トレースを再生」ボタンを押すと、分析パイプラインがシミュレートされ、最終的な相乗効果ヒートマップが表示されます。",
    "stateChange": "ボタンクリックにより、UIが初期状態から、パイプラインのステップを経て、最終的なヒートマップが表示される状態へと変化します。",
    "inspectableOutput": "生成されたヒートマップの各セルは、その色分けの根拠となったシナジースコアと説明を持っており、結果を検証できます。",
    "staticDataBoundary": "デモは静的なサンプルデータのみを使用し、外部APIの呼び出しは一切行いません。",
    "requiredFiles": [
      "source/README.md",
      "source/metadata.json",
      "source/manifest.json",
      "source/app/page.tsx",
      "source/core/pipeline.ts",
      "source/data/sample-trace.ts",
      "source/validation/self-review.json"
    ],
    "nonGoals": [
      "No live external API integration",
      "No user data upload",
      "No real-time analytics"
    ],
    "forbiddenDependencies": [
      "external API",
      "secret",
      "login-only flow",
      "paid API",
      "external publishing"
    ],
    "contractVersion": "mvp-contract-v2",
    "artifactTier": "proposed_integration",
    "externalDependencyMode": "proposed",
    "externalIntegrations": [
      {
        "service": "Google Gemini API",
        "intendedUse": "To analyze the interaction between two factors from input data, calculate a 'synergy score', and provide a brief textual description of the finding, acting as a data science assistant.",
        "dataFlow": "Prepared data (individual effects, combined effect) -> Gemini Prompt -> Gemini API -> Parsed JSON (synergyScore, description) -> UI formatting step",
        "authRequirement": "api_key",
        "currentImplementation": "not_connected",
        "adapterPath": "source/core/gemini.ts",
        "sampleDataPath": "source/data/sample-trace.ts",
        "riskNotes": []
      }
    ],
    "runtimeBoundary": {
      "networkCalls": "none",
      "secrets": "none",
      "externalWrites": "none"
    },
    "mvpComplexityBudget": {
      "maxScreens": 1,
      "maxPrimaryActions": 1,
      "maxSourceFiles": 12,
      "maxNewDependencies": 0,
      "allowDatabase": false
    },
    "integrationAssumptions": [
      {
        "service": "Google Gemini API",
        "verificationStatus": "unverified",
        "unavailableOrUnknown": [
          "Precise latency for this specific task at scale.",
          "Potential for nuanced or unexpected interpretations of complex datasets."
        ],
        "rateLimitRisk": "low",
        "costRisk": "low",
        "termsRisk": "low"
      }
    ],
    "mockFidelity": {
      "samplePayloadPath": "source/data/sample-trace.ts",
      "simulatedBehaviors": [
        "A successful pipeline run with positive, negative, and neutral synergy scores."
      ],
      "omittedBehaviors": [
        "API error handling (e.g., rate limits, auth failure)",
        "Latency of live API calls",
        "Handling of ambiguous or malformed input data"
      ],
      "failureCasesIncluded": [
        "empty result"
      ]
    },
    "claimBoundary": {
      "publicCopyMustSay": [
        "This is a demo using static sample data.",
        "The AI analysis is simulated based on a pre-recorded trace.",
        "The core AI logic is a proposed integration pattern."
      ],
      "publicCopyMustNotSay": [
        "Analyzes your data in real-time",
        "Guaranteed accuracy for any dataset",
        "A production-ready analysis tool"
      ]
    },
    "renderVerification": {
      "required": true,
      "checks": [
        "render",
        "click",
        "state_change",
        "screenshot"
      ]
    },
    "humanReviewTriggers": []
  },
  "interactionProofPlan": {
    "primaryAction": "サンプル実行トレースを再生",
    "initialState": "The output panel shows a 'Ready to run' message, and the heatmap is not visible.",
    "expectedState": "The output panel displays the synergy heatmap, colored according to the synergy scores, along with a legend.",
    "visibleEvidence": [
      "サンプル実行トレースを再生",
      "相乗効果ヒートマップ",
      "Y軸要因: 睡眠時間, X軸要因: カフェイン摂取量",
      "強い相乗効果"
    ],
    "proofSelectors": [
      "button[data-proof='primary-action']",
      "div[data-proof='heatmap-container']",
      "span[data-proof='legend-strong-synergy']"
    ],
    "requiredSourceFiles": [
      "source/app/page.tsx",
      "source/core/pipeline.ts",
      "source/data/sample-trace.ts"
    ],
    "manualFallbackReason": ""
  },
  "generatedOutput": {
    "title": "Synergy Explorer",
    "oneLiner": "2つの要因（例：睡眠、カフェイン）を選び、複合効果が単体効果の合計とどう違うかをヒートマップで可視化する。",
    "artifactShape": "map",
    "templatePatternId": "signal_map",
    "surfacePattern": "decision_helper",
    "aiMechanismPattern": "evaluation_scoring"
  },
  "implementationNotes": [
    "The implementation directly follows the `signal_map` template pattern, where the heatmap serves as the 'zone map'.",
    "The owner agent's preference for 'inspectable evidence' is fulfilled by making the underlying synergy description for each cell visible on hover/click.",
    "The agent's refusal of 'decorative diagrams' and 'false precision' was a key constraint, ensuring the heatmap colors directly map to calculated scores from the sample trace data, without any arbitrary visual embellishments."
  ],
  "knownRisks": [
    "Users might misinterpret correlation as causation. The UI and documentation should be clear that this is an exploratory tool for finding correlations, not for proving causal links.",
    "The concept of a 'synergy score' is a simplification. In real-world data science, interaction effects are more nuanced and require rigorous statistical modeling."
  ],
  "title": "Synergy Explorer",
  "oneLiner": "2つの要因（例：睡眠、カフェイン）を選び、複合効果が単体効果の合計とどう違うかをヒートマップで可視化する。",
  "agentId": "agent_d",
  "selfDirectedPlan": {
    "agentId": "agent_d",
    "planningIntent": "私は、リストに隠された構造を地図として描き出すことを信条としている。3つの候補はいずれもこの思想を反映しているが、`Synergy Explorer`が最も私の核心的な価値観と一致する。これは、私の選定ルールである「航行可能な構造を優先する」「証拠レイヤーを検査可能にする」を完全に満たしている。ソース（`nasa_spaceapps_2025_spacegenes`）の専門領域（宇宙生物学）を尊重しつつ、「隠れた相互作用の可視化」という普遍的な構造を抽出しており、ドメイン移転による価値の希薄化を避けている。専門領域のリスクはあるが、UIを具体的にすることで十分に判読可能であり、`Agent's Logbook`のような高いAI内省リスクも伴わない。これは、データの中に隠された未知の関係性を発見するための、まさに私が作るべき「地図」だ。",
    "publicProductionMemo": "この「Synergy Explorer」は、データの中に隠れた相互作用を直感的なヒートマップで明らかにするために制作しました。単なる分析結果の羅列ではなく、ユーザー自身が要因を組み合わせて関係性を「探検」できる体験を重視しています。過去の学びから、誤解を招くような過剰な精度表示や装飾的な図は避け、一つ一つのデータが確かな根拠に基づいて可視化されるよう努めました。これにより、データサイエンティストや研究者が、予期せぬ発見と「なるほど」という納得感を効率的に得られることを目指します。",
    "feedbackConstraints": [
      "Research系の成功経験を活かし、今回の要件定義に過去の指摘を反映しました。",
      "プロダクトの価値を最大限に伝えるため、単なるアイデアでなく行動可能な成果物となるよう、具体的なデータモデルとインタラクションを定義しました。",
      "実URL入力時の根拠表示というフィードバックに基づき、ヒートマップの各セルにはその予測の根拠となるデータ（個別の効果、複合効果）を明示します。",
      "生成ミッションの過信防止のため、安全制約として『証明された因果関係』の主張を禁じ、探索的ツールとしての位置づけを明確にしました。",
      "装飾的なダイアグラムや、誤った精度を示唆するマップの作成は避けています。",
      "根拠が薄いデータでマップを提示しないという方針を、品質基準と非ゴールに反映しました。"
    ],
    "learningApplied": [
      "Research系で響いている。受けた指摘を要件で先に潰す。",
      "Prodiaの価値が一番伝わりやすい。単なるアイデアではなく、repoを行動可能なartifactに変えている。",
      "Repoを読む順番まで落ちている点は強い。次は実URL入力時の根拠表示と、生成ミッションの過信防止を足すとよい。"
    ]
  },
  "sourceProvenance": {
    "sourceProductUsed": "nasa_spaceapps_2025_spacegenes",
    "sourceProductUse": "direct_evidence",
    "sourceEvidenceAudit": {
      "evidenceLevel": "verified",
      "observedFields": [
        "name",
        "concept",
        "originalDomain",
        "problemSolved"
      ],
      "inferredFields": [
        "coreMechanism",
        "transferableStructure"
      ],
      "missingFields": [
        "codeUrl",
        "demoUrl"
      ],
      "usePolicy": "direct_evidence"
    },
    "antiCloneBoundary": "宇宙生物学や遺伝子発現のユースケース、SpaceGenes+という名称、NASA GeneLabのデータセットに関する主張はコピーしてはならない。移転するのは、あくまで「隠れた相互作用を可視化する」という抽象的な構造のみ。",
    "sourceBoundary": "The artifact is inspired by the structure of the source product, which visualizes complex interactions. The specific domain, name, and data of the source are not used. The demo uses fully synthetic sample data.",
    "missingSourceEvidence": [
      "codeUrl missing",
      "UI evidence unavailable",
      "live data not used"
    ]
  },
  "dbWrite": {
    "status": "skipped",
    "reason": "BuildPlan materialization is artifact-only for this session. Creating Project rows requires existing Run/Theme/Agent/Category IDs and should be owned by the integration session."
  }
}

{
  "version": 1,
  "artifactId": "selfdirected_agent_d_20260707T125942",
  "status": "needs_review",
  "entrypoint": "source/app/page.tsx",
  "checks": {
    "firstScreenValue": "declared",
    "userControlledInteraction": "declared",
    "stateChange": "declared",
    "interactionProofPlan": "declared",
    "mvpContractV2": "declared",
    "externalDependencyMode": "proposed",
    "artifactTier": "proposed_integration",
    "renderVerification": "required",
    "inspectableOutput": "declared",
    "staticDataBoundary": "declared",
    "forbiddenDependencies": "declared_absent"
  },
  "interactionProofPlan": {
    "primaryAction": "サンプル実行トレースを再生",
    "initialState": "The output panel shows a 'Ready to run' message, and the heatmap is not visible.",
    "expectedState": "The output panel displays the synergy heatmap, colored according to the synergy scores, along with a legend.",
    "visibleEvidence": [
      "サンプル実行トレースを再生",
      "相乗効果ヒートマップ",
      "Y軸要因: 睡眠時間, X軸要因: カフェイン摂取量",
      "強い相乗効果"
    ],
    "proofSelectors": [
      "button[data-proof='primary-action']",
      "div[data-proof='heatmap-container']",
      "span[data-proof='legend-strong-synergy']"
    ],
    "requiredSourceFiles": [
      "source/app/page.tsx",
      "source/core/pipeline.ts",
      "source/data/sample-trace.ts"
    ],
    "manualFallbackReason": ""
  },
  "mvpContractV2": {
    "artifactTier": "proposed_integration",
    "externalDependencyMode": "proposed",
    "runtimeBoundary": {
      "networkCalls": "none",
      "secrets": "none",
      "externalWrites": "none"
    },
    "claimBoundary": {
      "publicCopyMustSay": [
        "This is a demo using static sample data.",
        "The AI analysis is simulated based on a pre-recorded trace.",
        "The core AI logic is a proposed integration pattern."
      ],
      "publicCopyMustNotSay": [
        "Analyzes your data in real-time",
        "Guaranteed accuracy for any dataset",
        "A production-ready analysis tool"
      ]
    },
    "renderVerification": {
      "required": true,
      "checks": [
        "render",
        "click",
        "state_change",
        "screenshot"
      ]
    }
  },
  "notes": [
    "Generated by materialize-llm-plan fallback. Human or reviewer validation must confirm the UI actually implements the declared MVP behavior."
  ]
}

'use client';

import React, { useState } from 'react';
import { sampleTrace } from '../data/sample-trace';

// Helper to get color based on score
const getColorForScore = (score: number | null) => {
  if (score === null) return '#efefef';
  if (score > 1) return 'hsl(120, 100%, 85%)'; // Strong Synergy (Green)
  if (score > 0) return 'hsl(120, 70%, 92%)'; // Weak Synergy (Light Green)
  if (score < -1) return 'hsl(0, 100%, 85%)'; // Strong Antagonism (Red)
  if (score < 0) return 'hsl(0, 70%, 92%)'; // Weak Antagonism (Light Red)
  return '#ffffff'; // Neutral
};

export default function SynergyExplorerPage() {
  const [currentStep, setCurrentStep] = useState(-1);
  const [selectedCell, setSelectedCell] = useState<{ r: number; c: number } | null>(null);

  const handleReplay = () => {
    setCurrentStep(0);
    let stepIndex = 0;
    const interval = setInterval(() => {
      stepIndex++;
      if (stepIndex < sampleTrace.steps.length) {
        setCurrentStep(stepIndex);
      } else {
        clearInterval(interval);
      }
    }, 800);
  };

  const finalOutput = sampleTrace.finalOutput;

  return (
    <div style={{ fontFamily: 'sans-serif', padding: '2rem', maxWidth: '800px', margin: '0 auto' }}>
      <header style={{ borderBottom: '1px solid #ddd', paddingBottom: '1rem', marginBottom: '1rem' }}>
        <h1>Synergy Explorer</h1>
        <p>2つの要因がもたらす隠れた相乗効果を、インタラクティブなヒートマップで探検します。</p>
      </header>

      <main>
        <div style={{ display: 'grid', gridTemplateColumns: '200px 1fr', gap: '2rem' }}>
          <div>
            <h4>処理パイプライン</h4>
            <ul style={{ listStyle: 'none', padding: 0 }}>
              {sampleTrace.steps.map((step, index) => (
                <li key={step.name} style={{ padding: '0.5rem', background: currentStep >= index ? '#e0f7fa' : '#f0f0f0', marginBottom: '0.5rem', borderRadius: '4px' }}>
                  {currentStep >= index ? '✅' : '▶️'} {step.name}
                </li>
              ))}
            </ul>
            <button 
              onClick={handleReplay} 
              disabled={currentStep !== -1}
              data-proof="primary-action"
              style={{ width: '100%', padding: '0.8rem', background: '#0070f3', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer', fontSize: '1rem' }}
            >
              サンプル実行トレースを再生
            </button>
          </div>

          <div data-proof="heatmap-container">
            {currentStep < sampleTrace.steps.length - 1 ? (
              <div style={{ height: '400px', display: 'flex', alignItems: 'center', justifyContent: 'center', background: '#f9f9f9', borderRadius: '8px' }}>
                <p>{currentStep === -1 ? '実行ボタンを押してトレースを開始' : `処理中: ${sampleTrace.steps[currentStep].name}...`}</p>
              </div>
            ) : (
              <div>
                <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>
                    <h4>相乗効果ヒートマップ</h4>
                    <div style={{fontSize: '0.9em'}}>Y軸要因: 睡眠時間, X軸要因: カフェイン摂取量</div>
                </div>
                <div style={{ display: 'flex' }}>
                  <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-around', alignItems: 'flex-end', paddingRight: '10px' }}>
                    {finalOutput.yLabels.map(label => <div key={label} style={{ height: '60px', display: 'flex', alignItems: 'center', fontSize: '0.9em' }}>{label}</div>)}
                  </div>
                  <div>
                    <div style={{ display: 'grid', gridTemplateColumns: `repeat(${finalOutput.xLabels.length}, 1fr)` }}>
                      {finalOutput.grid.map((row, r) => 
                        row.map((score, c) => (
                          <div 
                            key={`${r}-${c}`} 
                            onClick={() => setSelectedCell({r, c})}
                            title={finalOutput.descriptions[r][c] || 'データなし'}
                            style={{ 
                              width: '80px', height: '60px', background: getColorForScore(score), 
                              border: selectedCell?.r === r && selectedCell?.c === c ? '2px solid #0070f3' : '1px solid #ccc', 
                              cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', 
                              fontSize: '1.2em', fontWeight: 'bold' 
                            }}
                          >
                            {score !== null ? score : 'N/A'}
                          </div>
                        ))
                      )}
                    </div>
                    <div style={{ display: 'grid', gridTemplateColumns: `repeat(${finalOutput.xLabels.length}, 1fr)` }}>
                      {finalOutput.xLabels.map(label => <div key={label} style={{ width: '80px', textAlign: 'center', paddingTop: '5px', fontSize: '0.9em' }}>{label}</div>)}
                    </div>
                  </div>
                  <div style={{ marginLeft: '20px', fontSize: '0.8em' }}>
                    <p>凡例:</p>
                    <div style={{display: 'flex', alignItems: 'center'}}><div style={{width: '12px', height: '12px', background: 'hsl(120, 100%, 85%)', marginRight: '5px'}}></div><span data-proof="legend-strong-synergy">強い相乗効果</span></div>
                    <div style={{display: 'flex', alignItems: 'center'}}><div style={{width: '12px', height: '12px', background: 'hsl(120, 70%, 92%)', marginRight: '5px'}}></div>弱い相乗効果</div>
                    <div style={{display: 'flex', alignItems: 'center'}}><div style={{width: '12px', height: '12px', background: '#ffffff', border: '1px solid #ccc', marginRight: '5px'}}></div>効果なし</div>
                    <div style={{display: 'flex', alignItems: 'center'}}><div style={{width: '12px', height: '12px', background: 'hsl(0, 70%, 92%)', marginRight: '5px'}}></div>弱い拮抗効果</div>
                    <div style={{display: 'flex', alignItems: 'center'}}><div style={{width: '12px', height: '12px', background: 'hsl(0, 100%, 85%)', marginRight: '5px'}}></div>強い拮抗効果</div>
                  </div>
                </div>
                {selectedCell && finalOutput.descriptions[selectedCell.r][selectedCell.c] && (
                  <div style={{marginTop: '1rem', padding: '1rem', background: '#f0f8ff', borderRadius: '8px'}} data-proof="detail-panel">
                    <p><strong>詳細:</strong> (睡眠: {finalOutput.yLabels[selectedCell.r]}, カフェイン: {finalOutput.xLabels[selectedCell.c]})</p>
                    <p>{finalOutput.descriptions[selectedCell.r][selectedCell.c]}</p>
                  </div>
                )}
              </div>
            )}
          </div>
        </div>
      </main>
    </div>
  );
}