import { LitElement, html, css } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import { formStyles } from '../../styles/form-styles';

import '@shoelace-style/shoelace/dist/components/input/input.js';
import '@shoelace-style/shoelace/dist/components/select/select.js';
import '@shoelace-style/shoelace/dist/components/option/option.js';
import '@shoelace-style/shoelace/dist/components/checkbox/checkbox.js';
import '@shoelace-style/shoelace/dist/components/textarea/textarea.js';
import '@shoelace-style/shoelace/dist/components/button/button.js';
import '@shoelace-style/shoelace/dist/components/alert/alert.js';
import '../../components/logo-component';

@customElement('request-demo-view')
export class RequestDemoView extends LitElement {
  @state() private _name = '';
  @state() private _email = '';
  @state() private _role = '';
  @state() private _organization = '';
  @state() private _headcount = '';
  @state() private _trackers: string[] = [];
  @state() private _comments = '';
  @state() private _submitting = false;
  @state() private _error: string | null = null;
  @state() private _success = false;

  static styles = [
    formStyles,
    css`
      h1 {
        text-align: center;
        margin-bottom: 2rem;
      }
      sl-input,
      sl-select {
        margin: 1rem 0;
      }
      .tracker-group {
        margin-bottom: 1.5rem;
        display: flex;
        flex-direction: column;
        gap: var(--sl-spacing-small);
      }
      sl-checkbox {
        display: block;
      }
      sl-button {
        width: 100%;
        margin-top: 2rem;
      }
    `,
  ];

  private _handleTrackerChange(event: CustomEvent) {
    const checkbox = event.target as HTMLInputElement;
    if (checkbox.checked) {
      this._trackers = [...this._trackers, checkbox.value];
    } else {
      this._trackers = this._trackers.filter((t) => t !== checkbox.value);
    }
  }

  private async _handleSubmit(event: Event) {
    event.preventDefault();
    this._submitting = true;
    this._error = null;
    this._success = false;

    // In a real app, you would send this data to your backend.
    console.log('Submitting demo request:', {
      name: this._name,
      email: this._email,
      role: this._role,
      organization: this._organization,
      headcount: this._headcount,
      trackers: this._trackers,
      comments: this._comments,
    });

    const response = await fetch('https://spacecode.ai/api/v1/leads', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        name: this._name,
        email: this._email,
        role: this._role,
        org: this._organization,
        headcount: this._headcount,
        trackers: this._trackers,
        comments: this._comments,
        source: 'request-demo preloop',
      }),
    });

    if (!response.ok) {
      throw new Error('Network response was not ok');
    }

    this._submitting = false;
    this._success = true;
  }

  render() {
    if (this._success) {
      return html`
        <div class="container">
          <sl-alert variant="success" open>
            <sl-icon slot="icon" name="check2-circle"></sl-icon>
            <strong>Thank you!</strong><br />
            Your demo request has been received. We'll be in touch shortly.
          </sl-alert>
        </div>
      `;
    }

    return html`
      <div class="container">
        <div class="logo">
          <a href="/">
            <logo-component></logo-component>
          </a>
        </div>
        <div class="form-container">
          <h2>Request a Demo</h2>
          <form @submit=${this._handleSubmit}>
            <sl-input
              label="Full Name"
              required
              .value=${this._name}
              @sl-input=${(e: any) => (this._name = e.target.value)}
            ></sl-input>

            <sl-input
              label="Work Email"
              type="email"
              required
              .value=${this._email}
              @sl-input=${(e: any) => (this._email = e.target.value)}
            ></sl-input>

            <sl-input
              label="Role"
              required
              .value=${this._role}
              @sl-input=${(e: any) => (this._role = e.target.value)}
            ></sl-input>

            <sl-input
              label="Organization"
              required
              .value=${this._organization}
              @sl-input=${(e: any) => (this._organization = e.target.value)}
            ></sl-input>

            <sl-select
              label="Headcount"
              required
              .value=${this._headcount}
              @sl-change=${(e: any) => (this._headcount = e.target.value)}
            >
              <sl-option value="1-50">1-50</sl-option>
              <sl-option value="51-200">51-200</sl-option>
              <sl-option value="201-1000">201-1,000</sl-option>
              <sl-option value="1001-5000">1,001-5,000</sl-option>
              <sl-option value="5000+">5,000+</sl-option>
            </sl-select>

            <div class="tracker-group">
              <label>Trackers Used</label>
              <sl-checkbox
                value="GitHub"
                @sl-change=${this._handleTrackerChange}
                >GitHub</sl-checkbox
              >
              <sl-checkbox
                value="GitLab"
                @sl-change=${this._handleTrackerChange}
                >GitLab</sl-checkbox
              >
              <sl-checkbox value="Jira" @sl-change=${this._handleTrackerChange}
                >Jira</sl-checkbox
              >
              <sl-checkbox
                value="Linear"
                @sl-change=${this._handleTrackerChange}
                >Linear</sl-checkbox
              >
            </div>

            <sl-textarea
              label="Additional Comments"
              resize="auto"
              .value=${this._comments}
              @sl-input=${(e: any) => (this._comments = e.target.value)}
            ></sl-textarea>

            ${this._error
              ? html`<sl-alert variant="danger" open>${this._error}</sl-alert>`
              : ''}

            <sl-button
              type="submit"
              variant="primary"
              ?loading=${this._submitting}
            >
              Request Demo
            </sl-button>
          </form>
        </div>
      </div>
    `;
  }
}
