"use client";

import Image from "next/image";
import Link from "next/link";
import logo from "@/assets/icons/logo.svg";
import { useTenantSlugContext } from "./layout";

export default function TenantLandingPage() {
  const { tenant, loading, error } = useTenantSlugContext();

  if (loading) {
    return (
      <div className="flex min-h-screen items-center justify-center bg-slate-50 text-slate-600">
        Loading…
      </div>
    );
  }

  if (error || !tenant) {
    return (
      <div className="flex min-h-screen flex-col items-center justify-center gap-3 bg-slate-50 px-4 text-center">
        <h1 className="text-xl font-semibold text-slate-900">Organization not found</h1>
        <Link href="/" className="text-sm text-blue-700 underline">
          Back to Nizamify
        </Link>
      </div>
    );
  }

  return (
    <div className="flex min-h-screen flex-col bg-gradient-to-b from-slate-100 to-white">
      <main className="mx-auto flex w-full max-w-lg flex-1 flex-col items-center justify-center gap-6 px-6 py-16 text-center">
        <Link href="/" title="Nizamify home">
          <Image src={logo} alt="Nizamify" width={180} height={40} className="h-10 w-auto" />
        </Link>
        <p className="text-sm uppercase tracking-wide text-slate-500">Welcome</p>
        <h1 className="text-3xl font-semibold tracking-tight text-slate-900">{tenant.name}</h1>
        <p className="text-sm text-slate-600">
          Sign in to manage your organization on Nizamify.
        </p>
        <Link
          href={`/${tenant.slug}/login`}
          className="inline-flex rounded-md bg-slate-900 px-5 py-2.5 text-sm font-medium text-white hover:bg-slate-800"
        >
          Sign in
        </Link>
      </main>
      <footer className="border-t border-slate-200 py-4 text-center text-xs text-slate-500">
        Powered by Nizamify
      </footer>
    </div>
  );
}