import type { Meta, StoryObj } from '@storybook/nextjs-vite'
import { useState } from 'react'
import { AuthShell, BackToLoginLink, PasswordResetForm } from '../../components/features/auth'

const meta = {
  title: 'Auth/Password Reset',
  component: PasswordResetForm,
  parameters: {
    layout: 'fullscreen',
    docs: {
      description: {
        component:
          'Password Reset from the auth redesign. Presentational + controlled: new password + confirm, then Cancel / Reset Password. Shown inside AuthShell without tabs; "Back to Login" sits in the shell footer on desktop.',
      },
    },
  },
  tags: ['autodocs'],
} satisfies Meta<typeof PasswordResetForm>

export default meta
type Story = StoryObj<typeof meta>

/** Full page: password reset form + marketing panel (no tabs). */
function PasswordResetPage({ initialPassword = '', initialConfirm = '' }: { initialPassword?: string; initialConfirm?: string }) {
  const [password, setPassword] = useState(initialPassword)
  const [confirmPassword, setConfirmPassword] = useState(initialConfirm)

  const isValid = password.length >= 8 && password === confirmPassword

  return (
    <AuthShell
      footer={<BackToLoginLink onClick={() => {}} />}
    >
      <PasswordResetForm
        password={password}
        confirmPassword={confirmPassword}
        onPasswordChange={setPassword}
        onConfirmPasswordChange={setConfirmPassword}
        onSubmit={() => {}}
        onCancel={() => {}}
        onBackToLogin={() => {}}
        submitDisabled={!isValid}
        errors={{
          confirmPassword:
            confirmPassword && password !== confirmPassword ? 'Passwords do not match' : undefined,
        }}
      />
    </AuthShell>
  )
}

/** Empty fields, submit disabled. */
export const Empty: Story = {
  render: () => <PasswordResetPage />,
}

/** Both passwords entered and matching, submit enabled. */
export const Filled: Story = {
  render: () => <PasswordResetPage initialPassword="SuperSecret1" initialConfirm="SuperSecret1" />,
}