import './LoginPage.css';
import { NORMALIZED_ROLE_EXECUTER_VERIFIER, isExecuterVerifierRole } from '../../authRoles.js';

const USER_FEATURES = [
  { title: 'Upload Videos', desc: 'Submit assessment videos from your site with location and work area details.' },
  { title: 'Track Status', desc: 'Monitor the progress of your uploaded assessments in real time.' },
  { title: 'My Videos', desc: 'View all your submitted videos, filter by status, and search anytime.' }
];

const ADMIN_FEATURES = [
  { title: 'Manage Assessments', desc: 'Browse all uploaded videos across locations with advanced filters.' },
  { title: 'Assign Reviewers', desc: 'Assign executors and verifiers to each assessment for review.' },
  { title: 'Assign Videos', desc: 'Track unassigned assessments and assign executors and verifiers.' }
];

const EXECUTOR_FEATURES = [
  { title: 'Assigned work', desc: 'See every assessment where you are named as executor.' },
  { title: 'Track status', desc: 'Follow progress from assignment through verification.' },
  { title: 'Verifier context', desc: 'View verifier assignment and site details in one list.' }
];

const USER_METRICS = [
  { label: 'Upload', value: 'Videos', note: 'Submit site assessment footage' },
  { label: 'Track', value: 'Status', note: 'Follow your assessment progress' },
  { label: 'View', value: 'History', note: 'All your submissions in one place' }
];

const ADMIN_METRICS = [
  { label: 'Review', value: 'All', note: 'Every video across all sites' },
  { label: 'Assign', value: 'Team', note: 'Executors and verifiers' },
  { label: 'Monitor', value: 'Status', note: 'Real-time assessment tracking' }
];

const EXECUTOR_METRICS = [
  { label: 'Execute', value: 'Role', note: 'Own the review execution step' },
  { label: 'List', value: 'Mine', note: 'Assessments assigned to you' },
  { label: 'Align', value: 'Verify', note: 'Work with verifier on each case' }
];

