import Link from 'next/link';
import type { Route } from 'next';
import { PowerOff } from 'lucide-react';

import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';

interface ModuleDisabledPageProps {
  /** Human-readable name for the disabled feature, e.g. "Expenses". */
  moduleName: string;
  /** Optional short sentence explaining what the module does, shown
   *  below the headline. Defaults to a generic message when omitted. */
  description?: string;
  /** Admin settings href used for the "Enable in System Settings" CTA.
   *  Pass the full URL including portSlug. The CTA is hidden when no
   *  href is supplied (e.g. for users who lack admin permissions; the
   *  page renderer should pass null in that case). */
  settingsHref?: string | null;
  /** Optional fallback href for non-admin users (e.g. take them home).
   *  Defaults to the dashboard route derived from settingsHref's port. */
  fallbackHref?: string;
}

/**
 * Friendly "this module is off for your port" page rendered in place of
 * a real feature surface when the per-port toggle is disabled. Used
 * instead of a 404 so that bookmarks land somewhere meaningful and the
 * admin can re-enable from one click.
 */
export function ModuleDisabledPage({
  moduleName,
  description,
  settingsHref,
  fallbackHref,
}: ModuleDisabledPageProps) {
  return (
    <div className="flex min-h-[60vh] items-center justify-center">
      <Card className="max-w-md text-center shadow-sm">
        <CardContent className="p-8 space-y-4">
          <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-slate-100 text-slate-500">
            <PowerOff className="h-6 w-6" aria-hidden />
          </div>
          <div className="space-y-2">
            <h1 className="text-xl font-semibold text-foreground">
              {moduleName} is turned off for this port
            </h1>
            <p className="text-sm text-muted-foreground">
              {description ??
                `An administrator has disabled the ${moduleName} module for this port. Previously-saved data is preserved and will reappear when the module is re-enabled.`}
            </p>
          </div>
          <div className="flex flex-wrap items-center justify-center gap-2 pt-2">
            {settingsHref ? (
              <Button asChild>
                <Link href={settingsHref as Route}>Enable in System Settings</Link>
              </Button>
            ) : null}
            {fallbackHref ? (
              <Button asChild variant="outline">
                <Link href={fallbackHref as Route}>Back to dashboard</Link>
              </Button>
            ) : null}
          </div>
        </CardContent>
      </Card>
    </div>
  );
}
