/**
 * API Settings Page
 *
 * Manage API tokens and webhooks for third-party integrations.
 */

import React from 'react';
import { useTranslation } from 'react-i18next';
import { useOutletContext } from 'react-router-dom';
import { Key } from 'lucide-react';
import { Business, User } from '../../types';
import ApiTokensSection from '../../components/ApiTokensSection';
import { usePlanFeatures } from '../../hooks/usePlanFeatures';
import { LockedSection } from '../../components/UpgradePrompt';

const ApiSettings: React.FC = () => {
  const { t } = useTranslation();
  const { business, user } = useOutletContext<{
    business: Business;
    user: User;
  }>();

  const isOwner = user.role === 'owner';
  const { canUse } = usePlanFeatures();

  if (!isOwner) {
    return (
      <div className="text-center py-12">
        <p className="text-gray-500 dark:text-gray-400">
          Only the business owner can access these settings.
        </p>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      {/* Header */}
      <div>
        <h2 className="text-2xl font-bold text-gray-900 dark:text-white flex items-center gap-3">
          <Key className="text-amber-500" />
          {t('settings.api.title', 'API & Webhooks')}
        </h2>
        <p className="text-gray-500 dark:text-gray-400 mt-1">
          Manage API access tokens and configure webhooks for integrations.
        </p>
      </div>

      {/* API Tokens Section */}
      <LockedSection feature="api_access" isLocked={!canUse('api_access')}>
        <ApiTokensSection />
      </LockedSection>
    </div>
  );
};

export default ApiSettings;
