import React from 'react';
import { useTranslation } from 'react-i18next';
import { CheckCircle2, Lock, MailWarning, User } from 'lucide-react';
import { YStack, XStack } from '@tamagui/stacks';
import { SizableText as Text } from '@tamagui/text';
import toast from 'react-hot-toast';
import { MobileShell } from './components/MobileShell';
import { MobileCard, CTAButton, PillBadge } from './components/Primitives';
import { MobileField, MobileInput, MobileSelect } from './components/FormControls';
import { fetchTenantProfile, updateTenantProfile, type TenantAccountProfile } from '../api';
import { getApiErrorMessage, getApiValidationMessage } from '../lib/apiError';
import { ADMIN_PROFILE_PATH } from '../constants';
import { useBackNavigation } from './hooks/useBackNavigation';
import { useAdminTheme } from './theme';
import i18n from '../i18n';

type ProfileFormState = {
  name: string;
  email: string;
  preferredLocale: string;
  currentPassword: string;
  password: string;
  passwordConfirmation: string;
};

const LOCALE_OPTIONS = [
  { value: '', labelKey: 'profile.locale.auto', fallback: 'Automatisch' },
  { value: 'de', label: 'Deutsch' },
  { value: 'en', label: 'English' },
];

export default function MobileProfileAccountPage() {
  const { t } = useTranslation('settings');
  const { text, muted, danger, subtle, primary, accentSoft } = useAdminTheme();
  const back = useBackNavigation(ADMIN_PROFILE_PATH);

  const [profile, setProfile] = React.useState<TenantAccountProfile | null>(null);
  const [form, setForm] = React.useState<ProfileFormState>({
    name: '',
    email: '',
    preferredLocale: '',
    currentPassword: '',
    password: '',
    passwordConfirmation: '',
  });
  const [loading, setLoading] = React.useState(true);
  const [savingAccount, setSavingAccount] = React.useState(false);
  const [savingPassword, setSavingPassword] = React.useState(false);
  const [error, setError] = React.useState<string | null>(null);
  const loadErrorMessage = t('profile.errors.load', 'Profil konnte nicht geladen werden.');

  const dateFormatter = React.useMemo(
    () =>
      new Intl.DateTimeFormat(i18n.language || 'de', {
        day: '2-digit',
        month: 'long',
        year: 'numeric',
      }),
    [i18n.language],
  );

  React.useEffect(() => {
    (async () => {
      setLoading(true);
      try {
        const data = await fetchTenantProfile();
        setProfile(data);
        setForm((prev) => ({
          ...prev,
          name: data.name ?? '',
          email: data.email ?? '',
          preferredLocale: data.preferred_locale ?? '',
        }));
        setError(null);
      } catch (err) {
        setError(getApiErrorMessage(err, loadErrorMessage));
      } finally {
        setLoading(false);
      }
    })();
  }, []);

  const verifiedAt = profile?.email_verified_at ? new Date(profile.email_verified_at) : null;
  const verifiedDate = verifiedAt ? dateFormatter.format(verifiedAt) : null;
  const emailStatusLabel = profile?.email_verified
    ? t('profile.status.emailVerified', 'E-Mail bestätigt')
    : t('profile.status.emailNotVerified', 'Bestätigung erforderlich');
  const emailHint = profile?.email_verified
    ? t('profile.status.verifiedHint', 'Bestätigt am {{date}}.', { date: verifiedDate ?? '' })
    : t('profile.status.unverifiedHint', 'Bei Änderung der E-Mail senden wir dir automatisch eine neue Bestätigung.');

  const buildPayload = (includePassword: boolean) => ({
    name: form.name.trim(),
    email: form.email.trim(),
    preferred_locale: form.preferredLocale ? form.preferredLocale : null,
    ...(includePassword
      ? {
          current_password: form.currentPassword,
          password: form.password,
          password_confirmation: form.passwordConfirmation,
        }
      : {}),
  });

  const handleAccountSave = async () => {
    setSavingAccount(true);
    try {
      const updated = await updateTenantProfile(buildPayload(false));
      setProfile(updated);
      setError(null);
      toast.success(t('profile.toasts.updated', 'Profil wurde aktualisiert.'));
    } catch (err) {
      const message = getApiValidationMessage(err, t('profile.errors.update', 'Profil konnte nicht aktualisiert werden.'));
      setError(message);
      toast.error(message);
    } finally {
      setSavingAccount(false);
    }
  };

  const handlePasswordSave = async () => {
    setSavingPassword(true);
    try {
      const updated = await updateTenantProfile(buildPayload(true));
      setProfile(updated);
      setError(null);
      setForm((prev) => ({
        ...prev,
        currentPassword: '',
        password: '',
        passwordConfirmation: '',
      }));
      toast.success(t('profile.toasts.passwordChanged', 'Passwort wurde aktualisiert.'));
    } catch (err) {
      const message = getApiValidationMessage(err, t('profile.errors.update', 'Profil konnte nicht aktualisiert werden.'));
      setError(message);
      toast.error(message);
    } finally {
      setSavingPassword(false);
    }
  };

  const passwordReady =
    form.currentPassword.trim().length > 0 &&
    form.password.trim().length > 0 &&
    form.passwordConfirmation.trim().length > 0;

  return (
    <MobileShell
      activeTab="profile"
      title={t('profile.title', 'Profil')}
      onBack={back}
    >
      {error ? (
        <MobileCard>
          <Text fontWeight="700" color={danger}>
            {error}
          </Text>
        </MobileCard>
      ) : null}

      <MobileCard space="$3">
        <XStack alignItems="center" space="$3">
          <XStack
            width={48}
            height={48}
            borderRadius={16}
            alignItems="center"
            justifyContent="center"
            backgroundColor={accentSoft}
          >
            <User size={20} color={primary} />
          </XStack>
          <YStack space="$1">
            <Text fontSize="$md" fontWeight="800" color={text}>
              {form.name || profile?.email || t('profile.title', 'Profil')}
            </Text>
            <Text fontSize="$sm" color={muted}>
              {form.email || profile?.email || '—'}
            </Text>
          </YStack>
        </XStack>
        <XStack alignItems="center" space="$2" flexWrap="wrap">
          {profile?.email_verified ? (
            <CheckCircle2 size={14} color={subtle} />
          ) : (
            <MailWarning size={14} color={subtle} />
          )}
          <PillBadge tone={profile?.email_verified ? 'success' : 'warning'}>
            {emailStatusLabel}
          </PillBadge>
          <Text fontSize="$xs" color={muted}>
            {emailHint}
          </Text>
        </XStack>
      </MobileCard>

      <MobileCard space="$3">
        <XStack alignItems="center" space="$2">
          <User size={16} color={text} />
          <Text fontSize="$md" fontWeight="800" color={text}>
            {t('profile.sections.account.heading', 'Account-Informationen')}
          </Text>
        </XStack>
        <Text fontSize="$sm" color={muted}>
          {t('profile.sections.account.description', 'Passe Anzeigename, E-Mail-Adresse und Sprache der Admin-Oberfläche an.')}
        </Text>
        {loading ? (
          <Text fontSize="$sm" color={muted}>
            {t('profile.loading', 'Lädt ...')}
          </Text>
        ) : (
          <YStack space="$3">
            <MobileField label={t('profile.fields.name', 'Anzeigename')}>
              <MobileInput
                value={form.name}
                onChange={(event) => setForm((prev) => ({ ...prev, name: event.target.value }))}
                placeholder={t('profile.placeholders.name', 'z. B. Hochzeitsplanung Schmidt')}
                hasError={false}
              />
            </MobileField>
            <MobileField label={t('profile.fields.email', 'E-Mail-Adresse')}>
              <MobileInput
                value={form.email}
                onChange={(event) => setForm((prev) => ({ ...prev, email: event.target.value }))}
                placeholder="mail@beispiel.de"
                type="email"
                hasError={false}
              />
            </MobileField>
            <MobileField label={t('profile.fields.locale', 'Bevorzugte Sprache')}>
              <MobileSelect
                value={form.preferredLocale}
                onChange={(event) => setForm((prev) => ({ ...prev, preferredLocale: event.target.value }))}
              >
                {LOCALE_OPTIONS.map((option) => (
                  <option key={option.value} value={option.value}>
                    {option.label ?? t(option.labelKey, option.fallback)}
                  </option>
                ))}
              </MobileSelect>
            </MobileField>
            <CTAButton
              label={t('profile.actions.save', 'Speichern')}
              onPress={handleAccountSave}
              disabled={savingAccount || loading}
              loading={savingAccount}
            />
          </YStack>
        )}
      </MobileCard>

      <MobileCard space="$3">
        <XStack alignItems="center" space="$2">
          <Lock size={16} color={text} />
          <Text fontSize="$md" fontWeight="800" color={text}>
            {t('profile.sections.password.heading', 'Passwort ändern')}
          </Text>
        </XStack>
        <Text fontSize="$sm" color={muted}>
          {t('profile.sections.password.description', 'Wähle ein sicheres Passwort, um deinen Admin-Zugang zu schützen.')}
        </Text>
        <YStack space="$3">
          <MobileField label={t('profile.fields.currentPassword', 'Aktuelles Passwort')}>
            <MobileInput
              value={form.currentPassword}
              onChange={(event) => setForm((prev) => ({ ...prev, currentPassword: event.target.value }))}
              placeholder="••••••••"
              type="password"
              hasError={false}
            />
          </MobileField>
          <MobileField label={t('profile.fields.newPassword', 'Neues Passwort')} hint={t('profile.sections.password.hint', 'Nutze mindestens 8 Zeichen und kombiniere Buchstaben sowie Zahlen für mehr Sicherheit.')}>
            <MobileInput
              value={form.password}
              onChange={(event) => setForm((prev) => ({ ...prev, password: event.target.value }))}
              placeholder="••••••••"
              type="password"
              hasError={false}
            />
          </MobileField>
          <MobileField label={t('profile.fields.passwordConfirmation', 'Passwort bestätigen')}>
            <MobileInput
              value={form.passwordConfirmation}
              onChange={(event) => setForm((prev) => ({ ...prev, passwordConfirmation: event.target.value }))}
              placeholder="••••••••"
              type="password"
              hasError={false}
            />
          </MobileField>
          <CTAButton
            label={t('profile.actions.updatePassword', 'Passwort aktualisieren')}
            onPress={handlePasswordSave}
            disabled={!passwordReady || savingPassword || loading}
            loading={savingPassword}
            tone="ghost"
          />
        </YStack>
      </MobileCard>
    </MobileShell>
  );
}