import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { useTranslation } from 'react-i18next';
import { POLLING } from '../../../lib/constants.js';
import { usePictureInPicture } from '../../../lib/usePictureInPicture.js';
import { PipButton } from '../../browser/PipButton.js';
import { SaveRecordingButton } from '../../browser/SaveRecordingButton.js';

interface TaskSessionInfo {
  available: boolean;
  reason?: 'novnc_not_installed' | 'headless_mode' | 'display_unavailable' | 'no_session';
  sessionId?: string;
  novncPath?: string;
  display?: string;
  state?: 'ready' | 'user_interactive' | 'agent_controlled';
  lockedByJobId?: string | null;
  createdAt?: string;
  lastActiveAt?: string;
}

function useTaskSession(taskId: number) {
  return useQuery<TaskSessionInfo>({
    queryKey: ['task-session', taskId],
    queryFn: async () => {
      const r = await fetch(`/api/local/browser/sessions/task-session/${taskId}`);
      if (!r.ok) throw new Error(`HTTP ${r.status}`);
      return r.json() as Promise<TaskSessionInfo>;
    },
    refetchInterval: POLLING.FAST,
    refetchOnWindowFocus: true,
  });
}

function useReleaseSession(taskId: number) {
  const qc = useQueryClient();
  return useMutation({
    mutationFn: async () => {
      const r = await fetch(`/api/local/browser/sessions/task-session/${taskId}/release`, {
        method: 'POST',
      });
      if (!r.ok) throw new Error(`HTTP ${r.status}`);
      return r.json();
    },
    onSettled: () => {
      qc.invalidateQueries({ queryKey: ['task-session', taskId] });
    },
  });
}

/**
 * Task 詳細の "Browser" タブ。BrowseWeb / InteractiveBrowse がそのタスクで
 * noVNC session を起動していれば iframe で埋め込み、ユーザーが直接ブラウザを
 * 操作できる。可視性チェックは API 層 (GET /task-session/:taskId) が行うので
 * ここではタブ自体を全員に見せて構わない (見えないユーザーには available:false が返る)。
 */
export function BrowserTab({ taskId }: { taskId: number }) {
  const { t } = useTranslation('detail');
  const { data, isLoading, isError, error } = useTaskSession(taskId);
  const release = useReleaseSession(taskId);
  const pip = usePictureInPicture(data?.novncPath ?? null, `noVNC — Task #${taskId}`);

  if (isLoading) {
    return (
      <div className="flex items-center justify-center py-12 text-sm text-slate-500">
        {t('browser.loading')}
      </div>
    );
  }

  if (isError) {
    const msg = error instanceof Error ? error.message : String(error);
    return (
      <div className="p-4 text-sm text-red-700 dark:text-red-300">
        {t('browser.fetchFailed')}: {msg}
      </div>
    );
  }

  if (!data?.available) {
    if (data?.reason === 'novnc_not_installed') {
      return (
        <div className="bg-canvas border border-amber-300 rounded-md p-6 text-sm text-slate-700">
          <p className="font-medium text-amber-800 dark:text-amber-300 mb-2">{t('browser.novncNotInstalled.title')}</p>
          <p className="text-xs leading-relaxed mb-2">
            {t('browser.novncNotInstalled.body')}
          </p>
          <p className="text-xs leading-relaxed mb-2">
            {t('browser.novncNotInstalled.setupIntro')}
          </p>
          <ul className="list-disc list-inside text-xs leading-relaxed space-y-1">
            <li>{t('browser.novncNotInstalled.bareMetal')}</li>
            <li>{t('browser.novncNotInstalled.docker')}</li>
          </ul>
        </div>
      );
    }
    if (data?.reason === 'headless_mode') {
      return (
        <div className="bg-canvas border border-amber-300 rounded-md p-6 text-sm text-slate-700">
          <p className="font-medium text-amber-800 dark:text-amber-300 mb-2">{t('browser.headless.title')}</p>
          <p className="text-xs leading-relaxed">
            {t('browser.headless.body')}
          </p>
        </div>
      );
    }
    if (data?.reason === 'display_unavailable') {
      return (
        <div className="bg-canvas border border-amber-300 rounded-md p-6 text-sm text-slate-700">
          <p className="font-medium text-amber-800 dark:text-amber-300 mb-2">{t('browser.displayUnavailable.title')}</p>
          <p className="text-xs leading-relaxed">
            {t('browser.displayUnavailable.body')}
          </p>
        </div>
      );
    }
    return (
      <div className="bg-canvas border border-hairline rounded-md p-6 text-center text-sm text-slate-600">
        <p className="font-medium text-slate-800 mb-1">{t('browser.noSession.title')}</p>
        <p className="text-xs leading-relaxed">
          {t('browser.noSession.body')}
        </p>
      </div>
    );
  }

  return (
    <div className="bg-canvas border border-hairline rounded-md overflow-hidden flex flex-col" style={{ minHeight: '480px' }}>
      <div className="flex items-center justify-between border-b border-hairline px-3 py-2 text-2xs text-slate-500 gap-2">
        <span className="truncate">
          state: <span className="font-mono text-slate-700">{data.state ?? '-'}</span>
          {data.lockedByJobId && <> · job: <span className="font-mono">{data.lockedByJobId}</span></>}
        </span>
        <div className="flex items-center gap-2">
          <PipButton pip={pip} />
          <SaveRecordingButton taskId={taskId} />
          <a
            href={data.novncPath}
            target="_blank"
            rel="noopener noreferrer"
            className="text-2xs text-accent hover:underline"
          >
            {t('browser.openNewTab')}
          </a>
          <button
            type="button"
            onClick={() => {
              if (window.confirm(t('browser.releaseConfirm'))) {
                release.mutate();
              }
            }}
            disabled={release.isPending}
            className="px-2 py-1 rounded-md text-2xs border border-hairline bg-canvas hover:bg-surface text-slate-700 disabled:opacity-50"
            title={t('browser.releaseTooltip')}
          >
            {release.isPending ? t('browser.releasing') : t('browser.release')}
          </button>
        </div>
      </div>
      {pip.isOpen ? (
        <div
          className="flex-1 w-full flex items-center justify-center bg-slate-50 text-xs text-slate-500"
          style={{ minHeight: '480px' }}
        >
          {t('browser.pipActive')}
        </div>
      ) : (
        <iframe
          src={data.novncPath}
          title={`Task #${taskId} browser session`}
          className="flex-1 w-full border-0"
          style={{ minHeight: '480px' }}
          allow="clipboard-read; clipboard-write"
        />
      )}
    </div>
  );
}
