import '@material/web/button/filled-button.js'
import '@material/web/button/text-button.js'
import '@material/web/textfield/filled-text-field.js'
import { css, html } from 'lit'
import { customElement, state } from 'lit/decorators.js'
import { client, PageView, navigate } from '@things-factory/shell/client'
import gql from 'graphql-tag'

@customElement('label-studio-project-create')
export class LabelStudioProjectCreate extends PageView {
  static styles = [
    css`
      :host {
        display: flex;
        flex-direction: column;
        padding: 20px;
        max-width: 800px;
        margin: 0 auto;
      }

      h2 {
        margin: 0 0 20px 0;
        color: var(--md-sys-color-on-surface);
      }

      .form-field {
        margin-bottom: 20px;
      }

      .form-field label {
        display: block;
        margin-bottom: 8px;
        color: var(--md-sys-color-on-surface);
        font-weight: 500;
      }

      md-filled-text-field {
        width: 100%;
      }

      textarea {
        width: 100%;
        min-height: 200px;
        padding: 12px;
        border: 1px solid var(--md-sys-color-outline);
        border-radius: 4px;
        font-family: monospace;
        font-size: 14px;
        resize: vertical;
      }

      .actions {
        display: flex;
        gap: 10px;
        justify-content: flex-end;
        margin-top: 20px;
      }

      .template-examples {
        margin-top: 20px;
        padding: 15px;
        background: var(--md-sys-color-surface-variant);
        border-radius: 8px;
      }

      .template-examples h4 {
        margin: 0 0 10px 0;
      }

      .template-btn {
        margin: 5px;
      }

      .error {
        color: var(--md-sys-color-error);
        margin: 10px 0;
      }
    `
  ]

  @state() title: string = ''
  @state() description: string = ''
  @state() labelConfig: string = ''
  @state() saving: boolean = false
  @state() error: string = ''

  render() {
    return html`
      <h2>Create Label Studio Project</h2>

      <div class="form-field">
        <label>Project Title *</label>
        <md-filled-text-field
          .value=${this.title}
          @input=${(e: any) => (this.title = e.target.value)}
          placeholder="Enter project title"
        ></md-filled-text-field>
      </div>

      <div class="form-field">
        <label>Description</label>
        <md-filled-text-field
          .value=${this.description}
          @input=${(e: any) => (this.description = e.target.value)}
          placeholder="Enter project description"
        ></md-filled-text-field>
      </div>

      <div class="form-field">
        <label>Label Configuration (XML) *</label>
        <textarea
          .value=${this.labelConfig}
          @input=${(e: any) => (this.labelConfig = (e.target as HTMLTextAreaElement).value)}
          placeholder='<View>&#10;  <Text name="text" value="$text"/>&#10;  <Choices name="label" toName="text">&#10;    <Choice value="Positive"/>&#10;    <Choice value="Negative"/>&#10;  </Choices>&#10;</View>'
        ></textarea>
      </div>

      <div class="template-examples">
        <h4>Quick Templates</h4>
        <md-filled-button class="template-btn" @click=${() => this.useTemplate('text-classification')}>
          Text Classification
        </md-filled-button>
        <md-filled-button class="template-btn" @click=${() => this.useTemplate('image-classification')}>
          Image Classification
        </md-filled-button>
        <md-filled-button class="template-btn" @click=${() => this.useTemplate('ner')}>
          Named Entity Recognition
        </md-filled-button>
      </div>

      ${this.error ? html`<div class="error">${this.error}</div>` : ''}

      <div class="actions">
        <md-text-button @click=${this.cancel}>Cancel</md-text-button>
        <md-filled-button @click=${this.save} ?disabled=${this.saving}>
          ${this.saving ? 'Creating...' : 'Create Project'}
        </md-filled-button>
      </div>
    `
  }

  useTemplate(type: string) {
    const templates = {
      'text-classification': `<View>
  <Text name="text" value="$text"/>
  <Choices name="sentiment" toName="text" choice="single">
    <Choice value="Positive"/>
    <Choice value="Negative"/>
    <Choice value="Neutral"/>
  </Choices>
</View>`,
      'image-classification': `<View>
  <Image name="image" value="$image"/>
  <Choices name="choice" toName="image" choice="single">
    <Choice value="Cat"/>
    <Choice value="Dog"/>
    <Choice value="Bird"/>
  </Choices>
</View>`,
      ner: `<View>
  <Text name="text" value="$text"/>
  <Labels name="label" toName="text">
    <Label value="Person" background="red"/>
    <Label value="Organization" background="darkorange"/>
    <Label value="Location" background="blue"/>
  </Labels>
</View>`
    }

    this.labelConfig = templates[type] || ''
  }

  async save() {
    if (!this.title || !this.labelConfig) {
      this.error = 'Title and Label Configuration are required'
      return
    }

    try {
      this.saving = true
      this.error = ''

      const response = await client.mutate({
        mutation: gql`
          mutation CreateProject($input: CreateProjectInput!) {
            createLabelStudioProject(input: $input) {
              id
              title
            }
          }
        `,
        variables: {
          input: {
            title: this.title,
            description: this.description || undefined,
            labelConfig: this.labelConfig
          }
        }
      })

      const project = response.data.createLabelStudioProject

      // Navigate to project list
      navigate('label-studio-project-list')
    } catch (error: any) {
      console.error('Failed to create project:', error)
      this.error = error.message || 'Failed to create project'
    } finally {
      this.saving = false
    }
  }

  cancel() {
    navigate('label-studio-project-list')
  }
}