// products.js — 产品迭代模块

function formHtml(fields, button) {
  return `<form class="inline-form flex flex-wrap items-end gap-3" onsubmit="${button.handler}(event)">
    ${fields.map((f) => `<label class="grid gap-1 text-sm"><span class="font-bold text-slate-600">${f.label}</span>${f.input}</label>`).join("")}
    <button class="btn btn-primary" type="submit">${button.text}</button>
  </form>`;
}

async function createResource(event, resource) {
  event.preventDefault();
  const form = event.currentTarget;
  const data = Object.fromEntries(new FormData(form).entries());
  data.tenant = state.tenant;
  try {
    const result = await api(`/api/${resource}`, { method: "POST", body: JSON.stringify({ data }) });
    const targetMap = { sales: "sales", proposals: "proposal", operations: "operation", products: "product" };
    const resType = targetMap[resource] || resource;
    const name = data.project_name || data.target_customer || data.customer_or_project_name || data.product_name || "";
    if (result.id && name) logActivity(resType, result.id, "创建了" + name);
    form.reset();
    await load();
  } catch (error) {
    toast("创建失败：" + error.message, "error");
  }
}

window.createSales = (event) => createResource(event, "sales");
window.createProposal = (event) => createResource(event, "proposals");
window.createOperation = async (event) => {
  await createResource(event, "operations");
  if (typeof closeNewProjectModal === "function") closeNewProjectModal();
};

window.openProductDrawer = () => {
  const drawer = document.querySelector("#productDrawer");
  drawer.innerHTML = `<div class="task-drawer-hd">
    <span class="task-drawer-title">新增产品版本</span>
    <button class="task-close" onclick="closeProductDrawer()"><i data-lucide="x"></i></button>
  </div>
  <form class="task-drawer-form" onsubmit="submitProductDrawer(event)">
    <label class="task-field"><span>版本名称</span><input name="product_name" required class="form-ctrl"></label>
    <div class="grid grid-cols-2 gap-3">
      <label class="task-field"><span>版本号</span><input name="version" required class="form-ctrl"></label>
      <label class="task-field"><span>优先级</span><select name="priority" class="form-ctrl"><option>P0</option><option selected>P1</option><option>P2</option><option>P3</option></select></label>
    </div>
    <label class="task-field"><span>版本目标</span><textarea name="version_goal" rows="3" class="form-ctrl"></textarea></label>
    <div class="grid grid-cols-2 gap-3">
      <label class="task-field"><span>启动时间 <span class="text-red-500">*</span></span><input name="start_date" type="date" required class="form-ctrl"></label>
      <label class="task-field"><span>产品方案</span><input name="plan_date" type="date" class="form-ctrl"></label>
    </div>
    <div class="grid grid-cols-2 gap-3">
      <label class="task-field"><span>研发完成</span><input name="dev_done_date" type="date" class="form-ctrl"></label>
      <label class="task-field"><span>测试</span><input name="test_date" type="date" class="form-ctrl"></label>
    </div>
    <div class="grid grid-cols-2 gap-3">
      <label class="task-field"><span>上线时间</span><input name="launch_date" type="date" class="form-ctrl"></label>
      <label class="task-field"><span>状态</span><select name="status" class="form-ctrl"><option>未开始</option><option>规划中</option><option>开发中</option><option>测试中</option><option>已上线</option><option>已取消</option></select></label>
    </div>
    <label class="task-field"><span>进展备注</span><textarea name="notes" rows="3" class="form-ctrl"></textarea></label>
    <div class="flex justify-end gap-2 mt-4 pt-3 border-t border-slate-100">
      <button type="button" class="btn btn-ghost btn-sm" onclick="closeProductDrawer()">取消</button>
      <button type="submit" class="btn btn-primary btn-sm">确认新增</button>
    </div>
  </form>`;
  drawer.classList.add("open");
  if (window.lucide) window.lucide.createIcons();
};

window.closeProductDrawer = () => {
  document.querySelector("#productDrawer").classList.remove("open");
};

