"use client";

import { useState, useCallback, useEffect } from "react";
import { WikiTree } from "./WikiTree";
import { WikiPage } from "./WikiPage";
import type { WikiManifest, WikiPage as WikiPageModel } from "@optage/sdk/client";
import type { WikiProgressStatus } from "@/hooks/useWikiProgress";

interface WikiViewProps {
  repositoryId: string;
  manifest: WikiManifest | null;
  selectedPageId: string | null;
  page: WikiPageModel | null;
  loading: boolean;
  error: string | null;
  onSelectPage: (pageId: string) => void;
  wikiStatus: WikiProgressStatus | null;
  onResume: () => void;
  onRegenerate: () => void;
  onCancel: () => void;
}

function phaseLabel(phase?: string): string {
  switch (phase) {
    case "scanning": return "Scanning repository";
    case "building-tree": return "Building module tree";
    case "planning": return "Planning documentation";
    case "leaf-docs": return "Generating pages";
    case "parent-docs": return "Generating parent docs";
    case "overview": return "Writing overview";
    case "guides": return "Creating guides";
    case "dd-docs": return "Generating detailed designs";
    default: return "Preparing";
  }
}

function formatElapsed(startedAt?: string): string | null {
  if (!startedAt) return null;
  const elapsed = Math.floor((Date.now() - new Date(startedAt).getTime()) / 1000);
  if (elapsed < 60) return `${elapsed}s`;
  const mins = Math.floor(elapsed / 60);
  const secs = elapsed % 60;
  return `${mins}m ${secs}s`;
}

function formatEta(etaMs?: number): string | null {
  if (etaMs == null || etaMs <= 0) return null;
  const secs = Math.ceil(etaMs / 1000);
  if (secs < 60) return `~${secs}s remaining`;
  const mins = Math.floor(secs / 60);
  const rem = secs % 60;
  return `~${mins}m ${rem}s remaining`;
}

function parseDDProgress(message?: string): { ddIndex: string; total: string; target: string } | null {
  if (!message) return null;
  const match = message.match(/DD(\d+)\s+of\s+(\d+):\s+(.+?)$/);
  if (!match) return null;
  return { ddIndex: match[1], total: match[2], target: match[3] };
}

