// Core state
query = signal<string>('');
results = signal<DomainResult[]>([]);
status = signal<'IDLE' | 'SEARCHING' | 'SUCCESS' | 'ERROR'>('IDLE');
errorMessage = signal<string | null>(null);
lastCheckedAt = signal<number | null>(null);

// Derived state
hasResults = computed(() => results().length > 0);
isSearching = computed(() => status() === 'SEARCHING');
canSearch = computed(() => query().length > 2 && !isSearching());
isStale = computed(() => {
  const checked = lastCheckedAt();
  if (!checked) return false;
  return Date.now() - checked > 30000; // 30 seconds
});

// Domain result type
interface DomainResult {
  domain: string;
  available: boolean;
  premium: boolean;
  price: number | null;
  currency: string;
  tld: string;
}

private searchControl = new FormControl('');
private destroyRef = inject(DestroyRef);

ngOnInit() {
  this.searchControl.valueChanges.pipe(
    takeUntilDestroyed(this.destroyRef),
    tap(q => this.query.set(q ?? '')),
    debounceTime(300),
    distinctUntilChanged(),
    filter(q => (q?.trim().length ?? 0) >= 3),
    tap(() => {
      this.status.set('SEARCHING');
      this.errorMessage.set(null);
    }),
    switchMap(q => this.domainService.search(q!).pipe(
      catchError(err => {
        this.status.set('ERROR');
        this.errorMessage.set(err.message ?? 'Search failed');
        return of([]);
      })
    ))
  ).subscribe(results => {
    this.results.set(results);
    this.lastCheckedAt.set(Date.now());
    if (this.status() !== 'ERROR') {
      this.status.set('SUCCESS');
    }
  });
}

<div class="relative">
  <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
    <lucide-icon name="search" class="w-5 h-5 text-gray-400" />
  </div>

  <input
    [formControl]="searchControl"
    type="text"
    placeholder="Search for a domain..."
    class="w-full pl-12 pr-12 py-4 text-lg border border-gray-300 rounded-xl
           focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
    autocomplete="off"
    spellcheck="false"
  />

  @if (isSearching()) {
    <div class="absolute inset-y-0 right-0 pr-4 flex items-center">
      <lucide-icon name="loader-2" class="w-5 h-5 text-blue-500 animate-spin" />
    </div>
  } @else if (query().length > 0) {
    <button
      (click)="onClear()"
      class="absolute inset-y-0 right-0 pr-4 flex items-center text-gray-400 hover:text-gray-600"
    >
      <lucide-icon name="x" class="w-5 h-5" />
    </button>
  }
</div>

<section class="mt-6">
  @if (isSearching() && !hasResults()) {
    <!-- Skeleton loaders during initial search -->
    <div class="space-y-2">
      @for (i of [1, 2, 3, 4]; track i) {
        <div class="h-16 bg-gray-100 rounded-lg animate-pulse"></div>
      }
    </div>
  }

  @if (hasResults()) {
    <div class="space-y-2">
      <!-- Freshness indicator -->
      @if (lastCheckedAt()) {
        <p class="text-xs text-gray-400 mb-3 flex items-center gap-1">
          @if (isStale()) {
            <lucide-icon name="alert-triangle" class="w-3 h-3 text-amber-500" />
            <span class="text-amber-600">Results may be stale</span>
          } @else {
            <lucide-icon name="clock" class="w-3 h-3" />
            <span>Checked {{ lastCheckedAt() | date:'HH:mm:ss' }}</span>
          }
        </p>
      }

      @for (result of results(); track result.domain) {
        <app-domain-result
          [result]="result"
          [stale]="isStale()"
          (select)="onSelect($event)"
        />
      }
    </div>
  }

  @if (status() === 'SUCCESS' && !hasResults()) {
    <div class="py-12 text-center">
      <lucide-icon name="search-x" class="w-12 h-12 text-gray-300 mx-auto mb-4" />
      <p class="text-gray-500">No domains found</p>
      <p class="text-sm text-gray-400 mt-1">Try a different name</p>
    </div>
  }
</section>

<div
  class="flex items-center justify-between p-4 border rounded-lg transition-all"
  [class.border-green-300]="result.available && !stale"
  [class.bg-green-50]="result.available && !stale"
  [class.border-gray-200]="!result.available || stale"
  [class.bg-gray-50]="!result.available"
  [class.opacity-60]="stale"