window.cycleProductStatus = async (id) => {
  const products = state.data.products || [];
  const product = products.find(x => x.id === id);
  if (!product) return;
  const statuses = ["未开始", "规划中", "开发中", "测试中", "已上线", "已取消"];
  const current = statuses.indexOf(product.status) >= 0 ? product.status : "规划中";
  const newStatus = statuses[(statuses.indexOf(current) + 1) % statuses.length];
  try {
    await api(`/api/products/${id}`, { method: "PUT", body: JSON.stringify({ data: { status: newStatus } }) });
    product.status = newStatus;
    renderProducts();
  } catch (error) {
    toast("更新失败：" + error.message, "error");
  }
};

window.editProductDate = (event, id) => {
  event.stopPropagation();
  const products = state.data.products || [];
  const product = products.find(x => x.id === id);
  if (!product) return;
  const span = event.currentTarget;
  const td = span.parentElement;
  const currentValue = product.launch_date || "";
  const input = document.createElement("input");
  input.type = "date";
  input.className = "form-ctrl form-ctrl-sm w-full";
  input.value = currentValue;
  input.addEventListener("change", async () => {
    const newValue = input.value;
    try {
      await api(`/api/products/${id}`, { method: "PUT", body: JSON.stringify({ data: { launch_date: newValue } }) });
      product.launch_date = newValue;
      td.innerHTML = `<span class="cursor-pointer hover:text-blue-600" onclick="editProductDate(event, ${id})">${newValue || '—'}</span>`;
    } catch (e) { toast("修改失败：" + e.message, "error"); }
  });
  input.addEventListener("blur", () => {
    td.innerHTML = `<span class="cursor-pointer hover:text-blue-600" onclick="editProductDate(event, ${id})">${currentValue || '—'}</span>`;
  });
  td.innerHTML = "";
  td.appendChild(input);
  input.focus();
};

window.addNewFeature = () => {};
window.removeNewFeature = () => {};
window.addFeature = () => {};
window.removeFeature = () => {};
window.saveFeatureList = () => {};

window.submitProductDrawer = async (event) => {
  event.preventDefault();
  const form = event.currentTarget;
  const data = Object.fromEntries(new FormData(form).entries());
  // 约束：4 个时间不能早于启动时间
  const startDate = data.start_date;
  if (startDate) {
    for (const f of ['plan_date', 'dev_done_date', 'test_date', 'launch_date']) {
      if (data[f] && data[f] < startDate) {
        toast("「" + ({plan_date:'产品方案',dev_done_date:'研发完成',test_date:'测试完成',launch_date:'上线时间'}[f]) + "」不能早于启动时间", "error");
        return;
      }
    }
  }
  data.tenant = state.tenant;
  try {
    const result = await api("/api/products", { method: "POST", body: JSON.stringify({ data }) });
    form.reset();
    closeProductDrawer();
    if (result.id) logActivity("product", result.id, "创建了产品版本「" + data.product_name + " " + data.version + "」");
    await load();
  } catch (error) {
    toast("创建失败：" + error.message, "error");
  }
};

window.addFeature = () => {};
window.removeFeature = () => {};
window.saveFeatureList = () => {};

// 排序状态
let productSort = { field: null, dir: 1 };

window.sortProducts = (field) => {
  if (productSort.field === field) {
    productSort.dir = -productSort.dir;
  } else {
    productSort.field = field;
    productSort.dir = 1;
  }
  renderProducts();
};

function sortItems(items) {
  if (!productSort.field) return items;
  const f = productSort.field;
  const d = productSort.dir;
  const priorityOrder = { P0: 0, P1: 1, P2: 2, P3: 3 };
  return [...items].sort((a, b) => {
    let va = a[f] || '', vb = b[f] || '';
    if (f === 'priority') { va = priorityOrder[va] ?? 9; vb = priorityOrder[vb] ?? 9; }
    if (va < vb) return -1 * d;
    if (va > vb) return 1 * d;
    return 0;
  });
}

