App.tsx

import React, { useState } from 'react';
import { EngineType, AppStatus, RunResult, EngineSpecification } from './types';
import { runEngine } from './services/geminiService';
import EngineCard from './components/EngineCard';
import EngineHeader from './components/EngineHeader';
import ResultView from './components/ResultView';

const ENGINES: EngineSpecification[] = [
  {
    name: "Constraint Engine",
    type: EngineType.CONSTRAINT,
    purpose: "Exposes goals that cannot be simultaneously satisfied.",
    useWhen: ["You suspect hidden conflicts", "Stakes are high or irreversible", "Trade-offs feel 'hand-wavy'"],
    doNotUseWhen: ["You want a recommendation", "You expect a best answer", "You're still exploring ideas"],
    cta: "Run Constraint Simulation"
  },
  {
    name: "Assumption Engine",
    type: EngineType.ASSUMPTION,
    purpose: "Reveals fragile or hidden assumptions behind a conclusion.",
    useWhen: ["A plan 'sounds right' too easily", "You want to stress-test beliefs", "You suspect blind spots"],
    doNotUseWhen: ["You need to resolve conflicts", "You want to explore alternatives", "You want final decisions"],
    cta: "Surface Assumptions"
  },
  {
    name: "Decision Framing Engine",
    type: EngineType.DECISION_FRAMING,
    purpose: "Clarifies what decision is actually being made.",
    useWhen: ["You feel stuck or overwhelmed", "The decision feels fuzzy", "Timing or reversibility is unclear"],
    doNotUseWhen: ["You want ideas", "You want trade-off analysis", "You want AI opinions"],
    cta: "Frame the Decision"
  },
  {
    name: "Exploration Engine",
    type: EngineType.EXPLORATION,
    purpose: "Expands the space of possibilities without judgment.",
    useWhen: ["You don't yet know what you want", "You're early in the process", "Creativity > rigor"],
    doNotUseWhen: ["Stakes are high", "You need safety or guarantees", "You are close to commitment"],
    cta: "Explore Possibilities"
  }
];

