import Link from 'next/link'
import { getTenantSlug } from '@/lib/tenant'
import { prisma } from '@innungsapp/shared'
import { LoginForm } from '@/components/auth/LoginForm'

export default async function LoginPage() {
  const slug = await getTenantSlug()

  let org = null
  if (slug) {
    org = await prisma.organization.findUnique({
      where: { slug }
    })
  }

  const primaryColor = org?.primaryColor || '#E63946'
  const orgName = org?.name || 'InnungsApp'
  const logoUrl = org?.logoUrl || '/logo.png'
  const secondaryText = org ? `Verwaltungsportal für die ${org.name}` : 'Verwaltungsportal für Innungen'

  return (
    <div className="min-h-screen bg-gray-50 flex flex-col">
      <main className="flex-1 flex items-center justify-center p-4">
        <div className="w-full max-w-sm">
          <div className="mb-4">
            <Link
              href={slug ? `/${slug}` : "/"}
              aria-label="Zur Startseite"
              className="inline-flex h-10 w-10 items-center justify-center rounded-lg border border-gray-200 bg-white text-gray-600 shadow-sm transition-colors hover:text-gray-900 hover:border-gray-300"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
                className="h-5 w-5"
                aria-hidden="true"
              >
                <path d="M3 11.5 12 4l9 7.5" />
                <path d="M5.5 10.5V20h13V10.5" />
                <path d="M10 20v-5h4v5" />
              </svg>
            </Link>
          </div>

          <div className="text-center mb-8">
            <div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-white shadow-md border border-gray-100 overflow-hidden">
              <img
                src={logoUrl}
                alt={orgName}
                className={`h-10 w-10 object-contain ${!org?.logoUrl ? 'brightness-110 scale-[1.6]' : ''}`}
              />
            </div>
            <h1
              className="text-3xl font-bold text-gray-900 tracking-tight"
              style={{ fontFamily: "'Syne', system-ui, sans-serif" }}
            >
              {org ? (
                <>
                  <span style={{ color: primaryColor }}>{org.name.split(' ')[0]}</span>
                  {org.name.includes(' ') ? ` ${org.name.split(' ').slice(1).join(' ')}` : ''}
                </>
              ) : (
                <>
                  Innungs<span className="text-brand-500">App</span>
                </>
              )}
            </h1>
            <p className="text-sm text-gray-500 mt-1">{secondaryText}</p>
          </div>

          <div className="bg-white rounded-lg border p-8">
            <h2
              className="text-lg font-semibold text-gray-900 mb-5"
              style={{ fontFamily: "'Syne', system-ui, sans-serif" }}
            >
              Anmelden
            </h2>

            <LoginForm primaryColor={primaryColor} />
          </div>
        </div>
      </main>

      <footer className="border-t border-gray-200 bg-white/80 backdrop-blur">
        <div className="max-w-4xl mx-auto px-4 py-4 flex flex-wrap items-center justify-between gap-3 text-xs text-gray-500">
          <p>(c) {new Date().getFullYear()} InnungsApp</p>
          <div className="flex items-center gap-4">
            <Link href={slug ? `/${slug}` : "/"} className="hover:text-gray-700">
              Home
            </Link>
            <Link href="/impressum" className="hover:text-gray-700">
              Impressum
            </Link>
            <Link href="/datenschutz" className="hover:text-gray-700">
              Datenschutz
            </Link>
          </div>
        </div>
      </footer>
    </div>
  )
}