function renderProducts() {
  const rawItems = state.data.products || [];
  const items = sortItems(rawItems);
  const priorityColor = { P0: "bg-red-100 text-red-700", P1: "bg-orange-100 text-orange-700", P2: "bg-blue-100 text-blue-700", P3: "bg-slate-100 text-slate-600" };
  const sortIcon = (f) => {
    if (productSort.field !== f) return '<i data-lucide="chevrons-up-down" style="width:12px;height:12px;opacity:0.3"></i>';
    return productSort.dir > 0 ? '<i data-lucide="chevron-up" style="width:12px;height:12px"></i>' : '<i data-lucide="chevron-down" style="width:12px;height:12px"></i>';
  };
  const sortTh = (f, label, extra='') => `<th class="px-3 py-2.5 font-semibold align-middle whitespace-nowrap cursor-pointer hover:text-blue-600 select-none" onclick="sortProducts('${f}')"><span class="inline-flex items-center gap-1">${label}${sortIcon(f)}</span>${extra}</th>`;
  document.querySelector("#products").innerHTML = `
    <div class="grid gap-4">
      <div class="flex justify-end">
        <button class="btn btn-primary btn-sm" onclick="openProductDrawer()"><i data-lucide="plus"></i>新增产品版本</button>
      </div>
      <div class="card overflow-x-auto">
        <table class="w-full text-sm">
          <thead class="bg-slate-50 border-b border-slate-200">
            <tr class="text-left text-xs text-slate-500 uppercase tracking-wider">
              ${sortTh('version','版本号')}
              ${sortTh('priority','优先级')}
              ${sortTh('product_name','版本名称')}
              ${sortTh('status','状态')}
              ${sortTh('start_date','启动时间')}
              ${sortTh('plan_date','产品方案')}
              ${sortTh('dev_done_date','研发完成')}
              ${sortTh('test_date','测试完成')}
              ${sortTh('launch_date','上线时间')}
              <th class="px-3 py-2.5 font-semibold align-middle whitespace-nowrap">总耗时</th>
            </tr>
          </thead>
          <tbody class="divide-y divide-slate-100">
            ${items.length === 0 ? `<tr><td colspan="10" class="px-3 py-8 text-center text-slate-400">暂无产品版本，点击右上角新增</td></tr>` : items.map((p) => {
              const days = (s, e) => { if (!s || !e) return '-'; const d = Math.round((new Date(e) - new Date(s)) / 86400000); return d >= 0 ? d + '天' : '-'; };
              return `
              <tr class="hover:bg-slate-50 cursor-pointer transition-colors" onclick="openDrawer('products', ${p.id})">
                <td class="px-3 py-2.5 whitespace-nowrap text-slate-600 align-middle">${esc(p.version) || '—'}</td>
                <td class="px-3 py-2.5 whitespace-nowrap align-middle"><span class="inline-block px-2 py-0.5 rounded text-xs font-medium ${priorityColor[p.priority] || priorityColor.P2}" onclick="event.stopPropagation();cyclePriority(${p.id})">${esc(p.priority) || 'P2'}</span></td>
                <td class="px-3 py-2.5 font-medium text-slate-800 max-w-[180px] truncate align-middle" title="${esc(p.product_name)}">${esc(p.product_name) || '—'}</td>
                <td class="px-3 py-2.5 whitespace-nowrap align-middle"><span class="status-badge status-${esc(p.status)}" onclick="event.stopPropagation();cycleProductStatus(${p.id})">${esc(p.status) || '规划中'}</span></td>
                <td class="px-3 py-2.5 whitespace-nowrap text-slate-500 text-xs align-middle" onclick="event.stopPropagation()"><input type="date" value="${esc(p.start_date) || ''}" data-id="${p.id}" data-field="start_date" class="prod-date-input" onchange="saveProductDate(this)"></td>
                <td class="px-3 py-2.5 whitespace-nowrap text-slate-500 text-xs align-middle" onclick="event.stopPropagation()"><input type="date" value="${esc(p.plan_date) || ''}" data-id="${p.id}" data-field="plan_date" class="prod-date-input" onchange="saveProductDate(this)"></td>
                <td class="px-3 py-2.5 whitespace-nowrap text-slate-500 text-xs align-middle" onclick="event.stopPropagation()"><input type="date" value="${esc(p.dev_done_date) || ''}" data-id="${p.id}" data-field="dev_done_date" class="prod-date-input" onchange="saveProductDate(this)"></td>
                <td class="px-3 py-2.5 whitespace-nowrap text-slate-500 text-xs align-middle" onclick="event.stopPropagation()"><input type="date" value="${esc(p.test_date) || ''}" data-id="${p.id}" data-field="test_date" class="prod-date-input" onchange="saveProductDate(this)"></td>
                <td class="px-3 py-2.5 whitespace-nowrap text-slate-600 text-xs align-middle" onclick="event.stopPropagation()"><input type="date" value="${esc(p.launch_date) || ''}" data-id="${p.id}" data-field="launch_date" class="prod-date-input" onchange="saveProductDate(this)"></td>
                <td class="px-3 py-2.5 whitespace-nowrap text-slate-500 text-xs align-middle">${days(p.start_date, p.launch_date)}</td>
              </tr>`;
            }).join("")}
          </tbody>
        </table>
      </div>
    </div>
    <aside id="productDrawer" class="task-drawer"></aside>
  `;
  if (window.lucide) window.lucide.createIcons();
}

