script.js

const STORAGE_KEY = 'testCaseManager.records';

const caseForm = document.getElementById('caseForm');
const caseIdField = document.getElementById('caseId');
const titleField = document.getElementById('title');
const descriptionField = document.getElementById('description');
const priorityField = document.getElementById('priority');
const statusField = document.getElementById('status');
const saveBtn = document.getElementById('saveBtn');
const clearBtn = document.getElementById('clearBtn');
const exportCsvBtn = document.getElementById('exportCsvBtn');
const searchInput = document.getElementById('searchInput');
const filterPriority = document.getElementById('filterPriority');
const filterStatus = document.getElementById('filterStatus');
const caseTableBody = document.querySelector('#caseTable tbody');
const totalCases = document.getElementById('totalCases');
const passedCases = document.getElementById('passedCases');
const failedCases = document.getElementById('failedCases');
const blockedCases = document.getElementById('blockedCases');

let testCases = [];
let editingId = null;

function getSavedCases() {
  try {
    const json = localStorage.getItem(STORAGE_KEY);
    return json ? JSON.parse(json) : [];
  } catch (error) {
    console.error('Failed to read localStorage:', error);
    return [];
  }
}

function saveCases() {
  localStorage.setItem(STORAGE_KEY, JSON.stringify(testCases));
}

function normalizeInput(value) {
  return value.trim();
}

function validateCase(caseData) {
  if (!caseData.id || !caseData.title) {
    return 'Test Case ID and Title are required.';
  }

  const duplicate = testCases.find(
    (item) => item.id.toLowerCase() === caseData.id.toLowerCase() && item.id !== editingId
  );

  if (duplicate) {
    return 'A test case with this ID already exists.';
  }

  return null;
}

function buildChip(content, className) {
  const span = document.createElement('span');
  span.className = `${className}-chip ${content}`;
  span.textContent = content;
  return span;
}

function updateDashboard() {
  totalCases.textContent = testCases.length;
  passedCases.textContent = testCases.filter((item) => item.status === 'Passed').length;
  failedCases.textContent = testCases.filter((item) => item.status === 'Failed').length;
  blockedCases.textContent = testCases.filter((item) => item.status === 'Blocked').length;
}

function generateSampleCases() {
  const now = new Date().toISOString();
  return [
    { id: 'TC-001', title: 'Login Test', description: 'Verify user can log in with valid credentials.', priority: 'High', status: 'Passed', updatedAt: now },
    { id: 'TC-002', title: 'Logout Test', description: 'Verify user can log out successfully.', priority: 'Low', status: 'Ready', updatedAt: now },
    { id: 'TC-003', title: 'Registration Test', description: 'Verify new user registration flow.', priority: 'High', status: 'Failed', updatedAt: now },
    { id: 'TC-004', title: 'Password Reset Test', description: 'Verify password reset email and flow.', priority: 'Medium', status: 'Draft', updatedAt: now },
    { id: 'TC-005', title: 'Profile Update Test', description: 'Verify profile fields can be updated.', priority: 'Low', status: 'Passed', updatedAt: now },
    { id: 'TC-006', title: 'Search Functionality Test', description: 'Verify product search returns relevant results.', priority: 'Medium', status: 'Ready', updatedAt: now },
    { id: 'TC-007', title: 'Add to Cart Test', description: 'Verify items can be added to cart and quantities adjusted.', priority: 'High', status: 'Failed', updatedAt: now },
    { id: 'TC-008', title: 'Checkout Flow Test', description: 'Verify complete checkout process with payment.', priority: 'High', status: 'Blocked', updatedAt: now },
    { id: 'TC-009', title: 'API Integration Test', description: 'Verify backend API integration and response handling.', priority: 'Medium', status: 'Ready', updatedAt: now },
    { id: 'TC-010', title: 'Performance Smoke Test', description: 'Basic performance check under light load.', priority: 'Low', status: 'Draft', updatedAt: now },
  ];
}