function LoginPage({
  email,
  password,
  onEmailChange,
  onPasswordChange,
  onSubmit,
  errorMessage,
  isSubmitting,
  loginRole,
  onLoginRoleChange
}) {
  const isAdmin = loginRole === 'admin';
  const isExecutor = isExecuterVerifierRole(loginRole);
  const features = isAdmin ? ADMIN_FEATURES : isExecutor ? EXECUTOR_FEATURES : USER_FEATURES;
  const metrics = isAdmin ? ADMIN_METRICS : isExecutor ? EXECUTOR_METRICS : USER_METRICS;

  return (
    <div className="login-page">
      <section className="login-panel">
        <header className="login-brand">
          <div className="brand-mark">
            <div className="brand-logo">RA</div>
            <div className="brand-copy">
              <div className="brand-title">Risk Assessments</div>
              <div className="brand-subtitle">Secure Portal</div>
            </div>
          </div>
          <div className="login-badge">
            <span className="login-badge-dot" />
            <span>Secure access for authorized users</span>
          </div>
        </header>

        <div className="login-header">
          <div className="login-header-eyebrow">
            <span className="login-header-eyebrow-pill">Login</span>
            <span>Sign in to continue</span>
          </div>
          <h1>Welcome back</h1>
          <p>
            {isAdmin
              ? 'Sign in to manage assessments, assign reviewers, and monitor progress.'
              : isExecutor
                ? 'Sign in to view assessments assigned to you for execution or verification and track their status.'
                : 'Sign in to upload assessment videos, track status, and view your submissions.'}
          </p>
        </div>

        <div className="login-role-toggle">
          <button
            type="button"
            className={`login-role-btn ${loginRole === 'user' ? 'login-role-btn--active' : ''}`}
            onClick={() => onLoginRoleChange('user')}
          >
            User
          </button>
          <button
            type="button"
            className={`login-role-btn ${isExecutor ? 'login-role-btn--active' : ''}`}
            onClick={() => onLoginRoleChange(NORMALIZED_ROLE_EXECUTER_VERIFIER)}
          >
            Executor / Verifier
          </button>
          <button
            type="button"
            className={`login-role-btn ${isAdmin ? 'login-role-btn--active' : ''}`}
            onClick={() => onLoginRoleChange('admin')}
          >
            Admin
          </button>
        </div>

        <form className="login-form" onSubmit={onSubmit}>
          <div className="form-field">
            <div className="form-label-row">
              <label htmlFor="email">Email</label>
              <span className="form-label-hint">
                {isAdmin ? 'Use your admin email' : 'Use your registered email'}
              </span>
            </div>
            <input
              id="email"
              type="email"
              placeholder="you@example.com"
              value={email}
              onChange={(e) => onEmailChange(e.target.value)}
              required
            />
          </div>

          <div className="form-field">
            <div className="form-label-row">
              <label htmlFor="password">Password</label>
              <button
                type="button"
                className="link-button"
                onClick={() => alert('Add forgot password flow here.')}
              >
                Forgot password?
              </button>
            </div>
            <input
              id="password"
              type="password"
              placeholder="Enter your password"
              value={password}
              onChange={(e) => onPasswordChange(e.target.value)}
              required
            />
          </div>

          <div className="form-actions">
            <button type="submit" className="primary-button" disabled={isSubmitting}>
              <span>
                {isSubmitting
                  ? 'Signing in...'
                  : `Sign in as ${isAdmin ? 'Admin' : isExecutor ? 'Executor / Verifier' : 'User'}`}
              </span>
            </button>
            <div className="secondary-action">
              New here? <strong>Contact admin</strong>
            </div>
          </div>
          {errorMessage ? <div className="login-error">{errorMessage}</div> : null}
        </form>

        <footer className="login-footer">
          <div className="login-footer-meta">
            <span>&copy; {new Date().getFullYear()} Risk Assessments</span>
          </div>
          <div className="login-footer-meta">
            <button type="button" className="link-button">Privacy</button>
            <button type="button" className="link-button">Terms</button>
          </div>
        </footer>
      </section>

      <aside className="login-hero">
        <div>
          <div className="hero-tag">
            <span
              className={`hero-tag-badge ${
                isAdmin ? 'hero-tag-badge--admin' : isExecutor ? 'hero-tag-badge--executor' : ''
              }`}
            >
              {isAdmin ? 'Admin' : isExecutor ? 'Executor / Verifier' : 'User'}
            </span>
            <span>
              {isAdmin
                ? 'Administration overview'
                : isExecutor
                  ? 'Execution workspace'
                  : 'Your assessment workspace'}
            </span>
          </div>

          <div className="hero-heading">
            <h2>
              {isAdmin
                ? 'Manage and oversee all assessments.'
                : isExecutor
                  ? 'Run the execution step on assigned assessments.'
                  : 'Upload, track, and review your videos.'}
            </h2>
            <p>
              {isAdmin
                ? 'Assign reviewers, monitor assessment statuses, and ensure every site is covered.'
                : isExecutor
                  ? 'See assessments assigned to you, with status and partner reviewer details in one place.'
                  : 'Submit assessment videos from any location and follow their progress through review.'}
            </p>
          </div>

          <div className="hero-metrics">
            {metrics.map((m) => (
              <div className="metric-card" key={m.label}>
                <div className="metric-label">{m.label}</div>
                <div className="metric-value">{m.value}</div>
                <div className="metric-footnote">{m.note}</div>
              </div>
            ))}
          </div>

          <div className="hero-grid">
            <div className="hero-grid-header">
              <div className="hero-grid-title">{isAdmin ? 'What you can do' : 'Your capabilities'}</div>
              <div className="hero-grid-pill">
                {isAdmin ? 'Admin role' : isExecutor ? 'Executor / Verifier role' : 'User role'}
              </div>
            </div>
            <div className="hero-grid-body">
              {features.map((f, i) => (
                <div className={`hero-grid-cell ${i === 0 ? 'hero-grid-cell--accent' : ''}`} key={f.title}>
                  <div className="hero-grid-label">{f.title}</div>
                  <div className="hero-grid-status">{f.desc}</div>
                </div>
              ))}
            </div>
          </div>
        </div>

        <div className="hero-footer">
          <span>
            {isAdmin
              ? 'Designed for assessment managers and administrators.'
              : isExecutor
                ? 'Designed for reviewers executing the assessment workflow.'
                : 'Designed for site engineers and field teams.'}
          </span>
          <span>Single, secure sign-in for your organization.</span>
        </div>
      </aside>
    </div>
  );
}

export default LoginPage;
