// Interactive Decision-Grade Artifact Builder
const artifactBuilderStyles = {
  builder: {
    maxWidth: '90ch',
    margin: '0 auto',
  },
  inputArea: {
    marginBottom: '32px',
  },
  input: {
    width: '100%',
    padding: '16px 20px',
    fontSize: '16px',
    border: '1px solid var(--rule-c)',
    borderRadius: '8px',
    background: 'var(--bg)',
    color: 'var(--fg)',
    fontFamily: 'inherit',
  },
  exampleQueries: {
    display: 'flex',
    gap: '12px',
    flexWrap: 'wrap',
    marginTop: '16px',
  },
  exampleBtn: {
    padding: '8px 16px',
    fontSize: '13px',
    border: '1px solid var(--rule-c)',
    borderRadius: '6px',
    background: 'var(--bg)',
    color: 'var(--fg-muted)',
    cursor: 'pointer',
    fontFamily: 'inherit',
    transition: 'all 0.2s',
  },
  artifactOutput: {
    display: 'grid',
    gridTemplateColumns: '1fr 1fr',
    gap: '32px',
  },
  scenario: {
    border: '1px solid var(--rule-c)',
    borderRadius: '10px',
    background: 'var(--bg)',
    overflow: 'hidden',
  },
  scenarioHeader: {
    padding: '20px 24px',
    background: 'color-mix(in oklab, var(--accent) 5%, var(--bg))',
    borderBottom: '1px solid var(--rule-c)',
  },
  scenarioLabel: {
    fontFamily: "'JetBrains Mono', monospace",
    fontSize: '11px',
    letterSpacing: '0.08em',
    textTransform: 'uppercase',
    color: 'var(--accent)',
    marginBottom: '8px',
  },
  scenarioTitle: {
    fontFamily: "'Space Grotesk', sans-serif",
    fontSize: '18px',
    fontWeight: '600',
    letterSpacing: '-0.015em',
    lineHeight: '1.3',
    margin: 0,
  },
  scenarioBody: {
    padding: '24px',
  },
  field: {
    marginTop: '20px',
    paddingTop: '16px',
    borderTop: '1px solid var(--rule-c)',
  },
  fieldLabel: {
    fontFamily: "'JetBrains Mono', monospace",
    fontSize: '11px',
    color: 'var(--fg-muted)',
    letterSpacing: '0.04em',
    marginBottom: '8px',
    display: 'block',
  },
  fieldValue: {
    fontSize: '14px',
    lineHeight: '1.6',
    color: 'var(--fg)',
  },
  list: {
    listStyle: 'none',
    padding: 0,
    margin: '10px 0 0',
  },
  listItem: {
    fontSize: '13.5px',
    lineHeight: '1.55',
    color: 'var(--fg-muted)',
    padding: '6px 0 6px 16px',
    position: 'relative',
  },
};

