'use client';

import type { ReactNode } from 'react';
import { useActionState, useState } from 'react';
import { loginAction } from '../app/actions';

type Props = {
  languageSwitcher: ReactNode;
  labels: {
    title: string;
    description: string;
    email: string;
    password: string;
    submit: string;
    goToDashboard: string;
    emailLabel: string;
    passwordLabel: string;
    forgotPassword: string;
    rememberMe: string;
    accessVia: string;
    google: string;
    sso: string;
    newToPlatform: string;
    applyAccess: string;
    privacyPolicy: string;
    termsOfService: string;
    helpCenter: string;
    securityPreview: string;
    loginHelp: string;
    twoFactorPreview: string;
    showPassword: string;
    hidePassword: string;
  };
  appName: string;
};

type LoginFormState = {
  error?: string;
};

const initialState: LoginFormState = {};

function MailIcon() {
  return (
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <path d="M4 6h16a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2Zm0 2 8 5 8-5" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

function LockIcon() {
  return (
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <path d="M7 10V8a5 5 0 0 1 10 0v2m-9 0h8a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2Z" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

function ChatIcon() {
  return (
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <path d="M6 18.5V20l2.7-1.8c.4-.2.8-.3 1.2-.3h8.1A2 2 0 0 0 20 15.9V6.8A1.8 1.8 0 0 0 18.2 5H5.8A1.8 1.8 0 0 0 4 6.8v9.4c0 1.3 1 2.3 2 2.3Z" fill="currentColor" />
    </svg>
  );
}

function ArrowIcon() {
  return (
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <path d="M5 12h14m-5-5 5 5-5 5" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

export function LoginForm({ labels, appName, languageSwitcher }: Props) {
  const [state, formAction, pending] = useActionState(loginAction, initialState);
  const [showPassword, setShowPassword] = useState(false);

  return (
    <main className="auth-page auth-page-enterprise auth-page-login">
      <div className="auth-enterprise-glow auth-enterprise-glow-right" />
      <div className="auth-enterprise-glow auth-enterprise-glow-left" />
      <div className="auth-page-symbol auth-page-symbol-top">
        <span className="material-symbols-outlined">hub</span>
      </div>
      <div className="auth-page-symbol auth-page-symbol-bottom">
        <span className="material-symbols-outlined">security_update_good</span>
      </div>

      <section className="auth-container auth-container-login">
        <div className="auth-login-toolbar">
          <div className="auth-login-locale">{languageSwitcher}</div>
        </div>

        <header className="auth-brand">
          <div className="auth-brand-mark">
            <ChatIcon />
          </div>
          <div className="auth-brand-copy">
            <h1>{appName}</h1>
            <p>{labels.description}</p>
          </div>
        </header>

        <section className="auth-card auth-card-enterprise">
          <form action={formAction} className="enterprise-form">
            <div className="auth-form-block">
              <label className="field-label" htmlFor="email">
                {labels.emailLabel}
              </label>
              <div className="input-shell">
                <span className="input-icon">
                  <MailIcon />
                </span>
                <input id="email" name="email" type="email" placeholder="admin@enterprise.com" required />
              </div>
            </div>

            <div className="auth-form-block">
            <div className="field-row">
              <label className="field-label" htmlFor="password">
                {labels.passwordLabel}
              </label>
              <a href="/forgot-password" className="text-link">
                {labels.forgotPassword}
              </a>
            </div>
              <div className="input-shell">
                <span className="input-icon">
                  <LockIcon />
                </span>
                <input
                  id="password"
                  name="password"
                  type={showPassword ? 'text' : 'password'}
                  placeholder="••••••••"
                  required
                />
                <button
                  type="button"
                  className="text-link text-link-compact"
                  onClick={() => setShowPassword((current) => !current)}
                >
                  {showPassword ? labels.hidePassword : labels.showPassword}
                </button>
              </div>
            </div>

            <label className="check-row">
              <input type="checkbox" name="remember" />
              <span>{labels.rememberMe}</span>
            </label>

            <button type="submit" disabled={pending} className="auth-submit">
              <span>{pending ? '...' : labels.submit}</span>
              <span className="button-icon">
                <ArrowIcon />
              </span>
            </button>

            {state.error ? <p className="form-error">{state.error}</p> : null}
          </form>
        </section>

        <footer className="auth-footer">
          <nav className="auth-footer-links">
            <button type="button">{labels.privacyPolicy}</button>
            <button type="button">{labels.termsOfService}</button>
            <button type="button">{labels.helpCenter}</button>
          </nav>
        </footer>
      </section>
    </main>
  );
}
