import { useI18n } from "../../shared/I18nProvider.jsx";
import { BackIcon, ForwardIcon } from "../../shared/ActionIcons.jsx";
import { ProSettingsSection } from "../pro/ProSettingsSection.jsx";
import { AccountsPanel } from "./AccountsPanel.jsx";

export function AccountManagementPage({ accounts = [], accountMosaic = false, conversationAccountVisible = true, manager, pro, onAccountMosaicChange = () => {}, onConversationAccountVisibleChange = () => {}, onUsageOpen, onBack }) {
  const { t } = useI18n();

  return <section className="settings-page account-management-page" aria-labelledby="account-management-title">
    <button type="button" className="screen-back conversation-back" aria-label={t("settings.back")} onClick={onBack}><BackIcon /></button>
    <div className="settings-content account-management-content">
      <h1 id="account-management-title" className="settings-prompt">{t("settings.accountManagement")}</h1>
      <section className="settings-section" aria-labelledby="account-management-accounts-title"><h2 id="account-management-accounts-title">{t("settings.accounts")}</h2><AccountsPanel accounts={accounts} manager={manager} accountMosaic={accountMosaic} /></section>
      {pro && <section className="settings-section"><ProSettingsSection entitlement={pro} accountCount={accounts.filter(account => !account.historyOnly).length} busy={pro.busy} onRestore={pro.restore} onManage={pro.openManagement} /></section>}
      <section className="settings-section" aria-labelledby="account-management-usage-title"><h2 id="account-management-usage-title">{t("settings.usage")}</h2><button className="settings-action settings-navigation-action" type="button" onClick={onUsageOpen}><span>{t("settings.viewUsage")}</span><ForwardIcon className="settings-navigation-chevron" /></button></section>
      <section className="settings-section" aria-labelledby="account-management-display-title">
        <h2 id="account-management-display-title">{t("settings.accountDisplay")}</h2>
        <button type="button" className="settings-choice settings-account-mosaic" aria-label={t("settings.accountMosaic")} aria-pressed={accountMosaic} onClick={() => onAccountMosaicChange(!accountMosaic)}><span className="settings-account-mosaic-copy">{t("settings.accountMosaic")}</span><span className={accountMosaic ? "settings-switch active" : "settings-switch"} aria-hidden="true"><span></span></span></button>
        <button type="button" className="settings-choice settings-account-mosaic settings-conversation-account" aria-label={t("settings.conversationAccountVisible")} aria-pressed={conversationAccountVisible} onClick={() => onConversationAccountVisibleChange(!conversationAccountVisible)}><span className="settings-account-mosaic-copy">{t("settings.conversationAccountVisible")}</span><span className={conversationAccountVisible ? "settings-switch active" : "settings-switch"} aria-hidden="true"><span></span></span></button>
      </section>
    </div>
  </section>;
}
