import * as React from "react";
import { 
  Button,
  makeStyles
} from "@fluentui/react-components";
import { 
  Edit24Regular,
  DismissRegular
} from "@fluentui/react-icons";
import { useStatusContext } from "./App";
import { useCommonStyles } from "./commonStyles";

const useStyles = makeStyles({
  buttonGrid: {
    display: "grid",
    gridTemplateColumns: "repeat(2, 1fr)",
    gap: "8px",
    width: "100%"
  },
  draftButton: {
    width: "100%",
    minWidth: 0,
    padding: "8px 4px",
    "& span": {
      justifyContent: "center"
    }
  }
});

export const DraftButtons: React.FC = () => {
  const styles = useStyles();
  const commonStyles = useCommonStyles();
  const { 
    statusMessage, setStatusMessage,
    statusType, setStatusType,
    isProcessing, setIsProcessing
  } = useStatusContext();

  const addDraftWatermark = async () => {
    setIsProcessing(true);
    try {
      await PowerPoint.run(async (context) => {
        // Get the slide masters collection
        const masters = context.presentation.slideMasters;
        masters.load("items");
        await context.sync();
          
        if (masters.items.length === 0) {
          setStatusMessage("Could not access slide masters.");
          setStatusType("error");
          return;
        }

        // Process counter
        let processedMasters = 0;
        let errorMasters = 0;

        // Process each slide master (usually there's just one)
        for (let i = 0; i < masters.items.length; i++) {
          try {
            const master = masters.items[i];
            
            // Create the textbox on the master slide
            const textBox = master.shapes.addTextBox("");
            
            // textBox.left = 0; // Center it horizontally
            textBox.left = -329
            textBox.top = 32;
            // textBox.width = 960;
            textBox.width = 2400;
            textBox.height = 540;
            
            await context.sync();

            // Load textFrame to set text properties
            textBox.load("textFrame");
            await context.sync();
            
            if (textBox.textFrame) {
              // Load textRange to set text and properties
              textBox.textFrame.load("textRange");
              await context.sync();
            
              // Need to load font and paragraphFormat
              textBox.textFrame.textRange.load("font,paragraphFormat");
              await context.sync();
              
              // Set font properties
              try {
                // Ensure the font is loaded properly before setting properties
                textBox.textFrame.textRange.font.load();
                await context.sync();
                
                // Set font properties exactly as in the VBA code
                textBox.textFrame.textRange.font.name = "Inter";
                // textBox.textFrame.textRange.font.size = 256;
                textBox.textFrame.textRange.font.size = 54;
                textBox.textFrame.textRange.font.bold = true;
                textBox.textFrame.verticalAlignment = "MiddleCentered"
                
                // Set the color to RGB(255, 233, 232)
                // Different APIs may need different color formats
                textBox.textFrame.textRange.font.color = "#FFE9E8"; 

                // Set the text
                textBox.textFrame.textRange.text = 
                  "DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT\n" +
                  "DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT\n" +
                  "DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT\n" +
                  "DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT\n" +
                  "DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT\n" +
                  "DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT\n" +
                  "DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT\n" +
                  "DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT\n" +
                  "DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT DRAFT\n";
              } catch (fontError) {
                console.error("Error setting font properties:", fontError);
                // Even if we can't set the font properties exactly, continue with default font
              }
              
              // Add a name/tag to the shape for identification
              textBox.name = "DraftWatermark";
              
              await context.sync();
              processedMasters++;
            }
          } catch (masterError) {
            console.error(`Error processing master ${i+1}:`, masterError);
            errorMasters++;
            // Continue to the next master
            continue;
          }
        }
        
        // Report results
        if (processedMasters > 0) {
          setStatusMessage(`Added draft watermark to ${processedMasters} master slide${processedMasters > 1 ? 's' : ''}.`);
          setStatusType("success");
        } else if (errorMasters > 0) {
          setStatusMessage(`Failed to add markings. Errors on ${errorMasters} master slide${errorMasters > 1 ? 's' : ''}.`);
          setStatusType("error");
        } else {
          setStatusMessage("No master slides found to add draft watermark.");
          setStatusType("warning");
        }

      });
    } catch (error) {
      setStatusMessage(`Error: ${error.message}`);
      setStatusType("error");
      console.error("Add draft watermark error:", error);
    } finally {
      setIsProcessing(false);
    }
  };

  const removeDraftWatermark = async () => {
    setIsProcessing(true);
    try {
      await PowerPoint.run(async (context) => {
        try {
          // Get the slide masters collection
          const masters = context.presentation.slideMasters;
          masters.load("items");
          await context.sync();
          
          if (masters.items.length === 0) {
            setStatusMessage("Could not access slide masters.");
            setStatusType("error");
            return;
          }
          
          // Process counter
          let processedMasters = 0;
          let errorMasters = 0;
          let removedCount = 0;
          
          // Process each master slide
          for (let i = 0; i < masters.items.length; i++) {
            try {
              const master = masters.items[i];
              
              // Load all shapes on the master slide
              master.shapes.load("items");
              await context.sync();
              
              // Find shapes with name "DraftWatermark"
              for (let j = 0; j < master.shapes.items.length; j++) {
                const shape = master.shapes.items[j];
                shape.load("name");
                await context.sync();
                
                if (shape.name === "DraftWatermark") {
                  // Delete the draft watermark shape
                  shape.delete();
                  removedCount++;
                }
              }
              
              await context.sync();
              processedMasters++;
            } catch (masterError) {
              console.error(`Error processing master slide ${i+1}:`, masterError);
              errorMasters++;
              // Continue to the next master slide
              continue;
            }
          }
          
          // Report results
          if (removedCount > 0) {
            setStatusMessage(`Removed ${removedCount} draft watermark${removedCount > 1 ? 's' : ''} from ${processedMasters} master slide${processedMasters > 1 ? 's' : ''}.`);
            setStatusType("success");
          } else if (errorMasters > 0) {
            setStatusMessage(`Failed to remove draft watermarks. Errors on ${errorMasters} master slide${errorMasters > 1 ? 's' : ''}.`);
            setStatusType("error");
          } else {
            setStatusMessage("No draft watermark found to remove.");
            setStatusType("info");
          }
        } catch (innerError) {
          console.error("Inner error:", innerError);
          throw innerError; // Re-throw to outer catch
        }
      });
    } catch (error) {
      setStatusMessage(`Error: ${error.message}`);
      setStatusType("error");
      console.error("Remove draft watermark error:", error);
    } finally {
      setIsProcessing(false);
    }
  };

  return (
    <div className={commonStyles.container}>
      <div className={styles.buttonGrid}>
        <Button 
          appearance="primary" 
          className={styles.draftButton}
          onClick={addDraftWatermark} 
          icon={<Edit24Regular />}
          disabled={isProcessing}
          title="Add Draft"
        >
          Add
        </Button>
        <Button 
          appearance="primary" 
          className={styles.draftButton}
          onClick={removeDraftWatermark} 
          icon={<DismissRegular />}
          disabled={isProcessing}
          title="Remove Draft"
        >
          Remove
        </Button>
      </div>
    </div>
  );
};

export default DraftButtons;