window.saveProductDate = async (input) => {
  const id = Number(input.dataset.id);
  const field = input.dataset.field;
  const value = input.value;
  // 直接从同一行 DOM 读取启动时间（不依赖 state 缓存）
  const row = input.closest('tr');
  const startDateInput = row && row.querySelector('[data-field="start_date"]');
  const startDate = startDateInput ? startDateInput.value : '';
  const product = (state.data.products || []).find(x => x.id === id);
  if (!product) return;

  // 启动时间必填
  if (field === 'start_date' && !value) {
    toast("启动时间为必填项", "error");
    input.value = product.start_date || '';
    input.focus();
    return;
  }
  // 约束：除启动时间外的 4 个时间不能早于启动时间
  if (field !== 'start_date' && value && startDate && value < startDate) {
    toast("该时间不能早于启动时间（" + startDate + "）", "error");
    input.value = product[field] || '';
    input.focus();
    return;
  }
  // 启动时间变更后，如果其他时间早于新启动时间，清空
  if (field === 'start_date' && value) {
    const fields = ['plan_date', 'dev_done_date', 'test_date', 'launch_date'];
    const toClear = {};
    for (const f of fields) {
      if (product[f] && product[f] < value) {
        toClear[f] = '';
      }
    }
    if (Object.keys(toClear).length > 0) {
      try {
        await api(`/api/products/${id}`, { method: "PUT", body: JSON.stringify({ data: { ...toClear, start_date: value } }) });
        Object.assign(product, toClear, { start_date: value });
        toast("启动时间已更新，" + Object.keys(toClear).length + " 个早于启动时间的日期已清空", "info");
        renderProducts();
        return;
      } catch (e) {
        toast("修改失败：" + e.message, "error");
        return;
      }
    }
  }
  try {
    await api(`/api/products/${id}`, { method: "PUT", body: JSON.stringify({ data: { [field]: value } }) });
    product[field] = value;
    if (field === 'start_date' || field === 'launch_date') {
      renderProducts();
    }
  } catch (e) {
    toast("修改失败：" + e.message, "error");
  }
};

window.editProductDateInline = (event, id, field) => {
  event.stopPropagation();
  const products = state.data.products || [];
  const product = products.find(x => x.id === id);
  if (!product) return;
  const td = event.currentTarget;
  const currentValue = product[field] || "";
  const input = document.createElement("input");
  input.type = "date";
  input.className = "form-ctrl form-ctrl-sm w-full text-xs";
  input.value = currentValue;
  let saved = false;
  const save = async () => {
    if (saved) return;
    saved = true;
    const newValue = input.value;
    try {
      await api(`/api/products/${id}`, { method: "PUT", body: JSON.stringify({ data: { [field]: newValue } }) });
      product[field] = newValue;
      td.innerHTML = newValue || '—';
    } catch (e) {
      toast("修改失败：" + e.message, "error");
      td.innerHTML = currentValue || '—';
    }
  };
  input.addEventListener("change", save);
  input.addEventListener("blur", () => {
    if (!saved) td.innerHTML = currentValue || '—';
  });
  td.innerHTML = "";
  td.appendChild(input);
  input.focus();
  if (input.showPicker) {
    try { input.showPicker(); } catch (e) {}
  }
};

window.cyclePriority = async (id) => {
  const products = state.data.products || [];
  const product = products.find(x => x.id === id);
  if (!product) return;
  const levels = ["P0", "P1", "P2", "P3"];
  const cur = levels.indexOf(product.priority) >= 0 ? product.priority : "P2";
  const next = levels[(levels.indexOf(cur) + 1) % levels.length];
  try {
    await api(`/api/products/${id}`, { method: "PUT", body: JSON.stringify({ data: { priority: next } }) });
    product.priority = next;
    renderProducts();
  } catch (e) { toast("更新失败：" + e.message, "error"); }
};