// @design-system: domain/admin/CascadePreviewPanel

/**
 * CascadePreviewPanel — shows the pre-computed side-effects of rejecting an image.
 *
 * Receives a serializable CascadePreview object computed server-side.
 * Does NOT import CASCADE_REGISTRY (server-only). Safe in React islands.
 *
 * RTL-first. All strings via useT('admin_approval').
 */

import { cn } from '@/lib/cn';
import { useT } from '@/lib/i18n/react';
import { Icon } from '@/components/ui/icons/Icon';

// ─── Props ────────────────────────────────────────────────────────────────────

export interface CascadePreview {
  entityRowsAffected: string[];
  /** i18n key for the public fallback description. */
  publicFallback: string;
  ownerNotified: boolean;
  emailSent: false;
}

export interface CascadePreviewPanelProps {
  preview: CascadePreview | null;
  className?: string;
}

// ─── Component ────────────────────────────────────────────────────────────────

export function CascadePreviewPanel({ preview, className }: CascadePreviewPanelProps) {
  const t = useT('admin_approval');

  if (!preview) return null;

  const { entityRowsAffected, publicFallback, ownerNotified } = preview;

  return (
    <section
      className={cn('bg-surface-inset rounded-lg p-4', 'border-border-default border', className)}
      aria-label={t('cascade_preview_title')}
    >
      <h3 className="text-text-secondary mb-3 text-xs font-semibold tracking-wide uppercase">
        {t('cascade_preview_title')}
      </h3>

      {/* Affected rows */}
      {entityRowsAffected.length > 0 ? (
        <ul className="mb-3 flex flex-col gap-1">
          {entityRowsAffected.map((row) => (
            <li key={row} className="flex items-start gap-2">
              <Icon
                name="AlertTriangle"
                size="xs"
                className="text-warning-500 mt-0.5 shrink-0"
                aria-hidden
              />
              <span className="text-text-primary font-mono text-xs">{row}</span>
            </li>
          ))}
        </ul>
      ) : (
        <p className="text-text-muted mb-3 text-sm">{t('cascade_preview_none')}</p>
      )}

      {/* Public fallback description */}
      {publicFallback && publicFallback !== 'cascade_preview_none' && (
        <div className="mb-3">
          <p className="text-text-secondary mb-1 text-xs font-semibold uppercase">
            {t('cascade_preview_title')}
          </p>
          <p className="text-text-primary text-sm">
            {(t as (k: string) => string)(publicFallback)}
          </p>
        </div>
      )}

      {/* Indicators: owner notified, email sent */}
      <div className="flex flex-wrap gap-3">
        <span
          className={cn(
            'inline-flex items-center gap-1.5 text-xs',
            ownerNotified ? 'text-success-700' : 'text-text-muted',
          )}
        >
          <Icon
            name={ownerNotified ? 'CheckCircle' : 'Circle'}
            size="xs"
            aria-hidden
            className={ownerNotified ? 'text-success-500' : 'text-neutral-400'}
          />
          {t('cascade_owner_notified')}
        </span>
        {/* emailSent is always false per spec — shown for transparency */}
        <span className="text-text-muted inline-flex items-center gap-1.5 text-xs">
          <Icon name="Circle" size="xs" aria-hidden className="text-neutral-400" />
          {t('cascade_email_sent_never')}
        </span>
      </div>
    </section>
  );
}