import './style.css';
import { userStore } from './userStore';
// import { User } from './types';

// Add notification container
const notificationContainer = document.createElement('div');
notificationContainer.className = 'fixed top-4 right-4 z-50 space-y-2';
document.body.appendChild(notificationContainer);

// Notification handler
userStore.onNotification((message, type) => {
  const notification = document.createElement('div');
  notification.className = `p-4 rounded-lg shadow-lg ${
    type === 'success' ? 'bg-green-500' : 'bg-red-500'
  } text-white`;
  notification.textContent = message;
  
  notificationContainer.appendChild(notification);
  
  // Remove notification after 3 seconds
  setTimeout(() => {
    notification.remove();
  }, 3000);
});

document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
  <div class="container mx-auto p-4">
    <div class="bg-white rounded-lg shadow p-6 mb-6">
      <h2 class="text-2xl font-bold mb-4">Add User</h2>
      <form id="userForm" class="space-y-4">
        <div>
          <label class="block text-sm font-medium text-gray-700">Name</label>
          <input type="text" id="name" name="name" required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm p-2">
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700">Email</label>
          <input type="email" id="email" name="email" required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm p-2">
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700">Phone</label>
          <input type="tel" id="phone" name="phone" required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm p-2">
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700">Preferred Platform</label>
          <select id="platform" name="platform" required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm p-2">
            <option value="email">Email</option>
            <option value="sms">SMS</option>
          </select>
        </div>
        <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">Add User</button>
      </form>
    </div>

    <div class="bg-white rounded-lg shadow p-6 mb-6">
      <h2 class="text-2xl font-bold mb-4">User List</h2>
      <div class="overflow-x-auto">
        <table class="min-w-full table-auto">
          <thead class="bg-gray-50">
            <tr>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Email</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Phone</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Platform</th>
            </tr>
          </thead>
          <tbody id="userTableBody" class="bg-white divide-y divide-gray-200">
            <!-- Users will be populated here -->
          </tbody>
        </table>
      </div>
    </div>

    <div class="bg-white rounded-lg shadow p-6 mb-6">
      <h2 class="text-2xl font-bold mb-4">Send Message</h2>
      <form id="messageForm" class="space-y-4">
        <div>
          <label class="block text-sm font-medium text-gray-700">Message Type</label>
          <select id="messageType" name="messageType" required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm p-2">
            <option value="email">Email</option>
            <option value="sms">SMS</option>
          </select>
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700">Message</label>
          <textarea id="message" name="message" required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm p-2"></textarea>
        </div>
        <div id="userList" class="space-y-2">
          <!-- Users will be populated here -->
        </div>
        <button type="submit" class="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600">Send Message</button>
      </form>
    </div>
  </div>
`;

function updateUserList() {
  const userTableBody = document.getElementById('userTableBody')!;
  const userList = document.getElementById('userList')!;
  const users = userStore.getUsers();
  
  // Update table view
  userTableBody.innerHTML = users.map(user => `
    <tr>
      <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${user.name}</td>
      <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${user.email}</td>
      <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${user.phone}</td>
      <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 capitalize">${user.platform}</td>
    </tr>
  `).join('');
  
  // Update message form checkboxes
  userList.innerHTML = users.map(user => `
    <div class="flex items-center space-x-2">
      <input type="checkbox" id="user-${user.id}" value="${user.id}" class="rounded">
      <label for="user-${user.id}">${user.name} (${user.platform === 'email' ? user.email : user.phone})</label>
    </div>
  `).join('');
}

document.getElementById('userForm')?.addEventListener('submit', (e) => {
  e.preventDefault();
  const formData = new FormData(e.target as HTMLFormElement);
  const user = {
    name: formData.get('name') as string,
    email: formData.get('email') as string,
    phone: formData.get('phone') as string,
    platform: formData.get('platform') as 'email' | 'sms'
  };
  
  userStore.addUser(user);
  updateUserList();
  (e.target as HTMLFormElement).reset();
});

document.getElementById('messageForm')?.addEventListener('submit', async (e) => {
  e.preventDefault();
  const formData = new FormData(e.target as HTMLFormElement);
  const messageType = formData.get('messageType') as 'email' | 'sms';
  const message = formData.get('message') as string;
  
  const selectedUsers = Array.from(document.querySelectorAll<HTMLInputElement>('#userList input[type="checkbox"]:checked'))
    .map(checkbox => checkbox.value);
  
  if (selectedUsers.length === 0) {
    alert('Please select at least one user');
    return;
  }
  
 const submitButton = document.getElementById('submitButton') as HTMLButtonElement;
submitButton.disabled = true;
// ...
submitButton.disabled = false;

  
  try {
    await userStore.sendMessage(selectedUsers, messageType, message);
    (e.target as HTMLFormElement).reset();
  } finally {
    submitButton.disabled = false;
    submitButton.textContent = 'Send Message';
  }
});

updateUserList();