'use client';

/**
 * Contact form — fully driven by the merchant's dashboard configuration.
 *
 * The merchant configures the form in the Brainerce dashboard under
 *   Customers → Contact Forms → <form>
 *
 * From there they can:
 *   • edit the title, description, submit button label, success message
 *   • add/remove/reorder/hide any field (TEXT/TEXTAREA/EMAIL/PHONE/NUMBER/SELECT/
 *     MULTI_SELECT/CHECKBOX/URL/DATE)
 *   • toggle required, set placeholder/helpText/enumValues/validation
 *   • provide per-locale translations for every label/placeholder/helpText/successMessage
 *   • set field width (FULL/HALF/THIRD) for multi-column layouts
 *
 * Everything below is generic rendering logic — it adapts automatically to any
 * form shape returned by the API, so **you should not hardcode field keys or
 * labels here**. If you want a different visual layout, change the markup
 * inside `DynamicField` (keep the behavior) and keep using `schema.fields` as
 * the source of truth.
 *
 * API contract the page relies on:
 *   1. `GET /stores/{storeId}/contact-forms/main?locale={locale}` → `ContactFormPublic`
 *      (see `brainerce` SDK type). Server pre-resolves translations for the
 *      requested locale and strips any field with `isVisible=false`.
 *   2. `POST /stores/{storeId}/inquiries` with `{ formKey, fields, locale }` →
 *      `CreateInquiryResponse`. Unknown keys are stripped server-side.
 *
 * Rate limit: 3 submissions / 60s per IP. Honeypot field below blocks naive bots.
 * If the merchant has more than one form (e.g. 'main' + 'newsletter'), you can
 * list them via `client.contactForms.list()` and pick by `key`.
 */

import { useEffect, useMemo, useState } from 'react';
import type { ContactFormPublic, ContactFormPublicField } from 'brainerce';
import { getClient } from '@/core/lib/brainerce';
import { LoadingSpinner } from '@/ui/shared/loading-spinner';
import { useTranslations } from '@/core/lib/translations';

type FieldValue = string | string[] | boolean;

function defaultValueFor(field: ContactFormPublicField): FieldValue {
  if (field.type === 'CHECKBOX') return false;
  if (field.type === 'MULTI_SELECT') return [];
  return field.defaultValue ?? '';
}

function isEmpty(v: FieldValue): boolean {
  if (typeof v === 'string') return v.trim().length === 0;
  if (Array.isArray(v)) return v.length === 0;
  return v === false;
}

/** Map field.width → Tailwind col-span utilities (6-column grid). */
function widthColSpan(width?: string): string {
  switch (width) {
    case 'HALF':
      return 'col-span-6 sm:col-span-3';
    case 'THIRD':
      return 'col-span-6 sm:col-span-2';
    default:
      return 'col-span-6';
  }
}

const inputClass =
  'border-border bg-background text-foreground placeholder:text-muted-foreground focus:ring-primary/20 focus:border-primary h-10 w-full rounded border px-3 text-sm focus:outline-none focus:ring-2';

const inputErrorClass =
  'border-red-400 bg-background text-foreground placeholder:text-muted-foreground focus:ring-red-200 focus:border-red-500 h-10 w-full rounded border px-3 text-sm focus:outline-none focus:ring-2';

const textareaClass =
  'border-border bg-background text-foreground placeholder:text-muted-foreground focus:ring-primary/20 focus:border-primary w-full rounded border px-3 py-2 text-sm focus:outline-none focus:ring-2';

const textareaErrorClass =
  'border-red-400 bg-background text-foreground placeholder:text-muted-foreground focus:ring-red-200 focus:border-red-500 w-full rounded border px-3 py-2 text-sm focus:outline-none focus:ring-2';

