import { login } from "./actions";
import { LanguageSwitcher } from "../language-switcher";
import { ThemeSwitcher } from "../theme-switcher";
import { getDictionary } from "@/lib/i18n";
import { getLocale } from "@/lib/locale";
import { cookies } from "next/headers";
import Link from "next/link";

export default async function LoginPage({
  searchParams,
}: {
  searchParams: Promise<{
    error?: string;
    reset?: string;
  }>;
}) {
  const { error, reset } = await searchParams;
  const locale = await getLocale();
  const dictionary = getDictionary(locale);
  const themeCookie = (await cookies()).get("capila_theme")?.value;
  return (
    <main className="login-shell">
      <section className="login-presentation">
        <div className="login-brand">
          <span className="brand-mark-small">ک+</span>
          <strong>{dictionary.common.brand}</strong>
        </div>
        <div className="login-presentation-copy">
          <span className="login-kicker">CAPILA PLUS</span>
          <h2>{dictionary.login.description}</h2>
          <ul className="login-features">
            <li>{dictionary.login.featureRealtime}</li>
            <li>{dictionary.login.featureRoles}</li>
            <li>{dictionary.login.featureSecure}</li>
          </ul>
        </div>
        <div className="login-orbit login-orbit-one" />
        <div className="login-orbit login-orbit-two" />
      </section>
      <section className="login-form-panel">
        <div className="login-toolbar">
          <LanguageSwitcher
            locale={locale}
            label={dictionary.common.changeLanguage}
          />
          <ThemeSwitcher
            initialTheme={themeCookie === "dark" ? "dark" : "light"}
            label={dictionary.common.changeTheme}
          />
        </div>
        <div className="login-card">
          <div className="brand-mark login-mobile-brand">ک+</div>
          <p className="eyebrow">{dictionary.login.eyebrow}</p>
          <h1>{dictionary.login.title}</h1>
          <p className="muted">{dictionary.login.helper}</p>
          {error ? <p className="error">{dictionary.login.error}</p> : null}
          {reset ? (
            <p className="success-message">{dictionary.login.resetDone}</p>
          ) : null}
          <form action={login}>
            <input type="hidden" name="locale" value={locale} />
            <label htmlFor="phone">{dictionary.login.phone}</label>
            <input
              id="phone"
              name="phone"
              placeholder="+989121234567"
              dir="ltr"
              inputMode="tel"
              autoComplete="tel"
            />
            <label htmlFor="password">{dictionary.login.password}</label>
            <input
              id="password"
              name="password"
              type="password"
              minLength={8}
              maxLength={128}
              autoComplete="current-password"
              required
            />
            <button type="submit" className="primary-button">
              {dictionary.login.submit}
            </button>
            <div className="auth-links">
              <Link href="/forgot-password">{dictionary.login.forgot}</Link>
            </div>
          </form>
        </div>
      </section>
    </main>
  );
}