'use client';

import { useTranslations } from 'next-intl';
import { useState } from 'react';
import { TabBar } from '@/components/accounting/tab-bar';
import { PageHeader } from '@/components/layout/page-header';
import { FilesTab } from './components/FilesTab';
import { useCertWorkspace } from './use-cert-workspace';

type TabId = 'files';

/**
 * CertManagerPage: Zertifikat-Manager rund um einen gemeinsamen Arbeitsbereich (quick-261009-ikt).
 * Der erste Reiter „Dateien“ sammelt alles; die weiteren Reiter (ab Task 2) arbeiten auf dieser Liste.
 * Die Liste lebt nur im Arbeitsspeicher dieses Browserfensters; Reiterwechsel behaelt sie.
 */
export default function CertManagerPage() {
  const t = useTranslations('certManager');
  const workspace = useCertWorkspace();
  const [activeTab, setActiveTab] = useState<TabId>('files');

  const count = workspace.entries.length;
  const tabs: { id: TabId; label: string }[] = [
    {
      id: 'files',
      label: count > 0 ? t('tabs.filesWithCount', { count }) : t('tabs.files'),
    },
  ];

  return (
    <div className="mx-auto max-w-4xl space-y-6 p-3 sm:p-6">
      <PageHeader moduleSlug="cert-manager" title={t('title')} description={t('description')} />
      <TabBar tabs={tabs} active={activeTab} onChange={setActiveTab} />
      <div className="rounded-lg bg-card p-6 shadow-sm dark:border dark:border-border">
        {activeTab === 'files' && <FilesTab workspace={workspace} />}
      </div>
    </div>
  );
}