////////// PROJECT FILE SEPARATION LINE ////////// CODE AFTER THIS LINE ARE FROM: <ProjectRoot>/Data/WebUI/src/Dialogs.jsx

import React from "react";
import {
  Dialog,
  DialogTitle,
  DialogContent,
  DialogContentText,
  DialogActions,
  Button,
  Menu,
  MenuItem,
  TextField
} from "@mui/material";

export function CloseAllDialog({ open, onClose, onConfirm }) {
  return (
    <Dialog open={open} onClose={onClose} PaperProps={{ sx: { bgcolor: "#121212", color: "#fff" } }}>
      <DialogTitle>Close All Flow Tabs?</DialogTitle>
      <DialogContent>
        <DialogContentText sx={{ color: "#ccc" }}>
          This will remove all existing flow tabs and create a fresh tab named Flow 1.
        </DialogContentText>
      </DialogContent>
      <DialogActions>
        <Button onClick={onClose} sx={{ color: "#58a6ff" }}>Cancel</Button>
        <Button onClick={onConfirm} sx={{ color: "#ff4f4f" }}>Close All</Button>
      </DialogActions>
    </Dialog>
  );
}

export function CreditsDialog({ open, onClose }) {
  return (
    <Dialog open={open} onClose={onClose} PaperProps={{ sx: { bgcolor: "#121212", color: "#fff" } }}>
      <DialogContent sx={{ textAlign: "center", pt: 3 }}>
        <img
          src="/Borealis_Logo.png"
          alt="Borealis Logo"
          style={{ width: "120px", marginBottom: "12px" }}
        />
        <DialogTitle sx={{ p: 0, mb: 1 }}>Borealis - Automation Platform</DialogTitle>
        <DialogContentText sx={{ color: "#ccc" }}>
          Designed by Nicole Rappe @{" "}
          <a
            href="https://bunny-lab.io"
            target="_blank"
            rel="noopener noreferrer"
            style={{ color: "#58a6ff", textDecoration: "none" }}
          >
            Bunny Lab
          </a>
        </DialogContentText>
      </DialogContent>
      <DialogActions>
        <Button onClick={onClose} sx={{ color: "#58a6ff" }}>Close</Button>
      </DialogActions>
    </Dialog>
  );
}

export function RenameTabDialog({ open, value, onChange, onCancel, onSave }) {
  return (
    <Dialog open={open} onClose={onCancel} PaperProps={{ sx: { bgcolor: "#121212", color: "#fff" } }}>
      <DialogTitle>Rename Tab</DialogTitle>
      <DialogContent>
        <TextField
          autoFocus
          margin="dense"
          label="Tab Name"
          fullWidth
          variant="outlined"
          value={value}
          onChange={(e) => onChange(e.target.value)}
          sx={{
            "& .MuiOutlinedInput-root": {
              backgroundColor: "#2a2a2a",
              color: "#ccc",
              "& fieldset": {
                borderColor: "#444"
              },
              "&:hover fieldset": {
                borderColor: "#666"
              }
            },
            label: { color: "#aaa" },
            mt: 1
          }}
        />
      </DialogContent>
      <DialogActions>
        <Button onClick={onCancel} sx={{ color: "#58a6ff" }}>Cancel</Button>
        <Button onClick={onSave} sx={{ color: "#58a6ff" }}>Save</Button>
      </DialogActions>
    </Dialog>
  );
}

