import type { Meta, StoryObj } from '@storybook/nextjs-vite';
import { useState } from 'react';
import { type AuthSsoProvider, AuthShell, BackToLoginLink, CompleteAccountForm } from '../../components/features/auth';
import { TabSelector } from '../../components/ui/tab-selector';

const meta = {
  title: 'Auth/Complete Account',
  component: CompleteAccountForm,
  parameters: {
    layout: 'fullscreen',
    docs: {
      description: {
        component:
          'Account details form shared by Sign Up ("Complete your Account") and Accept Invitation: Continue with Google/Microsoft on top, then name + password fields. Presentational + controlled.',
      },
    },
  },
  tags: ['autodocs'],
} satisfies Meta<typeof CompleteAccountForm>;

export default meta;
type Story = StoryObj<typeof meta>;

const SSO_PROVIDERS: AuthSsoProvider[] = ['google', 'microsoft'];

function useAccountFields(filled: boolean) {
  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 = !!firstName.trim() && !!lastName.trim() && password.length >= 8 && password === confirmPassword;

  return {
    firstName,
    lastName,
    password,
    confirmPassword,
    onFirstNameChange: setFirstName,
    onLastNameChange: setLastName,
    onPasswordChange: setPassword,
    onConfirmPasswordChange: setConfirmPassword,
    submitDisabled: !isValid,
  };
}

/** Sign Up step: tabs + Back to Organization secondary action. */
function SignUpPage({ filled = false }: { filled?: boolean }) {
  const fields = useAccountFields(filled);

  const tabs = (
    <TabSelector
      value="signup"
      onValueChange={() => {}}
      variant="primary"
      items={[
        { id: 'signup', label: 'Sign Up' },
        { id: 'login', label: 'Login' },
      ]}
    />
  );

  return (
    <AuthShell tabs={tabs}>
      <CompleteAccountForm
        {...fields}
        onSubmit={() => {}}
        onBack={() => {}}
        ssoProviders={SSO_PROVIDERS}
        onSsoClick={() => {}}
      />
    </AuthShell>
  );
}

/** Accept Invitation: no tabs, no back action; "Back to Login" in the shell footer. */
function InvitationPage({ filled = false }: { filled?: boolean }) {
  const fields = useAccountFields(filled);

  return (
    <AuthShell footer={<BackToLoginLink onClick={() => {}} />}>
      <CompleteAccountForm
        {...fields}
        onSubmit={() => {}}
        ssoProviders={SSO_PROVIDERS}
        onSsoClick={() => {}}
        title="Accept Invitation"
        subtitle="Complete your registration to join the organization"
      />
    </AuthShell>
  );
}

export const SignUpEmpty: Story = { render: () => <SignUpPage /> };
export const SignUpFilled: Story = { render: () => <SignUpPage filled /> };
export const InvitationEmpty: Story = { render: () => <InvitationPage /> };
export const InvitationFilled: Story = { render: () => <InvitationPage filled /> };