// Projects — URL `/dashboard`. The live app screen AND the paywall showcase.
// `useSubscription` streams the tenant's projects (first paint from the layout
// gate, upgraded live on WS connect). Creating one calls `projects.create`,
// which the api gates on the billing `projects` entitlement — the 4th on the
// free plan rejects with a typed `EntitlementExceeded`, and we branch on that
// (`isEntitlementExceeded`) to show the upgrade CTA instead of a raw error.
import type { ReactNode } from 'react'
import { useState, type FormEvent } from 'react'
import type { PageMeta } from '@voltro/web'
import { T, useT } from '@voltro/i18n'
import { getCatalog } from '../../locales'
import { isEntitlementExceeded, useMutation, useSubscription } from '../../lib/api'

export const renderMode = 'ssr' as const

export const meta = ({ locale }: { readonly locale: string }): PageMeta => ({
  title: getCatalog(locale)['meta.overview.title'],
})

export default function Projects(): ReactNode {
  // Tag + row type both come from the generated procedure map — no annotation.
  const { data: live } = useSubscription('projects.list')
  const { mutate, pending } = useMutation('projects.create')
  const projects = live ?? []
  const [name, setName] = useState('')
  const [paywalled, setPaywalled] = useState(false)
  const placeholder = useT('projects.new.placeholder')

  const onCreate = (e: FormEvent): void => {
    e.preventDefault()
    const trimmed = name.trim()
    if (trimmed === '') return
    void mutate({ name: trimmed })
      .then(() => { setName(''); setPaywalled(false) })
      .catch((err: unknown) => { if (isEntitlementExceeded(err)) setPaywalled(true) })
  }

  return (
    <section>
      <h1><T id="projects.heading" /></h1>

      <form className="row" onSubmit={onCreate}>
        <input
          aria-label={placeholder} placeholder={placeholder}
          value={name} onChange={(e) => setName(e.target.value)}
        />
        <button type="submit" className="btn" disabled={pending}>
          <T id="projects.new.submit" />
        </button>
      </form>

      {paywalled ? (
        <div className="paywall" role="alert">
          <strong><T id="projects.paywall.title" /></strong>
          <p className="muted"><T id="projects.paywall.body" /></p>
          <a className="btn" href="/dashboard/billing"><T id="projects.paywall.cta" /></a>
        </div>
      ) : null}

      {projects.length === 0 ? (
        <p className="empty"><T id="projects.empty" /></p>
      ) : (
        <ul className="cards" style={{ marginTop: '1.25rem' }}>
          {projects.map((p) => (
            <li className="card" key={p.id}>
              <div className="value">{p.name}</div>
              <div className="label">
                <T id="projects.created" values={{ when: new Date(p.createdAt).toLocaleDateString() }} />
              </div>
            </li>
          ))}
        </ul>
      )}
    </section>
  )
}