"use client";

import { useState, useEffect, use } from "react";
import { useRouter } from "next/navigation";
import { ArrowLeft, Eye } from "lucide-react";
import PostEditor from "@/components/PostEditor";
import type { Post } from "@/lib/posts";

export default function EditPostPage({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const router = useRouter();
  const { slug } = use(params);
  const [post, setPost] = useState<Post | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    async function load() {
      try {
        const res = await fetch(`/api/posts/${slug}`);
        if (!res.ok) throw new Error("文章未找到");
        setPost(await res.json());
      } catch (err: unknown) {
        setError(err instanceof Error ? err.message : "加载失败");
      } finally {
        setLoading(false);
      }
    }
    load();
  }, [slug]);

  if (loading) {
    return (
      <div className="px-4 py-6 md:px-8 md:py-8">
        <div className="flex items-center gap-3 mb-8">
          <button type="button" onClick={() => router.back()} className="p-1 -ml-1 rounded hover:bg-surface text-muted hover:text-text transition-colors" title="返回">
            <ArrowLeft size={16} />
          </button>
          <h2 className="text-lg font-bold text-text">编辑文章</h2>
        </div>
        <div className="text-center py-20 text-muted text-sm">加载中...</div>
      </div>
    );
  }

  if (error || !post) {
    return (
      <div className="px-4 py-6 md:px-8 md:py-8">
        <div className="flex items-center gap-3 mb-8">
          <button type="button" onClick={() => router.back()} className="p-1 -ml-1 rounded hover:bg-surface text-muted hover:text-text transition-colors" title="返回">
            <ArrowLeft size={16} />
          </button>
          <h2 className="text-lg font-bold text-text">编辑文章</h2>
        </div>
        <div className="text-center py-20 text-danger text-sm">{error || "文章未找到"}</div>
      </div>
    );
  }

  return (
    <div className="px-4 py-6 md:px-8 md:py-8">
      <div className="flex items-center justify-between mb-1">
        <div className="flex items-center gap-3">
          <button type="button" onClick={() => router.back()} className="p-1 -ml-1 rounded hover:bg-surface text-muted hover:text-text transition-colors" title="返回">
            <ArrowLeft size={16} />
          </button>
          <h2 className="text-lg font-bold text-text">编辑文章</h2>
        </div>
        <button
          type="button"
          onClick={async (e) => {
            const btn = e.currentTarget;
            const orig = btn.innerHTML;
            btn.disabled = true;
            btn.textContent = "⏳ 启动中...";
            try {
              const res = await fetch("/api/hugo");
              const data = await res.json();
              if (data.running) {
                window.open(`${location.protocol}//${location.hostname}:1313/${post.frontMatter.slug}.html`, "_blank");
              } else {
                alert("Hugo 预览启动失败");
              }
            } catch {
              alert("Hugo 预览启动失败");
            } finally {
              btn.disabled = false;
              btn.innerHTML = orig;
            }
          }}
          className="flex items-center gap-1.5 px-3 py-1.5 text-[12px] rounded-md border border-line text-muted hover:text-accent hover:border-accent/30 transition-colors disabled:opacity-50"
          title="预览"
        >
          <Eye size={13} /> 预览
        </button>
      </div>
      <p className="text-[13px] text-muted mb-8">{post.frontMatter.title}</p>
      <PostEditor
        initialData={{ frontMatter: post.frontMatter, content: post.content, dirPath: post.dirPath }}
        isEditing
      />
    </div>
  );
}