import { useState } from "react";
import { useFetcher } from "react-router";
import styles from "./header.module.css";

interface HeaderProps {
  username: string | undefined;
  session: { shop: string };
}

export default function Header({ username, session }: HeaderProps) {
  const fetcher = useFetcher();
  const [isEnabled, setIsEnabled] = useState(false);
  const isLoading = fetcher.state !== "idle";

  const handleToggleWidget = async () => {
    const formData = new FormData();
    formData.append("action", "toggle_widget");
    formData.append("enabled", (!isEnabled).toString());

    fetcher.submit(formData, { method: "POST" });
    setIsEnabled(!isEnabled);
  };

  const openThemeEditor = () => {
    // Open theme editor to app embeds section
    window.open(
      `https://${session.shop}/admin/themes/current/editor?context=apps`,
      "_blank"
    );
  };

  return (
    <div className={styles.header}>
      <div className={styles.greetingSection}>
        <h1 className={styles.greeting}>{`Hi ${username || "Admin"} 👋!`}</h1>
        <p className={styles.welcome}>Welcome to Qixs</p>
      </div>

      <div className={styles.embedSection}>
        <div className={styles.embedContent}>
          <div className={styles.embedText}>
            <svg
              className={styles.dashboardIcon}
              width="22"
              height="22"
              viewBox="0 0 22 22"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M7.5625 2.75H4.8125C4.26549 2.75 3.74089 2.9673 3.35409 3.35409C2.9673 3.74089 2.75 4.26549 2.75 4.8125V17.1875C2.75 17.7345 2.9673 18.2591 3.35409 18.6459C3.74089 19.0327 4.26549 19.25 4.8125 19.25H7.5625C8.10951 19.25 8.63411 19.0327 9.02091 18.6459C9.4077 18.2591 9.625 17.7345 9.625 17.1875V4.8125C9.625 4.26549 9.4077 3.74089 9.02091 3.35409C8.63411 2.9673 8.10951 2.75 7.5625 2.75ZM8.25 17.1875C8.25 17.3698 8.17757 17.5447 8.04864 17.6736C7.9197 17.8026 7.74484 17.875 7.5625 17.875H4.8125C4.63016 17.875 4.4553 17.8026 4.32636 17.6736C4.19743 17.5447 4.125 17.3698 4.125 17.1875V4.8125C4.125 4.63016 4.19743 4.4553 4.32636 4.32636C4.4553 4.19743 4.63016 4.125 4.8125 4.125H7.5625C7.74484 4.125 7.9197 4.19743 8.04864 4.32636C8.17757 4.4553 8.25 4.63016 8.25 4.8125V17.1875ZM17.1875 13.5438H13.0625C12.5155 13.5438 11.9909 13.761 11.6041 14.1478C11.2173 14.5346 11 15.0592 11 15.6063V17.1875C11 17.7345 11.2173 18.2591 11.6041 18.6459C11.9909 19.0327 12.5155 19.25 13.0625 19.25H17.1875C17.7345 19.25 18.2591 19.0327 18.6459 18.6459C19.0327 18.2591 19.25 17.7345 19.25 17.1875V15.6063C19.25 15.0592 19.0327 14.5346 18.6459 14.1478C18.2591 13.761 17.7345 13.5438 17.1875 13.5438ZM17.875 17.1875C17.875 17.3698 17.8026 17.5447 17.6736 17.6736C17.5447 17.8026 17.3698 17.875 17.1875 17.875H13.0625C12.8802 17.875 12.7053 17.8026 12.5764 17.6736C12.4474 17.5447 12.375 17.3698 12.375 17.1875V15.6063C12.375 15.4239 12.4474 15.249 12.5764 15.1201C12.7053 14.9912 12.8802 14.9188 13.0625 14.9188H17.1875C17.3698 14.9188 17.5447 14.9912 17.6736 15.1201C17.8026 15.249 17.875 15.4239 17.875 15.6063V17.1875ZM17.1875 2.75H13.0625C12.5155 2.75 11.9909 2.9673 11.6041 3.35409C11.2173 3.74089 11 4.26549 11 4.8125V10.1062C11 10.6533 11.2173 11.1779 11.6041 11.5647C11.9909 11.9515 12.5155 12.1688 13.0625 12.1688H17.1875C17.7345 12.1688 18.2591 11.9515 18.6459 11.5647C19.0327 11.1779 19.25 10.6533 19.25 10.1062V4.8125C19.25 4.26549 19.0327 3.74089 18.6459 3.35409C18.2591 2.9673 17.7345 2.75 17.1875 2.75ZM17.875 10.1062C17.875 10.2886 17.8026 10.4635 17.6736 10.5924C17.5447 10.7213 17.3698 10.7937 17.1875 10.7937H13.0625C12.8802 10.7937 12.7053 10.7213 12.5764 10.5924C12.4474 10.4635 12.375 10.2886 12.375 10.1062V4.8125C12.375 4.63016 12.4474 4.4553 12.5764 4.32636C12.7053 4.19743 12.8802 4.125 13.0625 4.125H17.1875C17.3698 4.125 17.5447 4.19743 17.6736 4.32636C17.8026 4.4553 17.875 4.63016 17.875 4.8125V10.1062Z"
                fill="black"
              />
            </svg>
            <span>Embed app to your theme</span>
          </div>
          <button 
            className={styles.embedButton}
            onClick={openThemeEditor}
            disabled={isLoading}
          >
            {isEnabled ? "Configure" : "Turn on"}
          </button>
        </div>
      </div>
    </div>
  );
}