// @design-system: domain/PhonePreview
/**
 * PhonePreview — live customer-side deal preview frame for new-deal creation flow.
 *
 * Renders a phone-shaped chrome containing a simplified deal card that updates
 * in real time as the vendor fills in the form. Shows an empty state when no data.
 *
 * Tokens: `--color-brand-primary-700`, `--color-surface-raised`, `--color-border`,
 *          `--color-text-*`, `--color-mode-vendor-700`
 */

'use client';

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

export interface PhonePreviewDeal {
  /** Deal title. */
  title?: string;
  /** Vendor business name. */
  vendorName?: string;
  /** Current discounted price (₪). */
  priceNow?: number;
  /** Original price (₪). */
  priceWas?: number;
  /** Short description. */
  description?: string;
  /** Tier count display, e.g. "3 price tiers". */
  tiersLabel?: string;
  /** Preview image URL — already-processed variant URL from upload. */
  imageUrl?: string;
}

export interface PhonePreviewProps {
  /** Deal-in-progress data — updates live as form changes. */
  deal?: PhonePreviewDeal;
  /** Extra class names on the outer wrapper. */
  className?: string;
}

/**
 * PhonePreview
 *
 * Renders a phone chrome frame with a live customer deal card preview.
 * Updates reactively — pass updated `deal` prop from form state.
 */
export function PhonePreview({ deal, className }: PhonePreviewProps) {
  const t = useT('phone_preview');
  const hasContent =
    deal != null && (deal.title || deal.priceNow != null || deal.description || deal.imageUrl);

  return (
    <figure
      aria-label={t('frame_label')}
      className={cn('flex flex-col items-center gap-2', className)}
    >
      {/* Phone chrome */}
      <div
        className={cn(
          'relative min-h-[27.5rem] w-64 rounded-[2.5rem] border-4 border-neutral-800',
          'bg-surface-base overflow-hidden shadow-xl',
        )}
      >
        {/* Status bar notch */}
        <div className="absolute inset-x-0 top-0 flex h-7 items-center justify-center bg-neutral-800">
          <div className="h-3 w-16 rounded-full bg-neutral-900" />
        </div>

        {/* Screen content */}
        <div className="h-full px-3 pt-9 pb-4">
          {!hasContent ? (
            <div className="flex h-full flex-col items-center justify-center gap-3 py-12 text-center">
              <Icon name="ScanLine" size="lg" color="muted" aria-hidden />
              <p className="text-text-primary text-sm font-semibold">{t('empty_title')}</p>
              <p className="text-text-muted text-xs">{t('empty_body')}</p>
            </div>
          ) : (
            <div className="flex flex-col gap-3">
              {/* Deal image — preview chrome; URL is already a processed variant URL */}
              {deal.imageUrl && (
                <img
                  src={deal.imageUrl}
                  alt=""
                  aria-hidden
                  className="-mx-3 -mt-3 aspect-square w-[calc(100%+1.5rem)] object-cover"
                />
              )}

              {/* Vendor name */}
              {deal.vendorName && <p className="text-text-muted text-xs">{deal.vendorName}</p>}

              {/* Deal title */}
              {deal.title && (
                <h4 className="text-text-primary text-sm leading-tight font-bold">{deal.title}</h4>
              )}

              {/* Description */}
              {deal.description && (
                <p className="text-text-secondary text-xs leading-snug">{deal.description}</p>
              )}

              {/* Pricing */}
              {deal.priceNow != null && (
                <div className="mt-1 flex items-baseline gap-2">
                  <span className="text-brand-primary-700 text-2xl font-[var(--font-en)] font-bold tracking-tight tabular-nums">
                    {formatShekelFloat(deal.priceNow)}
                  </span>
                  {deal.priceWas != null && (
                    <span className="text-text-muted text-xs font-[var(--font-en)] tabular-nums line-through">
                      {formatShekelFloat(deal.priceWas)}
                    </span>
                  )}
                </div>
              )}

              {/* Tiers label */}
              {deal.tiersLabel && <p className="text-text-muted text-xs">{deal.tiersLabel}</p>}

              {/* CTA placeholder */}
              <div className="bg-mode-vendor-600 mt-2 flex h-10 items-center justify-center rounded-lg">
                <span className="text-sm font-semibold text-white">{t('join_deal_cta')}</span>
              </div>
            </div>
          )}
        </div>

        {/* Home bar */}
        <div className="absolute inset-x-0 bottom-2 flex justify-center">
          <div className="h-1 w-20 rounded-full bg-neutral-300" />
        </div>
      </div>

      <figcaption className="text-text-muted text-xs">{t('frame_label')}</figcaption>
    </figure>
  );
}