/**
 * PreviewPanel — live iframe preview for the Page Organizer admin UI.
 *
 * Shows one iframe at a time with a Mobile/Desktop toggle above it.
 * The iframe loads `/?__preview=1` and carries a cache-buster `t=<timestamp>`
 * token bumped whenever the organizer transitions to `saving === 'saved'`,
 * so it reloads only after a successful autosave — never mid-keystroke.
 */

import { useEffect, useCallback, useState } from 'react';
import { useOrganizer } from './state';
import { useT } from '@/lib/i18n/react';
import { Button } from '@/components/ui/primitives/Button';
import { Icon } from '@/components/ui/icons/Icon';

type UserMode = 'guest' | 'logged_in';

// ─── PreviewFrame ──────────────────────────────────────────────────────────────

interface PreviewFrameProps {
  ariaLabel: string;
  label: string;
  token: number;
  device: 'mobile' | 'desktop';
  userMode: UserMode;
  /** Page slug being previewed (e.g. "home", "about"). "home" maps to "/". */
  page: string;
  wrapperClassName?: string;
  iframeClassName?: string;
}

function PreviewFrame({
  ariaLabel,
  label,
  token,
  device,
  userMode,
  page,
  wrapperClassName = '',
  iframeClassName = '',
}: PreviewFrameProps) {
  const pagePath = page === 'home' ? '/' : `/${page}`;
  const src = `${pagePath}?__preview=1&device=${device}&user=${userMode}&t=${token}`;

  return (
    <div
      className={`border-border-subtle flex flex-col overflow-hidden rounded-md border ${wrapperClassName}`}
    >
      {/* Frame label */}
      <div className="bg-surface-subtle border-border-subtle border-b px-3 py-1.5">
        <span className="text-text-secondary text-xs font-medium">{label}</span>
      </div>

      {/* The iframe */}
      <iframe
        src={src}
        title={ariaLabel}
        aria-label={ariaLabel}
        loading="eager"
        className={`bg-surface-base flex-1 border-none ${iframeClassName}`}
      />
    </div>
  );
}

// ─── PreviewPanel ──────────────────────────────────────────────────────────────

type Device = 'mobile' | 'desktop';

export function PreviewPanel({ page }: { page: string }) {
  const t = useT('page_organizer');

  // Shared device state — the single toggle for the entire organizer page
  // drives both the canvas editing view and the preview viewport.
  const device = useOrganizer((s) => s.device);
  const setDevice = useOrganizer((s) => s.setDevice);
  const [token, setToken] = useState<number>(() => Date.now());
  const [userMode, setUserMode] = useState<UserMode>('guest');

  useEffect(() => {
    let prev = useOrganizer.getState().saving;
    let pendingReload = false;

    const unsub = useOrganizer.subscribe((state) => {
      const editorOpen = state.selectedInstanceId !== null || state.richTextEdit !== null;

      if (prev !== 'saved' && state.saving === 'saved') {
        pendingReload = true;
      }
      prev = state.saving;

      if (pendingReload && !editorOpen) {
        pendingReload = false;
        setToken(Date.now());
      }
    });
    return unsub;
  }, []);

  const handleRefresh = useCallback(() => {
    setToken(Date.now());
  }, []);

  const userBtn = (u: UserMode, label: string) => (
    <Button
      variant="ghost"
      size="sm"
      onClick={() => setUserMode(u)}
      aria-pressed={userMode === u}
      className={[
        'rounded px-3 py-1 text-xs font-medium transition-colors duration-[var(--duration-fast)]',
        userMode === u
          ? 'bg-brand-primary-600 text-text-inverse'
          : 'text-text-secondary hover:text-text-primary hover:bg-surface-subtle',
      ].join(' ')}
    >
      {label}
    </Button>
  );

  const toggleBtn = (d: Device, label: string) => (
    <Button
      variant="ghost"
      size="sm"
      onClick={() => setDevice(d)}
      aria-pressed={device === d}
      className={[
        'rounded px-3 py-1 text-xs font-medium transition-colors duration-[var(--duration-fast)]',
        device === d
          ? 'bg-brand-primary-600 text-text-inverse'
          : 'text-text-secondary hover:text-text-primary hover:bg-surface-subtle',
      ].join(' ')}
    >
      {label}
    </Button>
  );

  return (
    <div className="flex min-h-0 flex-1 flex-col gap-3">
      {/* Toolbar: title | [toggles centered] | refresh */}
      <div className="flex items-center">
        <h2 className="text-text-primary flex-1 text-sm font-semibold">{t('preview_title')}</h2>

        {/* Toggles centered */}
        <div className="flex items-center gap-2">
          {/* Device toggle */}
          <div
            role="group"
            aria-label={t('preview_device_toggle')}
            className="border-border-subtle flex items-center gap-1 rounded-md border p-1"
          >
            {toggleBtn('mobile', t('preview_mobile'))}
            {toggleBtn('desktop', t('preview_desktop'))}
          </div>

          {/* User state toggle */}
          <div
            role="group"
            aria-label={t('preview_user_toggle')}
            className="border-border-subtle flex items-center gap-1 rounded-md border p-1"
          >
            {userBtn('guest', t('preview_user_guest'))}
            {userBtn('logged_in', t('preview_user_logged_in'))}
          </div>
        </div>

        {/* Refresh flush to end */}
        <div className="flex flex-1 justify-end">
          <Button
            variant="ghost"
            size="sm"
            onClick={handleRefresh}
            aria-label={t('preview_refresh')}
            className="text-text-secondary hover:text-text-primary hover:bg-surface-subtle flex items-center gap-1 rounded px-2 py-1 text-xs font-medium transition-colors duration-[var(--duration-fast)]"
          >
            <Icon name="RefreshCw" size="xs" color="inherit" />
            <span className="hidden sm:inline">{t('preview_refresh')}</span>
          </Button>
        </div>
      </div>

      {/* Single frame — mobile centered in column, desktop fills */}
      <div className="flex min-h-0 flex-1 justify-center">
        {device === 'mobile' ? (
          <PreviewFrame
            ariaLabel={t('preview_frame_label_mobile')}
            label={t('preview_mobile')}
            token={token}
            device="mobile"
            userMode={userMode}
            page={page}
            wrapperClassName="w-96 shrink-0"
            iframeClassName="h-full"
          />
        ) : (
          <PreviewFrame
            ariaLabel={t('preview_frame_label_desktop')}
            label={t('preview_desktop')}
            token={token}
            device="desktop"
            userMode={userMode}
            page={page}
            wrapperClassName="w-full"
            iframeClassName="h-full"
          />
        )}
      </div>
    </div>
  );
}