import type { Meta, StoryObj } from '@storybook/nextjs-vite'
import { useState } from 'react'
import { OpenFrameSsoLoginForm, OpenFrameSsoSignUpForm, SsoAuthShell } from '../../components/features/auth'

const meta = {
  title: 'Auth/OpenFrame SSO',
  parameters: {
    layout: 'fullscreen',
    docs: {
      description: {
        component:
          'OpenFrame SSO (IdP) screens from the auth redesign. Centered single-column SsoAuthShell (logo top, card centered, Powered by Flamingo bottom). Login and Sign Up forms, both presentational + controlled with a password show/hide toggle.',
      },
    },
  },
  tags: ['autodocs'],
} satisfies Meta

export default meta
type Story = StoryObj

function SsoLoginPage({ initialEmail = '', initialPassword = '' }: { initialEmail?: string; initialPassword?: string }) {
  const [email, setEmail] = useState(initialEmail)
  const [password, setPassword] = useState(initialPassword)

  const isValid = !!email.trim() && password.length > 0

  return (
    <SsoAuthShell>
      <OpenFrameSsoLoginForm
        email={email}
        password={password}
        onEmailChange={setEmail}
        onPasswordChange={setPassword}
        onSubmit={() => {}}
        onForgotPassword={() => {}}
        submitDisabled={!isValid}
      />
    </SsoAuthShell>
  )
}

function SsoSignUpPage({ filled = false }: { filled?: boolean }) {
  const [email, setEmail] = useState(filled ? 'ada@example.com' : '')
  const [firstName, setFirstName] = useState(filled ? 'Ada' : '')
  const [lastName, setLastName] = useState(filled ? 'Lovelace' : '')
  const [password, setPassword] = useState(filled ? 'SuperSecretPassphrase2024!' : '')
  const [confirmPassword, setConfirmPassword] = useState(filled ? 'SuperSecretPassphrase2024!' : '')

  const isValid =
    !!email.trim() &&
    !!firstName.trim() &&
    !!lastName.trim() &&
    password.length >= 8 &&
    password === confirmPassword

  return (
    <SsoAuthShell>
      <OpenFrameSsoSignUpForm
        email={email}
        firstName={firstName}
        lastName={lastName}
        password={password}
        confirmPassword={confirmPassword}
        onEmailChange={setEmail}
        onFirstNameChange={setFirstName}
        onLastNameChange={setLastName}
        onPasswordChange={setPassword}
        onConfirmPasswordChange={setConfirmPassword}
        onSubmit={() => {}}
        onForgotPassword={() => {}}
        submitDisabled={!isValid}
      />
    </SsoAuthShell>
  )
}

/** Login — empty email + password, submit disabled. */
export const LoginEmpty: Story = {
  render: () => <SsoLoginPage />,
}

/** Login — filled, submit enabled. */
export const LoginFilled: Story = {
  render: () => <SsoLoginPage initialEmail="ada@example.com" initialPassword="SuperSecret1" />,
}

/** Sign Up — empty fields, submit disabled. */
export const SignUpEmpty: Story = {
  render: () => <SsoSignUpPage />,
}

/** Sign Up — filled and terms accepted, submit enabled. */
export const SignUpFilled: Story = {
  render: () => <SsoSignUpPage filled />,
}