import { useLocale } from '../../../i18n';
import { useModelsCopy } from '../copy';
import DialogSurface from './DialogSurface';
import type { UsageHistoryEntry } from '../usage-history';

type RequestContentDialogProps = {
  open: boolean;
  entry: UsageHistoryEntry | null;
  onClose: () => void;
};

function formatUsageTimestamp(timestamp: string | undefined, locale: string): string {
  if (!timestamp) return '';

  const date = new Date(timestamp);
  if (Number.isNaN(date.getTime())) return timestamp;

  return new Intl.DateTimeFormat(locale, {
    month: 'short',
    day: 'numeric',
    hour: '2-digit',
    minute: '2-digit',
  }).format(date);
}

export default function RequestContentDialog({
  open,
  entry,
  onClose,
}: RequestContentDialogProps) {
  const locale = useLocale();
  const t = useModelsCopy();

  return (
    <DialogSurface
      open={open}
      onClose={onClose}
      title={t('models.usage.requestContent.title')}
      subtitle={entry ? `${entry.model || t('models.common.unknownModel')} • ${formatUsageTimestamp(entry.timestamp, locale)}` : undefined}
      closeLabel={t('models.common.closeDialog')}
      widthClassName="max-w-[800px]"
    >
      <div className="max-h-[60vh] overflow-y-auto rounded-[16px] border border-black/6 bg-white p-5 shadow-sm dark:border-white/8 dark:bg-[#1f1f22]">
        <pre className="whitespace-pre-wrap break-words font-mono text-[13px] leading-relaxed text-[#171717] dark:text-[#f3f4f6]">
          {entry?.content || ''}
        </pre>
      </div>
    </DialogSurface>
  );
}