import { useState, useDeferredValue } from 'react';
import { useQuery, useQueryClient } from '@tanstack/react-query';
import { LocalTask, LocalFileEntry, SubtaskActivity, Visibility, fetchMyOrgs, updateLocalTask } from '../../api';
import { relativeTime } from '../../lib/utils';
import { ownerDisplayName } from '../../lib/owner';
import { DetailTabId } from '../../lib/urlState';
import { DetailHeader } from './DetailHeader';
import { ContinueWithPieceDialog } from './ContinueWithPieceDialog';
import { SkeletonDetailPanel } from '../shared/Skeleton';
import { OverviewTab } from './tabs/OverviewTab';
import { ProgressTab } from './tabs/ProgressTab';
import { FilesTab } from './tabs/FilesTab';
import { TraceTab } from './tabs/TraceTab';
import { BrowserTab } from './tabs/BrowserTab';
import { ConsoleTab } from './tabs/ConsoleTab';
import { BrowserSessionPanel } from '../browser/BrowserSessionPanel';
import type { ConsoleStatus } from '../../lib/ssh-console-types';
import { useAuthState } from '../../App';
import type { SubtaskFilePreviewHandler } from './tabs/SubtasksPanel';

interface LocalDetailPanelProps {
  task: LocalTask | null;
  taskId: number;
  section: 'workspace' | 'input' | 'output' | 'logs';
  currentPath: string;
  entries: LocalFileEntry[];
  pathSegments: string[];
  loading: boolean;
  detailTab: DetailTabId;
  detailWidth: 'normal' | 'focused';
  showWidthToggle: boolean;
  onTabChange: (tab: DetailTabId) => void;
  onWidthToggle: () => void;
  onClose: () => void;
  onDelete?: () => Promise<void>;
  onSectionChange: (section: 'workspace' | 'input' | 'output' | 'logs') => void;
  onNavigate: (path: string) => void;
  onPreview: (path: string, name: string) => void;
  onViewFullLog: () => void;
  onRefresh?: () => void;
  isRefreshing?: boolean;
  subtaskActivities?: SubtaskActivity[];
  onSubtaskFilePreview?: SubtaskFilePreviewHandler;
  shareToken?: string | null;
  onShareChange?: () => void;
}

const LOCAL_TABS: Array<{ id: DetailTabId; label: string }> = [
  { id: 'overview', label: '概要' },
  { id: 'activity', label: '進捗' },
  { id: 'files', label: 'ファイル' },
  { id: 'trace', label: 'トレース' },
  { id: 'browser', label: 'ブラウザ' },
  { id: 'ssh', label: 'SSH' },
];

