import React, { useEffect, useState } from 'react';

const SPINNER = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];

const PHRASES = [
  'Thinking',
  'Sketching layout',
  'Choosing colors',
  'Writing copy',
  'Picking components',
  'Wiring up the hero',
  'Polishing typography',
  'Arranging sections',
  'Composing the layout',
  'Adding finishing touches',
];

/**
 * Animated "AI is working" indicator. Modeled after Claude Code's bottom-bar
 * status: a Braille-cycle spinner, a phrase that rotates every few seconds,
 * and an elapsed-seconds counter. Mounts only while a request is in flight.
 */
export const WorkingIndicator: React.FC = () => {
  const [frame, setFrame] = useState(0);
  const [phrase, setPhrase] = useState('Thinking');
  const [elapsed, setElapsed] = useState(0);
  const [startTime] = useState(() => Date.now());

  useEffect(() => {
    const spinnerTimer = window.setInterval(() => {
      setFrame((f) => (f + 1) % SPINNER.length);
    }, 80);
    const phraseTimer = window.setInterval(() => {
      setPhrase(PHRASES[Math.floor(Math.random() * PHRASES.length)]);
    }, 2500);
    const elapsedTimer = window.setInterval(() => {
      setElapsed(Math.floor((Date.now() - startTime) / 1000));
    }, 1000);
    return () => {
      window.clearInterval(spinnerTimer);
      window.clearInterval(phraseTimer);
      window.clearInterval(elapsedTimer);
    };
  }, [startTime]);

  return (
    <div style={containerStyle} role="status" aria-live="polite">
      <span style={spinnerStyle} aria-hidden>{SPINNER[frame]}</span>
      <span style={phraseStyle}>{phrase}…</span>
      <span style={metaStyle}>({elapsed}s)</span>
    </div>
  );
};

const containerStyle: React.CSSProperties = {
  display: 'flex',
  alignItems: 'center',
  gap: 10,
  padding: '14px 4px',
  fontSize: 14,
};
const spinnerStyle: React.CSSProperties = {
  color: '#8b5cf6',
  fontSize: 18,
  width: 18,
  display: 'inline-block',
  textAlign: 'center',
  fontFamily: 'monospace',
};
const phraseStyle: React.CSSProperties = {
  color: '#e4e4e7',
  fontStyle: 'italic',
  fontWeight: 500,
};
const metaStyle: React.CSSProperties = {
  color: '#71717a',
  fontSize: 12,
  marginLeft: 'auto',
};
