'use client';

import { useState } from 'react';
import Link from 'next/link';

type AuthFormProps = {
  title: string;
  description: string;
  submitLabel: string;
  fields: {
    label: string;
    type: string;
    placeholder: string;
  }[];
  footerText: string;
  footerLinkText: string;
  footerLinkHref: string;
};

export default function AuthForm({
  title,
  description,
  submitLabel,
  fields,
  footerText,
  footerLinkText,
  footerLinkHref,
}: AuthFormProps) {
  // ✅ Hooks IMMER hier drin
  const [formData, setFormData] = useState<Record<string, string>>({});

  function handleSubmit(event: React.FormEvent) {
    event.preventDefault();

    if (Object.values(formData).some((value) => value.trim() === '')) {
      alert('Bitte fülle alle Felder aus.');
      return;
    }

    console.log('Formulardaten:', formData);
    alert('Formular ist technisch bereit ✅ (Backend kommt später)');
  }

  return (
    <section
      style={{
        maxWidth: '420px',
        margin: '4rem auto',
        padding: '2rem',
        border: '1px solid #e5e5e5',
        borderRadius: '16px',
        display: 'grid',
        gap: '1.5rem',
      }}
    >
      <header>
        <h1 style={{ marginBottom: '0.5rem' }}>{title}</h1>
        <p style={{ margin: 0, color: '#555' }}>{description}</p>
      </header>

      <form onSubmit={handleSubmit} style={{ display: 'grid', gap: '1rem' }}>
        {fields.map((field) => (
          <label
            key={field.label}
            style={{ display: 'grid', gap: '0.3rem' }}
          >
            <span>{field.label}</span>
            <input
              type={field.type}
              placeholder={field.placeholder}
              value={formData[field.label] || ''}
              onChange={(event) =>
                setFormData({
                  ...formData,
                  [field.label]: event.target.value,
                })
              }
              style={{
                padding: '0.6rem',
                borderRadius: '8px',
                border: '1px solid #ccc',
              }}
            />
          </label>
        ))}

        <button
          type="submit"
          style={{
            marginTop: '0.5rem',
            padding: '0.7rem',
            borderRadius: '10px',
            border: 'none',
            backgroundColor: '#2E7D32',
            color: 'white',
            fontWeight: 600,
            cursor: 'pointer',
          }}
        >
          {submitLabel}
        </button>
      </form>

      <footer style={{ textAlign: 'center', fontSize: '0.9rem' }}>
        {footerText}{' '}
        <Link href={footerLinkHref}>{footerLinkText}</Link>
      </footer>
    </section>
  );
}