import { Lock, LogIn, Mail } from 'lucide-react';
import type { FormEvent } from 'react';

import { AuthField } from '@/components/sign-in-modal/AuthField';
import type {
  SignInModalActions,
  SignInModalState,
} from '@/components/sign-in-modal/types';
import { Button } from '@/components/ui/button';

type SignInFormProps = {
  state: SignInModalState;
  actions: SignInModalActions;
};

export function SignInForm({ state, actions }: SignInFormProps) {
  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    void actions.handleSignIn();
  };

  return (
    <form onSubmit={handleSubmit} className="space-y-4">
      <AuthField
        label="Email Address"
        type="email"
        value={state.draft.email}
        onChange={(email) => actions.updateDraft({ email })}
        placeholder="you@school.edu"
        icon={Mail}
        required
      />
      <AuthField
        label="Password"
        type="password"
        value={state.draft.password}
        onChange={(password) => actions.updateDraft({ password })}
        placeholder="Enter your password"
        icon={Lock}
        required
        minLength={6}
        showPassword={state.draft.showPassword}
        onTogglePassword={() => actions.setShowPassword(!state.draft.showPassword)}
      />
      <Button
        type="submit"
        disabled={state.loading}
        loading={state.loading}
        loadingLabel="Signing in..."
        leadingIcon={<LogIn size={18} />}
        className="w-full py-3 bg-gradient-to-r from-violet-500 to-amber-500 hover:from-violet-600 hover:to-amber-600 text-white font-semibold rounded-xl transition-all duration-200 shadow-lg shadow-violet-500/25 hover:shadow-violet-500/40 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
      >
        Sign In
      </Button>
    </form>
  );
}
