import PropTypes from 'prop-types';
import dayjs from 'dayjs';

import { HStack } from '@astryxdesign/core/HStack';
import { VStack } from '@astryxdesign/core/VStack';
import { Text } from '@astryxdesign/core/Text';

import { CHIP_LABELS } from './pageContext';

// ==============================|| Doormile AI — welcome state ||============================== //
//
// Shown only when the thread is empty. Deliberately top-weighted and compact
// so the panel never opens on a large blank region: greeting + one line of
// what it can do, then straight into four suggestions.

const greeting = () => {
  const h = dayjs().hour();
  if (h < 12) return 'Good morning';
  if (h < 17) return 'Good afternoon';
  return 'Good evening';
};

// A chip, not a row.
//
// These used to be full-width rows: a 26px icon tile, the question, and a
// reveal-on-hover arrow, stacked one per line. That reads fine for four
// suggestions and falls apart at twenty — the panel opened on a wall of
// identical boxes that had to be read top to bottom, and the whole welcome
// state scrolled.
//
// As chips they flow into a block that is scanned rather than read: each one
// is only as wide as its question, so the varying widths give the eye
// something to land on, and twenty of them occupy a few rows instead of
// twenty. The icon stays as a small inline glyph for recognition; the arrow
// is gone, because on a chip it was decoration competing with the label.
const SuggestionChip = ({ item, onAsk }) => {
  const Icon = item.icon;
  // Display short, ask long. `item.text` is what intents.js matches on, so it
  // is what gets asked and what assistive tech announces; the chip only shows
  // a trimmed version of it so twenty of them fit in a few rows.
  const label = CHIP_LABELS[item.text] || item.text;
  return (
    <button type="button" className="dai-suggestion" onClick={() => onAsk(item.text)} aria-label={item.text} title={item.text}>
      <Icon className="dai-suggestion-icon" size={13} strokeWidth={2} aria-hidden="true" />
      <span className="dai-suggestion-text">{label}</span>
    </button>
  );
};

SuggestionChip.propTypes = {
  item: PropTypes.shape({ icon: PropTypes.elementType.isRequired, text: PropTypes.string.isRequired }).isRequired,
  onAsk: PropTypes.func.isRequired
};

// Exported so AIPanel can render it directly above the composer rather than
// inside the scrolling body. The chips are a way to START a message, so they
// belong with the input, not buried in the welcome copy where they scrolled
// out of reach the moment a conversation began.
export const SuggestionChips = ({ items, onAsk }) => (
  <HStack className="dai-suggestions" wrap="wrap" gap={1.5} padding={0} vAlign="start">
    {items.map((item) => (
      <SuggestionChip key={item.text} item={item} onAsk={onAsk} />
    ))}
  </HStack>
);

SuggestionChips.propTypes = {
  items: PropTypes.array.isRequired,
  onAsk: PropTypes.func.isRequired
};

const AIWelcome = () => {
  return (
    <VStack className="dai-welcome" gap={1.5} padding={0}>
      <VStack gap={0.5} padding={0}>
        <Text className="dai-welcome-greeting">{greeting()}</Text>
        <Text className="dai-welcome-lead">How can I help with today&rsquo;s operations?</Text>
      </VStack>
      <Text className="dai-welcome-note">
        I read live orders, riders, vehicles and hubs. Every number comes from a real call — I never estimate one.
      </Text>
    </VStack>
  );
};

AIWelcome.propTypes = {
  onAsk: PropTypes.func
};

export default AIWelcome;