'use client';

import { useEffect, useState } from 'react';
import { useI18n } from '../components/I18nProvider';

type User = { id: string; email: string; role: string; status: string; emailVerifiedAt: string | null; approvedAt: string | null; name: string | null; phone: string | null };
type BillingListing = {
  id: string;
  title: string;
  slug: string;
  locale: string;
  billingAccountName: string | null;
  billingIban: string | null;
  billingIncludeVatLine: boolean | null;
};

export default function ProfilePage() {
  const { t } = useI18n();
  const [user, setUser] = useState<User | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [name, setName] = useState('');
  const [phone, setPhone] = useState('');
  const [password, setPassword] = useState('');
  const [saving, setSaving] = useState(false);
  const [message, setMessage] = useState<string | null>(null);
  const [billingEnabled, setBillingEnabled] = useState(false);
  const [billingAccountName, setBillingAccountName] = useState('');
  const [billingIban, setBillingIban] = useState('');
  const [billingIncludeVatLine, setBillingIncludeVatLine] = useState(false);
  const [billingListings, setBillingListings] = useState<BillingListing[]>([]);
  const [billingLoading, setBillingLoading] = useState(false);
  const [billingSaving, setBillingSaving] = useState(false);
  const [billingMessage, setBillingMessage] = useState<string | null>(null);
  const [billingError, setBillingError] = useState<string | null>(null);

  useEffect(() => {
    fetch('/api/auth/me', { cache: 'no-store' })
      .then((res) => res.json())
      .then((data) => {
        if (data.user) {
          setUser(data.user);
          setName(data.user.name ?? '');
          setPhone(data.user.phone ?? '');
        } else setError(t('notLoggedIn'));
      })
      .catch(() => setError(t('notLoggedIn')));
  }, [t]);

  useEffect(() => {
    setBillingLoading(true);
    fetch('/api/me/billing', { cache: 'no-store' })
      .then(async (res) => {
        const data = await res.json();
        if (!res.ok) throw new Error(data.error || 'Failed');
        return data;
      })
      .then((data) => {
        setBillingEnabled(Boolean(data.settings?.enabled));
        setBillingAccountName(data.settings?.accountName ?? '');
        setBillingIban(data.settings?.iban ?? '');
        setBillingIncludeVatLine(Boolean(data.settings?.includeVatLine));
        setBillingListings(
          Array.isArray(data.listings)
            ? data.listings.map((l: any) => ({
                id: l.id,
                title: l.title,
                slug: l.slug,
                locale: l.locale,
                billingAccountName: l.billingAccountName ?? '',
                billingIban: l.billingIban ?? '',
                billingIncludeVatLine: l.billingIncludeVatLine ?? null,
              }))
            : [],
        );
        setBillingError(null);
      })
      .catch(() => setBillingError(t('billingLoadFailed')))
      .finally(() => setBillingLoading(false));
  }, [t]);

  async function onSave(e: React.FormEvent) {
    e.preventDefault();
    setSaving(true);
    setError(null);
    setMessage(null);
    try {
      const res = await fetch('/api/me', {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ name, phone, password: password || undefined }),
      });
      const data = await res.json();
      if (!res.ok) {
        setError(data.error || 'Update failed');
      } else {
        setUser(data.user);
        setPassword('');
        setMessage(t('profileUpdated'));
      }
    } catch (err) {
      setError('Update failed');
    } finally {
      setSaving(false);
    }
  }

  async function onSaveBilling(e: React.FormEvent) {
    e.preventDefault();
    setBillingSaving(true);
    setBillingError(null);
    setBillingMessage(null);
    try {
      const res = await fetch('/api/me/billing', {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          enabled: billingEnabled,
          accountName: billingAccountName,
          iban: billingIban,
          includeVatLine: billingIncludeVatLine,
          listings: billingListings.map((l) => ({
            id: l.id,
            accountName: l.billingAccountName,
            iban: l.billingIban,
            includeVatLine: l.billingIncludeVatLine,
          })),
        }),
      });
      const data = await res.json();
      if (!res.ok) {
        setBillingError(data.error || t('billingSaveFailed'));
        return;
      }
      setBillingEnabled(Boolean(data.settings?.enabled));
      setBillingAccountName(data.settings?.accountName ?? '');
      setBillingIban(data.settings?.iban ?? '');
      setBillingIncludeVatLine(Boolean(data.settings?.includeVatLine));
      setBillingListings(
        Array.isArray(data.listings)
          ? data.listings.map((l: any) => ({
              id: l.id,
              title: l.title,
              slug: l.slug,
              locale: l.locale,
              billingAccountName: l.billingAccountName ?? '',
              billingIban: l.billingIban ?? '',
              billingIncludeVatLine: l.billingIncludeVatLine ?? null,
            }))
          : [],
      );
      setBillingMessage(t('billingSaved'));
    } catch (err) {
      setBillingError(t('billingSaveFailed'));
    } finally {
      setBillingSaving(false);
    }
  }

  return (
    <main className="panel" style={{ maxWidth: 640, margin: '40px auto' }}>
      <h1>{t('myProfileTitle')}</h1>
      {message ? <p style={{ color: 'green' }}>{message}</p> : null}
      {user ? (
        <>
          <ul>
            <li>
              <strong>{t('profileEmail')}:</strong> {user.email}
            </li>
            <li>
              <strong>{t('profileName')}:</strong> {user.name ?? '—'}
            </li>
            <li>
              <strong>{t('profilePhone')}:</strong> {user.phone ?? '—'}
            </li>
            <li>
              <strong>{t('profileRole')}:</strong> {user.role}
            </li>
            <li>
              <strong>{t('profileStatus')}:</strong> {user.status}
            </li>
            <li>
              <strong>{t('profileEmailVerified')}:</strong> {user.emailVerifiedAt ? t('yes') : t('no')}
            </li>
            <li>
              <strong>{t('profileApproved')}:</strong> {user.approvedAt ? t('yes') : t('no')}
            </li>
          </ul>
          <div style={{ marginTop: 16, display: 'flex', gap: 10, flexWrap: 'wrap' }}>
            <a className="button secondary" href="/listings/mine">
              {t('navMyListings')}
            </a>
            <a className="button secondary" href="/listings/new">
              {t('navNewListing')}
            </a>
          </div>
          <form onSubmit={onSave} style={{ marginTop: 20, display: 'grid', gap: 10, maxWidth: 420 }}>
            <label>
              {t('profileName')}
              <input value={name} onChange={(e) => setName(e.target.value)} />
            </label>
            <label>
              {t('profilePhone')}
              <input value={phone} onChange={(e) => setPhone(e.target.value)} />
            </label>
            <label>
              {t('passwordLabel')} ({t('passwordHint')})
              <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} minLength={8} />
            </label>
            <p style={{ fontSize: 12, color: '#666' }}>{t('emailLocked')}</p>
            <button className="button" type="submit" disabled={saving}>
              {saving ? t('saving') : t('save')}
            </button>
          </form>
          <section style={{ marginTop: 30 }}>
            <h2 style={{ marginBottom: 6 }}>{t('billingSettingsTitle')}</h2>
            <p style={{ color: '#444', marginBottom: 12 }}>{t('billingSettingsLead')}</p>
            {billingMessage ? <p style={{ color: 'green' }}>{billingMessage}</p> : null}
            {billingError ? <p style={{ color: 'red' }}>{billingError}</p> : null}
            <form onSubmit={onSaveBilling} style={{ display: 'grid', gap: 14, marginTop: 8 }}>
              <label style={{ display: 'inline-flex', alignItems: 'center', columnGap: 6 }}>
                <input type="checkbox" checked={billingEnabled} onChange={(e) => setBillingEnabled(e.target.checked)} />
                <span>{t('billingEnableLabel')}</span>
              </label>
              {billingEnabled ? (
                <>
                  <div style={{ display: 'grid', gap: 8 }}>
                    <label>
                      {t('billingAccountNameLabel')}
                      <input value={billingAccountName} onChange={(e) => setBillingAccountName(e.target.value)} placeholder="Example Oy" />
                    </label>
                    <label>
                      {t('billingIbanLabel')}
                      <input value={billingIban} onChange={(e) => setBillingIban(e.target.value)} placeholder="FI00 1234 5600 0007 85" />
                    </label>
                    <label style={{ display: 'inline-flex', alignItems: 'center', columnGap: 6 }}>
                      <input
                        type="checkbox"
                        checked={billingIncludeVatLine}
                        onChange={(e) => setBillingIncludeVatLine(e.target.checked)}
                      />
                      <span>{t('billingIncludeVat')}</span>
                    </label>
                  </div>
                  <div style={{ border: '1px solid #eee', padding: 12, borderRadius: 6 }}>
                    <div style={{ marginBottom: 8 }}>
                      <strong>{t('billingListingsTitle')}</strong>
                      <div style={{ color: '#555', fontSize: 13 }}>{t('billingListingsLead')}</div>
                    </div>
                    {billingLoading ? (
                      <p>{t('loading')}</p>
                    ) : billingListings.length === 0 ? (
                      <p style={{ color: '#666' }}>{t('billingNoListings')}</p>
                    ) : (
                      <div style={{ display: 'grid', gap: 12 }}>
                        {billingListings.map((listing) => {
                          const vatValue =
                            listing.billingIncludeVatLine === null || listing.billingIncludeVatLine === undefined
                              ? 'inherit'
                              : listing.billingIncludeVatLine
                                ? 'yes'
                                : 'no';
                          return (
                            <div key={listing.id} style={{ border: '1px solid #f0f0f0', padding: 10, borderRadius: 4 }}>
                              <div style={{ fontWeight: 600, marginBottom: 6 }}>
                                {listing.title} ({listing.slug})
                              </div>
                              <div style={{ display: 'grid', gap: 8 }}>
                                <label>
                                  {t('billingAccountNameLabel')}
                                  <input
                                    value={listing.billingAccountName ?? ''}
                                    onChange={(e) =>
                                      setBillingListings((prev) =>
                                        prev.map((l) => (l.id === listing.id ? { ...l, billingAccountName: e.target.value } : l)),
                                      )
                                    }
                                    placeholder={billingAccountName || t('billingAccountPlaceholder')}
                                  />
                                </label>
                                <label>
                                  {t('billingIbanLabel')}
                                  <input
                                    value={listing.billingIban ?? ''}
                                    onChange={(e) =>
                                      setBillingListings((prev) =>
                                        prev.map((l) => (l.id === listing.id ? { ...l, billingIban: e.target.value } : l)),
                                      )
                                    }
                                    placeholder={billingIban || t('billingIbanPlaceholder')}
                                  />
                                </label>
                                <label>
                                  {t('billingVatChoice')}
                                  <select
                                    value={vatValue as string}
                                    onChange={(e) => {
                                      const choice = e.target.value;
                                      setBillingListings((prev) =>
                                        prev.map((l) =>
                                          l.id === listing.id
                                            ? {
                                                ...l,
                                                billingIncludeVatLine: choice === 'inherit' ? null : choice === 'yes',
                                              }
                                            : l,
                                        ),
                                      );
                                    }}
                                  >
                                    <option value="inherit">{t('billingVatInherit')}</option>
                                    <option value="yes">{t('billingVatYes')}</option>
                                    <option value="no">{t('billingVatNo')}</option>
                                  </select>
                                </label>
                              </div>
                            </div>
                          );
                        })}
                      </div>
                    )}
                  </div>
                </>
              ) : (
                <p style={{ color: '#666' }}>{t('billingDisabledHint')}</p>
              )}
              <div>
                <button className="button" type="submit" disabled={billingSaving}>
                  {billingSaving ? t('saving') : t('save')}
                </button>
              </div>
            </form>
          </section>
        </>
      ) : (
        <p style={{ color: 'red' }}>{error ?? t('notLoggedIn')}</p>
      )}
    </main>
  );
}