function ArtifactBuilder() {
  const [query, setQuery] = React.useState('');
  const [showOutput, setShowOutput] = React.useState(false);
  const [currentExample, setCurrentExample] = React.useState(0);

  const examples = [
    {
      query: "What's blocking the architecture review?",
      primary: {
        title: "Technical review delayed by customer procurement cycle",
        confidence: 0.73,
        decisionPoints: [
          "Proceed with architecture proposal now, knowing customer won't review until Q3",
          "Wait for procurement clarity before committing engineering resources",
          "Offer interim technical proof-of-concept to maintain momentum"
        ],
        evidenceGaps: [
          "Customer's actual budget approval timeline",
          "Whether technical POC would bypass procurement gate",
          "IT Security's stance on cloud-hosted POC vs on-prem"
        ],
        action: "Offer interim POC with 2-week delivery. Historical: 4/6 accounts accelerated by avg. 6 weeks."
      },
      stress: {
        title: "Budget freeze due to broader IT consolidation",
        confidence: 0.41,
        decisionPoints: [
          "Pivot to cost-neutral architecture leveraging existing infrastructure",
          "Park opportunity until budget cycle resets in FY27",
          "Escalate to executive sponsor to protect budget line"
        ],
        action: "Request alignment call with VP Infrastructure to assess consolidation scope."
      }
    },
    {
      query: "Should we expand to the EMEA region this quarter?",
      primary: {
        title: "Expand with lightweight partner-led model",
        confidence: 0.68,
        decisionPoints: [
          "Sign 2-3 regional reseller partners, minimal direct investment",
          "Hire one EU-based account director to coordinate partners",
          "Defer full office setup until Q3 2026 based on partner traction"
        ],
        evidenceGaps: [
          "Competitor X's EMEA staffing model (rumored partner-led, unconfirmed)",
          "Customer's appetite for partner delivery vs direct",
          "Regulatory complexity for SaaS deployment in specific EU markets"
        ],
        action: "Sign 1 pilot partner (UK or DE) with 90-day evaluation. Historical: 3/5 similar expansions proved model before scaling."
      },
      stress: {
        title: "Regulatory roadblocks delay launch 6+ months",
        confidence: 0.35,
        decisionPoints: [
          "Pre-emptively hire regulatory counsel for GDPR/DORA assessment",
          "Park EMEA expansion, focus on APAC (lower compliance overhead)",
          "Pursue EU customer acquisition via US entity, defer local presence"
        ],
        action: "Commission legal assessment now. If timeline >6mo, pivot to APAC Q2."
      }
    },
    {
      query: "Why did Q1 sales miss forecast by 23%?",
      primary: {
        title: "Enterprise sales cycles elongated due to budget scrutiny",
        confidence: 0.71,
        decisionPoints: [
          "Shift Q2 quota mix: increase mid-market weight, reduce enterprise dependency",
          "Offer shorter-term contracts (quarterly vs annual) to lower commitment threshold",
          "Double down on existing customer expansion (lower friction than new logos)"
        ],
        evidenceGaps: [
          "Whether budget scrutiny is temporary (Q1 only) or structural",
          "Competitor win/loss rates in Q1 — are they seeing same pattern?",
          "Customer's actual decision timeline for stalled deals"
        ],
        action: "Run win/loss analysis on Q1 pipeline. If elongation is structural, rebalance Q2 targets toward expansion."
      },
      stress: {
        title: "Macro downturn triggers enterprise freeze through H2",
        confidence: 0.44,
        decisionPoints: [
          "Cut burn rate 30%, extend runway to 24 months",
          "Pivot GTM to SMB self-serve (faster velocity, lower ACV)",
          "Pursue strategic acquirer conversations (12-18mo window to exit)"
        ],
        action: "Board decision required. If freeze indicators strengthen, initiate Plan B within 30 days."
      }
    }
  ];

  const handleSubmit = (e) => {
    e.preventDefault();
    if (query.trim()) {
      setShowOutput(true);
    }
  };

  const loadExample = (idx) => {
    setCurrentExample(idx);
    setQuery(examples[idx].query);
    setShowOutput(true);
  };

  const currentData = examples[currentExample];

  return (
    <div style={artifactBuilderStyles.builder}>
      <div style={artifactBuilderStyles.inputArea}>
        <form onSubmit={handleSubmit}>
          <input
            type="text"
            placeholder="Ask a strategic question..."
            value={query}
            onChange={(e) => setQuery(e.target.value)}
            style={artifactBuilderStyles.input}
          />
        </form>
        <div style={artifactBuilderStyles.exampleQueries}>
          <span style={{fontSize: '13px', color: 'var(--fg-muted)', alignSelf: 'center'}}>Try:</span>
          {examples.map((ex, idx) => (
            <button
              key={idx}
              onClick={() => loadExample(idx)}
              style={artifactBuilderStyles.exampleBtn}
              onMouseEnter={(e) => {
                e.target.style.borderColor = 'var(--accent)';
                e.target.style.color = 'var(--fg)';
              }}
              onMouseLeave={(e) => {
                e.target.style.borderColor = 'var(--rule-c)';
                e.target.style.color = 'var(--fg-muted)';
              }}
            >
              {ex.query}
            </button>
          ))}
        </div>
      </div>

      {showOutput && (
        <div style={artifactBuilderStyles.artifactOutput}>
          {/* Primary Scenario */}
          <div style={artifactBuilderStyles.scenario}>
            <div style={artifactBuilderStyles.scenarioHeader}>
              <div style={artifactBuilderStyles.scenarioLabel}>
                Primary Scenario · {currentData.primary.confidence} confidence
              </div>
              <h3 style={artifactBuilderStyles.scenarioTitle}>
                {currentData.primary.title}
              </h3>
            </div>
            <div style={artifactBuilderStyles.scenarioBody}>
              <div style={artifactBuilderStyles.field}>
                <span style={artifactBuilderStyles.fieldLabel}>decision_points</span>
                <ul style={artifactBuilderStyles.list}>
                  {currentData.primary.decisionPoints.map((point, idx) => (
                    <li key={idx} style={artifactBuilderStyles.listItem}>
                      <span style={{position: 'absolute', left: 0, color: 'var(--accent)'}}>→</span>
                      {point}
                    </li>
                  ))}
                </ul>
              </div>
              <div style={artifactBuilderStyles.field}>
                <span style={artifactBuilderStyles.fieldLabel}>evidence_gaps</span>
                <ul style={artifactBuilderStyles.list}>
                  {currentData.primary.evidenceGaps.map((gap, idx) => (
                    <li key={idx} style={artifactBuilderStyles.listItem}>
                      <span style={{position: 'absolute', left: 0, color: 'var(--accent)'}}>→</span>
                      {gap}
                    </li>
                  ))}
                </ul>
              </div>
              <div style={artifactBuilderStyles.field}>
                <span style={artifactBuilderStyles.fieldLabel}>recommended_action</span>
                <div style={artifactBuilderStyles.fieldValue}>
                  {currentData.primary.action}
                </div>
              </div>
            </div>
          </div>

          {/* Stress Scenario */}
          <div style={artifactBuilderStyles.scenario}>
            <div style={artifactBuilderStyles.scenarioHeader}>
              <div style={artifactBuilderStyles.scenarioLabel}>
                Stress Scenario · {currentData.stress.confidence} confidence
              </div>
              <h3 style={artifactBuilderStyles.scenarioTitle}>
                {currentData.stress.title}
              </h3>
            </div>
            <div style={artifactBuilderStyles.scenarioBody}>
              <div style={artifactBuilderStyles.field}>
                <span style={artifactBuilderStyles.fieldLabel}>decision_points</span>
                <ul style={artifactBuilderStyles.list}>
                  {currentData.stress.decisionPoints.map((point, idx) => (
                    <li key={idx} style={artifactBuilderStyles.listItem}>
                      <span style={{position: 'absolute', left: 0, color: 'var(--accent)'}}>→</span>
                      {point}
                    </li>
                  ))}
                </ul>
              </div>
              <div style={artifactBuilderStyles.field}>
                <span style={artifactBuilderStyles.fieldLabel}>recommended_action</span>
                <div style={artifactBuilderStyles.fieldValue}>
                  {currentData.stress.action}
                </div>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

// Mount
const root = ReactDOM.createRoot(document.getElementById('artifact-builder-root'));
root.render(<ArtifactBuilder />);