tessera-ctl/apps/web/src/app/(portal)/modules/cert-manager/page.tsx

'use client';

import { PageHeader } from '@/components/layout/page-header';
import { useTranslations } from 'next-intl';
import { useState } from 'react';
import { DropZone } from './components/DropZone';
import { PasswordField } from './components/PasswordField';
import { InspectTab } from './components/InspectTab';
import { SplitTab } from './components/SplitTab';
import { MergeTab } from './components/MergeTab';
import { ConvertTab } from './components/ConvertTab';

type TabId = 'inspect' | 'split' | 'merge' | 'convert';

const TABS: TabId[] = ['inspect', 'split', 'merge', 'convert'];

/** Returns true if the selected file is a PFX/P12 (requires decryption password) */
function isPfxFile(file: File | null): boolean {
  if (!file) return false;
  const name = file.name.toLowerCase();
  return name.endsWith('.pfx') || name.endsWith('.p12');
}

/**
 * CertManagerPage — tab-based shell for certificate operations.
 * Layout per UI-SPEC: max-w-4xl, shared input card, tab nav, tab content card.
 * T-09-02: password lives in local React state only; never logged or placed in URLs.
 * T-09-04: all API calls via postForm() which sends credentials:'include'.
 *
 * The shared PasswordField is shown when:
 * 1. A PFX/P12 file is selected in the shared DropZone, OR
 * 2. The active tab (Merge or Convert) has PFX chosen as the output format.
 */
export default function CertManagerPage() {
  const t = useTranslations('certManager');

  const [activeTab, setActiveTab] = useState<TabId>('inspect');
  const [file, setFile] = useState<File | null>(null);
  const [pemText, setPemText] = useState('');
  const [password, setPassword] = useState('');

  // Track the output format of the active Merge and Convert tabs
  // so the shared PasswordField can be shown when PFX output is chosen.
  const [mergeOutputFormat, setMergeOutputFormat] = useState('pem');
  const [convertOutputFormat, setConvertOutputFormat] = useState('pem');

  const showPassword =
    isPfxFile(file) ||
    (activeTab === 'merge' && mergeOutputFormat === 'pfx') ||
    (activeTab === 'convert' && convertOutputFormat === 'pfx');

  const handleFile = (selected: File) => {
    setFile(selected);
    setPemText(''); // Single active source: file XOR paste
    setPassword('');
  };

  const handleClearFile = () => {
    setFile(null);
    setPassword('');
  };

  const handlePemChange = (text: string) => {
    setPemText(text);
    if (text) {
      setFile(null); // Single active source: file XOR paste
      setPassword('');
    }
  };

  const handleTabChange = (tab: TabId) => {
    setActiveTab(tab);
    // Tab switch: keep shared input, clear result (result cleared per tab re-render)
  };

  const renderActiveTab = () => {
    switch (activeTab) {
      case 'inspect':
        return <InspectTab file={file} pemText={pemText} password={password} />;
      case 'split':
        return <SplitTab file={file} pemText={pemText} password={password} />;
      case 'merge':
        return (
          <MergeTab
            password={password}
            onOutputFormatChange={setMergeOutputFormat}
          />
        );
      case 'convert':
        return (
          <ConvertTab
            file={file}
            pemText={pemText}
            password={password}
            onTargetFormatChange={setConvertOutputFormat}
          />
        );
    }
  };

  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')} />

      {/* Shared input card */}
      <div className="rounded-lg bg-card dark:border dark:border-border p-6 shadow-sm space-y-4">
        {/* DropZone */}
        <DropZone
          onFile={handleFile}
          accept=".pem,.crt,.cer,.der,.pfx,.p12,.p7b,.p7c"
          currentFile={file}
          onClear={handleClearFile}
        />

        {/* ODER divider */}
        <div className="flex items-center gap-3">
          <hr className="flex-1 border-border" />
          <span className="text-xs text-muted-foreground">{t('or')}</span>
          <hr className="flex-1 border-border" />
        </div>

        {/* PEM textarea */}
        <textarea
          value={pemText}
          onChange={(e) => handlePemChange(e.target.value)}
          placeholder={t('paste.placeholder')}
          rows={4}
          className="w-full rounded border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring resize-y"
        />

        {/* Conditional password field (T-09-02) */}
        <PasswordField
          value={password}
          onChange={setPassword}
          show={showPassword}
        />
      </div>

      {/* Tab navigation */}
      <nav className="border-b border-border flex gap-6">
        {TABS.map((tab) => (
          <button
            key={tab}
            type="button"
            onClick={() => handleTabChange(tab)}
            className={`pb-2 text-sm font-medium transition-colors ${
              activeTab === tab
                ? 'border-b-2 border-primary-strong font-semibold text-foreground'
                : 'text-muted-foreground hover:text-foreground'
            }`}
          >
            {t(`tabs.${tab}`)}
          </button>
        ))}
      </nav>

      {/* Tab content card */}
      <div className="rounded-lg bg-card dark:border dark:border-border p-6 shadow-sm">
        {renderActiveTab()}
      </div>
    </div>
  );
}