'use client';

import { useState } from 'react';
import type { AuthForm } from '@/app/hooks/useAuth';
import type { AuthUser } from '@/app/lib/types';
import { AuthDialog } from './AuthDialog';
import { useT } from './ContentProvider';
import { UserIcon } from './icons';

interface AccountBoxProps {
  user: AuthUser | null;
  onSubmit: (mode: 'signin' | 'signup', form: AuthForm) => Promise<string | null>;
  onSignOut: () => void;
}

const LINK = 'cursor-pointer rounded border-0 bg-transparent p-0 text-[13px] font-semibold text-accent hover:underline';

/** Sidebar footer: who you are, or an invitation to sign in so conversations follow you to other devices. */
export function AccountBox({ user, onSubmit, onSignOut }: AccountBoxProps) {
  const t = useT();
  const [dialog, setDialog] = useState<'signin' | 'signup' | null>(null);

  return (
    <>
      <div className="mb-1.5 flex items-start gap-2 rounded-[10px] border border-line bg-panel px-2.5 py-2">
        <span className="mt-0.5 flex size-6 shrink-0 items-center justify-center rounded-[50%] bg-accent/15"><UserIcon color="var(--color-violet-deep)" /></span>
        {user ? (
          <div className="min-w-0 flex-1">
            <p className="m-0 overflow-hidden text-[14px] font-medium text-ellipsis whitespace-nowrap text-ink">{user.displayName ?? user.email}</p>
            {user.displayName && <p className="m-0 overflow-hidden text-[12px] text-ellipsis whitespace-nowrap text-muted">{user.email}</p>}
            <button onClick={onSignOut} className={`${LINK} mt-0.5`}>{t('copy.signOut')}</button>
          </div>
        ) : (
          <div className="min-w-0 flex-1">
            <p className="m-0 text-[14px] font-medium text-ink">{t('copy.guestTitle')}</p>
            <p className="m-0 mb-1 text-[12px] leading-[1.35] text-muted">{t('copy.guestBody')}</p>
            <div className="flex gap-3">
              <button onClick={() => setDialog('signin')} className={LINK}>{t('copy.signIn')}</button>
              <button onClick={() => setDialog('signup')} className={LINK}>{t('copy.signUp')}</button>
            </div>
          </div>
        )}
      </div>
      {dialog && <AuthDialog initialMode={dialog} onSubmit={onSubmit} onClose={() => setDialog(null)} />}
    </>
  );
}