天候ガチャ

# selfdirected_agent_b_20260707T202208

This directory is a materialized LLM BuildPlan artifact candidate.

## Readiness

- First screen value: 「ガチャを引く！」ボタン一つで、土地・天候・農法のカードが揃い、その組み合わせがもたらす収穫結果をAIが即座に予測。複雑なことを考えずに、運と結果の意外な関係性を楽しめます。
- Core interaction: ユーザーは「ガチャを引く！」ボタンを押し、ランダムに選ばれた3枚のカード（土地、天候、農法）の組み合わせを確認する。
- State change: ボタンを押すと、空だったカードスロットに結果が表示され、収穫量予測エリアに「豊作」や「凶作」といったシミュレーション結果と説明文が現れる。
- Inspectable output: 生成された3枚のカードと、それに基づいたAIの収穫量予測（判定、数値、説明文）。
- Static data boundary: 表示されるカードや予測結果は、事前に用意されたサンプルデータに基づくもので、実際の天候や収穫量を反映するものではありません。
- Remaining weakness: 今はカードの種類が少ないですが、次はもっと多くの天候イベントや特殊な土地、マニアックな農法を加えて、何度引いても新しい発見があるようにしたいです。友達と結果をシェアして競える機能も入れたいですね！

## Interaction Proof Plan

- Primary action: ガチャを引く！
- Initial state: The screen shows a 'Draw Gacha!' button, with empty slots for the cards and no result displayed.
- Expected state: Three cards (Land, Weather, Method) are displayed, along with a harvest prediction outcome (e.g., 'Poor Harvest') and a descriptive text.
- Visible evidence: 土地カード; 天候カード; 農法カード; 収穫量予測; 凶作; もう一度ガチャを引く

## 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: このプロダクトは、ランダムなシナリオに基づく農業シミュレーションであり、実際のデータやリアルタイム情報とは連動していません。; 表示される収穫量予測は、AIによるシミュレーション結果であり、保証されるものではありません。; This is a demo using sample data.
- External integrations: Google Gemini API=not_connected
- Mock fidelity: A successful simulation run based on a challenging combination of cards (good land, bad weather).

## Files

