import { useState, useMemo } from "react";
import type { Recipe } from "../../../scripts/factorio-dump/helpers/recipes.helper";
import { calculateOptimalBatch, generateAdvancedClock } from "../../engine/factorioEngine";

const ADVANCED_CIRCUIT_RECIPE: Recipe = {
  name: "advanced-circuit",
  category: "electronics",
  subgroup:"",
  energy_required: 6, // Red chips take 6 seconds base
  ingredients: [
    { itemId: "electronic-circuit", amount: 2, type: "item" },
    { itemId: "plastic-bar", amount: 2, type: "item" },
    { itemId: "copper-cable", amount: 4, type: "item" },
  ],
  results: [
    { type: "item", name: "advanced-circuit", amount: 1 }
  ],
};

export default function WizardTest() {
  const [productivityBonus, setProductivityBonus] = useState<number>(1.75); // +175%
  const [actualSpeed, setActualSpeed] = useState<number>(10.0); // Fast endgame machine
  const [stackSize, setStackSize] = useState<number>(16);

  const result = useMemo(() => {
    try {
      const batch = calculateOptimalBatch(
        ADVANCED_CIRCUIT_RECIPE,
        productivityBonus,
        actualSpeed,
        stackSize
      );
      const clockData = generateAdvancedClock(batch, stackSize);
      
      return { batch, clockData };
    } catch (err) {
      return { error: (err as Error).message };
    }
  }, [productivityBonus, actualSpeed, stackSize]);

  return (
    <div style={{ padding: 20, fontFamily: "sans-serif", background: "#242324", color: "#ffe6c0" }}>
      <h2>Factorio Clock Engine Sandbox</h2>
      
      <div style={{ display: "flex", gap: 20, marginBottom: 20 }}>
        <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
          <label>Productivity Bonus (e.g. 1.75 for +175%)</label>
          <input 
            type="number" 
            step="0.01" 
            value={productivityBonus} 
            onChange={(e) => setProductivityBonus(Number(e.target.value))} 
            style={{ padding: 4 }}
          />
        </div>

        <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
          <label>Actual Crafting Speed</label>
          <input 
            type="number" 
            step="0.1" 
            value={actualSpeed} 
            onChange={(e) => setActualSpeed(Number(e.target.value))} 
            style={{ padding: 4 }}
          />
        </div>

        <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
          <label>Stack Size</label>
          <input 
            type="number" 
            value={stackSize} 
            onChange={(e) => setStackSize(Number(e.target.value))} 
            style={{ padding: 4 }}
          />
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 }}>
        <div>
          <h3>1. Batch Math Result</h3>
          <pre style={{ background: "#1a1a1a", padding: 10, borderRadius: 4, overflow: "auto" }}>
            {JSON.stringify(result.batch, null, 2)}
          </pre>
        </div>
        
        <div>
          <h3>2. Generated Timeline Blocks</h3>
          <pre style={{ background: "#1a1a1a", padding: 10, borderRadius: 4, overflow: "auto" }}>
            {JSON.stringify(result.clockData, null, 2)}
          </pre>
        </div>
      </div>
    </div>
  );
}