function formatCsvValue(value) {
  if (value == null) return '';
  if (typeof value === 'string' && /[",\n]/.test(value)) {
    return `"${value.replace(/"/g, '""')}"`;
  }
  return value;
}

function exportToCsv() {
  if (!testCases.length) {
    window.alert('No test cases available to export.');
    return;
  }

  const headers = ['Test Case ID', 'Title', 'Description', 'Priority', 'Status'];
  const rows = testCases.map((record) => [record.id, record.title, record.description, record.priority, record.status]);
  const csvBody = [headers, ...rows]
    .map((row) => row.map(formatCsvValue).join(','))
    .join('\n');

  const blob = new Blob([csvBody], { type: 'text/csv;charset=utf-8;' });
  const url = URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = url;
  link.download = `test-cases-${new Date().toISOString().slice(0, 10)}.csv`;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  URL.revokeObjectURL(url);
}

function applyFilters() {
  const query = normalizeInput(searchInput.value).toLowerCase();
  const priorityFilter = filterPriority.value;
  const statusFilter = filterStatus.value;

  return testCases.filter((item) => {
    const matchesText =
      item.id.toLowerCase().includes(query) || item.title.toLowerCase().includes(query);
    const matchesPriority = priorityFilter === 'All' || item.priority === priorityFilter;
    const matchesStatus = statusFilter === 'All' || item.status === statusFilter;
    return matchesText && matchesPriority && matchesStatus;
  });
}

function renderTable() {
  caseTableBody.innerHTML = '';
  const visibleRecords = applyFilters();

  if (!visibleRecords.length) {
    const row = document.createElement('tr');
    const cell = document.createElement('td');
    cell.colSpan = 5;
    cell.textContent = 'No test cases found.';
    cell.style.padding = '24px';
    cell.style.color = 'var(--muted)';
    row.appendChild(cell);
    caseTableBody.appendChild(row);
    return;
  }

  visibleRecords.forEach((item) => {
    const row = document.createElement('tr');

    const idCell = document.createElement('td');
    idCell.textContent = item.id;

    const titleCell = document.createElement('td');
    titleCell.textContent = item.title;

    const priorityCell = document.createElement('td');
    priorityCell.appendChild(buildChip(item.priority, 'priority'));

    const statusCell = document.createElement('td');
    statusCell.appendChild(buildChip(item.status, 'status'));

    const actionsCell = document.createElement('td');
    const actions = document.createElement('div');
    actions.className = 'table-actions';

    const editBtn = document.createElement('button');
    editBtn.type = 'button';
    editBtn.className = 'icon-btn';
    editBtn.title = 'Edit';
    editBtn.innerHTML = '<span aria-hidden="true">✏️</span>';
    editBtn.addEventListener('click', () => startEditCase(item.id));

    const deleteBtn = document.createElement('button');
    deleteBtn.type = 'button';
    deleteBtn.className = 'icon-btn delete-btn';
    deleteBtn.title = 'Delete';
    deleteBtn.innerHTML = '<span aria-hidden="true">🗑️</span>';
    deleteBtn.addEventListener('click', () => removeCase(item.id));

    actions.appendChild(editBtn);
    actions.appendChild(deleteBtn);
    actionsCell.appendChild(actions);

    row.appendChild(idCell);
    row.appendChild(titleCell);
    row.appendChild(priorityCell);
    row.appendChild(statusCell);
    row.appendChild(actionsCell);
    caseTableBody.appendChild(row);
  });
}

function clearForm() {
  editingId = null;
  caseForm.reset();
  saveBtn.textContent = 'Save Test Case';
  caseIdField.disabled = false;
}

function startEditCase(recordId) {
  const record = testCases.find((item) => item.id === recordId);
  if (!record) return;

  editingId = record.id;
  caseIdField.value = record.id;
  titleField.value = record.title;
  descriptionField.value = record.description;
  priorityField.value = record.priority;
  statusField.value = record.status;
  caseIdField.disabled = true;
  saveBtn.textContent = 'Update Test Case';
  window.scrollTo({ top: 0, behavior: 'smooth' });
}

function removeCase(recordId) {
  const confirmDelete = window.confirm('Delete this test case permanently?');
  if (!confirmDelete) return;
  testCases = testCases.filter((item) => item.id !== recordId);
  saveCases();
  renderTable();
  updateDashboard();
}

function handleFormSubmit(event) {
  event.preventDefault();
  const newRecord = {
    id: normalizeInput(caseIdField.value),
    title: normalizeInput(titleField.value),
    description: normalizeInput(descriptionField.value),
    priority: priorityField.value,
    status: statusField.value,
    updatedAt: new Date().toISOString(),
  };

  const validationError = validateCase(newRecord);
  if (validationError) {
    window.alert(validationError);
    return;
  }

  if (editingId) {
    testCases = testCases.map((item) => (item.id === editingId ? { ...item, ...newRecord } : item));
    window.alert('Test case updated successfully.');
  } else {
    testCases.push(newRecord);
    window.alert('Test case added successfully.');
  }

  saveCases();
  renderTable();
  updateDashboard();
  clearForm();
}

function initialize() {
  testCases = getSavedCases();
  if (!testCases || testCases.length === 0) {
    testCases = generateSampleCases();
    saveCases();
  }
  updateDashboard();
  renderTable();
}

caseForm.addEventListener('submit', handleFormSubmit);
clearBtn.addEventListener('click', clearForm);
searchInput.addEventListener('input', renderTable);
filterPriority.addEventListener('change', renderTable);
filterStatus.addEventListener('change', renderTable);
exportCsvBtn.addEventListener('click', exportToCsv);

initialize();