'use client';

import { CdnImage as Image } from '@/ui/shared/cdn-image';
import type { OrderItem } from 'brainerce';
import { useTranslations } from '@/core/lib/translations';
import { cn } from '@/core/lib/utils';

type Customizations = NonNullable<OrderItem['customizations']>;
type CustomizationEntry = Customizations[string];

interface OrderCustomizationsProps {
  customizations: OrderItem['customizations'];
  className?: string;
}

export function OrderCustomizations({ customizations, className }: OrderCustomizationsProps) {
  const t = useTranslations('account');
  if (!customizations) return null;
  const entries = Object.entries(customizations) as Array<[string, CustomizationEntry]>;
  if (entries.length === 0) return null;

  return (
    <dl className={cn('bg-background/60 mt-2 space-y-1 rounded border-s-2 p-2 text-xs', className)}>
      {entries.map(([key, entry]) => (
        <div key={key} className="flex items-start gap-2">
          <dt className="text-muted-foreground min-w-24 font-medium">{entry.label}:</dt>
          <dd className="text-foreground flex-1 break-words">
            <CustomizationValue entry={entry} fallback={t('productFallback')} />
          </dd>
        </div>
      ))}
    </dl>
  );
}

function CustomizationValue({ entry, fallback }: { entry: CustomizationEntry; fallback: string }) {
  const { type, value } = entry;

  switch (type) {
    case 'BOOLEAN':
      return <span>{value === 'yes' || value === 'true' ? '✓' : '✗'}</span>;

    case 'MULTI_SELECT':
      return <span>{Array.isArray(value) ? value.join(', ') : String(value)}</span>;

    case 'IMAGE': {
      const url = typeof value === 'string' ? value : Array.isArray(value) ? value[0] : '';
      if (!url) return <span className="text-muted-foreground">—</span>;
      return (
        <a href={url} target="_blank" rel="noopener noreferrer" className="inline-block">
          <span className="relative inline-block h-12 w-12 overflow-hidden rounded border">
            <Image src={url} alt={fallback} fill sizes="48px" className="object-cover" />
          </span>
        </a>
      );
    }

    case 'GALLERY': {
      const urls = Array.isArray(value) ? value : value ? [value] : [];
      if (urls.length === 0) return <span className="text-muted-foreground">—</span>;
      return (
        <div className="flex flex-wrap gap-1.5">
          {urls.map((url, i) => (
            <a
              key={`${url}-${i}`}
              href={url}
              target="_blank"
              rel="noopener noreferrer"
              className="inline-block"
            >
              <span className="relative inline-block h-10 w-10 overflow-hidden rounded border">
                <Image src={url} alt={fallback} fill sizes="40px" className="object-cover" />
              </span>
            </a>
          ))}
        </div>
      );
    }

    case 'COLOR': {
      const hex = typeof value === 'string' ? value : '';
      return (
        <span className="inline-flex items-center gap-1.5">
          <span
            className="inline-block h-4 w-4 rounded border"
            style={{ backgroundColor: hex || 'transparent' }}
          />
          <span className="font-mono">{hex || '—'}</span>
        </span>
      );
    }

    case 'DATE': {
      const s = typeof value === 'string' ? value : '';
      if (!s) return <span>—</span>;
      const d = new Date(s);
      return <span>{isNaN(d.getTime()) ? s : d.toLocaleDateString()}</span>;
    }

    case 'DATETIME': {
      const s = typeof value === 'string' ? value : '';
      if (!s) return <span>—</span>;
      const d = new Date(s);
      return <span>{isNaN(d.getTime()) ? s : d.toLocaleString()}</span>;
    }

    case 'URL': {
      const href = typeof value === 'string' ? value : '';
      if (!href) return <span>—</span>;
      return (
        <a
          href={href}
          target="_blank"
          rel="noopener noreferrer"
          className="text-primary break-all underline"
        >
          {href}
        </a>
      );
    }

    default:
      return <span>{Array.isArray(value) ? value.join(', ') : String(value ?? '')}</span>;
  }
}