describe("Product Options Management", () => {
  beforeEach(() => {
    cy.login();
    cy.visit("/product-options");
    cy.waitForLoading();
  });

  it("should display product options list page", () => {
    cy.contains("مدیریت گزینه‌های محصول").should("be.visible");
    cy.contains("تنظیمات گزینه‌های قابل انتخاب برای محصولات").should(
      "be.visible"
    );
    cy.get('[title="گزینه محصول جدید"]').should("be.visible");
  });

  it("should create a new product option", () => {
    cy.get('[title="گزینه محصول جدید"]').click();

    cy.url().should("include", "/product-options/create");
    cy.contains("گزینه محصول جدید").should("be.visible");

    // Fill product option form
    cy.get('input[name="name"]').type("رنگ");
    cy.get('textarea[name="description"]').type("انتخاب رنگ محصول");
    cy.get('select[name="type"]').select("color");

    // Add option values
    cy.get("button").contains("افزودن گزینه").click();
    cy.get('input[name="values[0].name"]').type("قرمز");
    cy.get('input[name="values[0].value"]').type("#ff0000");

    cy.get("button").contains("افزودن گزینه").click();
    cy.get('input[name="values[1].name"]').type("آبی");
    cy.get('input[name="values[1].value"]').type("#0000ff");

    cy.get('button[type="submit"]').click();

    cy.url().should("include", "/product-options");
    cy.contains("گزینه محصول با موفقیت ایجاد شد").should("be.visible");
    cy.contains("رنگ").should("be.visible");
  });

  it("should edit a product option", () => {
    cy.get('[title="ویرایش"]').first().click();

    cy.url().should("include", "/product-options/");
    cy.url().should("include", "/edit");

    // Update option
    cy.get('input[name="name"]').clear().type("سایز");
    cy.get('textarea[name="description"]').clear().type("انتخاب سایز محصول");

    // Update values
    cy.get('input[name="values[0].name"]').clear().type("کوچک");
    cy.get('input[name="values[0].value"]').clear().type("S");

    cy.get('button[type="submit"]').click();

    cy.url().should("include", "/product-options");
    cy.contains("گزینه محصول با موفقیت ویرایش شد").should("be.visible");
    cy.contains("سایز").should("be.visible");
  });

  it("should delete a product option", () => {
    cy.get('[title="حذف"]').first().click();

    cy.get(".modal").should("be.visible");
    cy.get("button").contains("حذف").click();

    cy.contains("گزینه محصول با موفقیت حذف شد").should("be.visible");
  });

  it("should search product options", () => {
    cy.get('input[placeholder*="جستجو"]').type("رنگ");
    cy.get("button").contains("جستجو").click();

    cy.waitForLoading();
    cy.get("table tbody tr").should("contain", "رنگ");
  });

  it("should filter by option type", () => {
    cy.get('select[name="type"]').select("color");
    cy.get("button").contains("اعمال فیلتر").click();

    cy.waitForLoading();
    cy.get("table tbody tr").should("contain", "color");
  });

  it("should validate product option form", () => {
    cy.get('[title="گزینه محصول جدید"]').click();

    // Try to submit empty form
    cy.get('button[type="submit"]').click();

    cy.contains("نام گزینه الزامی است").should("be.visible");
    cy.contains("نوع گزینه الزامی است").should("be.visible");
  });

  it("should validate option values", () => {
    cy.get('[title="گزینه محصول جدید"]').click();

    cy.get('input[name="name"]').type("رنگ");
    cy.get('select[name="type"]').select("color");

    // Add empty value
    cy.get("button").contains("افزودن گزینه").click();
    cy.get('button[type="submit"]').click();

    cy.contains("نام گزینه الزامی است").should("be.visible");
  });

  it("should remove option value", () => {
    cy.get('[title="گزینه محصول جدید"]').click();

    cy.get('input[name="name"]').type("سایز");
    cy.get('select[name="type"]').select("text");

    // Add two values
    cy.get("button").contains("افزودن گزینه").click();
    cy.get('input[name="values[0].name"]').type("کوچک");

    cy.get("button").contains("افزودن گزینه").click();
    cy.get('input[name="values[1].name"]').type("بزرگ");

    // Remove first value
    cy.get('[data-testid="remove-value-0"]').click();

    // Should have only one value now
    cy.get('input[name="values[0].name"]').should("have.value", "بزرگ");
  });

  it("should show option usage in products", () => {
    cy.get('[title="نمایش استفاده"]').first().click();

    cy.get(".modal").should("be.visible");
    cy.contains("محصولات استفاده کننده").should("be.visible");
  });

  it("should handle different option types", () => {
    cy.get('[title="گزینه محصول جدید"]').click();

    // Test color type
    cy.get('select[name="type"]').select("color");
    cy.get(".color-picker").should("be.visible");

    // Test text type
    cy.get('select[name="type"]').select("text");
    cy.get('input[type="text"]').should("be.visible");

    // Test number type
    cy.get('select[name="type"]').select("number");
    cy.get('input[type="number"]').should("be.visible");
  });

  it("should duplicate product option", () => {
    cy.get('[title="کپی"]').first().click();

    cy.url().should("include", "/product-options/create");
    cy.get('input[name="name"]').should("contain.value", "(کپی)");
  });

  it("should export product options", () => {
    cy.get("button").contains("خروجی").click();

    // Should download file
    cy.readFile("cypress/downloads/product-options.xlsx").should("exist");
  });
});