>
  <div class="flex items-center gap-3">
    <!-- Availability state indicator -->
    @if (result.available) {
      <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center">
        <lucide-icon name="check" class="w-4 h-4 text-green-600" />
      </div>
    } @else {
      <div class="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center">
        <lucide-icon name="x" class="w-4 h-4 text-gray-500" />
      </div>
    }

    <div>
      <span class="font-medium text-gray-900">{{ result.domain }}</span>
      @if (result.premium) {
        <span class="ml-2 px-2 py-0.5 text-xs font-medium bg-amber-100 text-amber-800 rounded">
          Premium
        </span>
      }
    </div>
  </div>

  <div class="flex items-center gap-4">
    @if (result.available) {
      @if (result.price) {
        <span class="font-semibold text-gray-900">
          {{ result.price | currency:result.currency }}
        </span>
      }
      <button
        (click)="onSelect()"
        [disabled]="stale"
        class="px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg
               hover:bg-blue-700 disabled:bg-gray-300 disabled:cursor-not-allowed"
      >
        @if (stale) {
          Refresh First
        } @else {
          Select
        }
      </button>
    } @else {
      <span class="text-sm text-gray-500">Taken</span>
    }
  </div>
</div>

@if (status() === 'ERROR') {
  <div class="mt-6 p-4 bg-red-50 border border-red-200 rounded-lg">
    <div class="flex items-start gap-3">
      <lucide-icon name="alert-circle" class="w-5 h-5 text-red-600 mt-0.5" />
      <div class="flex-1">
        <h4 class="font-medium text-red-800">Search Failed</h4>
        <p class="text-sm text-red-700 mt-1">{{ errorMessage() }}</p>
        <button
          (click)="onRetry()"
          class="mt-3 text-sm font-medium text-red-600 hover:text-red-700"
        >
          Try Again
        </button>
      </div>
    </div>
  </div>
}

@Injectable({ providedIn: 'root' })
export class DomainSearchService {
  private http = inject(HttpClient);

  search(query: string): Observable<DomainResult[]> {
    const normalized = this.normalize(query);
    return this.http.post<DomainResult[]>('/api/domains/check', {
      query: normalized,
      tlds: ['com', 'io', 'co', 'net', 'org', 'dev']
    }).pipe(
      map(results => this.sortByAvailability(results))
    );
  }

  private normalize(query: string): string {
    return query
      .toLowerCase()
      .trim()
      .replace(/^(https?:\/\/)?(www\.)?/, '')
      .replace(/[^a-z0-9-]/g, '')
      .slice(0, 63);
  }

  private sortByAvailability(results: DomainResult[]): DomainResult[] {
    return results.sort((a, b) => {
      if (a.available !== b.available) return a.available ? -1 : 1;
      return 0;
    });
  }
}

DOMAIN SEARCH CRITIQUE

1. Stream Control
   - Debounce configured?
   - Cancellation via switchMap?
   - Minimum query length?

2. State Clarity
   - IDLE/SEARCHING/SUCCESS/ERROR handled?
   - Availability is a state, not just color?

3. Freshness
   - lastCheckedAt tracked?
   - Stale results marked?

4. Error Handling
   - Errors visible and actionable?
   - Retry available?

5. Recommendations

DOMAIN SEARCH SCAFFOLD

1. State Model
   - query, results, status, lastCheckedAt

2. Components
   - DomainSearchComponent
   - DomainResultComponent

3. Service
   - DomainSearchService

4. Stream Setup
   - valueChanges pipe

5. Usage

DOMAIN SEARCH SIMPLIFICATION

1. Summary
2. Stream Preserved
3. Simplified Code
4. Trade-offs

Domain Finder Skill active.

PURPOSE:
Build controlled, clarity-first domain search.
Fast feedback without reckless network usage.

MODES AVAILABLE:

1. Default Mode
   Design domain search with controlled streams.

2. Critique Mode
   Review for stream control and clarity.
   Triggers: "review this search", "is this search controlled"

3. Scaffold Mode
   Generate domain search structure.
   Triggers: "scaffold domain search"

4. Auto-Simplify Mode
   Simplify while preserving control.
   Triggers: "simplify this search"

CORE QUESTIONS:
- Is this domain available?
- Is the result current?
- What action can the user take?

STATE MODEL:
IDLE → SEARCHING → SUCCESS/ERROR
+ lastCheckedAt for freshness

What domain search would you like to build?