import { ArrowLeft, BookOpen, Clock, FileText, History } from 'lucide-react';
import { useState } from 'react';
import { Link, useParams } from 'react-router-dom';

import { Spinner } from '@/components/ui/spinner';
import { useWikiPage } from '@/hooks/wiki/useWikiPage';
import { useWikiRevisions } from '@/hooks/wiki/useWikiRevisions';
import { cn, timeAgo } from '@/lib/utils';

export function RepoWikiDetailPage() {
  const { workspaceName = '', repoName = '', slug } = useParams();

  const { data: page, isLoading, error } = useWikiPage(workspaceName, repoName, slug ?? null);
  const { data: revisions } = useWikiRevisions(workspaceName, repoName, slug ?? null);

  const [activeTab, setActiveTab] = useState<'content' | 'history'>('content');

  if (isLoading) {
    return (
      <div className="flex items-center gap-2 p-8 text-[14px] text-muted-foreground">
        <Spinner />
        Loading wiki page…
      </div>
    );
  }

  if (error || !page) {
    return (
      <div className="flex flex-col items-center justify-center px-8 py-20 text-center">
        <div className="grid size-16 place-items-center rounded-2xl bg-muted/40">
          <BookOpen className="size-7 text-muted-foreground/40" />
        </div>
        <h2 className="mt-5 text-lg font-semibold text-foreground">Page not found</h2>
        <p className="mt-2 max-w-sm text-[13px] text-muted-foreground">
          This wiki page doesn't exist or you don't have permission to view it.
        </p>
        <Link
          to={`/${workspaceName}/repos/${repoName}/wiki`}
          className="mt-4 text-[13px] text-primary hover:underline"
        >
          Back to wiki
        </Link>
      </div>
    );
  }

  return (
    <div className="px-6 pt-6 pb-10">
      <Link
        to={`/${workspaceName}/repos/${repoName}/wiki`}
        className="mb-4 inline-flex items-center gap-1.5 text-[13px] text-muted-foreground hover:text-foreground transition-colors"
      >
        <ArrowLeft className="size-3.5" />
        Back to wiki
      </Link>

      <div className="mb-6">
        <h1 className="text-xl font-semibold text-foreground">{page.title}</h1>
        <div className="mt-2 flex items-center gap-3 text-[12px] text-muted-foreground">
          <span className="flex items-center gap-1">
            <Clock className="size-3" />
            Updated {timeAgo(page.updated_at)}
          </span>
          <span>Version {page.version}</span>
        </div>
      </div>

      <div className="mb-4 flex items-center gap-1 border-b border-border">
        <button
          type="button"
          onClick={() => setActiveTab('content')}
          className={cn(
            'flex items-center gap-1.5 border-b-2 px-4 py-2.5 text-[13px] font-medium transition-colors',
            activeTab === 'content'
              ? 'border-primary text-foreground'
              : 'border-transparent text-muted-foreground hover:text-foreground',
          )}
        >
          <FileText className="size-3.5" />
          Content
        </button>
        <button
          type="button"
          onClick={() => setActiveTab('history')}
          className={cn(
            'flex items-center gap-1.5 border-b-2 px-4 py-2.5 text-[13px] font-medium transition-colors',
            activeTab === 'history'
              ? 'border-primary text-foreground'
              : 'border-transparent text-muted-foreground hover:text-foreground',
          )}
        >
          <History className="size-3.5" />
          History
          {revisions && revisions.length > 0 && (
            <span className="ml-1 rounded-full bg-muted px-2 py-0.5 text-[11px]">
              {revisions.length}
            </span>
          )}
        </button>
      </div>

      {activeTab === 'content' && (
        <div className="rounded-xl border border-border bg-card p-5">
          <div className="prose prose-sm max-w-none text-[14px] text-foreground whitespace-pre-wrap">
            {page.content}
          </div>
        </div>
      )}

      {activeTab === 'history' && (
        <div className="space-y-3">
          {revisions && revisions.length > 0 ? (
            revisions.map((revision) => (
              <div
                key={revision.id}
                className="flex items-start gap-3 rounded-xl border border-border bg-card px-4 py-3"
              >
                <History className="mt-0.5 size-4 shrink-0 text-muted-foreground" />
                <div className="min-w-0 flex-1">
                  <div className="flex items-center gap-2">
                    <span className="text-[13px] font-medium text-foreground">
                      Version {revision.version}
                    </span>
                    <span className="text-[12px] text-muted-foreground">
                      {timeAgo(revision.created_at)}
                    </span>
                  </div>
                  {revision.commit_message && (
                    <p className="mt-0.5 text-[12px] text-muted-foreground">
                      {revision.commit_message}
                    </p>
                  )}
                </div>
              </div>
            ))
          ) : (
            <div className="py-8 text-center text-[13px] text-muted-foreground">
              No revision history available
            </div>
          )}
        </div>
      )}
    </div>
  );
}
