'use client';

import { useActionState } from 'react';
import { updatePasswordAction, updateProfileAction } from '../app/actions';

type ProfileUser = {
  name: string;
  email: string;
  status: string;
  roleName: string;
  lastLoginAt: string | null;
  twoFactorEnabled: boolean;
};

type Props = {
  user: ProfileUser;
};

function formatDate(value: string | null) {
  if (!value) {
    return 'Never';
  }

  return new Intl.DateTimeFormat('en', {
    dateStyle: 'medium',
    timeStyle: 'short',
  }).format(new Date(value));
}

export function ProfileForms({ user }: Props) {
  const [profileState, profileAction, profilePending] = useActionState(updateProfileAction, {});
  const [passwordState, passwordAction, passwordPending] = useActionState(updatePasswordAction, {});

  return (
    <div className="profile-page-grid">
      <section className="surface-card profile-summary-card">
        <div className="profile-summary-avatar">{user.name.charAt(0).toUpperCase()}</div>
        <h2>{user.name}</h2>
        <p>{user.email}</p>
        <div className="profile-summary-meta">
          <span>{user.roleName}</span>
          <span>{user.status}</span>
          <span>{user.twoFactorEnabled ? '2FA enabled' : '2FA disabled'}</span>
        </div>
        <dl className="profile-session-list">
          <div>
            <dt>Last login</dt>
            <dd>{formatDate(user.lastLoginAt)}</dd>
          </div>
          <div>
            <dt>Account type</dt>
            <dd>{user.roleName}</dd>
          </div>
        </dl>
      </section>

      <section className="profile-form-stack">
        <form action={profileAction} className="surface-card profile-form-card">
          <div className="card-head">
            <div>
              <span className="card-kicker">Account</span>
              <h3>Edit profile</h3>
            </div>
          </div>
          <label className="invite-field">
            <span>Full name</span>
            <input name="name" type="text" defaultValue={user.name} required />
          </label>
          <label className="invite-field profile-readonly-field">
            <span>Email address</span>
            <input type="email" value={user.email} readOnly />
            <small>Email changes require a verification flow, so this is locked for now.</small>
          </label>
          <button type="submit" className="profile-submit-button" disabled={profilePending}>
            {profilePending ? 'Saving...' : 'Save profile'}
          </button>
          {profileState.error ? <p className="form-error">{profileState.error}</p> : null}
          {profileState.success ? <p className="form-success">{profileState.success}</p> : null}
        </form>

        <form action={passwordAction} className="surface-card profile-form-card">
          <div className="card-head">
            <div>
              <span className="card-kicker">Security</span>
              <h3>Change password</h3>
            </div>
          </div>
          <label className="invite-field">
            <span>Current password</span>
            <input name="currentPassword" type="password" autoComplete="current-password" required />
          </label>
          <label className="invite-field">
            <span>New password</span>
            <input name="newPassword" type="password" autoComplete="new-password" minLength={8} required />
          </label>
          <label className="invite-field">
            <span>Confirm new password</span>
            <input name="confirmPassword" type="password" autoComplete="new-password" minLength={8} required />
          </label>
          <button type="submit" className="profile-submit-button" disabled={passwordPending}>
            {passwordPending ? 'Updating...' : 'Update password'}
          </button>
          {passwordState.error ? <p className="form-error">{passwordState.error}</p> : null}
          {passwordState.success ? <p className="form-success">{passwordState.success}</p> : null}
        </form>
      </section>
    </div>
  );
}
