'use client';

import { use, useState } from 'react';
import Link from 'next/link';
import { ArrowLeft, ExternalLink, Pencil, Clock } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { PageTransition } from '@/components/page-transition';
import { ArticleStream } from '@/components/article-stream';
import { HistoryModal } from '@/components/history-modal';

export default function ArticlePage({
  params,
}: {
  params: Promise<{ title: string }>;
}) {
  const { title } = use(params);
  const decodedTitle = decodeURIComponent(title).replace(/_/g, ' ');
  const wikipediaUrl = `https://en.wikipedia.org/wiki/${title}`;
  const slug = title.replace(/%20/g, '_').replace(/ /g, '_');

  const [isEditMode, setIsEditMode] = useState(false);
  const [isHistoryOpen, setIsHistoryOpen] = useState(false);

  return (
    <main className="min-h-screen bg-background">
      <header className="sticky top-0 z-10 bg-background/95 backdrop-blur border-b border-border">
        <div className="max-w-5xl mx-auto px-4 lg:px-8 py-3 flex items-center justify-between">
          <div className="flex items-center gap-4">
            <Link
              href="/"
              className="text-muted-foreground hover:text-foreground transition-colors"
            >
              <ArrowLeft className="w-5 h-5" />
            </Link>
            <Link href="/" className="text-xl font-bold text-foreground">
              Wiki<span className="text-blue-500">+</span>
            </Link>
          </div>
          <div className="flex items-center gap-2">
            <Button
              variant="ghost"
              size="sm"
              className="gap-2"
              onClick={() => setIsHistoryOpen(true)}
              title="View History"
            >
              <Clock className="w-4 h-4" />
              <span className="hidden sm:inline">History</span>
            </Button>
            <Button
              variant="ghost"
              size="sm"
              className="gap-2"
              onClick={() => setIsEditMode(!isEditMode)}
              title={isEditMode ? 'Cancel Edit' : 'Edit Article'}
            >
              <Pencil className="w-4 h-4" />
              <span className="hidden sm:inline">{isEditMode ? 'Cancel' : 'Edit'}</span>
            </Button>
            <a
              href={wikipediaUrl}
              target="_blank"
              rel="noopener noreferrer"
              className="text-muted-foreground hover:text-foreground transition-colors p-2"
              title="View on Wikipedia"
            >
              <ExternalLink className="w-4 h-4" />
            </a>
            <PageTransition href="/random">
              <Button variant="ghost" size="sm" className="gap-2">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  className="w-4 h-4"
                >
                  <path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" />
                  <path d="M3 3v5h5" />
                  <path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16" />
                  <path d="M16 16h5v5" />
                </svg>
                Random
              </Button>
            </PageTransition>
          </div>
        </div>
      </header>

      <article className="max-w-5xl mx-auto px-4 lg:px-8 py-8">
        <h1 className="text-3xl sm:text-4xl font-bold text-foreground mb-8 leading-tight lg:pl-72">
          {decodedTitle}
        </h1>

        <ArticleStream
          title={title}
          slug={slug}
          decodedTitle={decodedTitle}
          isEditMode={isEditMode}
          onEditModeChange={setIsEditMode}
        />
      </article>

      <footer className="border-t border-border mt-12">
        <div className="max-w-5xl mx-auto px-4 lg:px-8 py-6 flex items-center justify-between lg:pl-72">
          <p className="text-sm text-muted-foreground">
            AI-generated from Wikipedia
          </p>
          <a
            href={wikipediaUrl}
            target="_blank"
            rel="noopener noreferrer"
            className="text-sm text-blue-500 hover:underline inline-flex items-center gap-1"
          >
            View original
            <ExternalLink className="w-3 h-3" />
          </a>
        </div>
      </footer>

      <HistoryModal
        slug={slug}
        isOpen={isHistoryOpen}
        onClose={() => setIsHistoryOpen(false)}
      />
    </main>
  );
}