import Link from 'next/link'
import { Card } from '@/libs/frontend-ui-primitives'
import DisclosureSection from '@/components/common/DisclosureSection'
import type { ExplorerFeatureAction, ExplorerFeaturePage } from '@/data/explorerOperations'

function ActionLink({ action }: { action: ExplorerFeatureAction }) {
  const className = 'inline-flex items-center text-sm font-semibold text-primary-600 hover:underline'
  const label = `${action.label} ->`

  if (action.external) {
    return (
      <a href={action.href} className={className} target="_blank" rel="noopener noreferrer">
        {label}
      </a>
    )
  }

  return (
    <Link href={action.href} className={className}>
      {label}
    </Link>
  )
}

export default function FeatureLandingPage({ page }: { page: ExplorerFeaturePage }) {
  return (
    <div className="container mx-auto px-4 py-4 sm:py-6">
      <div className="mb-4 max-w-4xl">
        <div className="mb-2 inline-flex rounded-full border border-sky-200 bg-sky-50 px-2.5 py-0.5 text-[10px] font-semibold uppercase tracking-[0.18em] text-sky-700 dark:border-sky-900/50 dark:bg-sky-950/30 dark:text-sky-200">
          {page.eyebrow}
        </div>
        <h1 className="mb-2 text-2xl font-bold text-gray-900 dark:text-white sm:text-3xl">
          {page.title}
        </h1>
        <p className="text-sm leading-6 text-gray-600 dark:text-gray-400">
          {page.description}
        </p>
      </div>

      {page.note ? (
        <DisclosureSection title="Scope note" defaultOpen={false} alwaysCollapsible className="mb-4">
          <Card className="border border-amber-200 bg-amber-50/70 dark:border-amber-900/50 dark:bg-amber-950/20">
            <p className="text-sm leading-6 text-amber-950 dark:text-amber-100">{page.note}</p>
          </Card>
        </DisclosureSection>
      ) : null}

      <DisclosureSection title="Related actions" defaultOpen={false} alwaysCollapsible>
        <div className="grid gap-3 lg:grid-cols-2">
          {page.actions.map((action) => (
            <Card key={`${action.title}-${action.href}`} className="border border-gray-200 dark:border-gray-700">
              <div className="flex h-full flex-col">
                <div className="text-base font-semibold text-gray-900 dark:text-white">{action.title}</div>
                <p className="mt-2 flex-1 text-sm leading-6 text-gray-600 dark:text-gray-400">{action.description}</p>
                <div className="mt-4">
                  <ActionLink action={action} />
                </div>
              </div>
            </Card>
          ))}
        </div>
      </DisclosureSection>
    </div>
  )
}
