// color-diy.ts
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-color-diy',
  standalone: true,
  imports: [CommonModule],
  template: `
    <div class="preview-3d">
      <div class="model-3d">👕</div>
    </div>

    <div class="tool-grid">
      <div class="tool-card" (click)="openColorPicker()">
        <span class="tool-icon">🎨</span>
        <div class="tool-title">颜色设计</div>
      </div>
      <div class="tool-card" (click)="openPatternEditor()">
        <span class="tool-icon">✨</span>
        <div class="tool-title">图案编辑</div>
      </div>
      <div class="tool-card" (click)="openEmbroidery()">
        <span class="tool-icon">🧵</span>
        <div class="tool-title">刺绣定制</div>
      </div>
      <div class="tool-card" (click)="openAccessories()">
        <span class="tool-icon">💍</span>
        <div class="tool-title">配饰搭配</div>
      </div>
    </div>

    <div class="color-picker">
      <h4>选择颜色</h4>
      <div class="color-palette">
        <div *ngFor="let color of colors" 
             class="color-swatch" 
             [style.background]="color" 
             [class.active]="selectedColor === color"
             (click)="selectColor(color)">
        </div>
      </div>
    </div>
  `,
  styles: [`
    .preview-3d {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border-radius: 15px;
      height: 300px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 18px;
      margin-bottom: 20px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.2);
      position: relative;
      overflow: hidden;
    }

    .preview-3d::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="dots" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23dots)"/></svg>');
    }

    .model-3d {
      font-size: 80px;
      z-index: 2;
      position: relative;
      animation: rotate3d 10s infinite linear;
    }

    @keyframes rotate3d {
      0% { transform: rotateY(0deg); }
      100% { transform: rotateY(360deg); }
    }

    .tool-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 15px;
      margin-bottom: 20px;
    }

    .tool-card {
      background: white;
      border-radius: 15px;
      padding: 20px;
      text-align: center;
      box-shadow: 0 5px 20px rgba(0,0,0,0.1);
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .tool-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 15px 40px rgba(0,0,0,0.2);
    }

    .tool-icon {
      font-size: 40px;
      margin-bottom: 10px;
      display: block;
    }

    .tool-title {
      font-size: 16px;
      font-weight: 600;
      color: #333;
    }

    .color-picker {
      background: white;
      border-radius: 15px;
      padding: 20px;
      margin-bottom: 20px;
      box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    }

    .color-palette {
      display: grid;
      grid-template-columns: repeat(8, 1fr);
      gap: 10px;
      margin-top: 15px;
    }

    .color-swatch {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      cursor: pointer;
      transition: all 0.3s ease;
      border: 2px solid transparent;
    }

    .color-swatch:hover,
    .color-swatch.active {
      transform: scale(1.2);
      border-color: #333;
    }
  `]
})
export class ColorDiy {
  colors = [
    '#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4',
    '#ffeaa7', '#dda0dd', '#98d8c8', '#f7dc6f',
    '#bb8a89', '#a29bfe', '#fd79a8', '#fdcb6e',
    '#e17055', '#81ecec', '#fab1a0', '#00b894'
  ];
  selectedColor = '#ff6b6b';

  selectColor(color: string) {
    this.selectedColor = color;
  }

  openColorPicker() {
    console.log('Opening color picker');
  }

  openPatternEditor() {
    console.log('Opening pattern editor');
  }

  openEmbroidery() {
    console.log('Opening embroidery editor');
  }

  openAccessories() {
    console.log('Opening accessories');
  }
}