altbin.dev/app/[id]/page.tsx

'use client';

import Prism from 'prismjs';
import { use, useCallback, useEffect, useState } from 'react';

import 'prismjs/plugins/line-numbers/prism-line-numbers.css';
import 'prismjs/plugins/line-numbers/prism-line-numbers.js';
import 'prismjs/themes/prism-tomorrow.css';

import AuthSection from '@/components/paste-form/AuthSection';
import CodeViewer from '@/components/paste/CodeViewer';
import LoadingPaste from '@/components/paste/LoadingPaste';
import PasswordForm from '@/components/paste/Password';
import PasteSidebar from '@/components/paste/Sidebar';
import { Paste } from '@/types/paste';

async function loadLanguage(lang: string) {
  try {
    await import(`prismjs/components/prism-${lang}.js`);
  } catch {
    console.warn(`[Prism] Language '${lang}' introuvable. Fallback -> plaintext`);
  }
}

export default function PastePage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = use(params);

  const [paste, setPaste] = useState<Paste | null>(null);
  const [error, setError] = useState('');
  const [loading, setLoading] = useState(true);
  const [language, setLanguage] = useState<string>('language-javascript');

  const fetchPaste = useCallback(async (pwd?: string) => {
    setLoading(true);
    const res = await fetch(`/api/paste/${id}`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ password: pwd || '' }),
    });

    if (res.status === 403) {
      setError('Invalid password.');
      setLoading(false);
      return;
    }
    if (res.status === 404) {
      setError('Paste not found or expired.');
      setLoading(false);
      return;
    }

    const data: Paste = await res.json();
    setPaste(data);

    const content = data.content.toLowerCase();

    let detected = 'javascript';
    if (content.includes('select ') || content.includes('insert into')) {
      detected = 'sql';
    } else if (content.includes('function') || content.includes('const')) {
      detected = 'javascript';
    } else if (content.includes('import ') || content.includes('export ')) {
      detected = 'typescript';
    } else if (content.includes('{') && content.includes('}')) {
      detected = 'json';
    } else if (content.includes('#include') || content.includes('int main')) {
      detected = 'cpp';
    } else if (content.includes('arduino')) {
      detected = 'arduino';
    } else {
      detected = 'bash';
    }

    await loadLanguage(detected);
    setLanguage(`language-${detected}`);

    setLoading(false);
  }, [id]);

  useEffect(() => {
    fetchPaste();
  }, [fetchPaste]);

  useEffect(() => {
    if (paste?.content) Prism.highlightAll();
  }, [paste, language]);

  if (loading) return <LoadingPaste />;

  if (error || (paste?.protected && !paste?.content)) {
    return <PasswordForm error={error} onSubmit={(pwd) => fetchPaste(pwd)} />;
  }

  return (
    <div className="relative w-screen h-screen bg-[#0e0f13] text-white flex overflow-hidden">
      <CodeViewer paste={paste!} language={language} />
      <PasteSidebar paste={paste!} id={id} />
      <AuthSection />
    </div>
  );
}