export function RenameWorkflowDialog({ open, value, onChange, onCancel, onSave }) {
  return (
    <Dialog open={open} onClose={onCancel} PaperProps={{ sx: { bgcolor: "#121212", color: "#fff" } }}>
      <DialogTitle>Rename Workflow</DialogTitle>
      <DialogContent>
        <TextField
          autoFocus
          margin="dense"
          label="Workflow Name"
          fullWidth
          variant="outlined"
          value={value}
          onChange={(e) => onChange(e.target.value)}
          sx={{
            "& .MuiOutlinedInput-root": {
              backgroundColor: "#2a2a2a",
              color: "#ccc",
              "& fieldset": {
                borderColor: "#444"
              },
              "&:hover fieldset": {
                borderColor: "#666"
              }
            },
            label: { color: "#aaa" },
            mt: 1
          }}
        />
      </DialogContent>
      <DialogActions>
        <Button onClick={onCancel} sx={{ color: "#58a6ff" }}>Cancel</Button>
        <Button onClick={onSave} sx={{ color: "#58a6ff" }}>Save</Button>
      </DialogActions>
    </Dialog>
  );
}

export function RenameFolderDialog({
  open,
  value,
  onChange,
  onCancel,
  onSave,
  title = "Folder Name",
  confirmText = "Save"
}) {
  return (
    <Dialog open={open} onClose={onCancel} PaperProps={{ sx: { bgcolor: "#121212", color: "#fff" } }}>
      <DialogTitle>{title}</DialogTitle>
      <DialogContent>
        <TextField
          autoFocus
          margin="dense"
          label="Folder Name"
          fullWidth
          variant="outlined"
          value={value}
          onChange={(e) => onChange(e.target.value)}
          sx={{
            "& .MuiOutlinedInput-root": {
              backgroundColor: "#2a2a2a",
              color: "#ccc",
              "& fieldset": { borderColor: "#444" },
              "&:hover fieldset": { borderColor: "#666" }
            },
            label: { color: "#aaa" },
            mt: 1
          }}
        />
      </DialogContent>
      <DialogActions>
        <Button onClick={onCancel} sx={{ color: "#58a6ff" }}>Cancel</Button>
        <Button onClick={onSave} sx={{ color: "#58a6ff" }}>{confirmText}</Button>
      </DialogActions>
    </Dialog>
  );
}

export function NewWorkflowDialog({ open, value, onChange, onCancel, onCreate }) {
  return (
    <Dialog open={open} onClose={onCancel} PaperProps={{ sx: { bgcolor: "#121212", color: "#fff" } }}>
      <DialogTitle>New Workflow</DialogTitle>
      <DialogContent>
        <TextField
          autoFocus
          margin="dense"
          label="Workflow Name"
          fullWidth
          variant="outlined"
          value={value}
          onChange={(e) => onChange(e.target.value)}
          sx={{
            "& .MuiOutlinedInput-root": {
              backgroundColor: "#2a2a2a",
              color: "#ccc",
              "& fieldset": { borderColor: "#444" },
              "&:hover fieldset": { borderColor: "#666" }
            },
            label: { color: "#aaa" },
            mt: 1
          }}
        />
      </DialogContent>
      <DialogActions>
        <Button onClick={onCancel} sx={{ color: "#58a6ff" }}>Cancel</Button>
        <Button onClick={onCreate} sx={{ color: "#58a6ff" }}>Create</Button>
      </DialogActions>
    </Dialog>
  );
}

export function ClearDeviceActivityDialog({ open, onCancel, onConfirm }) {
  return (
    <Dialog open={open} onClose={onCancel} PaperProps={{ sx: { bgcolor: "#121212", color: "#fff" } }}>
      <DialogTitle>Clear Device Activity</DialogTitle>
      <DialogContent>
        <DialogContentText sx={{ color: "#ccc" }}>
          All device activity history will be cleared, are you sure?
        </DialogContentText>
      </DialogContent>
      <DialogActions>
        <Button onClick={onCancel} sx={{ color: "#58a6ff" }}>Cancel</Button>
        <Button onClick={onConfirm} sx={{ color: "#ff4f4f" }}>Clear</Button>
      </DialogActions>
    </Dialog>
  );
}

