import Link from 'next/link'
import {ArrowLeft, ArrowUpRight, FileCode2, RefreshCw, Terminal} from 'lucide-react'
import {languageLabel, rawSnippetUrl} from '@/lib/snippet-utils'
import {SnippetEditor} from '@/components/snippet-editor'

const API_BASE = 'https://snippets.rtast.cn'

type Snippet = { createdAt?: string; filename: string; content: string }

async function getSnippet(id: string): Promise<{ data?: Snippet; status: number }> {
    try {
        const response = await fetch(`${API_BASE}/${encodeURIComponent(id)}`, {cache: 'no-store'})
        if (!response.ok) return {status: response.status}
        return {data: await response.json(), status: response.status}
    } catch {
        return {status: 503}
    }
}

export default async function ReaderPage({params}: { params: Promise<{ snippet_id: string }> }) {
    const {snippet_id: id} = await params
    const result = await getSnippet(id)
    const snippet = result.data
    const message = result.status === 404 ? 'This snippet does not exist or has expired.' : 'The snippet server could not be reached.'

    return (
        <main className="min-h-screen bg-background text-foreground">
            <header className="border-b border-border">
                <div className="mx-auto flex max-w-6xl items-center justify-between px-5 py-4 lg:px-8"><Link href="/"
                                                                                                             className="flex items-center gap-3 font-mono text-sm font-semibold tracking-tight"><span
                    className="grid size-8 place-items-center rounded-lg bg-primary text-primary-foreground"><Terminal
                    size={16}/></span>KSnippets</Link><Link href="/"
                                                            className="inline-flex items-center gap-2 text-xs text-muted-foreground hover:text-foreground"><ArrowLeft
                    size={14}/> New snippet</Link></div>
            </header>
            <div className="mx-auto max-w-6xl px-5 py-10 lg:px-8 lg:py-16">
                {snippet ? <>
                    <div className="mb-8 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
                        <div><p className="mb-3 font-mono text-xs uppercase tracking-[0.2em] text-brand">snippet / <em>{id}</em></p><h1
                            className="flex items-center gap-3 text-3xl font-semibold tracking-[-0.03em]">
                            <FileCode2 size={25} className="text-brand"/>{snippet.filename}</h1><p
                            className="mt-3 text-sm text-muted-foreground">{snippet.createdAt ? new Date(snippet.createdAt).toLocaleString() : 'Published snippet'}
                            <span className="mx-2 text-border">·</span> <span
                                className="font-mono">{languageLabel(snippet.filename)}</span></p></div>
                        <a href={rawSnippetUrl(id)} target="_blank" rel="noreferrer"
                           className="inline-flex w-fit items-center gap-2 rounded-lg border border-border bg-card px-4 py-2.5 text-sm font-medium hover:bg-muted">Open
                            raw <ArrowUpRight size={15}/></a></div>
                    <SnippetEditor value={snippet.content} filename={snippet.filename} readOnly/>
                    <div
                        className="mt-4 font-mono text-xs text-muted-foreground">{snippet.content.split('\n').length} lines
                    </div>
                </> : <div className="mx-auto max-w-lg py-16 text-center">
                    <div
                        className="mx-auto mb-5 grid size-14 place-items-center rounded-2xl bg-muted text-muted-foreground">{result.status === 404 ? '404' :
                        <RefreshCw size={22}/>}</div>
                    <h1 className="text-2xl font-semibold tracking-tight">{result.status === 404 ? 'Snippet not found' : 'Connection error'}</h1>
                    <p className="mt-3 leading-6 text-muted-foreground">{message}</p>
                    <div className="mt-7 flex justify-center gap-3"><Link href="/"
                                                                          className="rounded-lg bg-primary px-4 py-2.5 text-sm font-medium text-primary-foreground">Create
                        a snippet</Link>{result.status !== 404 && <a href={`/${id}`}
                                                                     className="rounded-lg border border-border px-4 py-2.5 text-sm font-medium hover:bg-muted">Try
                        again</a>}</div>
                </div>}
            </div>
        </main>
    )
}