'use client'

import { BlocksIcon } from 'lucide-react'
import { TabbedLexiconViewer } from '@/app/components'
import { getAllSchemas, getLexicon, parseLexiconFields, } from '@/app/lib/lexicon'
import { LEXICON_TABS } from '@/app/data/content'

export function DefinitionsSection() {
    const allSchemas = getAllSchemas()

    // Build tab configs from the defined NSIDs
    const tabs = LEXICON_TABS.map((nsid) => {
        const schema = getLexicon(nsid)
        return schema ? {
            nsid,
            schema,
            fields: parseLexiconFields(schema),
        } : null
    }).filter((tab) => tab !== null)

    if (tabs.length === 0) {
        return (
            <section id="definitions" className="flex flex-col gap-8">
                <h2 className="font-display font-semibold text-3xl sm:text-4xl leading-tight tracking-tighter text-base-content">
                    Definitions
                </h2>
                <p className="text-xl leading-snug tracking-tight text-muted">
                    Failed to load lexicon definitions. Please try again later.
                </p>
            </section>
        )
    }

    return (
        <section id="definitions" className="flex flex-col gap-8">
            <h2 className="font-display font-semibold text-3xl sm:text-4xl leading-tight tracking-tighter text-base-content">
                Definitions
            </h2>

            <p className="text-base sm:text-xl leading-snug tracking-tight text-muted">
                We currently define three main lexicons that cover the core building
                blocks of long-form platforms: where content lives, what it
                contains, and how users connect with publications.
            </p>

            <TabbedLexiconViewer tabs={ tabs } allSchemas={ allSchemas } />

            {/* Modularity callout */}
            <div className="flex gap-4 rounded-2xl border border-border bg-base-200 p-4">
                <div className="pt-1">
                    <BlocksIcon className="size-4 text-base-content" />
                </div>
                <p className="flex-1 text-sm sm:text-base leading-snug tracking-tight text-muted">
                    <span className="font-semibold">Modularity.</span>{ ' ' }
                    Each lexicon is independent. Use them together for full support, or implement only
                    what your platform requires.
                </p>
            </div>
        </section>
    )
}