export function SaveWorkflowDialog({ open, value, onChange, onCancel, onSave }) {
  return (
    <Dialog open={open} onClose={onCancel} PaperProps={{ sx: { bgcolor: "#121212", color: "#fff" } }}>
      <DialogTitle>Save Workflow</DialogTitle>
      <DialogContent>
        <TextField
          autoFocus
          margin="dense"
          label="Workflow Name"
          fullWidth
          variant="outlined"
          value={value}
          onChange={(e) => onChange(e.target.value)}
          sx={{
            "& .MuiOutlinedInput-root": {
              backgroundColor: "#2a2a2a",
              color: "#ccc",
              "& fieldset": { borderColor: "#444" },
              "&:hover fieldset": { borderColor: "#666" }
            },
            label: { color: "#aaa" },
            mt: 1
          }}
        />
      </DialogContent>
      <DialogActions>
        <Button onClick={onCancel} sx={{ color: "#58a6ff" }}>Cancel</Button>
        <Button onClick={onSave} sx={{ color: "#58a6ff" }}>Save</Button>
      </DialogActions>
    </Dialog>
  );
}

export function ConfirmDeleteDialog({ open, message, onCancel, onConfirm }) {
  return (
    <Dialog open={open} onClose={onCancel} PaperProps={{ sx: { bgcolor: "#121212", color: "#fff" } }}>
      <DialogTitle>Confirm Delete</DialogTitle>
      <DialogContent>
        <DialogContentText sx={{ color: "#ccc" }}>{message}</DialogContentText>
      </DialogContent>
      <DialogActions>
        <Button onClick={onCancel} sx={{ color: "#58a6ff" }}>Cancel</Button>
        <Button onClick={onConfirm} sx={{ color: "#58a6ff" }}>Confirm</Button>
      </DialogActions>
    </Dialog>
  );
}

export function DeleteDeviceDialog({ open, onCancel, onConfirm }) {
  return (
    <Dialog open={open} onClose={onCancel} PaperProps={{ sx: { bgcolor: "#121212", color: "#fff" } }}>
      <DialogTitle>Remove Device</DialogTitle>
      <DialogContent>
        <DialogContentText sx={{ color: "#ccc" }}>
          Are you sure you want to remove this device?  If the agent is still running, it will automatically re-enroll the device.
        </DialogContentText>
      </DialogContent>
      <DialogActions>
        <Button onClick={onCancel} sx={{ color: "#58a6ff" }}>Cancel</Button>
        <Button
          onClick={onConfirm}
          sx={{ bgcolor: "#ff4f4f", color: "#fff", "&:hover": { bgcolor: "#e04444" } }}
        >
          Remove
        </Button>
      </DialogActions>
    </Dialog>
  );
}

export function TabContextMenu({ anchor, onClose, onRename, onCloseTab }) {
  return (
    <Menu
      open={Boolean(anchor)}
      onClose={onClose}
      anchorReference="anchorPosition"
      anchorPosition={anchor ? { top: anchor.y, left: anchor.x } : undefined}
      PaperProps={{
        sx: {
          bgcolor: "#1e1e1e",
          color: "#fff",
          fontSize: "13px"
        }
      }}
    >
      <MenuItem onClick={onRename}>Rename</MenuItem>
      <MenuItem onClick={onCloseTab}>Close Workflow</MenuItem>
    </Menu>
  );
}