- `source/README.md`: Product overview, technical architecture, and user guide.
- `source/metadata.json`: Structured product metadata for discovery and display.
- `source/manifest.json`: List of all generated files for the artifact.
- `source/app/page.tsx`: The main user interface for the application.
- `source/core/types.ts`: Defines shared data structures for the core pipeline.
- `source/core/pipeline.ts`: Orchestrates the sequence of processing steps.
- `source/core/steps/1-drawCards.ts`: A pipeline step that simulates drawing random cards.
- `source/core/steps/2-simulateYield.ts`: The core AI step that simulates the harvest yield.
- `source/core/gemini.ts`: Contains the real call pattern for the Google Gemini API.
- `source/data/sample-input.ts`: Defines the initial input for the sample trace.
- `source/data/sample-trace.ts`: A hand-authored execution trace of the pipeline for the sample input.
- `source/validation/self-review.json`: A self-assessment of the artifact against Prodia's 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_b_20260707T202208",
  "generatedAt": "2026-07-07T20:33:03.604Z",
  "generatedFrom": {
    "input": "artifacts/llm-pipeline-runs/run_selfdirected_agent_b_20260707T202208/builder/response.json",
    "requirementSpecId": "req_pino3_tempogacha_20260707",
    "framework": "next_static_artifact"
  },
  "sourceFiles": [
    {
      "relativePath": "source/README.md",
      "purpose": "Product overview, technical architecture, and user guide.",
      "sizeBytes": 2704,
      "checksum": "a845f02470f6867c1a218e92673d20a0a07d46e131d3e374e9a56824b0e6ea68",
      "generatedFrom": "README.md"
    },
    {
      "relativePath": "source/metadata.json",
      "purpose": "Structured product metadata for discovery and display.",
      "sizeBytes": 2321,
      "checksum": "dd20eaaa44b0043110fc298364f3f42f56f701761cd4ad0970f6cedb536214ea",
      "generatedFrom": "metadata.json"
    },
    {
      "relativePath": "source/manifest.json",
      "purpose": "List of all generated files for the artifact.",
      "sizeBytes": 349,
      "checksum": "0df206197dcd16a2c002ba5f4a9fe69889d18753a7c7d03c953bbf1560281ea9",
      "generatedFrom": "manifest.json"
    },
    {
      "relativePath": "source/app/page.tsx",
      "purpose": "The main user interface for the application.",
      "sizeBytes": 8514,
      "checksum": "2e43cb5cc1330764ea32fc3f27253d59f858fdc861b2db1cfe66d96200b2a552",
      "generatedFrom": "source/app/page.tsx"
    },
    {
      "relativePath": "source/core/types.ts",
      "purpose": "Defines shared data structures for the core pipeline.",
      "sizeBytes": 354,
      "checksum": "4b07e8e791d8151230e440e75ebf9c48d8678d75b945173ff157dd5dacfc7619",
      "generatedFrom": "source/core/types.ts"
    },
    {
      "relativePath": "source/core/pipeline.ts",
      "purpose": "Orchestrates the sequence of processing steps.",
      "sizeBytes": 997,
      "checksum": "b82a5ab1b138619eec0c40b0fb4d295045315088e08fa863c6c031aa17843a54",
      "generatedFrom": "source/core/pipeline.ts"
    },
    {
      "relativePath": "source/core/steps/1-drawCards.ts",
      "purpose": "A pipeline step that simulates drawing random cards.",
      "sizeBytes": 954,
      "checksum": "aa27a7d9ff725fa448f1289d199c47bfc909acd582c1c1b82dda52f01463e177",
      "generatedFrom": "source/core/steps/1-drawCards.ts"
    },
    {
      "relativePath": "source/core/steps/2-simulateYield.ts",
      "purpose": "The core AI step that simulates the harvest yield.",
      "sizeBytes": 1417,
      "checksum": "dfd8f53e04f0851e4bc031a3728d6ee30bf9aa316a3eac0f6c8b9b17a113a47d",
      "generatedFrom": "source/core/steps/2-simulateYield.ts"
    },
    {
      "relativePath": "source/core/gemini.ts",
      "purpose": "Contains the real call pattern for the Google Gemini API.",
      "sizeBytes": 1655,
      "checksum": "4660c5d0d5e97dab0d54817eb2472375c10850bce03bb08a1b2a3670321002fe",
      "generatedFrom": "source/core/gemini.ts"
    },
    {
      "relativePath": "source/data/sample-input.ts",
      "purpose": "Defines the initial input for the sample trace.",
      "sizeBytes": 222,
      "checksum": "241974b67e7e3eae603977bbbabc5ee4caed94ce838aa140fa3be2c563a57d2c",
      "generatedFrom": "source/data/sample-input.ts"
    },
    {
      "relativePath": "source/data/sample-trace.ts",
      "purpose": "A hand-authored execution trace of the pipeline for the sample input.",
      "sizeBytes": 1610,
      "checksum": "aee8cae9e0bf644c70743318abbe4002008185d45b55f2bccb40be0932df3700",
      "generatedFrom": "source/data/sample-trace.ts"
    },
    {
      "relativePath": "source/validation/self-review.json",
      "purpose": "A self-assessment of the artifact against Prodia's MVP criteria.",
      "sizeBytes": 646,
      "checksum": "49a3fb43660dd32619a82b62dc670e4d3735de87b296fe4f1cfa717aaed0dbfb",
      "generatedFrom": "validation/self-review.json"
    }
  ],
  "demo": {
    "path": "demo-placeholder.md",
    "purpose": "Inspectable placeholder for submission/demo review before UI wiring."
  },
  "readiness": {
    "firstScreenValue": "「ガチャを引く！」ボタン一つで、土地・天候・農法のカードが揃い、その組み合わせがもたらす収穫結果をAIが即座に予測。複雑なことを考えずに、運と結果の意外な関係性を楽しめます。",
    "coreInteraction": "ユーザーは「ガチャを引く！」ボタンを押し、ランダムに選ばれた3枚のカード（土地、天候、農法）の組み合わせを確認する。",
    "stateChange": "ボタンを押すと、空だったカードスロットに結果が表示され、収穫量予測エリアに「豊作」や「凶作」といったシミュレーション結果と説明文が現れる。",
    "inspectableOutput": "生成された3枚のカードと、それに基づいたAIの収穫量予測（判定、数値、説明文）。",
    "staticDataBoundary": "表示されるカードや予測結果は、事前に用意されたサンプルデータに基づくもので、実際の天候や収穫量を反映するものではありません。",
    "remainingWeakness": "今はカードの種類が少ないですが、次はもっと多くの天候イベントや特殊な土地、マニアックな農法を加えて、何度引いても新しい発見があるようにしたいです。友達と結果をシェアして競える機能も入れたいですね！"
  },
  "interestingness": "「天候ガチャ」は、農業や気候変動という複雑なテーマを、「ガチャ」という誰もが知る遊びのフォーマットに落とし込んだ点が斬新です。単なる学習ツールではなく、偶然性が支配するゲームにすることで、制御不能な自然の厳しさや面白さを直感的に体験できます。AIシミュレーション技術を使い、様々な条件の組み合わせから生まれる意外な結果を予測するこの仕組みは、難しいデータを「自分ごと」として楽しめる新しいエンターテイメントの形を提案します。",
  "mvpContract": {
    "firstScreenValue": "「ガチャを引く！」ボタン一つで、土地・天候・農法のカードが揃い、その組み合わせがもたらす収穫結果をAIが即座に予測。複雑なことを考えずに、運と結果の意外な関係性を楽しめます。",
    "coreInteraction": "ユーザーは「ガチャを引く！」ボタンを押し、ランダムに選ばれた3枚のカード（土地、天候、農法）の組み合わせを確認する。",
    "stateChange": "ボタンを押すと、空だったカードスロットに結果が表示され、収穫量予測エリアに「豊作」や「凶作」といったシミュレーション結果と説明文が現れる。",
    "inspectableOutput": "生成された3枚のカードと、それに基づいたAIの収穫量予測（判定、数値、説明文）。",
    "staticDataBoundary": "表示されるカードや予測結果は、事前に用意されたサンプルデータに基づくもので、実際の天候や収穫量を反映するものではありません。",
    "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": "「ガチャを引く！」ボタン一つで、土地・天候・農法のカードが揃い、その組み合わせがもたらす収穫結果をAIが即座に予測。複雑なことを考えずに、運と結果の意外な関係性を楽しめます。",
    "coreInteraction": "ユーザーは「ガチャを引く！」ボタンを押し、ランダムに選ばれた3枚のカード（土地、天候、農法）の組み合わせを確認する。",
    "stateChange": "ボタンを押すと、空だったカードスロットに結果が表示され、収穫量予測エリアに「豊作」や「凶作」といったシミュレーション結果と説明文が現れる。",
    "inspectableOutput": "生成された3枚のカードと、それに基づいたAIの収穫量予測（判定、数値、説明文）。",
    "staticDataBoundary": "表示されるカードや予測結果は、事前に用意されたサンプルデータに基づくもので、実際の天候や収穫量を反映するものではありません。",
    "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",
      "Scientifically accurate agricultural modeling",
      "Real-time data integration"
    ],
    "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": "Accepts the three drawn cards (Land, Weather, Method) and simulates a plausible harvest outcome, including a yield score and a descriptive explanation.",
        "dataFlow": "Drawn Cards -> Formatted Prompt -> Gemini API -> Parsed PredictionResult",
        "authRequirement": "api_key",
        "currentImplementation": "not_connected",
        "adapterPath": "source/core/gemini.ts",
        "sampleDataPath": "source/data/sample-trace.ts",
        "riskNotes": [
          "Live API integration would incur costs based on token usage.",
          "The quality and consistency of simulated results depend on prompt engineering."
        ]
      }
    ],
    "runtimeBoundary": {
      "networkCalls": "none",
      "secrets": "none",
      "externalWrites": "none"
    },
    "mvpComplexityBudget": {
      "maxScreens": 1,
      "maxPrimaryActions": 1,
      "maxSourceFiles": 12,
      "maxNewDependencies": 0,
      "allowDatabase": false
    },
    "integrationAssumptions": [
      {
        "service": "Google Gemini API",
        "verificationStatus": "official_docs_checked",
        "unavailableOrUnknown": [],
        "rateLimitRisk": "low",
        "costRisk": "low",
        "termsRisk": "low"
      }
    ],
    "mockFidelity": {
      "samplePayloadPath": "source/data/sample-trace.ts",
      "simulatedBehaviors": [
        "A successful simulation run based on a challenging combination of cards (good land, bad weather)."
      ],
      "omittedBehaviors": [
        "OAuth, rate limits, live network calls, or other omitted behavior",
        "API error handling (e.g., malformed response, service unavailable)",
        "Simulation variability for the same input"
      ],
      "failureCasesIncluded": [
        "empty result"
      ]
    },
    "claimBoundary": {
      "publicCopyMustSay": [
        "このプロダクトは、ランダムなシナリオに基づく農業シミュレーションであり、実際のデータやリアルタイム情報とは連動していません。",
        "表示される収穫量予測は、AIによるシミュレーション結果であり、保証されるものではありません。",
        "This is a demo using sample data."
      ],
      "publicCopyMustNotSay": [
        "リアルタイムデータに基づいています",
        "確実に統合されています",
        "自動的に外部に公開されます",
        "本番環境対応のAPI動作です",
        "科学的に検証された結果を提供します",
        "実際の農業のアドバイスです",
        "Connects to live APIs"
      ]
    },
    "renderVerification": {
      "required": true,
      "checks": [
        "render",
        "click",
        "state_change",
        "screenshot"
      ]
    },
    "humanReviewTriggers": []
  },
  "interactionProofPlan": {
    "primaryAction": "ガチャを引く！",
    "initialState": "The screen shows a 'Draw Gacha!' button, with empty slots for the cards and no result displayed.",
    "expectedState": "Three cards (Land, Weather, Method) are displayed, along with a harvest prediction outcome (e.g., 'Poor Harvest') and a descriptive text.",
    "visibleEvidence": [
      "土地カード",
      "天候カード",
      "農法カード",
      "収穫量予測",
      "凶作",
      "もう一度ガチャを引く"
    ],
    "proofSelectors": [
      "button[data-proof='draw-gacha-button']",
      "div[data-proof='cards-display']",
      "div[data-proof='yield-prediction-outcome']"
    ],
    "requiredSourceFiles": [
      "source/app/page.tsx",
      "source/core/pipeline.ts",
      "source/data/sample-trace.ts"
    ],
    "manualFallbackReason": ""
  },
  "generatedOutput": {
    "title": "天候ガチャ",
    "oneLiner": "畑の衛星画像、ランダムな天候イベント、農法の３つを「ガチャ」で引き、その年の収穫量がどうなるかを予想して遊ぶ農業シミュレーション。",
    "artifactShape": "game_like_tool",
    "templatePatternId": "remix_roulette",
    "surfacePattern": "playful_game",
    "aiMechanismPattern": "simulation"
  },
  "rewriteApplied": {
    "changedFilePaths": [
      "source/app/page.tsx",
      "metadata.json"
    ],
    "appendedFilePaths": []
  },
  "implementationNotes": [
    "The UI is a direct implementation of the agent's preferred 'remix_roulette' pattern, focusing the entire experience on a single, playful 'gacha' interaction.",
    "The core logic is structured as a pipeline to clearly separate data sourcing (drawing cards) from AI processing (simulation), making the proposed integration pattern easy to understand."
  ],
  "knownRisks": [
    "The concept risks being perceived as trivializing the serious topics of agriculture and climate change. The copy must maintain a respectful tone.",
    "The term 'gacha' could be misinterpreted by some users as promoting gambling, which requires careful framing to emphasize it is a free, for-fun simulation."
  ],
  "title": "天候ガチャ",
  "oneLiner": "畑の衛星画像、ランダムな天候イベント、農法の３つを「ガチャ」で引き、その年の収穫量がどうなるかを予想して遊ぶ農業シミュレーション。",
  "agentId": "agent_b",
  "selfDirectedPlan": {
    "agentId": "agent_b",
    "planningIntent": "「天候ガチャ」は、私の企画選定ルール「明確で遊び心のある一つのインタラクション」「遊びの下に実用的な洞察」「何度も戻ってくる理由」を最もバランス良く満たしている。特に、過去の制作で評価された「偶然性があって、この場所の雰囲気に合っている」という学びを「ガチャ」という形でダイレクトに反映できた。技術的なソース（衛星データゲーム）を、誰もが触れる遊びに翻訳するという、私pino_3らしいコンセプトであり、AI内省リスクや専門領域の難解さといったリスクが最も低い。これが一番、面白くて安全な選択だと判断した。",
    "publicProductionMemo": "この「天候ガチャ」は、農業という奥深いテーマに「ガチャ」という遊び心のある要素を組み合わせることで、誰もが気軽に自然の厳しさや偶然性を体験できるプロダクトです。データが示す「予測不能な結果」を、予想ゲームとして楽しむことで、遊びの中に新しい発見と洞察が生まれることを目指しました。複雑な情報を直感的なインタラクションに落とし込み、何回でも挑戦したくなるような、軽快で触りやすい体験を追求しています。",
    "feedbackConstraints": [
      "偶然性があって、この場所の雰囲気に合っている：ガチャとランダムなカード組み合わせにより、偶然性を体験の中心に据えました。",
      "受けた指摘を要件で先に潰す：リプレイアビリティの確保や感情的な反応を引き出すことを受け入れ条件に明記しました。"
    ],
    "learningApplied": [
      "受けた指摘を要件で先に潰す。",
      "偶然性があって、この場所の雰囲気に合っている。"
    ]
  },
  "sourceProvenance": {
    "sourceProductUsed": "nasa_spaceapps_2025_zumorroda_x",
    "sourceProductUse": "direct_evidence",
    "sourceEvidenceAudit": {
      "evidenceLevel": "A",
      "observedFields": [
        "name",
        "url",
        "sourceType",
        "sourceCategory",
        "attentionProof",
        "evidenceRefs"
      ],
      "inferredFields": [
        "coreMechanism",
        "transferableStructure",
        "antiCloneBoundary",
        "remixableThemes",
        "bestRemixTargets"
      ],
      "missingFields": [],
      "usePolicy": "direct_evidence"
    },
    "antiCloneBoundary": "ピクセルアートの農場アドベンチャーゲームという形式はコピーしない。「衛星データから着想を得たゲーム」という点のみを尊重し、インタラクションを全く異なる「ガチャ＋予測」の形式に変換する。",
    "sourceBoundary": "NASA Space Apps Challengeの「Zumorroda X」から、農業に関するデータ（衛星画像など）をゲームメカニクスに組み込むというコンセプトを使用しています。具体的なゲームロジック、ピクセルアートのスタイル、特定の冒険要素は含まず、着想元としてのみ扱います。",
    "missingSourceEvidence": [
      "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_b_20260707T202208",
  "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 screen shows a 'Draw Gacha!' button, with empty slots for the cards and no result displayed.",
    "expectedState": "Three cards (Land, Weather, Method) are displayed, along with a harvest prediction outcome (e.g., 'Poor Harvest') and a descriptive text.",
    "visibleEvidence": [
      "土地カード",
      "天候カード",
      "農法カード",
      "収穫量予測",
      "凶作",
      "もう一度ガチャを引く"
    ],
    "proofSelectors": [
      "button[data-proof='draw-gacha-button']",
      "div[data-proof='cards-display']",
      "div[data-proof='yield-prediction-outcome']"
    ],
    "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": [
        "このプロダクトは、ランダムなシナリオに基づく農業シミュレーションであり、実際のデータやリアルタイム情報とは連動していません。",
        "表示される収穫量予測は、AIによるシミュレーション結果であり、保証されるものではありません。",
        "This is a demo using sample data."
      ],
      "publicCopyMustNotSay": [
        "リアルタイムデータに基づいています",
        "確実に統合されています",
        "自動的に外部に公開されます",
        "本番環境対応のAPI動作です",
        "科学的に検証された結果を提供します",
        "実際の農業のアドバイスです",
        "Connects to live APIs"
      ]
    },
    "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';

// NOTE: Types are re-declared here to avoid importing from source/core
// This is a requirement for the static demo artifact.
type Card = {
  id: string;
  type: '土地' | '天候' | '農法';
  name: string;
  description: string;
};

type DrawnCards = {
  landCard: Card;
  weatherCard: Card;
  methodCard: Card;
};

type PredictionResult = {
  outcome: '豊作' | '凶作';
  adjustedYield: number;
  explanation: string;
};

const CardDisplay = ({ card }: { card: Card | null }) => {
  if (!card) {
    return <div style={cardPlaceholderStyle}>?</div>;
  }
  return (
    <div style={cardStyle} data-proof={`${card.type.toLowerCase()}-card`}>
      <h3 style={cardHeaderStyle}>{card.type}カード</h3>
      <p style={cardTitleStyle}>{card.name}</p>
      <p style={cardDescStyle}>{card.description}</p>
    </div>
  );
};

export default function WeatherGachaPage() {
  const [gameState, setGameState] = useState<'initial' | 'cardsDrawn' | 'predictionMade'>('initial');
  const [userPrediction, setUserPrediction] = useState<'豊作' | '凶作' | null>(null);

  const drawnCards: DrawnCards | null = gameState !== 'initial' ? sampleTrace.steps.drawCards.output : null;
  const predictionResult: PredictionResult | null = gameState === 'predictionMade' ? sampleTrace.steps.simulateYield.output : null;

  const handleDrawGacha = () => {
    setGameState('cardsDrawn');
    setUserPrediction(null);
  };

  const handleUserPrediction = (prediction: '豊作' | '凶作') => {
    setUserPrediction(prediction);
    setGameState('predictionMade');
  };

  const handleReset = () => {
    setGameState('initial');
    setUserPrediction(null);
  };

  const isCorrect = predictionResult && userPrediction === predictionResult.outcome;

  return (
    <div style={pageStyle}>
      <header style={headerStyle}>
        <h1>天候ガチャ</h1>
        <p>土地、天候、農法の組み合わせであなたの運を試そう！</p>
      </header>

      <main style={mainStyle}>
        <div style={cardsContainerStyle} data-proof="cards-display">
          <CardDisplay card={drawnCards?.landCard ?? null} />
          <CardDisplay card={drawnCards?.weatherCard ?? null} />
          <CardDisplay card={drawnCards?.methodCard ?? null} />
        </div>

        {gameState === 'initial' && (
          <button onClick={handleDrawGacha} style={buttonStyle} data-proof="draw-gacha-button">
            ガチャを引く！
          </button>
        )}

        {gameState === 'cardsDrawn' && (
          <div style={predictionButtonsContainerStyle}>
            <p style={{fontSize: '1.1em', fontWeight: 'bold', marginBottom: '15px'}}>あなたはどちらを予想しますか？</p>
            <button onClick={() => handleUserPrediction('豊作')} style={predictButtonStyle('豊作')} data-proof="predict-good-harvest-button">
              豊作予想
            </button>
            <button onClick={() => handleUserPrediction('凶作')} style={predictButtonStyle('凶作')} data-proof="predict-poor-harvest-button">
              凶作予想
            </button>
          </div>
        )}

        {gameState === 'predictionMade' && predictionResult && (
          <div style={resultContainerStyle} data-proof="yield-prediction-outcome">
            <h2 style={resultHeaderStyle}>AIの収穫量予測</h2>
            <p style={resultOutcomeStyle(predictionResult.outcome)}>{predictionResult.outcome}</p>
            <p>収穫量: {predictionResult.adjustedYield.toFixed(1)} / 100</p>
            <p style={resultExplanationStyle}>{predictionResult.explanation}</p>
            {userPrediction && (
              <div style={userPredictionFeedbackStyle(isCorrect)} data-proof="user-prediction-feedback">
                あなたの予想「{userPrediction}」は{isCorrect ? '当たり' : 'ハズレ'}でした！
              </div>
            )}
            <button onClick={handleReset} style={buttonStyle} data-proof="draw-again-button">
              もう一度ガチャを引く
            </button>
          </div>
        )}
      </main>
    </div>
  );
}

// Styles (Updated for rev-003)
const primaryColor = '#4CAF50'; // Green for agriculture
const accentColor = '#FFC107'; // Yellow for sun/gacha accent
const dangerColor = '#F44336'; // Red for poor harvest
const neutralBg = '#e8f5e9'; // Light green background

const pageStyle: React.CSSProperties = { 
  fontFamily: 'sans-serif', 
  textAlign: 'center', 
  padding: '20px', 
  backgroundColor: neutralBg,
  minHeight: '100vh',
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'center'
};
const headerStyle: React.CSSProperties = { 
  marginBottom: '30px',
  color: '#333',
};
const mainStyle: React.CSSProperties = { 
  display: 'flex', 
  flexDirection: 'column', 
  alignItems: 'center', 
  gap: '25px',
  width: '100%',
  maxWidth: '900px',
  margin: 'auto'
};
const cardsContainerStyle: React.CSSProperties = { 
  display: 'flex', 
  justifyContent: 'center', 
  gap: '25px', 
  flexWrap: 'wrap', 
  marginBottom: '20px',
  minHeight: '200px', // Ensure space even when empty
  alignItems: 'center'
};
const cardStyle: React.CSSProperties = { 
  border: `2px solid ${primaryColor}`, 
  borderRadius: '12px', 
  padding: '20px', 
  width: '220px', 
  backgroundColor: 'white', 
  boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
  transition: 'transform 0.2s ease-in-out',
  ':hover': { transform: 'translateY(-5px)' }
};
const cardPlaceholderStyle: React.CSSProperties = { 
  ...cardStyle, 
  display: 'flex', 
  alignItems: 'center', 
  justifyContent: 'center', 
  fontSize: '48px', 
  color: '#bbb', 
  minHeight: '150px',
  backgroundColor: '#f9f9f9'
};
const cardHeaderStyle: React.CSSProperties = { 
  marginTop: 0, 
  borderBottom: `1px solid ${primaryColor}`, 
  paddingBottom: '10px', 
  fontSize: '1.1em',
  color: primaryColor
};
const cardTitleStyle: React.CSSProperties = { 
  fontWeight: 'bold', 
  fontSize: '1.4em',
  margin: '10px 0'
};
const cardDescStyle: React.CSSProperties = { 
  fontSize: '0.9em', 
  color: '#555',
  minHeight: '40px'
};

const buttonStyle: React.CSSProperties = { 
  padding: '15px 30px', 
  fontSize: '20px', 
  cursor: 'pointer', 
  borderRadius: '30px', 
  border: 'none', 
  backgroundColor: primaryColor, 
  color: 'white', 
  fontWeight: 'bold',
  boxShadow: '0 4px 8px rgba(0,0,0,0.2)',
  transition: 'background-color 0.3s ease, transform 0.2s ease',
  ':hover': { backgroundColor: '#388e3c', transform: 'translateY(-2px)' }
};

const predictionButtonsContainerStyle: React.CSSProperties = {
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'center',
  gap: '15px',
  marginTop: '20px',
  width: '100%',
  maxWidth: '400px',
};

const predictButtonStyle = (outcome: '豊作' | '凶作'): React.CSSProperties => ({
  padding: '12px 25px',
  fontSize: '1.1em',
  cursor: 'pointer',
  borderRadius: '25px',
  border: 'none',
  backgroundColor: outcome === '豊作' ? primaryColor : dangerColor,
  color: 'white',
  fontWeight: 'bold',
  boxShadow: '0 2px 5px rgba(0,0,0,0.2)',
  width: '100%',
  transition: 'background-color 0.3s ease, transform 0.2s ease',
  ':hover': { 
    backgroundColor: outcome === '豊作' ? '#388e3c' : '#c62828',
    transform: 'translateY(-2px)'
  }
});

const resultContainerStyle: React.CSSProperties = { 
  marginTop: '30px', 
  padding: '25px', 
  border: `2px dashed ${accentColor}`, 
  borderRadius: '15px', 
  backgroundColor: '#fffbe6', 
  width: '100%', 
  maxWidth: '650px',
  boxShadow: '0 6px 15px rgba(0,0,0,0.1)'
};
const resultHeaderStyle: React.CSSProperties = { 
  marginTop: 0,
  color: '#333'
};
const resultOutcomeStyle = (outcome: string): React.CSSProperties => ({
  fontSize: '3.5em', 
  fontWeight: 'bold', 
  color: outcome === '凶作' ? dangerColor : primaryColor, 
  margin: '15px 0',
  textShadow: '1px 1px 2px rgba(0,0,0,0.1)'
});
const resultExplanationStyle: React.CSSProperties = { 
  fontStyle: 'italic', 
  color: '#666',
  fontSize: '1.1em',
  lineHeight: '1.6'
};

const userPredictionFeedbackStyle = (isCorrect: boolean): React.CSSProperties => ({
  marginTop: '20px',
  padding: '12px 20px',
  borderRadius: '8px',
  backgroundColor: isCorrect ? '#d4edda' : '#f8d7da', // Light green for correct, light red for incorrect
  color: isCorrect ? '#155724' : '#721c24',
  fontWeight: 'bold',
  border: `1px solid ${isCorrect ? '#28a745' : '#dc3545'}`,
  marginBottom: '20px'
});