const App: React.FC = () => {
  const [status, setStatus] = useState<AppStatus>(AppStatus.IDLE);
  const [selectedEngine, setSelectedEngine] = useState<EngineSpecification | null>(null);
  const [goal, setGoal] = useState('');
  const [context, setContext] = useState('');
  const [failure, setFailure] = useState('');
  const [result, setResult] = useState<RunResult | null>(null);

  const handleSelectEngine = (engine: EngineSpecification) => {
    setSelectedEngine(engine);
    setStatus(AppStatus.ENGINE_SELECTED);
  };

  const handleReset = () => {
    setStatus(AppStatus.IDLE);
    setSelectedEngine(null);
    setGoal('');
    setContext('');
    setFailure('');
    setResult(null);
  };

  const handleRun = async () => {
    if (!selectedEngine) return;
    setStatus(AppStatus.PROCESSING);
    try {
      const output = await runEngine(selectedEngine.type, goal, context, failure);
      setResult({
        engineType: selectedEngine.type,
        timestamp: Date.now(),
        input: { goal, context, unacceptableFailure: failure },
        output
      });
      setStatus(AppStatus.COMPLETE);
    } catch (e) {
      alert("Simulation error. Check parameters.");
      setStatus(AppStatus.ENGINE_SELECTED);
    }
  };

  if (status === AppStatus.IDLE) {
    return (
      <div className="h-screen bg-slate-50 p-8 md:p-12 flex flex-col items-center overflow-y-auto">
        <header className="text-center mb-12 max-w-2xl shrink-0">
          <h1 className="text-4xl font-black text-slate-900 tracking-tighter mb-4 uppercase">First Principles Studio</h1>
          <p className="text-slate-500 font-bold uppercase tracking-widest text-xs">Mechanistic Reasoning Matrix used to force First Principles clarity.</p>
          <h2 className="text-xl font-bold text-slate-900 mt-12 mb-2">What kind of thinking does this problem require?</h2>
        </header>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 w-full max-w-7xl shrink-0">
          {ENGINES.map(e => (
            <EngineCard key={e.type} spec={e} onSelect={() => handleSelectEngine(e)} />
          ))}
        </div>
      </div>
    );
  }

  return (
    <div className="h-screen bg-white flex flex-col overflow-hidden">
      <EngineHeader 
        engineName={selectedEngine?.name || ''} 
        onReset={handleReset} 
        isLocked={status !== AppStatus.IDLE} 
      />
      
      <main className="flex-1 flex overflow-hidden">
        {/* Input Zone */}
        <div className="w-full md:w-5/12 p-8 border-r border-slate-100 overflow-y-auto bg-white">
          <div className="max-w-md mx-auto space-y-8">
            <div>
              <label className="block text-[10px] font-black text-slate-400 uppercase tracking-[0.2em] mb-3">Goal / Primary Question</label>
              <textarea 
                className="w-full h-32 p-4 bg-slate-50 border border-slate-200 rounded font-mono text-sm focus:ring-1 focus:ring-slate-900 outline-none transition-all"
                placeholder="State clearly what you want to achieve..."
                value={goal}
                onChange={e => setGoal(e.target.value)}
                disabled={status === AppStatus.PROCESSING || status === AppStatus.COMPLETE}
              />
            </div>
            <div>
              <label className="block text-[10px] font-black text-slate-400 uppercase tracking-[0.2em] mb-3">Context / Constraints / Known Facts</label>
              <textarea 
                className="w-full h-32 p-4 bg-slate-50 border border-slate-200 rounded font-mono text-sm focus:ring-1 focus:ring-slate-900 outline-none transition-all"
                placeholder="Provide necessary background parameters..."
                value={context}
                onChange={e => setContext(e.target.value)}
                disabled={status === AppStatus.PROCESSING || status === AppStatus.COMPLETE}
              />
            </div>
            {selectedEngine?.type === EngineType.CONSTRAINT && (
              <div>
                <label className="block text-[10px] font-black text-slate-400 uppercase tracking-[0.2em] mb-3">What failure would be unacceptable?</label>
                <textarea 
                  className="w-full h-24 p-4 bg-slate-50 border border-slate-200 rounded font-mono text-sm focus:ring-1 focus:ring-slate-900 outline-none transition-all"
                  placeholder="Define the boundary that must not be crossed..."
                  value={failure}
                  onChange={e => setFailure(e.target.value)}
                  disabled={status === AppStatus.PROCESSING || status === AppStatus.COMPLETE}
                />
              </div>
            )}
            
            <div className="pt-6">
              <button
                onClick={handleRun}
                disabled={status === AppStatus.PROCESSING || status === AppStatus.COMPLETE || !goal}
                className={`w-full py-4 font-black text-xs uppercase tracking-[0.3em] rounded border shadow-xl transition-all ${
                  status === AppStatus.PROCESSING || status === AppStatus.COMPLETE || !goal
                  ? 'bg-slate-100 text-slate-300 border-slate-100 cursor-not-allowed'
                  : 'bg-slate-900 text-white hover:bg-black active:scale-[0.98] border-slate-900'
                }`}
              >
                {status === AppStatus.PROCESSING ? 'Processing Matrix...' : selectedEngine?.cta}
              </button>
            </div>
          </div>
        </div>

        {/* Result Zone */}
        <div className="w-full md:w-7/12 bg-slate-50 overflow-y-auto">
          {status === AppStatus.PROCESSING ? (
            <div className="flex flex-col items-center justify-center h-full">
               <div className="w-16 h-1 bg-slate-200 relative overflow-hidden mb-4">
                  <div className="absolute inset-0 bg-slate-900 animate-[loading_1.5s_infinite]"></div>
               </div>
               <p className="text-[10px] font-black uppercase tracking-[0.4em] text-slate-900">Executing Reasoning Protocol</p>
            </div>
          ) : result ? (
            <ResultView result={result} />
          ) : (
            <div className="flex items-center justify-center h-full text-slate-300">
               <p className="text-[10px] font-black uppercase tracking-[0.3em]">Ready for input simulation</p>
            </div>
          )}
        </div>
      </main>

      <style>{`
        @keyframes loading {
          0% { transform: translateX(-100%); }
          100% { transform: translateX(100%); }
        }
      `}</style>
    </div>
  );
};

export default App;