<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Jira Feedback</title>
  <link rel="stylesheet" href="styles/popup.css">
  <style>
    .notification {
      position: fixed;
      top: 10px;
      left: 10px;
      right: 10px;
      padding: 10px;
      border-radius: 4px;
      display: none;
      z-index: 1000;
    }
    .notification.error {
      background-color: #FFEBE6;
      color: #DE350B;
      border: 1px solid #FFBDAD;
    }
    .notification.success {
      background-color: #E3FCEF;
      color: #006644;
      border: 1px solid #ABF5D1;
    }
    .hidden {
      display: none !important;
    }
    #screenshot-editor {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.8);
      z-index: 1000;
      display: none;
    }
    #screenshot-editor.active {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    #editor-toolbar {
      background: #fff;
      padding: 10px;
      border-radius: 4px;
      margin-bottom: 10px;
      display: flex;
      gap: 10px;
      align-items: center;
    }
    #editor-canvas {
      background: #fff;
      max-width: 90%;
      max-height: 70vh;
      border: 2px solid #ccc;
    }
    .tool-button {
      padding: 5px 10px;
      border: none;
      background: #f4f5f7;
      border-radius: 3px;
      cursor: pointer;
    }
    .tool-button:hover {
      background: #ebecf0;
    }
    .editor-actions {
      margin-top: 10px;
      display: flex;
      gap: 10px;
    }
  </style>
</head>
<body>
  <div id="app">
    <!-- Settings Panel -->
    <div id="settings-panel">
      <h2>Jira Settings</h2>
      <div class="form-group">
        <label for="jira-domain">Jira Domain</label>
        <input type="text" id="jira-domain" placeholder="your-domain.atlassian.net">
      </div>
      <div class="form-group">
        <label for="jira-email">Email</label>
        <input type="email" id="jira-email" placeholder="your.email@company.com">
      </div>
      <div class="form-group">
        <label for="jira-token">API Token</label>
        <input type="password" id="jira-token" placeholder="Your Jira API token">
        <small>Get your API token from <a href="https://id.atlassian.com/manage/api-tokens" target="_blank">Atlassian Account Settings</a></small>
      </div>
      <div class="form-group">
        <label for="jira-project">Project Key</label>
        <input type="text" id="jira-project" placeholder="e.g., PROJ">
        <small>This is the prefix of your Jira issues, like "PROJ" in "PROJ-123"</small>
      </div>
      <button id="save-settings" class="primary-button">Save Settings</button>
    </div>

    <!-- Feedback Form -->
    <div id="feedback-form" class="panel hidden">
      <div class="form-group">
        <label for="feedback-type">Type</label>
        <select id="feedback-type">
          <option value="Bug">Bug</option>
          <option value="Feature">Story</option>
          <option value="Improvement">Task</option>
        </select>
      </div>
      <div class="form-group">
        <label for="feedback-title">Title</label>
        <input type="text" id="feedback-title" placeholder="Brief description">
      </div>
      <div class="form-group">
        <label for="feedback-description">Description</label>
        <textarea id="feedback-description" placeholder="Detailed description"></textarea>
      </div>
      <div class="form-group">
        <label>Attachments</label>
        <div class="attachment-buttons">
          <button id="screenshot-btn" class="secondary-button">
            <img src="assets/icons/screenshot.svg" alt="Screenshot">
            Screenshot
          </button>
          <button id="record-btn" class="secondary-button">
            <img src="assets/icons/record.svg" alt="Record">
            Record
          </button>
        </div>
        <div id="attachment-preview"></div>
      </div>
      <div class="form-actions">
        <button id="submit-feedback" class="primary-button">Submit</button>
        <button id="settings-btn" class="text-button">Settings</button>
      </div>
    </div>

    <!-- Screenshot Editor -->
    <div id="screenshot-editor">
      <div id="editor-toolbar"></div>
      <canvas id="editor-canvas"></canvas>
      <div class="editor-actions">
        <button id="save-screenshot" class="primary-button">Save</button>
        <button id="cancel-screenshot" class="secondary-button">Cancel</button>
      </div>
    </div>

    <!-- Loading Overlay -->
    <div id="loading-overlay" class="hidden">
      <div class="spinner"></div>
      <div class="message">Processing...</div>
    </div>

    <!-- Notification -->
    <div id="notification" class="notification hidden">
      <span class="message"></span>
      <button class="close-btn">&times;</button>
    </div>
  </div>
  <script type="module" src="popup.js"></script>
</body>
</html>