import { Link } from 'react-router-dom';
import { useCustomPages } from '../../lib/customPagesStore';

/**
 * Landing page for user-created documentation at /docs/custom.
 *
 * Lists every custom page with an "Add Page" action. Empty state explains the
 * feature and links to the creator. Custom pages are persisted in the backend
 * (SQLite via @void-nav/api) and rendered dynamically; the "Beautify with AI"
 * action lives inside each page's editor.
 */
export function CustomPagesIndexPage() {
  const { pages, loading, error } = useCustomPages();

  return (
    <div className="mx-auto max-w-content">
      <div className="mb-6 flex flex-wrap items-center gap-3 border-b border-border pb-4">
        <h1 className="m-0">Custom Pages</h1>
        <span className="rounded-full border border-accent/25 bg-accent/8 px-2.5 py-0.5 font-mono text-[0.7rem] text-accent">
          DYNAMIC
        </span>
        <Link
          className="ml-auto cursor-pointer rounded-lg border border-accent/30 bg-accent/12 px-4 py-2 text-[0.85rem] font-medium text-accent no-underline transition-colors hover:bg-accent/20"
          to="/docs/custom/new"
        >
          + Add Page
        </Link>
      </div>

      <p className="mb-8 max-w-[680px] text-[0.95rem] text-fg-dim">
        Documentation pages you create on the fly. Write rough notes in the editor,
        then hit <strong className="text-purple">✦ Beautify with AI</strong> to
        regenerate the page as structured HTML with generated diagrams.
      </p>

      {error && (
        <p className="mb-4 rounded-lg border border-red/25 bg-red/8 px-3 py-2 font-mono text-[0.8rem] text-red">
          {error}
        </p>
      )}

      {loading ? (
        <p className="font-mono text-sm text-muted">Loading…</p>
      ) : pages.length === 0 ? (
        <div className="rounded-xl border border-dashed border-border bg-surface p-10 text-center">
          <p className="m-0 mb-1 text-fg-dim">No custom pages yet.</p>
          <p className="m-0 text-[0.85rem] text-muted">
            Click <span className="text-accent">+ Add Page</span> to create your first one.
          </p>
        </div>
      ) : (
        <div className="grid grid-cols-2 gap-4 max-[900px]:grid-cols-1">
          {pages.map((page) => (
            <Link
              key={page.id}
              to={`/docs/custom/${page.slug}`}
              className="block rounded-xl border border-border bg-surface p-5 no-underline transition-colors hover:border-accent/30 hover:bg-surface-raised"
            >
              <div className="mb-2 flex items-center gap-3">
                <span className="text-xl">{page.icon}</span>
                <h3 className="m-0 text-fg-bright">{page.title}</h3>
                {page.beautified && (
                  <span className="ml-auto rounded-full border border-purple/25 bg-purple/8 px-2 py-0.5 font-mono text-[0.65rem] text-purple">
                    ✦ AI
                  </span>
                )}
              </div>
              <p className="m-0 text-[0.85rem] text-fg-dim">
                {page.blurb || <span className="italic text-muted">No description</span>}
              </p>
            </Link>
          ))}
        </div>
      )}
    </div>
  );
}