export function WikiView({
  repositoryId,
  manifest,
  selectedPageId,
  page,
  loading,
  error,
  onSelectPage,
  wikiStatus,
  onResume,
  onRegenerate,
  onCancel,
}: WikiViewProps) {
  const [treeOpen, setTreeOpen] = useState(false);

  const isGenerating = wikiStatus?.state === "running";

  const [, setTick] = useState(0);
  useEffect(() => {
    if (!isGenerating) return;
    const id = setInterval(() => setTick((t) => t + 1), 1000);
    return () => clearInterval(id);
  }, [isGenerating]);

  const hasFailed = wikiStatus?.state === "error";
  const hasWiki = manifest !== null;

  const handleSelectPage = useCallback(
    (pageId: string) => {
      onSelectPage(pageId);
      setTreeOpen(false);
    },
    [onSelectPage],
  );

  // No wiki yet — show empty state with generate button
  if (!hasWiki && !isGenerating) {
    return (
      <div className="flex h-full items-center justify-center bg-rp-bg">
        <div className="text-center max-w-sm px-6">
          <div className="mb-6 text-rp-faint">
            <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" className="mx-auto">
              <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" />
              <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" />
              <path d="M8 7h8M8 11h6" />
            </svg>
          </div>
          <h2 className="text-r-xl font-semibold mb-2 text-rp-text">
            No documentation yet
          </h2>
          <p className="text-r-sm mb-6 text-rp-muted">
            Generate an AI-powered wiki from your codebase. This analyzes your repository and creates structured documentation automatically.
          </p>
          {hasFailed ? (
            <div className="space-y-3">
              <p className="text-r-sm text-rp-error">
                {wikiStatus?.message || "Generation failed. Please try again."}
              </p>
              <div className="flex items-center justify-center gap-3">
                <button onClick={onResume} className="btn-ghost">
                  Resume
                </button>
                <button onClick={onRegenerate} className="btn-accent">
                  Regenerate
                </button>
              </div>
            </div>
          ) : (
            <button onClick={onRegenerate} className="btn-accent">
              Generate Wiki
            </button>
          )}
        </div>
      </div>
    );
  }

  // Generating — show progress view
  if (isGenerating && !hasWiki) {
    const pct =
      typeof wikiStatus.completedSteps === "number" &&
      typeof wikiStatus.totalSteps === "number" &&
      wikiStatus.totalSteps > 0
        ? Math.round((wikiStatus.completedSteps / wikiStatus.totalSteps) * 100)
        : null;

    return (
      <div className="flex h-full items-center justify-center bg-rp-bg">
        <div className="text-center max-w-sm px-6">
          <div className="mb-6 flex justify-center">
            <div className="w-10 h-10 rounded-full border-2 border-rp-border/20 border-t-rp-accent animate-spin" />
          </div>
          <h2 className="text-r-lg font-semibold mb-1 text-rp-text">
            Generating documentation
          </h2>
          <p className="text-r-sm mb-1 text-rp-muted">
            {phaseLabel(wikiStatus.phase)}
            {wikiStatus.phase !== "dd-docs"
              ? (wikiStatus.message ? ` — ${wikiStatus.message}` : "...")
              : null}
          </p>
          {wikiStatus.phase === "dd-docs" && (() => {
            const dd = parseDDProgress(wikiStatus.message);
            return dd ? (
              <p className="text-r-2xs text-rp-faint font-mono truncate mb-1">
                DD {dd.ddIndex} of {dd.total}: {dd.target}
              </p>
            ) : wikiStatus.message ? (
              <p className="text-r-2xs text-rp-faint truncate mb-1">{wikiStatus.message}</p>
            ) : null;
          })()}
          {wikiStatus.startedAt && (
            <p className="text-r-2xs text-rp-faint mb-4">
              Elapsed: {formatElapsed(wikiStatus.startedAt)}
              {formatEta(wikiStatus.etaMs) && (
                <span className="ml-2">{formatEta(wikiStatus.etaMs)}</span>
              )}
            </p>
          )}

          {pct !== null && (
            <div className="space-y-2">
              <div className="h-1 rounded-full overflow-hidden bg-rp-border/20">
                <div
                  className="h-full rounded-full bg-rp-accent transition-all duration-500"
                  style={{ width: `${Math.max(3, pct)}%` }}
                />
              </div>
              <div className="flex justify-between text-r-2xs text-rp-faint">
                <span>{wikiStatus.completedSteps} of {wikiStatus.totalSteps} steps</span>
                <span>{pct}%</span>
              </div>
            </div>
          )}

          {typeof wikiStatus.pagesGenerated === "number" && wikiStatus.pagesGenerated > 0 && (
            <p className="mt-4 text-r-2xs text-rp-faint">
              {wikiStatus.pagesGenerated} pages generated
              {typeof wikiStatus.errors === "number" && wikiStatus.errors > 0
                ? ` · ${wikiStatus.errors} errors`
                : ""}
            </p>
          )}

          <button
            onClick={onCancel}
            className="mt-6 text-r-sm text-rp-muted hover:text-rp-error transition-colors"
          >
            Stop generation
          </button>
        </div>
      </div>
    );
  }

  // Wiki exists — normal view
  return (
    <div className="flex h-full flex-col lg:flex-row relative overflow-hidden">
      {/* Mobile tree toggle */}
      <button
        type="button"
        onClick={() => setTreeOpen(!treeOpen)}
        className="lg:hidden flex items-center gap-2 px-4 py-2.5 text-r-sm text-rp-muted border-b border-rp-border/10 bg-rp-bg shrink-0"
      >
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round">
          <path d="M2 4h12M2 8h12M2 12h12" />
        </svg>
        Pages
      </button>

      {/* Mobile overlay */}
      {treeOpen && (
        <div
          className="lg:hidden fixed inset-0 bg-black/40 z-40"
          onClick={() => setTreeOpen(false)}
        />
      )}

      {/* Tree sidebar */}
      <div
        className={`
          fixed top-0 left-0 bottom-0 z-50 w-64 bg-rp-bg transform transition-transform duration-200
          lg:static lg:w-60 lg:transform-none lg:transition-none lg:z-auto lg:shrink-0
          ${treeOpen ? "translate-x-0" : "-translate-x-full lg:translate-x-0"}
        `}
      >
        <WikiTree
          navigation={manifest!.navigation}
          pages={manifest!.pages}
          selectedPageId={selectedPageId}
          onSelectPage={handleSelectPage}
          onAction={isGenerating ? onCancel : hasWiki ? onResume : onRegenerate}
          onRegenerate={onRegenerate}
          actionLabel={isGenerating ? "Cancel" : hasWiki ? "Resume" : "Generate"}
          isGenerating={isGenerating}
          isCancelled={hasFailed}
          wikiStatus={wikiStatus}
        />
      </div>

      <div className="flex-1 min-w-0 flex flex-col relative overflow-hidden">
        <div className="flex-1 min-h-0 overflow-y-auto">
          <WikiPage
            repositoryId={repositoryId}
            manifest={manifest!}
            page={page}
            loading={loading}
            error={error}
            onSelectPage={handleSelectPage}
          />
        </div>
      </div>
    </div>
  );
}