'use client';

import type { ReactNode } from 'react';
import { useNow } from '@/app/hooks/useNow';
import { formatFullTime, relativeTime } from '@/app/lib/format';

/** Join class names, skipping falsy parts. */
export function cx(...parts: Array<string | false | null | undefined>): string {
  return parts.filter(Boolean).join(' ');
}

/** The rounded, bordered container used for code, SQL and chart blocks inside an answer. */
export function Frame({ flush = false, className, children }: { flush?: boolean; className?: string; children: ReactNode }) {
  return <div className={cx('overflow-hidden rounded-[14px] border border-edge-strong', !flush && 'my-5', className)}>{children}</div>;
}

/** The title bar across the top of a Frame (or of the results table). */
export function FrameHeader({ compact = false, children }: { compact?: boolean; children: ReactNode }) {
  return <div className={cx('flex items-center justify-between border-b border-line bg-panel px-3.5', compact ? 'py-2' : 'py-2.5')}>{children}</div>;
}

const BADGE_TONES = {
  violet: { box: 'border-accent/30 bg-accent/15', label: 'text-violet' },
  blue: { box: 'border-accent-blue/30 bg-accent-blue/15', label: 'text-accent-blue' },
} as const;

/** A small tinted label with an icon, e.g. "SQL" or "FLOW DIAGRAM". */
export function Badge({ tone, icon, children }: { tone: keyof typeof BADGE_TONES; icon: ReactNode; children: ReactNode }) {
  const t = BADGE_TONES[tone];
  return (
    <div className={cx('flex items-center gap-[5px] rounded-md border px-2 py-0.5', t.box)}>
      {icon}
      <span className={cx('text-[12px] font-bold uppercase tracking-[0.1em]', t.label)}>{children}</span>
    </div>
  );
}

/**
 * The small time label under a chat bubble: "just now", "5m ago", … kept current as the page stays open, with the
 * full date and time in the viewer's own time zone on hover. `side` is the edge it is aligned to.
 */
export function Timestamp({ side, ts }: { side: 'left' | 'right'; ts: number }) {
  const now = useNow();
  return (
    <p title={formatFullTime(ts)} className={cx('mt-1 font-code text-[12px] text-muted', side === 'left' ? 'pl-1' : 'pr-1')}>
      {relativeTime(ts, now)}
    </p>
  );
}