import { readFileSync } from 'fs';
import { join } from 'path';

describe('UI Features Tests', () => {
  it('should have color hex input in admin form', () => {
    const adminDashboardPath = join(process.cwd(), 'app', 'upadaj', 'dashboard', 'page.tsx');
    const adminContent = readFileSync(adminDashboardPath, 'utf-8');
    
    // Check for color input
    expect(adminContent).toContain('type="color"');
    expect(adminContent).toContain('bojaHex');
    expect(adminContent).toContain('Hex kod boje');
  });

  it('should display color hex in frontend table', () => {
    const filamentTablePath = join(process.cwd(), 'src', 'components', 'FilamentTableV2.tsx');
    const tableContent = readFileSync(filamentTablePath, 'utf-8');
    
    // Check for color display
    expect(tableContent).toContain('ColorSwatch');
    expect(tableContent).toContain('color.hex');
  });

  it('should have checkboxes for boolean fields', () => {
    const adminDashboardPath = join(process.cwd(), 'app', 'upadaj', 'dashboard', 'page.tsx');
    const adminContent = readFileSync(adminDashboardPath, 'utf-8');
    
    // Check for checkbox inputs
    expect(adminContent).toMatch(/type="checkbox"[\s\S]*?name="refill"/);
    expect(adminContent).toMatch(/type="checkbox"[\s\S]*?name="vakum"/);
    expect(adminContent).toMatch(/type="checkbox"[\s\S]*?name="otvoreno"/);
  });

  it('should have number input for quantity', () => {
    const adminDashboardPath = join(process.cwd(), 'app', 'upadaj', 'dashboard', 'page.tsx');
    const adminContent = readFileSync(adminDashboardPath, 'utf-8');
    
    // Check for number input
    expect(adminContent).toMatch(/type="number"[\s\S]*?name="kolicina"/);
    expect(adminContent).toContain('min="0"');
    expect(adminContent).toContain('step="1"');
  });

  it('should have predefined material options', () => {
    const adminDashboardPath = join(process.cwd(), 'app', 'upadaj', 'dashboard', 'page.tsx');
    const adminContent = readFileSync(adminDashboardPath, 'utf-8');
    
    // Check for material select dropdown
    expect(adminContent).toContain('<option value="PLA">PLA</option>');
    expect(adminContent).toContain('<option value="PETG">PETG</option>');
    expect(adminContent).toContain('<option value="ABS">ABS</option>');
  });

  it('should have admin header with navigation', () => {
    const adminDashboardPath = join(process.cwd(), 'app', 'upadaj', 'dashboard', 'page.tsx');
    
    const dashboardContent = readFileSync(adminDashboardPath, 'utf-8');
    
    // Check for admin header
    expect(dashboardContent).toContain('Admin Dashboard');
    expect(dashboardContent).toContain('Nazad na sajt');
    expect(dashboardContent).toContain('Odjava');
  });

  it('should have Safari-specific select styling', () => {
    const selectCssPath = join(process.cwd(), 'src', 'styles', 'select.css');
    const selectContent = readFileSync(selectCssPath, 'utf-8');
    
    // Check for Safari fixes
    expect(selectContent).toContain('-webkit-appearance: none !important');
    expect(selectContent).toContain('@supports (-webkit-appearance: none)');
    expect(selectContent).toContain('-webkit-min-device-pixel-ratio');
  });
});