export function LocalDetailPanel({
  task, taskId, section, currentPath, entries, pathSegments,
  loading, detailTab, detailWidth, showWidthToggle,
  onTabChange, onWidthToggle, onClose, onDelete, onSectionChange, onNavigate, onPreview, onViewFullLog,
  onRefresh, isRefreshing, subtaskActivities, onSubtaskFilePreview,
  shareToken, onShareChange,
}: LocalDetailPanelProps) {
  // Deferred tab id for content rendering. The tab indicator (DetailHeader)
  // uses `detailTab` (immediate) so the underline jumps on click. The heavy
  // content area below uses `deferredDetailTab` so expensive panels
  // (ProgressTab / TraceTab) don't block the click → indicator paint.
  // When detailTab !== deferredDetailTab we know a transition is in flight.
  const deferredDetailTab = useDeferredValue(detailTab);
  const tabTransitionPending = detailTab !== deferredDetailTab;
  const [deleting, setDeleting] = useState(false);
  const [continueOpen, setContinueOpen] = useState(false);
  const [editingVisibility, setEditingVisibility] = useState(false);
  const [savingVisibility, setSavingVisibility] = useState(false);
  const [editVisibility, setEditVisibility] = useState<Visibility>('private');
  const [editScopeOrgId, setEditScopeOrgId] = useState<string | null>(null);
  const [editError, setEditError] = useState<string | null>(null);
  const qc = useQueryClient();
  const authState = useAuthState();
  const currentUserId = authState.mode === 'authenticated' ? authState.user.id : null;
  const currentUserRole = authState.mode === 'authenticated' ? authState.user.role : null;
  const canEditVisibility = task
    ? (currentUserRole === 'admin' || (currentUserId !== null && task.ownerId === currentUserId))
    : false;
  const { data: orgs = [] } = useQuery({
    queryKey: ['my-orgs'],
    queryFn: fetchMyOrgs,
    staleTime: 5 * 60 * 1000,
    enabled: editingVisibility,
  });

  // SSH console tab visibility: show whenever an active console session exists for this task.
  // (Piece-level pre-show via latestJob.allowedTools is not currently exposed by the API; this
  // fallback covers the real case where the AI has actually opened a session.)
  const { data: consoleStatus } = useQuery<ConsoleStatus>({
    queryKey: ['console-status', task?.id],
    queryFn: async () => {
      const r = await fetch(`/api/local/tasks/${task!.id}/console/status`);
      return r.ok ? r.json() : { active: false };
    },
    enabled: !!task,
    refetchInterval: 5000,
  });
  const showSshTab = consoleStatus?.active === true;
  const visibleTabs = LOCAL_TABS.filter((t) => t.id !== 'ssh' || showSshTab);

  const handleStartEdit = () => {
    if (!task) return;
    setEditVisibility((task.visibility as Visibility) ?? 'private');
    setEditScopeOrgId(task.visibilityScopeOrgId ?? null);
    setEditError(null);
    setEditingVisibility(true);
  };

  const handleSaveVisibility = async () => {
    if (!task) return;
    setEditError(null);
    setSavingVisibility(true);
    try {
      await updateLocalTask(task.id, {
        visibility: editVisibility,
        visibilityScopeOrgId: editVisibility === 'org' ? editScopeOrgId : null,
      });
      await qc.invalidateQueries({ queryKey: ['localTaskDetail', task.id] });
      setEditingVisibility(false);
    } catch (err) {
      setEditError(err instanceof Error ? err.message : String(err));
    } finally {
      setSavingVisibility(false);
    }
  };

  const handleDelete = async () => {
    if (!onDelete) return;
    if (!window.confirm('このタスクを削除しますか？この操作は取り消せません。')) return;
    setDeleting(true);
    try {
      await onDelete();
    } finally {
      setDeleting(false);
    }
  };

  const jobStatus = task?.latestJob?.status;
  const isActiveJob = jobStatus === 'running' || jobStatus === 'dispatching';

  return (
    <div className="flex flex-col h-full overflow-hidden bg-surface">
      <DetailHeader
        title={`Task #${taskId}`}
        subtitle="ローカルワークスペース"
        tabs={visibleTabs}
        activeTab={detailTab}
        tabTransitionPending={tabTransitionPending}
        onTabChange={onTabChange}
        onClose={onClose}
        detailWidth={detailWidth}
        onWidthToggle={showWidthToggle ? onWidthToggle : undefined}
        taskId={taskId}
        shareToken={shareToken}
        onShareChange={onShareChange}
        latestJobStatus={task?.latestJob?.status ?? null}
        onContinue={task?.latestJob ? () => setContinueOpen(true) : undefined}
      />
      {continueOpen && task?.latestJob && (
        <ContinueWithPieceDialog
          taskId={taskId}
          prevJob={{
            id: task.latestJob.id,
            // task.pieceName tracks last-piece-wins after each Continue, so
            // it equals the latest job's piece.
            pieceName: task.pieceName,
            status: task.latestJob.status,
          }}
          onClose={() => setContinueOpen(false)}
        />
      )}
      <div className={`flex-1 min-h-0 p-3 ${detailTab === 'ssh' ? 'overflow-hidden flex flex-col' : 'overflow-y-auto'}`}>
        {loading && !task && <SkeletonDetailPanel />}
        {task && (
          <>
            <div className="mb-2 flex items-center gap-2 text-2xs text-slate-500 flex-wrap">
              <span>作成者: <b>{ownerDisplayName(task.ownerId, task.ownerName)}</b></span>
              <span>·</span>
              <span>{relativeTime(task.createdAt)}</span>
              {task.visibility === 'private' && <span>· 🔒 非公開</span>}
              {task.visibility === 'org' && <span>· 🏢 {task.visibilityScopeOrgName ?? 'org'}</span>}
              {task.visibility === 'public' && <span>· 🌐 公開</span>}
              {canEditVisibility && !editingVisibility && (
                <button
                  className="ml-2 underline text-slate-500 hover:text-slate-700"
                  onClick={handleStartEdit}
                >
                  変更
                </button>
              )}
            </div>
            {editingVisibility && (
              <div className="mb-3 p-2.5 border border-hairline rounded-md bg-canvas text-xs">
                <div className="flex gap-3 flex-wrap">
                  <label className="flex items-center gap-1">
                    <input
                      type="radio"
                      checked={editVisibility === 'private'}
                      onChange={() => setEditVisibility('private')}
                    />
                    🔒 非公開
                  </label>
                  <label className="flex items-center gap-1">
                    <input
                      type="radio"
                      checked={editVisibility === 'org'}
                      onChange={() => {
                        setEditVisibility('org');
                        if (!editScopeOrgId && orgs.length > 0) setEditScopeOrgId(orgs[0].orgId);
                      }}
                      disabled={orgs.length === 0}
                    />
                    🏢 組織
                  </label>
                  <label className="flex items-center gap-1">
                    <input
                      type="radio"
                      checked={editVisibility === 'public'}
                      onChange={() => setEditVisibility('public')}
                    />
                    🌐 公開
                  </label>
                </div>
                {editVisibility === 'org' && orgs.length > 1 && (
                  <select
                    className="mt-2 px-2 h-7 border border-hairline rounded-md text-xs bg-canvas focus:outline-none focus:ring-2 focus:ring-accent-ring"
                    value={editScopeOrgId ?? ''}
                    onChange={e => setEditScopeOrgId(e.target.value)}
                  >
                    {orgs.map(o => <option key={o.orgId} value={o.orgId}>{o.orgName}</option>)}
                  </select>
                )}
                {editVisibility === 'org' && orgs.length === 1 && (
                  <div className="mt-1 text-2xs text-slate-500">共有先: {orgs[0].orgName}</div>
                )}
                {editVisibility === 'org' && orgs.length === 0 && (
                  <div className="mt-1 text-2xs text-slate-400">組織を使うには Gitea でログインしてください</div>
                )}
                {editError && <div className="mt-1 text-2xs text-red-600">{editError}</div>}
                <div className="mt-2 flex gap-2">
                  <button
                    disabled={savingVisibility}
                    onClick={() => void handleSaveVisibility()}
                    className="px-3 h-7 bg-accent text-accent-fg rounded-md text-xs font-semibold disabled:opacity-50 hover:bg-accent-deep transition-colors"
                  >
                    {savingVisibility ? '保存中...' : '保存'}
                  </button>
                  <button
                    disabled={savingVisibility}
                    onClick={() => { setEditingVisibility(false); setEditError(null); }}
                    className="px-3 h-7 border border-hairline rounded-md text-xs text-slate-600 hover:bg-surface transition-colors"
                  >
                    キャンセル
                  </button>
                </div>
              </div>
            )}
            {task?.latestJob?.status === 'waiting_human' && task?.latestJob?.waitReason === 'browser_login' && (
              <BrowserSessionPanel />
            )}
            {deferredDetailTab === 'overview' && <OverviewTab task={task} subtaskActivities={subtaskActivities} onSubtaskFilePreview={onSubtaskFilePreview} />}
            {deferredDetailTab === 'activity' && <ProgressTab task={task} onViewFullLog={onViewFullLog} subtaskActivities={subtaskActivities} />}
            {deferredDetailTab === 'files' && <FilesTab section={section} currentPath={currentPath} entries={entries} pathSegments={pathSegments} taskId={taskId} onSectionChange={onSectionChange} onNavigate={onNavigate} onPreview={onPreview} onRefresh={onRefresh} isRefreshing={isRefreshing} />}
            {deferredDetailTab === 'trace' && <TraceTab taskId={taskId} />}
            {deferredDetailTab === 'browser' && <BrowserTab taskId={taskId} />}
            {deferredDetailTab === 'ssh' && <ConsoleTab taskId={taskId} />}
          </>
        )}
      </div>
      {!loading && task && (
        <div className="flex-shrink-0 border-t border-hairline bg-canvas px-3 py-2.5">
          <div className="flex gap-2 items-center">
            {onDelete && !isActiveJob ? (
              <button
                disabled={deleting}
                onClick={handleDelete}
                className="px-3 h-7 bg-canvas border border-red-200 text-red-700 dark:text-red-300 rounded-md text-xs font-medium disabled:opacity-50 hover:bg-red-50 dark:hover:bg-red-500/15 transition-colors"
              >
                {deleting ? '削除中...' : '削除'}
              </button>
            ) : null}
          </div>
        </div>
      )}
    </div>
  );
}