صفحهٔ ۴۰۳

"use client"

import * as React from "react"
import NextLink from "next/link"

import { Button } from "@/components/ui/button"
import { ControlSizeProvider } from "@/components/ui/control-size"
import { Link } from "@/components/ui/link"
import { toast } from "@/components/ui/toast"

/**
 * تصویرِ خطی تابلوی آویزان، هم‌خانوادهٔ صفحه‌های ۴۰۴ و ۵۰۲؛ فقط رنگِ متن و
 * پس‌زمینهٔ تم، پس در حالتِ تیره هم درست است. محتوای وسطِ تابلو را children می‌دهد.
 */
function HangingSign({ label, className, children }: { label: string; className?: string; children: React.ReactNode }) {
  return (
    <svg viewBox="-10 0 320 290" role="img" aria-label={label} className={className}>
      <circle cx="150" cy="26" r="6" fill="var(--background)" stroke="currentColor" strokeWidth="2" />
      <path d="M150 20v-8" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
      <path d="M150 30 96 108M150 30l58 78" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" />
      <path d="M58 114h200v122H58z" transform="translate(8 7)" fill="var(--background)" stroke="currentColor" strokeWidth="2" strokeLinejoin="round" />
      <path d="M258 114l8 7v122l-8-7M58 236l8 7h200" fill="none" stroke="currentColor" strokeWidth="2" strokeLinejoin="round" />
      <rect x="50" y="108" width="208" height="126" fill="var(--background)" stroke="currentColor" strokeWidth="2" />
      <path d="M50 128h208" stroke="currentColor" strokeWidth="2" />
      <path d="M60 114h10M60 118h10M60 122h10" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" />
      <circle cx="236" cy="118" r="2.6" fill="none" stroke="currentColor" strokeWidth="1.6" />
      <circle cx="246" cy="118" r="2.6" fill="none" stroke="currentColor" strokeWidth="1.6" />
      <circle cx="96" cy="112" r="3.2" fill="var(--background)" stroke="currentColor" strokeWidth="1.75" />
      <circle cx="208" cy="112" r="3.2" fill="var(--background)" stroke="currentColor" strokeWidth="1.75" />
      <rect x="56" y="134" width="196" height="94" fill="currentColor" />
      {children}
    </svg>
  )
}

/** صفحهٔ ۴۰۳ (دسترسی ندارید)؛ هم‌سبکِ ۴۰۴ و ۵۰۲، با راهِ درخواستِ دسترسی. */
export default function ForbiddenBlock() {
  const [requested, setRequested] = React.useState(false)

  return (
    <ControlSizeProvider size="xl" asChild>
      <main className="flex min-h-svh flex-col items-center justify-center gap-8 p-6 text-center">
        <HangingSign label="تابلوی ۴۰۳ با قفل" className="w-64 max-w-full text-foreground sm:w-80">
          {/* قفل در وسطِ تابلو */}
          <rect x="132" y="170" width="44" height="36" rx="5" fill="var(--background)" />
          <path d="M140 170v-9a14 14 0 0 1 28 0v9" fill="none" stroke="var(--background)" strokeWidth="5" strokeLinecap="round" />
          <circle cx="154" cy="186" r="4" fill="currentColor" />
          <path d="M154 189v7" stroke="currentColor" strokeWidth="3" strokeLinecap="round" />
          <text x="214" y="160" textAnchor="middle" fontSize="18" fontWeight="800" fill="var(--background)">۴۰۳</text>
        </HangingSign>
        <div className="flex max-w-md flex-col items-center gap-3">
          <h1 className="text-3xl leading-snug font-bold">این در قفله!</h1>
          <p className="leading-7 text-muted-foreground">
            برای دیدنِ این صفحه دسترسی نداری. از مدیرِ فضای کار بخواه دسترسی بده، یا با حسابِ دیگه‌ای وارد شو.
          </p>
        </div>
        <div className="flex flex-wrap justify-center gap-3">
          <Button
            disabled={requested}
            onClick={() => {
              setRequested(true)
              toast.success("درخواستت برای مدیر فرستاده شد.")
            }}
          >
            {requested ? "درخواست فرستاده شد" : "درخواستِ دسترسی"}
          </Button>
          <Button asChild variant="outline">
            <NextLink href="/">برگردیم خونه</NextLink>
          </Button>
        </div>
        <p className="text-sm text-muted-foreground">
          با حسابِ اشتباه اومدی؟ <Link href="/login">با حسابِ دیگه وارد شو</Link>
        </p>
      </main>
    </ControlSizeProvider>
  )
}