export default function ContactPage() {
  const t = useTranslations('contact');
  const [schema, setSchema] = useState<ContactFormPublic | null>(null);
  const [schemaError, setSchemaError] = useState<string | null>(null);
  const [values, setValues] = useState<Record<string, FieldValue>>({});
  const [errors, setErrors] = useState<Record<string, string>>({});
  const [honeypot, setHoneypot] = useState('');
  const [loading, setLoading] = useState(false);
  const [sent, setSent] = useState(false);
  const [submitError, setSubmitError] = useState<string | null>(null);

  const locale = useMemo(() => {
    if (typeof document !== 'undefined') return document.documentElement.lang || undefined;
    return undefined;
  }, []);

  useEffect(() => {
    let cancelled = false;
    (async () => {
      try {
        const client = getClient();
        const form = await client.contactForms.get('main', locale);
        if (cancelled) return;
        setSchema(form);
        const initial: Record<string, FieldValue> = {};
        for (const field of form.fields) initial[field.key] = defaultValueFor(field);
        setValues(initial);
      } catch (err) {
        if (cancelled) return;
        setSchemaError(err instanceof Error ? err.message : t('genericError'));
      }
    })();
    return () => {
      cancelled = true;
    };
  }, [t, locale]);

  function updateValue(key: string, value: FieldValue) {
    setValues((prev) => ({ ...prev, [key]: value }));
    // Clear field error on input change
    if (errors[key]) {
      setErrors((prev) => {
        const next = { ...prev };
        delete next[key];
        return next;
      });
    }
  }

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    if (loading || !schema) return;

    if (honeypot.trim().length > 0) {
      setSent(true);
      return;
    }

    // ── Client-side required-field validation ──
    const newErrors: Record<string, string> = {};
    for (const field of schema.fields) {
      if (field.isRequired && isEmpty(values[field.key] ?? defaultValueFor(field))) {
        newErrors[field.key] = t('fieldRequired', { label: field.label });
      }
    }
    if (Object.keys(newErrors).length > 0) {
      setErrors(newErrors);
      return; // block submission — do NOT send to server
    }
    setErrors({});

    try {
      setLoading(true);
      setSubmitError(null);

      const payload: Record<string, unknown> = {};
      for (const field of schema.fields) {
        const raw = values[field.key];
        if (isEmpty(raw)) continue;
        payload[field.key] = typeof raw === 'string' ? raw.trim() : raw;
      }

      await getClient().createInquiry({
        formKey: schema.key,
        fields: payload,
        locale,
      });

      setSent(true);
      const reset: Record<string, FieldValue> = {};
      for (const field of schema.fields) reset[field.key] = defaultValueFor(field);
      setValues(reset);
      setHoneypot('');
    } catch (err) {
      setSubmitError(err instanceof Error ? err.message : t('genericError'));
    } finally {
      setLoading(false);
    }
  }

  if (schemaError) {
    return (
      <div className="mx-auto max-w-2xl px-4 py-12 sm:px-6 lg:px-8">
        <div className="bg-destructive/10 border-destructive/20 text-destructive rounded-lg border px-4 py-3 text-sm">
          {schemaError}
        </div>
      </div>
    );
  }

  if (!schema) {
    return (
      <div className="mx-auto flex max-w-2xl items-center justify-center px-4 py-24 sm:px-6 lg:px-8">
        <LoadingSpinner />
      </div>
    );
  }

  return (
    <div className="mx-auto max-w-2xl px-4 py-12 sm:px-6 lg:px-8">
      <div className="mb-8 text-center">
        <h1 className="text-foreground text-3xl font-bold">{schema.name || t('title')}</h1>
        {schema.description ? (
          <p className="text-muted-foreground mt-2 text-sm">{schema.description}</p>
        ) : (
          <p className="text-muted-foreground mt-2 text-sm">{t('subtitle')}</p>
        )}
      </div>

      {submitError && (
        <div className="bg-destructive/10 border-destructive/20 text-destructive mb-6 rounded-lg border px-4 py-3 text-sm">
          {submitError}
        </div>
      )}

      {sent ? (
        <div className="rounded-lg border border-green-200 bg-green-50 px-4 py-6 text-center text-sm text-green-800 dark:border-green-800 dark:bg-green-950/30 dark:text-green-300">
          <p className="font-medium">{t('thanksTitle')}</p>
          <p className="mt-1">{schema.successMessage || t('thanksBody')}</p>
          <button
            type="button"
            onClick={() => setSent(false)}
            className="text-primary mt-4 text-sm font-medium hover:underline"
          >
            {t('sendAnother')}
          </button>
        </div>
      ) : (
        <form onSubmit={handleSubmit} className="space-y-2" noValidate>
          <div
            aria-hidden="true"
            className="pointer-events-none absolute -start-[10000px] h-0 w-0 overflow-hidden"
          >
            <label htmlFor="contact-honeypot">Leave this field empty</label>
            <input
              id="contact-honeypot"
              type="text"
              tabIndex={-1}
              autoComplete="off"
              value={honeypot}
              onChange={(e) => setHoneypot(e.target.value)}
            />
          </div>

          {/* 6-column grid — FULL=span 6, HALF=span 3, THIRD=span 2; stacks on mobile */}
          <div className="grid grid-cols-6 gap-4">
            {schema.fields.map((field) => (
              <DynamicField
                key={field.key}
                field={field}
                value={values[field.key] ?? defaultValueFor(field)}
                error={errors[field.key]}
                onChange={(v) => updateValue(field.key, v)}
                t={t}
              />
            ))}
          </div>

          <button
            type="submit"
            disabled={loading}
            className="bg-primary text-primary-foreground flex h-10 w-full items-center justify-center gap-2 rounded text-sm font-medium transition-opacity hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-50"
          >
            {loading ? (
              <>
                <LoadingSpinner
                  size="sm"
                  className="border-primary-foreground/30 border-t-primary-foreground"
                />
                {t('sending')}
              </>
            ) : (
              schema.submitButton || t('send')
            )}
          </button>
        </form>
      )}
    </div>
  );
}

