pn-new-crm/src/app/(dashboard)/[portSlug]/admin/ai/page.tsx

import Link from 'next/link';
import { Bot, FileText, Brain, ExternalLink } from 'lucide-react';

import { RegistryDrivenForm } from '@/components/admin/shared/registry-driven-form';
import { PageHeader } from '@/components/shared/page-header';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { OcrSettingsForm } from '@/components/admin/ocr-settings-form';

interface FeatureLink {
  href: string;
  icon: typeof Bot;
  title: string;
  description: string;
}

const FEATURE_LINKS: FeatureLink[] = [
  {
    href: '../berth-pdf-parser',
    icon: FileText,
    title: 'Berth PDF parser',
    description:
      'Three-tier AcroForm → OCR → AI pipeline. The AI pass costs tokens; reps invoke it manually when OCR confidence is low.',
  },
  {
    href: '../recommender',
    icon: Brain,
    title: 'Berth recommender',
    description:
      'Rule-based today; future versions will optionally use embeddings for soft preference matching. AI use is gated by the master switch above.',
  },
];

export default function AiAdminPage() {
  return (
    <div className="space-y-6">
      <PageHeader
        title="AI configuration"
        description="One place to manage every AI-using feature. Provider credentials and the master AI switch live here; per-feature thresholds remain in their dedicated pages, linked below."
        eyebrow="ADMIN"
      />

      <RegistryDrivenForm
        title="Master controls"
        description="Hard kill switch + budget guardrails covering every AI surface in this port."
        sections={['ai.master']}
      />

      <RegistryDrivenForm
        title="Provider credentials"
        description="Shared API keys used by AI-enabled features. AES-encrypted at rest. Per-feature pages can override the model on a feature-by-feature basis."
        sections={['ai.providers']}
      />

      <Card>
        <CardHeader>
          <CardTitle className="text-base flex items-center gap-2">
            <Bot className="h-4 w-4" /> Receipt OCR
          </CardTitle>
          <CardDescription>
            Provider, model, and confidence thresholds for the receipt scanner. AI fallback only
            runs when the on-device parser is uncertain.
          </CardDescription>
        </CardHeader>
        <CardContent>
          <OcrSettingsForm embedded />
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle className="text-base flex items-center gap-2">
            <Bot className="h-4 w-4" /> Per-feature settings
          </CardTitle>
          <CardDescription>
            Feature-specific tuning lives on each feature&apos;s admin page. They all read the
            master switch + provider credentials configured above.
          </CardDescription>
        </CardHeader>
        <CardContent className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
          {FEATURE_LINKS.map((f) => (
            <Link
              key={f.href}
              href={f.href as never}
              className="rounded-md border bg-card p-3 hover:border-primary transition-colors block"
            >
              <div className="flex items-center gap-2 text-sm font-medium">
                <f.icon className="h-4 w-4 text-muted-foreground" />
                {f.title}
                <ExternalLink className="ml-auto h-3 w-3 opacity-50" />
              </div>
              <p className="mt-1 text-xs text-muted-foreground">{f.description}</p>
            </Link>
          ))}
        </CardContent>
      </Card>
    </div>
  );
}