<div class="container">
  <h1>URL Shortener</h1>
  <form id="form">
    <input type="url" id="url" placeholder="Enter your long URL" required>
    <button type="submit" id="submit-btn">Shorten URL</button>
  </form>
  <div id="result">
    <p>Shortened URL: <a target="_blank" id="shortened-url"></a>
      <i id="icon" class="fa-solid fa-copy"></i>
    </p>
  </div>
  <div id="copy">Copied!</div>
  <div id="error"></div>
</div>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f1f1f1;
  font-family: Arial, sans-serif;
}
.container {
  width: 400px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  padding: 20px;
  text-align: center;
}
form {
  display: flex;
  flex-direction: column;
}
input,
button {
  padding: 10px;
  margin: 10px 0;
  border: none;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
button {
  cursor: pointer;
  background-color: #007bff;
  color: #fff;
}
button:hover {
  background-color: #0069d9;
}
button:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}
#result,
#error,
#copy {
  display: none;
}
#result {
  margin-top: 30px;
  position: relative;
}
#shortened-url {
  font-weight: bold;
}
#error {
  color: #dc3545;
  margin-top: 10px;
}
#icon {
  cursor: pointer;
  margin-left: 10px;
  vertical-align: middle;
  color: #0069d9;
}
#copy {
  position: absolute;
  left: 60%;
}

const form = document.getElementById("form");
const urlInput = document.getElementById("url");
const submitBtn = document.getElementById("submit-btn");
const result = document.getElementById("result");
const shortenedUrlLink = document.getElementById("shortened-url");
const errorMessage = document.getElementById("error");
const copyIcon = document.getElementById("icon");
const copyUrl = document.getElementById("copy");

form.addEventListener("submit", async (e) => {
  e.preventDefault();
  const url = urlInput.value;

  if (!url) {
    displayMessage("Please enter a URL");
    return;
  }

  try {
    submitBtn.disabled = true;
    submitBtn.textContent = "Shortening...";
    errorMessage.style.display = "none";
    result.style.display = "none";
    copyUrl.style.display = "none";

    const shortUrl = await shortenUrl(url);
    shortenedUrlLink.href = shortUrl;
    shortenedUrlLink.textContent = shortUrl;

    result.style.display = "block";
  } catch (error) {
    displayMessage("An error occurred while shortening the URL. Please try again.");
  } finally {
    submitBtn.disabled = false;
    submitBtn.textContent = "Shorten URL";
  }
});

async function shortenUrl(url) {
  const apiUrl = "https://api.tinyurl.com/create";
  const token = "KZS9Nhw15iX5nqcghyvVlZoZbSZcEnPlH2DYB3kbPNFepsvliABvyZ7KHcgX";
  const response = await fetch(apiUrl, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${token}`
    },
    body: JSON.stringify({
      domain: "tinyurl.com",
      url: url
    })
  });

  if (!response.ok) {
    throw new Error("An error occurred. Please try again.");
  }
  const result = await response.json();
  return result.data.tiny_url;
}

copyIcon.addEventListener("click", async () => {
  try {
    await navigator.clipboard.writeText(shortenedUrlLink.textContent);
    copyUrl.style.display = "block";
    setTimeout(() => {
      copyUrl.style.display = "none";
    }, 2000);
  } catch (err) {
    displayMessage("Failed to copy to clipboard. Please try again.");
  }
});

function displayMessage(message) {
  errorMessage.textContent = message;
  errorMessage.style.display = "block";
}