import { useStore } from "../store/root";
import { ChatInput } from "./chatView";
import TaskLogging from "./tasksLogging";
import styles from "../styles/demoWelcome.module.css";
import type {
  MessageType,
  RequestStartDemoOptimizationMessage,
} from "@codeflash/types";
import CodeflashLogo from "./logo";
import HelpButton from "./helpButton";

declare const vscode: {
  postMessage: (message: any) => void;
};

const DemoOptimization = () => {
  const demoTask = useStore((state) => state.demoOptTask);

  const handleStartDemo = () => {
    const msg = {
      type: "requestStartDemoOptimization",
    } as RequestStartDemoOptimizationMessage;
    vscode.postMessage(msg);
  };

  if (demoTask) {
    return (
      <>
        <ChatInput
          fileSuggestions={[]}
          functionSuggestions={{ file: "", functions: [] }}
          currentOptimizationTask={demoTask}
          forDemo
        />
        <TaskLogging
          task={demoTask}
          onDemoSuccess={() => {
            vscode.postMessage({ type: "requestDemoOptimizationSuccess" });
          }}
        />
      </>
    );
  }

  // Welcome screen for first-time users
  return (
    <div className={styles.welcomeContainer + " " + "gradiantBg"}>
      <div className={styles.helpBtnWrapper}>
        <HelpButton />
      </div>
      <div className={styles.logoContainer}>
        <CodeflashLogo width="80%" height="100%" />
      </div>

      <h1 className={styles.title}>Welcome to Codeflash</h1>
      <p className={styles.subtitle}>
        AI-powered Python optimization — faster code, verified results.
      </p>

      <div className={styles.featuresGrid}>
        <div className={styles.featureItem}>
          <i className={`codicon codicon-zap ${styles.featureIcon}`}></i>
          <span className={styles.featureText}>Optimize Python functions</span>
        </div>
        <div className={styles.featureItem}>
          <i className={`codicon codicon-graph ${styles.featureIcon}`}></i>
          <span className={styles.featureText}>Performance evaluation</span>
        </div>
        <div className={styles.featureItem}>
          <i className={`codicon codicon-lightbulb ${styles.featureIcon}`}></i>
          <span className={styles.featureText}>AI-powered suggestions</span>
        </div>
      </div>

      <div className={styles.actionContainer}>
        <p className={styles.helpText}>
          Try Codeflash with a sample Python function to see how it works
        </p>
        <div className={styles.actionButtons}>
          <button
            className={styles.demoButton}
            onClick={handleStartDemo}
            title="Start a demo optimization to see Codeflash in action"
          >
            <i className={`codicon codicon-play ${styles.buttonIcon}`}></i>
            Try it out
          </button>
          <button
            className={styles.demoButton + " " + styles.skipButton}
            onClick={() =>
              vscode.postMessage({
                type: "requestSkipDemoOptimization" as MessageType,
              })
            }
          >
            Skip Demo
          </button>
        </div>
      </div>
    </div>
  );
};

export default DemoOptimization;
