'use client';

import type { ComponentType, ReactNode } from 'react';

import type { UseChatComposerReturn } from '../hooks/useChatComposer';

/** Composer visual size — shared across the `<Composer>` API. */
export type ComposerSize = 'sm' | 'md' | 'lg';

/**
 * Spaciousness of the input surface — orthogonal to `size`:
 * - `compact` — default; embedded composer (FAB panel, dock).
 * - `full`    — full-page chat; roomier surface, bigger textarea + padding.
 */
export type ComposerAppearance = 'compact' | 'full';

/**
 * Geometry of the input surface:
 * - `stacked` — textarea on top, action bar pinned below, one bordered surface.
 * - `inline`  — single horizontal row (compact; `size="sm"` defaults to this).
 */
export type ComposerLayout = 'stacked' | 'inline';

/** Conditional visibility of an action, evaluated against composer state. */
export type ComposerActionVisibility =
  | 'streaming'
  | 'empty'
  | 'hasText'
  | 'disabled';

/**
 * Declarative descriptor for one action-bar button (Tier A). The Composer
 * renders these into consistent `<ComposerButton>`s — size, aria and tooltip
 * are handled centrally so hosts cannot misalign anything.
 */
export interface ComposerAction {
  /** Stable key. */
  id: string;
  /** Lucide icon element. */
  icon: ReactNode;
  /** Used as `aria-label` and tooltip — required for a11y. */
  label: string;
  onClick: () => void;
  disabled?: boolean;
  /** Toggle state → emits `aria-pressed`. */
  pressed?: boolean;
  /** `send` — theme-inverting filled circle (ChatGPT send button). */
  variant?: 'ghost' | 'secondary' | 'primary' | 'send';
  /** Hide the action when the composer is in this state. */
  hideWhen?: ComposerActionVisibility;
  /** Sort weight within its cluster (ascending). Built-ins reserve high values. */
  order?: number;
}

/**
 * Tier A — declarative slot arrays + raw-node escape hatches. Hosts supply
 * action descriptors; the Composer owns the rendering.
 */
export interface ComposerSlots {
  /** Bottom-left cluster. Built-in attach prepends here when enabled. */
  actionsStart?: ComposerAction[];
  /** Bottom-right cluster. Built-in mic/send append here. */
  actionsEnd?: ComposerAction[];
  /** Full-width row above the textarea (reply banner, custom tray). */
  blockStart?: ReactNode;
  /** Raw nodes placed left of the textarea in the `inline` layout. */
  inlineStart?: ReactNode;
  /** Raw nodes placed right of the textarea in the `inline` layout. */
  inlineEnd?: ReactNode;
}

// ── Tier B — full slot replacement ─────────────────────────────────────────

export interface SendButtonProps {
  /** True while a reply is streaming — render the stop affordance. */
  streaming: boolean;
  disabled: boolean;
  size: ComposerSize;
  onSend: () => void;
  onCancel?: () => void;
}

export interface AttachButtonProps {
  disabled: boolean;
  size: ComposerSize;
  onClick: () => void;
}

export interface ComposerTextareaProps {
  composer: UseChatComposerReturn;
  placeholder: string;
  disabled: boolean;
  size: ComposerSize;
  className?: string;
}

export interface ActionBarProps {
  /** Already filtered + sorted by `useComposerActions`. */
  actionsStart: ComposerAction[];
  actionsEnd: ComposerAction[];
  size: ComposerSize;
  layout: ComposerLayout;
  inlineStart?: ReactNode;
  inlineEnd?: ReactNode;
}

/** Tier B — swap a primitive entirely. Each is optional. */
export interface ComposerSlotComponents {
  SendButton?: ComponentType<SendButtonProps>;
  AttachButton?: ComponentType<AttachButtonProps>;
  Textarea?: ComponentType<ComposerTextareaProps>;
  /** Replace the whole `blockEnd` action-bar row. */
  ActionBar?: ComponentType<ActionBarProps>;
}

/** Per-slot prop overrides forwarded to the built-in primitives. */
export interface ComposerSlotProps {
  send?: Partial<SendButtonProps>;
  attach?: Partial<AttachButtonProps>;
  textarea?: { className?: string };
  actionBar?: { className?: string };
}

// ── Footer ─────────────────────────────────────────────────────────────────

/** Props for the strip below the input surface. */
export interface ComposerFooterProps {
  start?: ReactNode;
  center?: ReactNode;
  end?: ReactNode;
  /** Auto char counter — reads `composer.value` + `maxLength`. */
  showCounter?: boolean;
  /** Auto keyboard-shortcut hint — reads `submitOn`. @default false */
  showHint?: boolean;
  /** Live value, for the counter. */
  value?: string;
  /** Character cap, for the counter. */
  maxLength?: number;
  /** Submit binding, for the hint. */
  submitOn?: 'enter' | 'cmd+enter';
  size?: ComposerSize;
  className?: string;
}
