import Link from 'next/link';
import {
  Bell,
  Briefcase,
  Database,
  FileText,
  HardDrive,
  Key,
  LayoutDashboard,
  Mail,
  Palette,
  ScrollText,
  Settings,
  Shield,
  Sliders,
  Tag,
  Upload,
  Users,
  Webhook,
} from 'lucide-react';

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { PageHeader } from '@/components/shared/page-header';

interface AdminSection {
  href: string;
  label: string;
  description: string;
  icon: typeof Settings;
}

const SECTIONS: AdminSection[] = [
  {
    href: 'users',
    label: 'Users',
    description: 'CRM accounts, role assignments, and per-user residential access toggles.',
    icon: Users,
  },
  {
    href: 'invitations',
    label: 'Invitations',
    description: 'Send invitations, track pending invites, and resend or revoke them.',
    icon: Mail,
  },
  {
    href: 'roles',
    label: 'Roles & Permissions',
    description: 'Default permission sets and per-port role overrides.',
    icon: Shield,
  },
  {
    href: 'audit',
    label: 'Audit Log',
    description: 'Searchable log of every authenticated mutation in the system.',
    icon: ScrollText,
  },
  {
    href: 'email',
    label: 'Email Settings',
    description: 'From address, signatures, and per-port SMTP overrides.',
    icon: Mail,
  },
  {
    href: 'documenso',
    label: 'Documenso & EOI',
    description: 'API credentials, EOI template, and default in-app vs Documenso pathway.',
    icon: FileText,
  },
  {
    href: 'reminders',
    label: 'Reminders',
    description: 'Default reminder behaviour and the daily-digest delivery window.',
    icon: Bell,
  },
  {
    href: 'branding',
    label: 'Branding',
    description: 'App name, logo, primary color, and email header/footer HTML.',
    icon: Palette,
  },
  {
    href: 'settings',
    label: 'System Settings',
    description: 'Generic key/value configuration store for advanced flags.',
    icon: Settings,
  },
  {
    href: 'webhooks',
    label: 'Webhooks',
    description: 'Outgoing webhook subscriptions, secrets, and delivery log.',
    icon: Webhook,
  },
  {
    href: 'forms',
    label: 'Forms',
    description: 'Form templates used by client-facing inquiry and intake flows.',
    icon: Sliders,
  },
  {
    href: 'templates',
    label: 'Document Templates',
    description: 'PDF + email templates with merge-field placeholders.',
    icon: FileText,
  },
  {
    href: 'tags',
    label: 'Tags',
    description: 'Color-coded tags applied to clients, yachts, companies, and interests.',
    icon: Tag,
  },
  {
    href: 'custom-fields',
    label: 'Custom Fields',
    description: 'Tenant-defined fields for clients, yachts, and reservations.',
    icon: Key,
  },
  {
    href: 'reports',
    label: 'Reports',
    description: 'Saved analytics views and ad-hoc query results.',
    icon: LayoutDashboard,
  },
  {
    href: 'monitoring',
    label: 'Queue Monitoring',
    description: 'BullMQ queue health, throughput, and retry diagnostics.',
    icon: Database,
  },
  {
    href: 'import',
    label: 'Bulk Import',
    description: 'CSV-driven imports for clients, yachts, and reservations.',
    icon: Upload,
  },
  {
    href: 'backup',
    label: 'Backup & Restore',
    description: 'Database snapshots and on-demand exports.',
    icon: HardDrive,
  },
  {
    href: 'ports',
    label: 'Ports',
    description: 'Manage the marinas/ports this installation serves.',
    icon: Briefcase,
  },
  {
    href: 'onboarding',
    label: 'Onboarding',
    description: 'Initial-setup wizard for fresh ports.',
    icon: LayoutDashboard,
  },
  {
    href: 'ocr',
    label: 'Receipt OCR',
    description: 'Configure the AI provider used by the mobile receipt scanner.',
    icon: ScrollText,
  },
];

export default async function AdminLandingPage({
  params,
}: {
  params: Promise<{ portSlug: string }>;
}) {
  const { portSlug } = await params;
  return (
    <div className="space-y-6">
      <PageHeader
        title="Administration"
        description="Per-port configuration and system administration. Each card below opens a dedicated settings page."
      />
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
        {SECTIONS.map((s) => {
          const Icon = s.icon;
          return (
            <Link
              key={s.href}
              // eslint-disable-next-line @typescript-eslint/no-explicit-any
              href={`/${portSlug}/admin/${s.href}` as any}
              className="block group"
            >
              <Card className="h-full transition-colors group-hover:border-primary/50 group-hover:bg-muted/30">
                <CardHeader className="flex flex-row items-start gap-3 space-y-0 pb-2">
                  <Icon className="h-5 w-5 mt-0.5 text-muted-foreground group-hover:text-primary" />
                  <div className="flex-1">
                    <CardTitle className="text-base">{s.label}</CardTitle>
                  </div>
                </CardHeader>
                <CardContent>
                  <CardDescription>{s.description}</CardDescription>
                </CardContent>
              </Card>
            </Link>
          );
        })}
      </div>
    </div>
  );
}