'use client';

import { useTranslations } from 'next-intl';
import { useEffect, useState } from 'react';
import { TabBar } from '@/components/accounting/tab-bar';
import { PageHeader } from '@/components/layout/page-header';
import { getHandelswareSettings, type HandelswareSettings } from '@/lib/handelsware-datev-api';
import { useCanManageModule } from '@/lib/use-module-capability';
import { AccountsTab } from './components/AccountsTab';
import { ImportTab } from './components/ImportTab';
import { SettingsTab } from './components/SettingsTab';

type TabId = 'import' | 'accounts' | 'settings';

/**
 * Handelsware (quick-261002-fm5): Excel-Umsaetze Erloeskonten zuordnen und als
 * DATEV-Buchungsdatei herunterladen. Reiter Import / Konten / Einstellungen
 * (letzterer fuer Administratoren und Benutzer mit der Freigabestufe Verwalten). Nach einem Export zaehlt `accountsVersion`
 * hoch, damit der Reiter "Konten" die neu gespeicherten Konten nachlaedt.
 */
export default function HandelswareDatevPage() {
  const t = useTranslations('handelswareDatev');
  // Administratoren und Benutzer mit der Freigabestufe Verwalten (261002-icv).
  const canManage = useCanManageModule('handelsware-datev') === true;

  const [tab, setTab] = useState<TabId>('import');
  const [settings, setSettings] = useState<HandelswareSettings | null>(null);
  const [accountsVersion, setAccountsVersion] = useState(0);

  useEffect(() => {
    let cancelled = false;
    getHandelswareSettings()
      .then((s) => {
        if (!cancelled) setSettings(s);
      })
      .catch(() => {
        // Ohne Einstellungen bleibt der Hinweis aus; die API sperrt trotzdem sauber.
      });
    return () => {
      cancelled = true;
    };
  }, []);

  const tabs: { id: TabId; label: string }[] = [
    { id: 'import', label: t('tabs.import') },
    { id: 'accounts', label: t('tabs.accounts') },
  ];
  if (canManage) tabs.push({ id: 'settings', label: t('tabs.settings') });
  const activeTab = tab === 'settings' && !canManage ? 'import' : tab;

  return (
    <div className="mx-auto max-w-5xl space-y-6 p-3 sm:p-6">
      <PageHeader
        moduleSlug="handelsware-datev"
        title={t('title')}
        description={t('description')}
      />
      <TabBar tabs={tabs} active={activeTab} onChange={setTab} />
      <div className="rounded-lg bg-card p-6 shadow-sm dark:border dark:border-border">
        {activeTab === 'import' && (
          <ImportTab
            settings={settings}
            canManage={canManage}
            onOpenSettings={() => setTab('settings')}
            onAccountsChanged={() => setAccountsVersion((v) => v + 1)}
          />
        )}
        {activeTab === 'accounts' && (
          <AccountsTab settings={settings} reloadKey={accountsVersion} />
        )}
        {activeTab === 'settings' && <SettingsTab settings={settings} onSaved={setSettings} />}
      </div>
    </div>
  );
}