function DynamicField({
  field,
  value,
  error,
  onChange,
  t,
}: {
  field: ContactFormPublicField;
  value: FieldValue;
  error?: string;
  onChange: (v: FieldValue) => void;
  t: (key: string, values?: Record<string, string>) => string;
}) {
  const id = `contact-${field.key}`;
  const hasError = !!error;
  const label = (
    <label htmlFor={id} className="text-foreground mb-1.5 block text-sm font-medium">
      {field.label}
      {field.isRequired ? (
        <span className="ms-0.5 text-red-500" aria-hidden>
          *
        </span>
      ) : (
        <span className="text-muted-foreground ms-1">({t('optional')})</span>
      )}
    </label>
  );
  const help = field.helpText ? (
    <p className="text-muted-foreground mt-1 text-xs">{field.helpText}</p>
  ) : null;
  const errorEl = error ? <p className="mt-1 text-xs text-red-500">{error}</p> : null;

  const maxLength = field.validation?.maxLength;
  const minLength = field.validation?.minLength;
  const min = field.validation?.min;
  const max = field.validation?.max;
  const pattern = field.validation?.pattern;
  const strVal = typeof value === 'string' ? value : '';
  const iClass = hasError ? inputErrorClass : inputClass;
  const tClass = hasError ? textareaErrorClass : textareaClass;

  switch (field.type) {
    case 'TEXTAREA':
      return (
        <div className={widthColSpan(field.width)}>
          {label}
          <textarea
            id={id}
            required={field.isRequired}
            maxLength={maxLength}
            minLength={minLength}
            rows={6}
            placeholder={field.placeholder}
            value={strVal}
            onChange={(e) => onChange(e.target.value)}
            className={tClass}
          />
          {help}
          {errorEl}
        </div>
      );

    case 'SELECT':
      return (
        <div className={widthColSpan(field.width)}>
          {label}
          <select
            id={id}
            required={field.isRequired}
            value={strVal}
            onChange={(e) => onChange(e.target.value)}
            className={iClass}
          >
            <option value="">—</option>
            {field.enumValues?.map((opt) => (
              <option key={opt.value} value={opt.value}>
                {opt.label}
              </option>
            ))}
          </select>
          {help}
          {errorEl}
        </div>
      );

    case 'MULTI_SELECT': {
      const arr = Array.isArray(value) ? value : [];
      return (
        <div className={widthColSpan(field.width)}>
          {label}
          <div className="space-y-2">
            {field.enumValues?.map((opt) => {
              const checked = arr.includes(opt.value);
              return (
                <label key={opt.value} className="flex items-center gap-2 text-sm">
                  <input
                    type="checkbox"
                    checked={checked}
                    onChange={(e) => {
                      if (e.target.checked) onChange([...arr, opt.value]);
                      else onChange(arr.filter((v) => v !== opt.value));
                    }}
                  />
                  <span>{opt.label}</span>
                </label>
              );
            })}
          </div>
          {help}
          {errorEl}
        </div>
      );
    }

    case 'CHECKBOX':
      return (
        <div className={widthColSpan(field.width)}>
          <label htmlFor={id} className="flex items-start gap-2 text-sm">
            <input
              id={id}
              type="checkbox"
              required={field.isRequired}
              checked={value === true}
              onChange={(e) => onChange(e.target.checked)}
              className="mt-0.5"
            />
            <span className="text-foreground">{field.label}</span>
          </label>
          {help}
          {errorEl}
        </div>
      );

    case 'NUMBER':
      return (
        <div className={widthColSpan(field.width)}>
          {label}
          <input
            id={id}
            type="number"
            required={field.isRequired}
            min={min}
            max={max}
            placeholder={field.placeholder}
            value={strVal}
            onChange={(e) => onChange(e.target.value)}
            className={iClass}
          />
          {help}
          {errorEl}
        </div>
      );

    case 'EMAIL':
      return (
        <div className={widthColSpan(field.width)}>
          {label}
          <input
            id={id}
            type="email"
            required={field.isRequired}
            autoComplete="email"
            placeholder={field.placeholder}
            value={strVal}
            onChange={(e) => onChange(e.target.value)}
            className={iClass}
          />
          {help}
          {errorEl}
        </div>
      );

    case 'PHONE':
      return (
        <div className={widthColSpan(field.width)}>
          {label}
          <input
            id={id}
            type="tel"
            required={field.isRequired}
            autoComplete="tel"
            placeholder={field.placeholder}
            value={strVal}
            onChange={(e) => onChange(e.target.value)}
            className={iClass}
          />
          {help}
          {errorEl}
        </div>
      );

    case 'URL':
      return (
        <div className={widthColSpan(field.width)}>
          {label}
          <input
            id={id}
            type="url"
            required={field.isRequired}
            placeholder={field.placeholder}
            value={strVal}
            onChange={(e) => onChange(e.target.value)}
            className={iClass}
          />
          {help}
          {errorEl}
        </div>
      );

    case 'DATE':
      return (
        <div className={widthColSpan(field.width)}>
          {label}
          <input
            id={id}
            type="date"
            required={field.isRequired}
            value={strVal}
            onChange={(e) => onChange(e.target.value)}
            className={iClass}
          />
          {help}
          {errorEl}
        </div>
      );

    case 'TEXT':
    default:
      return (
        <div className={widthColSpan(field.width)}>
          {label}
          <input
            id={id}
            type="text"
            required={field.isRequired}
            maxLength={maxLength}
            minLength={minLength}
            pattern={pattern}
            placeholder={field.placeholder}
            value={strVal}
            onChange={(e) => onChange(e.target.value)}
            className={iClass}
          />
          {help}
          {errorEl}
        </div>
      );
  }
}