const fs = require('fs');
const file = 'app/(admin)/admin/settings/admin-settings-form.tsx';
let content = fs.readFileSync(file, 'utf-8');

// 1. Add state variable
content = content.replace(
  "const { t } = useLanguage()",
  "const { t } = useLanguage()\n  const [activeAiTab, setActiveAiTab] = useState<'tags' | 'embeddings' | 'chat'>('tags')"
);

// 2. Add Tab Switcher UI and wrap each block
// Find the start of AI form
const aiFormStart = `<div className="p-6 space-y-6">
            {/* Tags Generation Provider */}
            <div className="space-y-4 p-4 border border-border/50 rounded-lg bg-muted/50">`;

const newAiFormStart = `<div className="px-6 pt-6">
            <div className="flex border-b border-border/50 overflow-x-auto">
              <button type="button" onClick={() => setActiveAiTab('tags')} className={\`px-4 py-2.5 text-sm font-medium border-b-2 whitespace-nowrap \${activeAiTab === 'tags' ? 'border-primary text-primary' : 'border-transparent text-muted-foreground hover:text-foreground hover:border-border'}\`}>🏷️ Tags</button>
              <button type="button" onClick={() => setActiveAiTab('embeddings')} className={\`px-4 py-2.5 text-sm font-medium border-b-2 whitespace-nowrap \${activeAiTab === 'embeddings' ? 'border-primary text-primary' : 'border-transparent text-muted-foreground hover:text-foreground hover:border-border'}\`}>🔍 Embeddings</button>
              <button type="button" onClick={() => setActiveAiTab('chat')} className={\`px-4 py-2.5 text-sm font-medium border-b-2 whitespace-nowrap \${activeAiTab === 'chat' ? 'border-primary text-primary' : 'border-transparent text-muted-foreground hover:text-foreground hover:border-border'}\`}>💬 Chat</button>
            </div>
          </div>
          <div className="p-6 space-y-6">
            {/* Tags Generation Provider */}
            <div className={\`space-y-4 p-4 border border-border/50 rounded-lg bg-muted/50 \${activeAiTab === 'tags' ? 'block' : 'hidden'}\`}>`;

content = content.replace(aiFormStart, newAiFormStart);

// Now find Embeddings and Chat and wrap them in hidden condition
const embeddingsStart = `{/* Embeddings Provider */}
            <div className="space-y-4 p-4 border border-border/50 rounded-lg bg-muted/50 mt-4">`;
const newEmbeddingsStart = `{/* Embeddings Provider */}
            <div className={\`space-y-4 p-4 border border-border/50 rounded-lg bg-muted/50 \${activeAiTab === 'embeddings' ? 'block' : 'hidden'}\`}>`;
content = content.replace(embeddingsStart, newEmbeddingsStart);

const chatStart = `{/* Chat Provider */}
            <div className="space-y-4 p-4 border border-border/50 rounded-lg bg-muted/50 mt-4">`;
const newChatStart = `{/* Chat Provider */}
            <div className={\`space-y-4 p-4 border border-border/50 rounded-lg bg-muted/50 \${activeAiTab === 'chat' ? 'block' : 'hidden'}\`}>`;
content = content.replace(chatStart, newChatStart);

// 3. Fix button overflows everywhere.
// Find: <div className="px-6 pb-6 flex justify-between pt-6"> (AI)
content = content.replace(
  '<div className="px-6 pb-6 flex justify-between pt-6">',
  '<div className="px-6 pb-6 flex flex-col sm:flex-row gap-3 sm:justify-between pt-6">'
);

// Find: <div className="px-6 pb-6 flex justify-between"> (Email, Tools, Security?)
// Tools:
content = content.replace(
  '<div className="px-6 pb-6 flex justify-between">',
  '<div className="px-6 pb-6 flex flex-col sm:flex-row gap-3 sm:justify-between">'
);
content = content.replace(
  '<div className="px-6 pb-6 flex justify-between">',
  '<div className="px-6 pb-6 flex flex-col sm:flex-row gap-3 sm:justify-between">'
);

// Email:
content = content.replace(
  '<div className="px-6 pb-6 flex justify-between pt-6">',
  '<div className="px-6 pb-6 flex flex-col sm:flex-row gap-3 sm:justify-between pt-6">'
);

// Security doesn't have justify-between, it just has <div className="px-6 pb-6">

// Write back
fs.writeFileSync(file, content);
console.log("Done");