'use client';

import { useState } from 'react';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import Button from '@/components/ui/Button';
import { useAuth } from '@/presentation/hooks/useAuth';
import { useTranslation } from '@/hooks/useTranslation';
import { DEMO_EMAIL } from '@/lib/constants';

export default function LoginPage() {
  const router = useRouter();
  const { login, register } = useAuth();
  const { t } = useTranslation();
  const [isRegister, setIsRegister] = useState(false);
  const [error, setError] = useState('');
  const [form, setForm] = useState({
    name: '',
    email: '',
    password: '',
    phone: '',
    street: '',
    city: '',
    state: '',
    zip: '',
  });

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setError('');

    if (isRegister) {
      const success = register({
        name: form.name,
        email: form.email,
        password: form.password,
        phone: form.phone,
        address: {
          street: form.street,
          city: form.city,
          state: form.state,
          zip: form.zip,
        },
      });
      if (success) router.push('/account');
    } else {
      const success = login(form.email, form.password);
      if (success) {
        router.push('/account');
      } else {
        setError(t('auth.invalidCredentials', { email: DEMO_EMAIL }));
      }
    }
  };

  return (
    <div className="flex min-h-[70vh] items-center justify-center bg-gray-50 px-4 py-12">
      <div className="w-full max-w-md">
        <div className="mb-8 text-center">
          <div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-brand-700">
            <span className="font-display text-xl font-bold text-gold-400">
              {t('site.initials')}
            </span>
          </div>
          <h1 className="font-display text-2xl font-bold text-brand-900">
            {isRegister ? t('auth.createAccount') : t('auth.welcomeBack')}
          </h1>
          <p className="mt-1 text-sm text-gray-500">
            {isRegister
              ? t('auth.joinTagline', { name: t('site.name') })
              : t('auth.signInTagline', { name: t('site.name') })}
          </p>
        </div>

        <div className="card-premium p-8">
          <form onSubmit={handleSubmit} className="space-y-4">
            {isRegister && (
              <div>
                <label className="label-text">{t('auth.fullName')}</label>
                <input
                  required
                  className="input-field"
                  value={form.name}
                  onChange={(e) => setForm({ ...form, name: e.target.value })}
                />
              </div>
            )}

            <div>
              <label className="label-text">{t('auth.email')}</label>
              <input
                required
                type="email"
                className="input-field"
                value={form.email}
                onChange={(e) => setForm({ ...form, email: e.target.value })}
              />
            </div>

            <div>
              <label className="label-text">{t('auth.password')}</label>
              <input
                required
                type="password"
                className="input-field"
                value={form.password}
                onChange={(e) => setForm({ ...form, password: e.target.value })}
              />
            </div>

            {isRegister && (
              <>
                <div>
                  <label className="label-text">{t('auth.phone')}</label>
                  <input
                    required
                    type="tel"
                    className="input-field"
                    value={form.phone}
                    onChange={(e) => setForm({ ...form, phone: e.target.value })}
                  />
                </div>
                <div>
                  <label className="label-text">{t('auth.street')}</label>
                  <input
                    required
                    className="input-field"
                    value={form.street}
                    onChange={(e) => setForm({ ...form, street: e.target.value })}
                  />
                </div>
                <div className="grid grid-cols-2 gap-3">
                  <div>
                    <label className="label-text">{t('auth.city')}</label>
                    <input
                      required
                      className="input-field"
                      value={form.city}
                      onChange={(e) => setForm({ ...form, city: e.target.value })}
                    />
                  </div>
                  <div>
                    <label className="label-text">{t('auth.state')}</label>
                    <input
                      required
                      className="input-field"
                      value={form.state}
                      onChange={(e) => setForm({ ...form, state: e.target.value })}
                    />
                  </div>
                </div>
                <div>
                  <label className="label-text">{t('auth.zip')}</label>
                  <input
                    required
                    className="input-field"
                    value={form.zip}
                    onChange={(e) => setForm({ ...form, zip: e.target.value })}
                  />
                </div>
              </>
            )}

            {error && (
              <p className="rounded-lg bg-red-50 px-4 py-2 text-sm text-red-600">{error}</p>
            )}

            <Button type="submit" variant="primary" size="lg" className="w-full">
              {isRegister ? t('auth.register') : t('auth.signIn')}
            </Button>
          </form>

          <div className="mt-6 text-center">
            <button
              onClick={() => {
                setIsRegister(!isRegister);
                setError('');
              }}
              className="text-sm font-medium text-brand-600 hover:text-brand-800"
            >
              {isRegister ? t('auth.hasAccount') : t('auth.noAccount')}
            </button>
          </div>

          {!isRegister && (
            <div className="mt-4 rounded-lg bg-brand-50 px-4 py-3 text-center">
              <p className="text-xs text-brand-700">
                {t('auth.demo', { email: DEMO_EMAIL })}
              </p>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}