import Link from 'next/link';
import { ChevronRight } from 'lucide-react';
import type { Metadata } from 'next';

const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:4001';

async function getWikiTerm(key: string) {
  try {
    const res = await fetch(`${API_URL}/api/wiki/${encodeURIComponent(key)}`, { next: { revalidate: 60 } });
    if (!res.ok) throw new Error('Failed to fetch wiki term');
    return res.json();
  } catch (error) {
    console.error(error);
    return null;
  }
}

export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }): Promise<Metadata> {
  const { slug } = await params;
  const term = await getWikiTerm(slug);
  if (!term) return { title: 'ترکیب علمی یافت نشد' };

  return {
    title: term.metaTitle || term.term,
    description: term.metaDescription || term.definition?.substring(0, 160),
  };
}

export default async function WikiTermPage({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  const term = await getWikiTerm(slug);

  if (!term) {
    return (
      <div className="min-h-[50vh] flex flex-col items-center justify-center font-vazir text-center" dir="rtl">
        <h1 className="text-3xl font-black text-medical-gray-900 mb-4">ترکیب علمی یافت نشد</h1>
        <Link href="/wiki" className="text-canina-blue font-bold flex items-center gap-2">
          <ChevronRight className="w-4 h-4" />
          بازگشت به دانشنامه
        </Link>
      </div>
    );
  }

  return (
    <div className="bg-white py-20 px-4 font-vazir" dir="rtl">
      <div className="max-w-4xl mx-auto">
        <Link href="/wiki" className="inline-flex items-center gap-2 text-medical-gray-400 hover:text-canina-blue transition-colors font-bold mb-8">
          <ChevronRight className="w-5 h-5" />
          بازگشت به دانشنامه
        </Link>

        <h1 className="text-4xl lg:text-5xl font-black text-medical-gray-900 mb-6 leading-tight">
          {term.term}
        </h1>

        <div 
          className="prose prose-lg prose-medical-gray max-w-none prose-headings:font-black prose-p:leading-relaxed prose-a:text-canina-blue"
          dangerouslySetInnerHTML={{ __html: term.definition }}
        />
      </div>
    </div>
  );
}