import { html } from '@design.estate/dees-element';
import type { ILoginConfig, ILoginCredentials } from './eco-view-login.js';

const handleLoginAttempt = (e: CustomEvent<ILoginCredentials>) => {
  const { method, value } = e.detail;
  console.log(`Login attempt via ${method}:`, value);

  // Demo: Show success for PIN "1234" or password "demo"
  const loginView = e.target as HTMLElement & { showErrorMessage: (msg: string) => void; clearInput: () => void };

  if ((method === 'pin' && value === '1234') || (method === 'password' && value === 'demo')) {
    console.log('Login successful!');
    alert('Login successful! (Demo)');
    loginView.clearInput();
  } else {
    loginView.showErrorMessage('Invalid credentials. Try PIN: 1234 or Password: demo');
  }
};

const pinOnlyConfig: ILoginConfig = {
  allowedMethods: ['pin'],
  pinLength: 4,
  welcomeMessage: 'Enter PIN',
};

const allMethodsConfig: ILoginConfig = {
  allowedMethods: ['pin', 'password', 'qr'],
  pinLength: 6,
  welcomeMessage: 'Sign In',
};

export const demo = () => html`
  <style>
    .demo-container {
      width: 100%;
      height: 100%;
      background: hsl(240 10% 4%);
      border-radius: 12px;
      overflow: hidden;
    }
  </style>
  <div class="demo-container">
    <eco-view-login
      .config=${allMethodsConfig}
      @login-attempt=${handleLoginAttempt}
    ></eco-view-login>
  </div>
`;