export function CreateCustomViewDialog({ open, value, onChange, onCancel, onSave }) {
  return (
    <Dialog open={open} onClose={onCancel} PaperProps={{ sx: { bgcolor: "#121212", color: "#fff" } }}>
      <DialogTitle>Create a New Custom View</DialogTitle>
      <DialogContent>
        <DialogContentText sx={{ color: "#ccc", mb: 1 }}>
          Saving a view will save column order, visibility, and filters.
        </DialogContentText>
        <TextField
          autoFocus
          fullWidth
          margin="dense"
          label="View Name"
          variant="outlined"
          value={value}
          onChange={(e) => onChange(e.target.value)}
          placeholder="Add a name for this custom view"
          sx={{
            "& .MuiOutlinedInput-root": {
              backgroundColor: "#2a2a2a",
              color: "#ccc",
              "& fieldset": { borderColor: "#444" },
              "&:hover fieldset": { borderColor: "#666" }
            },
            label: { color: "#aaa" },
            mt: 1
          }}
        />
      </DialogContent>
      <DialogActions>
        <Button onClick={onCancel} sx={{ color: "#58a6ff" }}>Cancel</Button>
        <Button onClick={onSave} sx={{ color: "#58a6ff" }}>Save</Button>
      </DialogActions>
    </Dialog>
  );
}

export function RenameCustomViewDialog({ open, value, onChange, onCancel, onSave }) {
  return (
    <Dialog open={open} onClose={onCancel} PaperProps={{ sx: { bgcolor: "#121212", color: "#fff" } }}>
      <DialogTitle>Rename Custom View</DialogTitle>
      <DialogContent>
        <TextField
          autoFocus
          fullWidth
          margin="dense"
          label="View Name"
          variant="outlined"
          value={value}
          onChange={(e) => onChange(e.target.value)}
          sx={{
            "& .MuiOutlinedInput-root": {
              backgroundColor: "#2a2a2a",
              color: "#ccc",
              "& fieldset": { borderColor: "#444" },
              "&:hover fieldset": { borderColor: "#666" }
            },
            label: { color: "#aaa" },
            mt: 1
          }}
        />
      </DialogContent>
      <DialogActions>
        <Button onClick={onCancel} sx={{ color: "#58a6ff" }}>Cancel</Button>
        <Button onClick={onSave} sx={{ color: "#58a6ff" }}>Save</Button>
      </DialogActions>
    </Dialog>
  );
}

export function CreateSiteDialog({ open, onCancel, onCreate }) {
  const [name, setName] = React.useState("");
  const [description, setDescription] = React.useState("");

  React.useEffect(() => {
    if (open) {
      setName("");
      setDescription("");
    }
  }, [open]);

  return (
    <Dialog open={open} onClose={onCancel} PaperProps={{ sx: { bgcolor: "#121212", color: "#fff" } }}>
      <DialogTitle>Create Site</DialogTitle>
      <DialogContent>
        <DialogContentText sx={{ color: "#ccc", mb: 1 }}>
          Create a new site and optionally add a description.
        </DialogContentText>
        <TextField
          autoFocus
          fullWidth
          margin="dense"
          label="Site Name"
          variant="outlined"
          value={name}
          onChange={(e) => setName(e.target.value)}
          sx={{
            "& .MuiOutlinedInput-root": {
              backgroundColor: "#2a2a2a",
              color: "#ccc",
              "& fieldset": { borderColor: "#444" },
              "&:hover fieldset": { borderColor: "#666" }
            },
            label: { color: "#aaa" },
            mt: 1
          }}
        />
        <TextField
          fullWidth
          multiline
          minRows={3}
          margin="dense"
          label="Description"
          variant="outlined"
          value={description}
          onChange={(e) => setDescription(e.target.value)}
          sx={{
            "& .MuiOutlinedInput-root": {
              backgroundColor: "#2a2a2a",
              color: "#ccc",
              "& fieldset": { borderColor: "#444" },
              "&:hover fieldset": { borderColor: "#666" }
            },
            label: { color: "#aaa" },
            mt: 2
          }}
        />
      </DialogContent>
      <DialogActions>
        <Button onClick={onCancel} sx={{ color: "#58a6ff" }}>Cancel</Button>
        <Button
          onClick={() => {
            const nm = (name || '').trim();
            if (!nm) return;
            onCreate && onCreate(nm, description || '');
          }}
          sx={{ color: "#58a6ff" }}
        >
          Create
        </Button>
      </DialogActions>
    </Dialog>
  );
}