'use client';

import { useState } from 'react';
import type { CustomerProfile } from 'brainerce';
import { getClient } from '@/core/lib/brainerce';
import { useTranslations } from '@/core/lib/translations';
import { cn } from '@/core/lib/utils';
import { birthMonthKey, toBirthdayNumber } from '@/core/lib/birthday';
import { BirthdayPicker } from '@/components/shared/birthday-picker';
import { useStoreCapabilities } from '@/core/providers/store-provider';

interface ProfileSectionProps {
  profile: CustomerProfile;
  onProfileUpdate?: (updated: CustomerProfile) => void;
  className?: string;
}

export function ProfileSection({ profile, onProfileUpdate, className }: ProfileSectionProps) {
  const t = useTranslations('account');
  const tc = useTranslations('common');
  const { capabilities } = useStoreCapabilities();
  /** Explicit `true` only — see the note on the same gate in `register-form.tsx`. */
  const birthdayGiftOn = capabilities?.features.hasBirthdayRewards === true;
  const [editing, setEditing] = useState(false);
  const [saving, setSaving] = useState(false);
  const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
  const [form, setForm] = useState({
    firstName: profile.firstName || '',
    lastName: profile.lastName || '',
    phone: profile.phone || '',
    // Seeded from the fetched profile so a saved birthday renders back into
    // the picker instead of the form reopening blank. Held as strings to match
    // the other fields; '' means no birthday is set.
    birthMonth: profile.birthMonth ? String(profile.birthMonth) : '',
    birthDay: profile.birthDay ? String(profile.birthDay) : '',
  });

  const fullName = [profile.firstName, profile.lastName].filter(Boolean).join(' ');
  const initials =
    [profile.firstName?.[0], profile.lastName?.[0]].filter(Boolean).join('').toUpperCase() ||
    profile.email[0].toUpperCase();

  // Stored birthday for the read-only view. Both halves always arrive together,
  // and an out-of-range month resolves to null so nothing renders rather than a
  // raw key path.
  const storedMonthKey = profile.birthMonth ? birthMonthKey(profile.birthMonth) : null;
  const storedBirthday =
    storedMonthKey && profile.birthDay
      ? tc('birthdayDisplay', {
          month: tc(storedMonthKey),
          day: String(profile.birthDay),
        })
      : null;

  function startEditing() {
    setForm({
      firstName: profile.firstName || '',
      lastName: profile.lastName || '',
      phone: profile.phone || '',
      birthMonth: profile.birthMonth ? String(profile.birthMonth) : '',
      birthDay: profile.birthDay ? String(profile.birthDay) : '',
    });
    setMessage(null);
    setEditing(true);
  }

  /**
   * The picker hands back both halves at once, or two nulls when the shopper
   * clears the field. State stays as strings so the save path below is
   * unchanged.
   */
  function selectBirthday(month: number | null, day: number | null) {
    setForm((f) => ({
      ...f,
      birthMonth: month ? String(month) : '',
      birthDay: day ? String(day) : '',
    }));
    setMessage(null);
  }

  function cancelEditing() {
    setEditing(false);
    setMessage(null);
  }

  async function handleSave(e: React.FormEvent) {
    e.preventDefault();

    const birthMonth = toBirthdayNumber(form.birthMonth);
    const birthDay = toBirthdayNumber(form.birthDay);

    // Half a birthday is an HTTP 400 at the API, so stop here with something
    // the shopper can act on instead of showing the generic save failure.
    if ((birthMonth === null) !== (birthDay === null)) {
      setMessage({ type: 'error', text: tc('birthdayIncomplete') });
      return;
    }

    setSaving(true);
    setMessage(null);

    try {
      const client = getClient();
      const updated = await client.updateMyProfile({
        firstName: form.firstName || undefined,
        lastName: form.lastName || undefined,
        phone: form.phone || undefined,
        // Deliberately NOT the `|| undefined` shape used above: leaving these
        // two keys out tells the API to KEEP the stored birthday, so a shopper
        // who cleared the picker could never remove it. Explicit nulls delete
        // it. Do not "tidy" this back into the pattern of the fields above.
        birthMonth,
        birthDay,
      });
      onProfileUpdate?.(updated);
      setEditing(false);
      setMessage({ type: 'success', text: t('profileUpdated') });
      setTimeout(() => setMessage(null), 3000);
    } catch {
      setMessage({ type: 'error', text: t('profileUpdateFailed') });
    } finally {
      setSaving(false);
    }
  }

  return (
    <div className={cn('border-border rounded-lg border p-6', className)}>
      <div className="flex items-start gap-4">
        {/* Avatar */}
        <div className="bg-primary/10 text-primary flex h-14 w-14 flex-shrink-0 items-center justify-center rounded-full text-lg font-semibold">
          {initials}
        </div>

        <div className="min-w-0 flex-1">
          {editing ? (
            <form onSubmit={handleSave} className="space-y-3">
              <div className="grid grid-cols-2 gap-3">
                <div>
                  <label className="text-muted-foreground mb-1 block text-xs font-medium">
                    {t('firstName')}
                  </label>
                  <input
                    type="text"
                    value={form.firstName}
                    onChange={(e) => setForm((f) => ({ ...f, firstName: e.target.value }))}
                    className="border-border bg-background text-foreground focus:border-primary w-full rounded-md border px-3 py-1.5 text-sm outline-none"
                    autoFocus
                  />
                </div>
                <div>
                  <label className="text-muted-foreground mb-1 block text-xs font-medium">
                    {t('lastName')}
                  </label>
                  <input
                    type="text"
                    value={form.lastName}
                    onChange={(e) => setForm((f) => ({ ...f, lastName: e.target.value }))}
                    className="border-border bg-background text-foreground focus:border-primary w-full rounded-md border px-3 py-1.5 text-sm outline-none"
                  />
                </div>
              </div>
              <div>
                <label className="text-muted-foreground mb-1 block text-xs font-medium">
                  {t('phone')}
                </label>
                <input
                  type="tel"
                  value={form.phone}
                  onChange={(e) => setForm((f) => ({ ...f, phone: e.target.value }))}
                  className="border-border bg-background text-foreground focus:border-primary w-full rounded-md border px-3 py-1.5 text-sm outline-none"
                />
              </div>
              {/* Month and day only. Never collect a birth year: the gift
                  needs the date, not the age. */}
              <div>
                <label
                  htmlFor="profile-birthday"
                  className="text-muted-foreground mb-1 block text-xs font-medium"
                >
                  {tc('birthday')}
                </label>
                <BirthdayPicker
                  id="profile-birthday"
                  month={toBirthdayNumber(form.birthMonth)}
                  day={toBirthdayNumber(form.birthDay)}
                  onChange={selectBirthday}
                  triggerClassName="rounded-md"
                />
                {birthdayGiftOn && (
                  <p className="text-muted-foreground mt-1 text-xs">{tc('birthdayGiftNote')}</p>
                )}
              </div>
              <p className="text-muted-foreground truncate text-sm">{profile.email}</p>
              <div className="flex items-center gap-2">
                <button
                  type="submit"
                  disabled={saving}
                  className="bg-primary text-primary-foreground rounded-md px-4 py-1.5 text-sm font-medium transition-opacity hover:opacity-90 disabled:opacity-50"
                >
                  {saving ? '...' : t('save')}
                </button>
                <button
                  type="button"
                  onClick={cancelEditing}
                  disabled={saving}
                  className="text-muted-foreground hover:text-foreground rounded-md px-4 py-1.5 text-sm transition-colors disabled:opacity-50"
                >
                  {t('cancel')}
                </button>
              </div>
            </form>
          ) : (
            <>
              <div className="flex items-center gap-2">
                {fullName && (
                  <h2 className="text-foreground truncate text-lg font-semibold">{fullName}</h2>
                )}
                <button
                  type="button"
                  onClick={startEditing}
                  className="text-muted-foreground hover:text-foreground flex-shrink-0 rounded p-1 transition-colors"
                  title={t('editProfile')}
                >
                  <svg
                    className="h-4 w-4"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                    strokeWidth={2}
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"
                    />
                  </svg>
                </button>
              </div>
              <p className="text-muted-foreground truncate text-sm">{profile.email}</p>

              <div className="mt-2 flex items-center gap-2">
                {profile.emailVerified ? (
                  <span className="inline-flex items-center gap-1 rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-700 dark:bg-green-950/30 dark:text-green-400">
                    <svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth={2}
                        d="M5 13l4 4L19 7"
                      />
                    </svg>
                    {t('verified')}
                  </span>
                ) : (
                  <span className="inline-flex items-center gap-1 rounded-full bg-orange-100 px-2 py-0.5 text-xs font-medium text-orange-700 dark:bg-orange-950/30 dark:text-orange-400">
                    <svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth={2}
                        d="M12 9v2m0 4h.01"
                      />
                    </svg>
                    {t('unverified')}
                  </span>
                )}
              </div>

              {profile.phone && (
                <p className="text-muted-foreground mt-2 text-sm">{profile.phone}</p>
              )}

              {storedBirthday && (
                <p className="text-muted-foreground mt-2 text-sm">
                  {tc('birthday')} {storedBirthday}
                </p>
              )}

              {profile.createdAt && !isNaN(new Date(profile.createdAt).getTime()) && (
                <p className="text-muted-foreground mt-3 text-xs">
                  {t('memberSince')}{' '}
                  {new Date(profile.createdAt).toLocaleDateString(undefined, {
                    year: 'numeric',
                    month: 'long',
                    day: 'numeric',
                  })}
                </p>
              )}
            </>
          )}

          {/* Success/Error message */}
          {message && (
            <p
              className={cn(
                'mt-2 text-sm',
                message.type === 'success'
                  ? 'text-green-600 dark:text-green-400'
                  : 'text-red-600 dark:text-red-400'
              )}
            >
              {message.text}
            </p>
          )}
        </div>
      </div>
    </div>
  );
}