import type { DialogueChoice, DialogueSandbox } from "../editorCore";

type NpcDialogueSimulationPanelProps = {
  dialogueNodesLength: number;
  simSandbox: DialogueSandbox;
  simCurrentNodeId: string;
  simText: string;
  simChoices: DialogueChoice[];
  simFallbackNextId: string;
  simEnded: boolean;
  onStartSimulation: () => void;
  onUpdateSandbox: (sandbox: DialogueSandbox) => void;
  onChooseSimChoice: (choice: DialogueChoice) => void;
  onContinueSimulation: () => void;
};

export default function NpcDialogueSimulationPanel(props: NpcDialogueSimulationPanelProps) {
  const {
    dialogueNodesLength,
    simSandbox,
    simCurrentNodeId,
    simText,
    simChoices,
    simFallbackNextId,
    simEnded,
    onStartSimulation,
    onUpdateSandbox,
    onChooseSimChoice,
    onContinueSimulation,
  } = props;

  return (
    <div className="dialogue-sim">
      <div className="dialogue-sim-head">
        <h3>Dialogue Sandbox Preview</h3>
        <button type="button" onClick={onStartSimulation} disabled={dialogueNodesLength === 0}>Start</button>
      </div>

      <div className="sandbox-row">
        <label htmlFor="quest0-started">Quest 0 Started</label>
        <input
          id="quest0-started"
          type="checkbox"
          checked={simSandbox.questStarted.includes(0)}
          onChange={(event) => {
            const nextStarted = event.target.checked
              ? Array.from(new Set([...simSandbox.questStarted, 0]))
              : simSandbox.questStarted.filter((id) => id !== 0);
            onUpdateSandbox({
              ...simSandbox,
              questStarted: nextStarted,
            });
          }}
        />

        <label htmlFor="quest0-complete">Quest 0 Complete</label>
        <input
          id="quest0-complete"
          type="checkbox"
          checked={simSandbox.questCompleted.includes(0)}
          onChange={(event) => {
            const nextCompleted = event.target.checked
              ? Array.from(new Set([...simSandbox.questCompleted, 0]))
              : simSandbox.questCompleted.filter((id) => id !== 0);
            onUpdateSandbox({
              ...simSandbox,
              questCompleted: nextCompleted,
            });
          }}
        />

        <label htmlFor="copper-ore">Copper Ore</label>
        <input
          id="copper-ore"
          type="number"
          min="0"
          value={simSandbox.inventory.copper_ore || 0}
          onChange={(event) => {
            const nextQty = Math.max(0, Number(event.target.value) || 0);
            onUpdateSandbox({
              ...simSandbox,
              inventory: {
                ...simSandbox.inventory,
                copper_ore: nextQty,
              },
            });
          }}
        />
      </div>

      <div className="sim-box">
        <p className="sim-node">Node: {simCurrentNodeId || "(none)"}</p>
        <p className="sim-text">{simText || "Press Start to preview this NPC dialogue."}</p>

        {simChoices.length > 0 ? (
          <div className="sim-choices">
            {simChoices.map((choice, index) => (
              <button key={`sim-choice-${index}`} type="button" onClick={() => onChooseSimChoice(choice)} disabled={simEnded}>
                {index + 1}. {choice.text}
              </button>
            ))}
          </div>
        ) : null}

        {simChoices.length === 0 ? (
          <button type="button" onClick={onContinueSimulation} disabled={simEnded}>
            {simFallbackNextId ? "Continue" : "End"}
          </button>
        ) : null}
      </div>
    </div>
  );
}
