import Link from "next/link"

import { Bilingual } from "@/components/bilingual"
import { SignedOutShell } from "@/components/signed-out-shell"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { HELP_DESKS, type HelpDesk } from "@/lib/help-desks"
import {
  IconArrowLeft,
  IconClock,
  IconIdBadge2,
  IconMapPin,
  IconPhone,
} from "@tabler/icons-react"

/**
 * The screen somebody reaches when they cannot get in.
 *
 * It exists because without it four hundred people on a factory floor have no
 * path at all, and every forgotten password becomes a walk to an office with
 * no idea which one. It is public: a person who cannot sign in cannot be
 * asked to sign in to read it.
 *
 * Static content. The building, the hours and the extensions live in
 * `lib/help-desks.ts` and are invented by us until somebody at the factory
 * says what they really are, which is ELEVA-234.
 */

export const metadata = {
  title: "Cannot sign in, เข้าสู่ระบบไม่ได้",
}

function Line({
  icon: Icon,
  what,
  en,
  th,
}: {
  icon: typeof IconMapPin
  what: string
  en: string
  th: string
}) {
  return (
    <div className="flex items-start gap-3">
      <Icon className="mt-1 size-5 shrink-0 text-foreground/70" aria-hidden />
      <span className="sr-only">{what}</span>
      <Bilingual en={en} th={th} />
    </div>
  )
}

function Desk({ desk }: { desk: HelpDesk }) {
  return (
    <Card>
      <CardHeader>
        <CardTitle>
          <Bilingual
            en={desk.name}
            th={desk.nameTh}
            thClassName="font-normal"
          />
        </CardTitle>
      </CardHeader>
      <CardContent className="flex flex-col gap-3">
        <Line
          icon={IconMapPin}
          what="Where"
          en={desk.place}
          th={desk.placeTh}
        />
        <Line icon={IconClock} what="When" en={desk.hours} th={desk.hoursTh} />
        <Line
          icon={IconPhone}
          what="Telephone"
          en={`Extension ${desk.extension}`}
          th={`ต่อ ${desk.extension}`}
        />
      </CardContent>
    </Card>
  )
}

export default function Page() {
  return (
    <SignedOutShell>
      <div className="flex flex-col gap-4">
        <h1 className="text-2xl font-semibold">
          <Bilingual
            en="Cannot sign in"
            th="เข้าสู่ระบบไม่ได้"
            thClassName="font-normal"
          />
        </h1>
        <p className="max-w-prose">
          <Bilingual
            en="Admin and HR can set a new password for you. Go to either one, whichever is closer."
            th="ฝ่ายธุรการและฝ่ายบุคคลตั้งรหัสผ่านใหม่ให้ได้ ไปที่ฝ่ายใดก็ได้ที่ใกล้กว่า"
          />
        </p>
      </div>

      {HELP_DESKS.map((desk) => (
        <Desk key={desk.name} desk={desk} />
      ))}

      <Card>
        <CardHeader>
          <CardTitle>
            <Bilingual
              en="Take your ID card"
              th="นำบัตรพนักงานไปด้วย"
              thClassName="font-normal"
            />
          </CardTitle>
        </CardHeader>
        <CardContent className="flex flex-col gap-3">
          <Line
            icon={IconIdBadge2}
            what="Your username"
            en="Your username is the name Admin or HR gave you when you were hired. It is not the employee code on your card: that number is used inside the system and is never typed here."
            th="ชื่อผู้ใช้คือชื่อที่ฝ่ายธุรการหรือฝ่ายบุคคลให้ไว้ตอนเริ่มงาน ไม่ใช่รหัสพนักงานบนบัตร ตัวเลขนั้นใช้ภายในระบบและไม่ต้องกรอกที่นี่"
          />
          <p className="text-foreground/80">
            <Bilingual
              en="Forgotten it? HR has it on file and can read it back to you."
              th="ลืมชื่อผู้ใช้ใช่ไหม ฝ่ายบุคคลมีข้อมูลอยู่ในระบบและแจ้งให้คุณได้"
            />
          </p>
        </CardContent>
      </Card>

      <Link
        href="/login"
        className="flex items-start justify-center gap-2 rounded-lg px-4 py-3 underline-offset-4 hover:bg-muted hover:underline focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-none"
      >
        <IconArrowLeft className="mt-0.5 size-5 shrink-0" aria-hidden />
        <Bilingual
          en="Back to sign in"
          th="กลับไปหน้าเข้าสู่ระบบ"
          className="items-center"
        />
      </Link>
    </SignedOutShell>
  )
}