import { ArrowLeft, Construction, MonitorPlay } from "lucide-react";
import { Link } from "@/i18n/navigation";

type Props = {
  boardId: string;
  feature: string;
};

const labels: Record<string, { title: string; description: string }> = {
  "edit-design": {
    title: "Design Studio",
    description: "The design editor will live here when the studio workflow is implemented.",
  },
  preview: {
    title: "Preview",
    description: "A dedicated preview workflow will live here. The detail page already shows the current board preview.",
  },
  templates: {
    title: "Templates",
    description: "Template browsing, assignment, and template locking will live here.",
  },
  schedule: {
    title: "Schedule",
    description: "Scheduled display changes and conflict review will live here.",
  },
  "version-history": {
    title: "Version History",
    description: "Revision browsing and restore controls will live here.",
  },
};

export default function MenuBoardPlaceholderPage({ boardId, feature }: Props) {
  const content = labels[feature] ?? {
    title: "Menu board workflow",
    description: "This menu-board action has not been implemented yet.",
  };

  return (
    <div className="fixed inset-0 z-[80] flex flex-col overflow-hidden bg-[var(--bg)] text-[var(--text)]">
      <header className="flex h-auto shrink-0 flex-col gap-3 border-b border-[var(--border)] bg-[var(--bg-elevated)] px-4 py-3 sm:h-20 sm:flex-row sm:items-center sm:justify-between sm:px-6">
        <div className="flex min-w-0 items-center gap-3">
          <span className="grid h-11 w-11 shrink-0 place-items-center rounded-xl border border-[var(--border)] bg-[var(--bg)] text-[var(--accent)]">
            <MonitorPlay className="h-5 w-5" />
          </span>
          <div className="flex items-center gap-3">
            <div>
              <p className="text-xs font-medium uppercase tracking-wide text-[var(--text-faint)]">Menu Board</p>
              <h1 className="truncate text-lg font-semibold text-[var(--text)]">{content.title}</h1>
            </div>
          </div>
        </div>
        <Link
          href={`/dashboard/business/menu-boards/${boardId}`}
          className="inline-flex items-center justify-center gap-2 rounded-lg border border-[var(--border)] bg-[var(--bg)] px-4 py-2 text-sm font-medium text-[var(--text-muted)] transition hover:bg-[var(--bg-hover)] hover:text-[var(--text)]"
        >
          <ArrowLeft className="h-4 w-4" />
          Back to board
        </Link>
      </header>

      <main className="grid min-h-0 flex-1 place-items-center overflow-y-auto p-6">
        <div className="w-full max-w-2xl rounded-xl border border-[var(--border)] bg-[var(--bg-elevated)] p-8 text-center shadow-2xl">
          <Construction className="mx-auto h-12 w-12 text-[var(--accent)]" />
          <h2 className="mt-5 text-2xl font-semibold text-[var(--text)]">{content.title} is not built yet</h2>
          <p className="mx-auto mt-2 max-w-md text-sm leading-relaxed text-[var(--text-muted)]">{content.description}</p>
        </div>
      </main>
    </div>
  );
}