[V0_FILE]plaintext:file=".gitignore" isMerged="true" # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies /node_modules # next.js /.next/ /out/ # production /build # debug npm-debug.log* yarn-debug.log* yarn-error.log* .pnpm-debug.log* # env files .env* # vercel .vercel # typescript *.tsbuildinfo next-env.d.ts [V0_FILE]markdown:file="README.md" isMerged="true" # Component Export Standardizer This script standardizes component exports in a React/Next.js codebase to include both default and named exports. ## Problem In React/Next.js applications, components can be exported in different ways: 1. Default exports: `export default function Component() {...}` 2. Named exports: `export function Component() {...}` This inconsistency can lead to import errors when components are imported differently than how they're exported. ## Solution This script scans your components directory and ensures all components have both export types: \`\`\`typescript // Before standardization (inconsistent): export default function ComponentA() {...} export function ComponentB() {...} // After standardization (consistent): function ComponentA() {...} export default ComponentA; export { ComponentA }; function ComponentB() {...} export default ComponentB;; \`\`\` ## Usage 1. Place the script in your project root 2. Configure the `COMPONENTS_DIR` variable to point to your components directory 3. Set `DRY_RUN = true` to see what changes would be made without applying them 4. Run the script with Node.js: \`\`\`bash # Install ts-node if you don't have it npm install -g ts-node # Run the script ts-node standardize-exports.ts \`\`\` 5. Once you're satisfied with the proposed changes, set `DRY_RUN = false` and run again ## Configuration - `COMPONENTS_DIR`: Directory containing your components (default: './components') - `FILE_EXTENSIONS`: File extensions to process (default: ['.tsx', '.ts']) - `DRY_RUN`: Whether to apply changes or just show them (default: false) ## Features - Handles various component declaration patterns - Preserves existing code formatting - Provides detailed logs of changes made - Supports dry run mode to preview changes [V0_FILE]typescriptreact:file="__tests__/newsletter/newsletter-components.test.tsx" isMerged="true" "use client" import { render, screen, fireEvent } from "@testing-library/react" import userEvent from "@testing-library/user-event" import { NewsletterSettings } from "@/components/newsletter/newsletter-settings" import { NewsletterPreview } from "@/components/newsletter/newsletter-preview" import { NewsletterPublish } from "@/components/newsletter/newsletter-publish" import { ContentModules } from "@/components/newsletter/content-modules" import { RelatedNews } from "@/components/newsletter/related-news" import { ThemeProvider } from "@/components/theme-provider" // Mock the content-item-selector component jest.mock("@/components/content-item-selector", () => ({ ContentItemSelector: ({ onItemsSelected }) => (

), })) // Mock the hooks jest.mock("@/hooks/use-news-search", () => ({ useNewsSearch: () => ({ isNewsSearchOpen: false, setIsNewsSearchOpen: jest.fn(), searchNewsArticles: jest.fn(), newsSearchResults: [], isSearching: false, selectedNewsResults: [], toggleNewsSelection: jest.fn(), bookmarkedNews: [], toggleBookmark: jest.fn(), currentPage: 1, totalPages: 1, handlePageChange: jest.fn(), addSelectedNewsToRelated: jest.fn(), relatedNewsItems: [], addRelatedNewsItem: jest.fn(), removeRelatedNewsItem: jest.fn(), }), })) // Test wrapper component const renderWithProviders = (ui) => { return render({ui}) } describe("Newsletter Component Tests", () => { describe("NewsletterSettings", () => { const mockData = { title: "Test Newsletter", subtitle: "Test Subtitle", type: "daily-market-update", template: "default-template", wordCount: 1000, outputFormat: "html", content: "", contentSummary: "", includeMarketSnapshot: true, includeMarketMovers: true, publishAsDraft: true, makePublic: false, } const mockOnChange = jest.fn() const mockOnGenerateHeadline = jest.fn() test("renders correctly with provided data", () => { renderWithProviders( , ) expect(screen.getByLabelText(/Newsletter Title/i)).toHaveValue("Test Newsletter") expect(screen.getByLabelText(/Subtitle/i)).toHaveValue("Test Subtitle") expect(screen.getByText("Daily Market Update")).toBeInTheDocument() expect(screen.getByText("Default Template")).toBeInTheDocument() }) test("calls onChange when inputs change", async () => { const user = userEvent.setup() renderWithProviders( , ) const titleInput = screen.getByLabelText(/Newsletter Title/i) await user.clear(titleInput) await user.type(titleInput, "New Title") expect(mockOnChange).toHaveBeenCalledWith({ title: "New Title" }) }) test("calls onGenerateHeadline when button is clicked", async () => { const user = userEvent.setup() renderWithProviders( , ) const generateButton = screen.getByText("Generate Title") await user.click(generateButton) expect(mockOnGenerateHeadline).toHaveBeenCalled() }) test("disables generate button when isGenerating is true", () => { renderWithProviders( , ) const generateButton = screen.getByText("Generating...") expect(generateButton).toBeDisabled() }) }) describe("ContentModules", () => { const mockModules = [ { id: "module-1", type: "market-analysis", title: "Market Analysis", content: "This is a market analysis content.", isGenerating: false, icon: 📊, description: "In-depth analysis of current market conditions", }, ] const mockOnAddModule = jest.fn() const mockOnRemoveModule = jest.fn() test("renders available module types", () => { renderWithProviders( , ) expect(screen.getByText("Market Analysis")).toBeInTheDocument() expect(screen.getByText("Stock Spotlight")).toBeInTheDocument() }) test("renders existing modules", () => { renderWithProviders( , ) // Switch to current modules tab fireEvent.click(screen.getByText("Current Modules (1)")) expect(screen.getByText("Market Analysis")).toBeInTheDocument() expect(screen.getByText("This is a market analysis content.")).toBeInTheDocument() }) test("calls onAddModule when add button is clicked", async () => { const user = userEvent.setup() renderWithProviders( , ) // Click on a module type card to select it await user.click(screen.getByText("Market Analysis")) // Click the add button await user.click(screen.getByText("Add Market Analysis Module")) expect(mockOnAddModule).toHaveBeenCalledWith("market-analysis", "") }) test("calls onRemoveModule when remove button is clicked", async () => { const user = userEvent.setup() renderWithProviders( , ) // Switch to current modules tab await user.click(screen.getByText("Current Modules (1)")) // Click the remove button (X icon) const removeButton = screen.getByRole("button", { name: /remove/i }) await user.click(removeButton) expect(mockOnRemoveModule).toHaveBeenCalledWith("module-1") }) }) describe("RelatedNews", () => { const mockRelatedNewsItems = [ { id: "news-1", title: "Market Update: Stocks Rally on Fed Decision", source: "Bloomberg", url: "https://example.com/news/1", date: "2023-06-15", }, ] const mockOnAddNewsItem = jest.fn() const mockOnRemoveNewsItem = jest.fn() const mockOnOpenNewsSearch = jest.fn() test("renders search button", () => { renderWithProviders( , ) expect(screen.getByText("Search for News Articles")).toBeInTheDocument() }) test("renders existing news items", () => { renderWithProviders( , ) expect(screen.getByText("Market Update: Stocks Rally on Fed Decision")).toBeInTheDocument() expect(screen.getByText("Bloomberg")).toBeInTheDocument() }) test("calls onOpenNewsSearch when search button is clicked", async () => { const user = userEvent.setup() renderWithProviders( , ) await user.click(screen.getByText("Search for News Articles")) expect(mockOnOpenNewsSearch).toHaveBeenCalled() }) test("calls onAddNewsItem when add button is clicked", async () => { const user = userEvent.setup() renderWithProviders( , ) // Fill in the form fields await user.type(screen.getByLabelText("Article Title"), "Test News") await user.type(screen.getByLabelText("Source"), "Test Source") await user.type(screen.getByLabelText("Article URL"), "https://example.com") // Click the add button await user.click(screen.getByText("Add News Item")) expect(mockOnAddNewsItem).toHaveBeenCalledWith( expect.objectContaining({ title: "Test News", source: "Test Source", url: "https://example.com", }), ) }) test("calls onRemoveNewsItem when remove button is clicked", async () => { const user = userEvent.setup() renderWithProviders( , ) // Click the remove button (X icon) const removeButton = screen.getByRole("button", { name: /remove/i }) await user.click(removeButton) expect(mockOnRemoveNewsItem).toHaveBeenCalledWith("news-1") }) }) describe("NewsletterPreview", () => { const mockData = { title: "Test Newsletter {{reportDate}}", subtitle: "Test Subtitle", type: "daily-market-update", template: "default-template", wordCount: 1000, outputFormat: "html", content: "This is the newsletter content for testing.", contentSummary: "", includeMarketSnapshot: true, includeMarketMovers: true, publishAsDraft: true, makePublic: false, } const mockOnEnhanceContent = jest.fn() const mockOnCopyContent = jest.fn() const mockOnDownloadContent = jest.fn() test("renders newsletter title and content", () => { renderWithProviders( , ) // Check if title is rendered with date replaced expect(screen.getByText(/Test Newsletter/)).toBeInTheDocument() // Check if content is rendered expect(screen.getByText("This is the newsletter content for testing.")).toBeInTheDocument() }) test("calls onEnhanceContent when enhance button is clicked", async () => { const user = userEvent.setup() renderWithProviders( , ) await user.click(screen.getByText("Enhance")) expect(mockOnEnhanceContent).toHaveBeenCalled() }) test("calls onCopyContent when copy button is clicked", async () => { const user = userEvent.setup() renderWithProviders( , ) await user.click(screen.getByText("Copy")) expect(mockOnCopyContent).toHaveBeenCalled() }) test("calls onDownloadContent when download button is clicked", async () => { const user = userEvent.setup() renderWithProviders( , ) await user.click(screen.getByText("Download")) expect(mockOnDownloadContent).toHaveBeenCalled() }) test("disables enhance button when isEnhancing is true", () => { renderWithProviders( , ) expect(screen.getByText("Enhancing...")).toBeDisabled() }) }) describe("NewsletterPublish", () => { const mockData = { title: "Test Newsletter", subtitle: "Test Subtitle", type: "daily-market-update", template: "default-template", wordCount: 1000, outputFormat: "html", content: "This is the newsletter content for testing.", contentSummary: "", includeMarketSnapshot: true, includeMarketMovers: true, publishAsDraft: true, makePublic: false, } const mockOnSaveAsDraft = jest.fn() const mockOnPublishToKit = jest.fn() const mockOnSendBroadcast = jest.fn() const mockKitStatus = { isConnected: true, error: null, } test("renders publish options", () => { renderWithProviders( , ) expect(screen.getByText("Publish to Kit")).toBeInTheDocument() expect(screen.getByText("Send Broadcast")).toBeInTheDocument() expect(screen.getByText("Save as Report")).toBeInTheDocument() }) test("calls onPublishToKit when publish button is clicked", async () => { const user = userEvent.setup() renderWithProviders( , ) // Default tab is "kit" await user.click(screen.getByText("Save to Kit")) expect(mockOnPublishToKit).toHaveBeenCalledWith(true, false) }) test("calls onSendBroadcast when send button is clicked", async () => { const user = userEvent.setup() renderWithProviders( , ) // Switch to broadcast tab await user.click(screen.getByText("Send Broadcast")) // Click the send button await user.click(screen.getByText("Save Broadcast as Draft")) expect(mockOnSendBroadcast).toHaveBeenCalledWith(true, false) }) test("calls onSaveAsDraft when save button is clicked", async () => { const user = userEvent.setup() renderWithProviders( , ) // Switch to save tab await user.click(screen.getByText("Save as Report")) // Click the save button await user.click(screen.getByText("Save as Report")) expect(mockOnSaveAsDraft).toHaveBeenCalled() }) test("shows connection error when Kit is not connected", () => { renderWithProviders( , ) expect(screen.getByText("Connection Error")).toBeInTheDocument() expect(screen.getByText("API key invalid")).toBeInTheDocument() }) }) }) [V0_FILE]typescriptreact:file="__tests__/newsletter/newsletter-hooks.test.tsx" isMerged="true" import { renderHook, act } from "@testing-library/react" import { useNewsletterState } from "@/hooks/use-newsletter-state" import { useContentModules } from "@/hooks/use-content-modules" import { useNewsSearch } from "@/hooks/use-news-search" import { usePublishing } from "@/hooks/use-publishing" import * as aiActions from "@/app/actions/ai-actions" import * as kitActions from "@/app/actions/kit-actions" import * as newsletterService from "@/services/newsletter-service" // Mock the necessary modules and server actions jest.mock("@/app/actions/ai-actions", () => ({ generateContentWithGemini: jest.fn(), })) jest.mock("@/app/actions/kit-actions", () => ({ publishContentToKit: jest.fn(), sendBroadcastToKit: jest.fn(), checkKitConnectionStatus: jest.fn(), })) jest.mock("@/services/newsletter-service", () => ({ saveNewsletterAsReport: jest.fn(), publishNewsletterToKit: jest.fn(), sendNewsletterBroadcast: jest.fn(), })) // Mock the toast hook jest.mock("@/hooks/use-toast", () => ({ useToast: () => ({ toast: jest.fn(), }), })) describe("Newsletter Custom Hooks Tests", () => { beforeEach(() => { jest.clearAllMocks() // Mock successful AI content generation ;(aiActions.generateContentWithGemini as jest.Mock).mockResolvedValue({ content: "Generated content for testing.", error: null, }) // Mock successful Kit operations ;(kitActions.checkKitConnectionStatus as jest.Mock).mockResolvedValue({ isConnected: true, error: null, }) ;(newsletterService.saveNewsletterAsReport as jest.Mock).mockResolvedValue({ success: true, error: null, }) ;(newsletterService.publishNewsletterToKit as jest.Mock).mockResolvedValue({ success: true, postUrl: "https://kit.co/example/post", error: null, }) }) describe("useNewsletterState", () => { test("initializes with default values", () => { const { result } = renderHook(() => useNewsletterState()) expect(result.current.newsletterData).toEqual( expect.objectContaining({ title: expect.any(String), type: expect.any(String), template: expect.any(String), }), ) expect(result.current.contentSummary).toBe("") expect(result.current.relatedNewsItems).toEqual([]) }) test("updates newsletter data", () => { const { result } = renderHook(() => useNewsletterState()) act(() => { result.current.updateNewsletterData({ title: "Updated Title" }) }) expect(result.current.newsletterData.title).toBe("Updated Title") }) test("generates headline", async () => { const { result } = renderHook(() => useNewsletterState()) await act(async () => { await result.current.generateHeadline() }) expect(result.current.newsletterData.title).not.toBe("Daily Market Insights - {{reportDate}}") }) test("generates content summary", async () => { const { result } = renderHook(() => useNewsletterState()) const contentItems = [ { id: "content-1", title: "Market Analysis", description: "Analysis of market trends", type: "analysis", stage: "published", priority: "high", author: "John Doe", tags: ["market", "analysis"], createdAt: "2023-06-15T10:30:00Z", updatedAt: "2023-06-15T10:30:00Z", }, ] await act(async () => { await result.current.generateContentSummary(contentItems) }) expect(aiActions.generateContentWithGemini).toHaveBeenCalled() expect(result.current.contentSummary).toBe("Generated content for testing.") }) test("generates newsletter content", async () => { const { result } = renderHook(() => useNewsletterState()) const contentItems = [ { id: "content-1", title: "Market Analysis", description: "Analysis of market trends", type: "analysis", stage: "published", priority: "high", author: "John Doe", tags: ["market", "analysis"], createdAt: "2023-06-15T10:30:00Z", updatedAt: "2023-06-15T10:30:00Z", }, ] const contentModules = [ { id: "module-1", type: "market-analysis", title: "Market Analysis", content: "Market analysis content", isGenerating: false, icon: null, description: "Market analysis description", }, ] await act(async () => { await result.current.generateNewsletterContent(contentItems, contentModules) }) expect(aiActions.generateContentWithGemini).toHaveBeenCalled() expect(result.current.newsletterData.content).toBe("Generated content for testing.") }) }) describe("useContentModules", () => { test("initializes with empty modules", () => { const { result } = renderHook(() => useContentModules()) expect(result.current.contentModules).toEqual([]) expect(result.current.availableModules.length).toBeGreaterThan(0) }) test("adds a content module", async () => { const { result } = renderHook(() => useContentModules()) await act(async () => { await result.current.addContentModule("market-analysis") }) expect(result.current.contentModules.length).toBe(1) expect(result.current.contentModules[0].type).toBe("market-analysis") expect(result.current.contentModules[0].content).toBe("Generated content for testing.") }) test("removes a content module", async () => { const { result } = renderHook(() => useContentModules()) await act(async () => { await result.current.addContentModule("market-analysis") }) const moduleId = result.current.contentModules[0].id act(() => { result.current.removeContentModule(moduleId) }) expect(result.current.contentModules.length).toBe(0) }) }) describe("useNewsSearch", () => { test("initializes with empty results", () => { const { result } = renderHook(() => useNewsSearch()) expect(result.current.newsSearchResults).toEqual([]) expect(result.current.selectedNewsResults).toEqual([]) expect(result.current.bookmarkedNews).toEqual([]) }) test("searches for news articles", async () => { const { result } = renderHook(() => useNewsSearch()) await act(async () => { await result.current.searchNewsArticles("market", {}) }) expect(result.current.newsSearchResults.length).toBeGreaterThan(0) }) test("toggles news selection", () => { const { result } = renderHook(() => useNewsSearch()) // First search for news act(() => { result.current.searchNewsArticles("market", {}) }) // Then toggle selection for the first result const firstNewsId = result.current.newsSearchResults[0].id act(() => { result.current.toggleNewsSelection(firstNewsId) }) expect(result.current.selectedNewsResults.length).toBe(1) expect(result.current.selectedNewsResults[0].id).toBe(firstNewsId) // Toggle again to deselect act(() => { result.current.toggleNewsSelection(firstNewsId) }) expect(result.current.selectedNewsResults.length).toBe(0) }) test("adds selected news to related items", async () => { const mockAddCallback = jest.fn() const { result } = renderHook(() => useNewsSearch(mockAddCallback)) // First search for news await act(async () => { await result.current.searchNewsArticles("market", {}) }) // Select a news item const firstNewsId = result.current.newsSearchResults[0].id act(() => { result.current.toggleNewsSelection(firstNewsId) }) // Add selected to related act(() => { result.current.addSelectedNewsToRelated() }) expect(mockAddCallback).toHaveBeenCalled() }) }) describe("usePublishing", () => { test("initializes with default values", () => { const { result } = renderHook(() => usePublishing( { title: "Test Newsletter", content: "Test content", }, "Test summary", ), ) expect(result.current.isSaving).toBe(false) expect(result.current.isPublishing).toBe(false) expect(result.current.isSending).toBe(false) expect(result.current.kitStatus).toBeNull() }) test("saves newsletter as report", async () => { const { result } = renderHook(() => usePublishing( { title: "Test Newsletter", content: "Test content", }, "Test summary", ), ) await act(async () => { await result.current.saveNewsletterAsReport([]) }) expect(newsletterService.saveNewsletterAsReport).toHaveBeenCalled() }) test("publishes newsletter to Kit", async () => { const { result } = renderHook(() => usePublishing( { title: "Test Newsletter", content: "Test content", }, "Test summary", ), ) await act(async () => { await result.current.publishNewsletterToKit(true, false) }) expect(newsletterService.publishNewsletterToKit).toHaveBeenCalled() }) test("checks Kit connection status", async () => { const { result } = renderHook(() => usePublishing( { title: "Test Newsletter", content: "Test content", }, "Test summary", ), ) await act(async () => { await result.current.checkKitConnectionStatus() }) expect(kitActions.checkKitConnectionStatus).toHaveBeenCalled() expect(result.current.kitStatus).toEqual({ isConnected: true, error: null, }) }) }) }) [V0_FILE]typescriptreact:file="__tests__/newsletter/newsletter-integration.test.tsx" isMerged="true" "use client" import { render, screen, waitFor } from "@testing-library/react" import userEvent from "@testing-library/user-event" import { NewsletterGenerator } from "@/components/newsletter/newsletter-generator" import { ThemeProvider } from "@/components/theme-provider" import * as aiActions from "@/app/actions/ai-actions" import * as kitActions from "@/app/actions/kit-actions" // Mock the necessary modules and server actions jest.mock("@/app/actions/ai-actions", () => ({ generateContentWithGemini: jest.fn(), })) jest.mock("@/app/actions/kit-actions", () => ({ publishContentToKit: jest.fn(), sendBroadcastToKit: jest.fn(), checkKitConnectionStatus: jest.fn(), })) // Mock the content-item-selector component jest.mock("@/components/content-item-selector", () => ({ ContentItemSelector: ({ onItemsSelected }) => (

), })) // Test wrapper component const renderWithProviders = (ui) => { return render({ui}) } describe("Newsletter Integration Tests", () => { beforeEach(() => { jest.clearAllMocks() // Mock successful AI content generation ;(aiActions.generateContentWithGemini as jest.Mock).mockResolvedValue({ content: "Generated newsletter content for testing purposes.", error: null, }) // Mock successful Kit connection ;(kitActions.checkKitConnectionStatus as jest.Mock).mockResolvedValue({ isConnected: true, error: null, }) // Mock successful publishing ;(kitActions.publishContentToKit as jest.Mock).mockResolvedValue({ success: true, postUrl: "https://kit.co/example/post", error: null, }) }) test("complete newsletter generation workflow", async () => { const user = userEvent.setup() renderWithProviders() // Step 1: Navigate to settings tab and update settings expect(screen.getByText("Settings")).toBeInTheDocument() // Update newsletter title const titleInput = screen.getByLabelText(/Newsletter Title/i) await user.clear(titleInput) await user.type(titleInput, "Test Newsletter {{reportDate}}") // Select newsletter type const typeSelect = screen.getByLabelText(/Newsletter Type/i) await user.click(typeSelect) await user.click(screen.getByText("Weekly Investment Insights")) // Step 2: Navigate to content tab await user.click(screen.getByText("Content")) // Select content items await user.click(screen.getByText("Select Mock Content Items")) // Generate content summary const generateSummaryButton = screen.getByText("Generate Summary") await user.click(generateSummaryButton) // Wait for summary generation to complete await waitFor(() => { expect(aiActions.generateContentWithGemini).toHaveBeenCalled() }) // Step 3: Add a content module await user.click(screen.getByText("Content Modules")) // Select a module type and add it const addModuleButton = screen.getByText(/Add Market Analysis Module/i) await user.click(addModuleButton) // Wait for module generation to complete await waitFor(() => { expect(aiActions.generateContentWithGemini).toHaveBeenCalledTimes(2) }) // Step 4: Generate the newsletter const generateNewsletterButton = screen.getByText("Generate Newsletter Content") await user.click(generateNewsletterButton) // Wait for newsletter generation to complete await waitFor(() => { expect(aiActions.generateContentWithGemini).toHaveBeenCalledTimes(3) }) // Step 5: Navigate to preview tab await user.click(screen.getByText("Preview")) // Verify preview content is displayed expect(screen.getByText(/Generated newsletter content/i)).toBeInTheDocument() // Step 6: Navigate to publish tab await user.click(screen.getByText("Publish")) // Verify publish options are available expect(screen.getByText("Publish to Kit")).toBeInTheDocument() // Publish to Kit const publishButton = screen.getByText("Save to Kit") await user.click(publishButton) // Wait for publishing to complete await waitFor(() => { expect(kitActions.publishContentToKit).toHaveBeenCalled() }) // Verify success message expect(screen.getByText(/published successfully/i)).toBeInTheDocument() }) test("handles errors during content generation", async () => { // Mock AI generation failure ;(aiActions.generateContentWithGemini as jest.Mock).mockResolvedValue({ content: null, error: "Failed to generate content", }) const user = userEvent.setup() renderWithProviders() // Navigate to content tab await user.click(screen.getByText("Content")) // Select content items await user.click(screen.getByText("Select Mock Content Items")) // Generate content summary const generateSummaryButton = screen.getByText("Generate Summary") await user.click(generateSummaryButton) // Wait for error handling await waitFor(() => { expect(screen.getByText(/Failed to generate content/i)).toBeInTheDocument() }) }) test("handles Kit connection issues", async () => { // Mock Kit connection failure ;(kitActions.checkKitConnectionStatus as jest.Mock).mockResolvedValue({ isConnected: false, error: "API key invalid", }) const user = userEvent.setup() renderWithProviders() // Navigate to publish tab await user.click(screen.getByText("Publish")) // Verify connection error is displayed await waitFor(() => { expect(screen.getByText(/API key invalid/i)).toBeInTheDocument() }) }) }) [V0_FILE]typescriptreact:file="__tests__/newsletter/test-utils.tsx" isMerged="true" import type React from "react" import type { ReactElement } from "react" import { render, type RenderOptions } from "@testing-library/react" import { ThemeProvider } from "@/components/theme-provider" // Create a custom render function that includes providers const customRender = (ui: ReactElement, options?: Omit) => render(ui, { wrapper: AllProviders, ...options }) // Provider wrapper function AllProviders({ children }: { children: React.ReactNode }) { return {children} } // Re-export everything from testing-library export * from "@testing-library/react" // Override the render method export { customRender as render } // Mock data generators export const createMockContentItem = (overrides = {}) => ({ id: `content-${Math.random().toString(36).substring(2, 9)}`, title: "Mock Content Item", description: "This is a mock content item for testing", type: "analysis", stage: "published", priority: "medium", author: "Test Author", tags: ["test", "mock"], createdAt: new Date().toISOString(), updatedAt: new Date().toISOString(), ...overrides, }) export const createMockContentModule = (overrides = {}) => ({ id: `module-${Math.random().toString(36).substring(2, 9)}`, type: "market-analysis", title: "Market Analysis", content: "This is mock content for a market analysis module", isGenerating: false, icon: null, description: "In-depth analysis of current market conditions", ...overrides, }) export const createMockNewsItem = (overrides = {}) => ({ id: `news-${Math.random().toString(36).substring(2, 9)}`, title: "Mock News Article", source: "Mock Source", url: "https://example.com/mock-news", date: new Date().toISOString().split("T")[0], ...overrides, }) export const createMockNewsletterData = (overrides = {}) => ({ title: "Mock Newsletter {{reportDate}}", subtitle: "Mock Subtitle", type: "daily-market-update", template: "default-template", wordCount: 1000, outputFormat: "html", content: "This is mock newsletter content for testing", contentSummary: "", includeMarketSnapshot: true, includeMarketMovers: true, publishAsDraft: true, makePublic: false, ...overrides, }) [V0_FILE]typescript:file="app/actions/admin-actions.ts" isMerged="true" "use server" import { supabase } from "@/services/supabase-service" import { authenticateAction } from "@/lib/auth-utils" import { revalidatePath } from "next/cache" // ----------------------------------------------------------------------------- // getUserCount (stub) // // User-role tables were removed, but other modules still import this action. // Returning `0` keeps those imports satisfied without re-introducing the old // user-management dependency. // ----------------------------------------------------------------------------- export async function getUserCount(): Promise { return 0 } export async function getContentCount() { const auth = await authenticateAction({ requiredRole: "admin" }) if (!auth.authorized) return 0 try { const { count, error } = await supabase.from("content_items").select("*", { count: "exact", head: true }) if (error) { console.error("Error fetching content count:", error) return 0 } return count || 0 } catch (error) { console.error("Error in getContentCount:", error) return 0 } } export async function getActiveJobsCount() { const auth = await authenticateAction({ requiredRole: "admin" }) if (!auth.authorized) return 0 try { const { count, error } = await supabase .from("automation_schedules") .select("*", { count: "exact", head: true }) .eq("is_active", true) if (error) { console.error("Error fetching active jobs count:", error) return 0 } return count || 0 } catch (error) { console.error("Error in getActiveJobsCount:", error) return 0 } } export async function getRecentActivity(limit = 5) { const auth = await authenticateAction({ requiredRole: "admin" }) if (!auth.authorized) return [] try { const { data, error } = await supabase .from("audit_logs") .select(` id, action, created_at, user_id, details `) .order("created_at", { ascending: false }) .limit(limit) if (error) { console.error("Error fetching recent activity:", error) return [] } return data.map((log) => ({ id: log.id, action: log.action, timestamp: log.created_at, user: { id: log.user_id || "system", name: log.user_id ? "System User" : "System", email: "", role: "", avatarUrl: "", }, details: log.details, })) } catch (error) { console.error("Error in getRecentActivity:", error) return [] } } export async function getSystemHealth() { const auth = await authenticateAction({ requiredRole: "admin" }) if (!auth.authorized) return [] try { // Check database connection const dbStatus = await checkDatabaseStatus() // Check auth service const authStatus = await checkAuthStatus() // Check storage service const storageStatus = await checkStorageStatus() // Check external API connections const apiStatus = await checkExternalApiStatus() return [ { id: "1", name: "Database", status: dbStatus, }, { id: "2", name: "Authentication", status: authStatus, }, { id: "3", name: "Storage", status: storageStatus, }, { id: "4", name: "External APIs", status: apiStatus, }, ] } catch (error) { console.error("Error in getSystemHealth:", error) return [ { id: "1", name: "System Check", status: "Down", }, ] } } async function checkDatabaseStatus() { try { const startTime = Date.now() const { data, error } = await supabase.from("content_items").select("*", { count: "exact", head: true }) const endTime = Date.now() if (error) return "Down" // If query takes more than 2 seconds, consider it degraded return endTime - startTime > 2000 ? "Degraded" : "Healthy" } catch (error) { return "Down" } } async function checkAuthStatus() { try { const { data, error } = await supabase.auth.getSession() return error ? "Degraded" : "Healthy" } catch (error) { return "Down" } } async function checkStorageStatus() { try { const { data, error } = await supabase.storage.listBuckets() return error ? "Down" : "Healthy" } catch (error) { return "Down" } } async function checkExternalApiStatus() { // This is a placeholder. In a real application, you would check your actual external APIs // For example, check if your market data provider is responding try { // Simulate an API check return Math.random() > 0.2 ? "Healthy" : "Degraded" } catch (error) { return "Down" } } export async function updateSystemSettings(type: string, settings: any) { const auth = await authenticateAction({ requiredRole: "admin" }) if (!auth.authorized) { throw new Error("Unauthorized") } try { // In a real application, you would save these settings to a database // For now, we'll create an audit log entry and return success // Create an audit log entry const { error } = await supabase.from("audit_logs").insert({ user_id: auth.session?.user.id, action: `Updated ${type} settings`, details: settings, }) if (error) throw error // Revalidate relevant paths revalidatePath("/admin/settings") return { success: true } } catch (error) { console.error(`Error updating ${type} settings:`, error) throw new Error(`Failed to update ${type} settings`) } } export async function createAuditLog(userId: string, action: string, details: any = {}) { try { const { error } = await supabase.from("audit_logs").insert({ user_id: userId, action, details, }) if (error) throw error return { success: true } } catch (error) { console.error("Error creating audit log:", error) return { success: false, error } } } [V0_FILE]typescript:file="app/actions/ai-content-actions.ts" isMerged="true" "use server" import { generateContentWithGemini } from "@/services/ai-content-service" import type { AIContentRequest, AIContentResponse } from "@/types/ai-content" import { createPrimerSection, updatePrimerSection } from "@/services/investment-primer-service" import { revalidatePath } from "next/cache" export async function generateAIContent(request: AIContentRequest): Promise { try { const prompt = buildPromptForContentType(request) const result = await generateContentWithGemini(prompt) // Calculate metadata const wordCount = result.content.split(/\s+/).length const readingTime = Math.ceil(wordCount / 200) // Assuming 200 words per minute reading speed return { content: result.content, metadata: { wordCount, readingTime, generatedAt: new Date().toISOString(), }, } } catch (error) { console.error("Error generating AI content:", error) return { content: "", error: "Failed to generate content. Please try again.", } } } function buildPromptForContentType(request: AIContentRequest): string { const { contentType, ticker, industry, additionalContext, sections, depth = "standard", tone = "neutral" } = request let basePrompt = "" switch (contentType) { case "industry-analysis": basePrompt = ` Generate a ${depth} industry analysis for the ${industry} industry. Include the following sections: 1. Industry Overview 2. Market Size and Growth Projections 3. Key Players and Market Share 4. Business Models and Revenue Streams 5. Industry Trends and Innovations 6. Regulatory Environment 7. Key Performance Indicators for the Industry The analysis should have a ${tone} tone. Format the content with proper Markdown headings, bullet points, and emphasis where appropriate. The content should be educational, balanced, and suitable for investors seeking to understand the industry. ` break case "company-profile": basePrompt = ` Generate a ${depth} company profile for ${ticker} in the ${industry} industry. Include the following sections: 1. Business Overview 2. Products and Services 3. Financial Analysis 4. Competitive Position 5. Growth Strategy 6. Management Assessment 7. Key Risks and Challenges The profile should have a ${tone} tone. Format the content with proper Markdown headings, bullet points, and emphasis where appropriate. The content should be educational, balanced, and suitable for investors seeking to understand the company. ` break // Other content types... default: basePrompt = ` Generate comprehensive, educational content for an investment primer on the ${industry} industry. Format the content with proper Markdown headings, bullet points, and emphasis where appropriate. The content should be educational, balanced, and suitable for investors. The content should have a ${tone} tone and be ${depth} in its analysis. ` } // Add custom sections if provided if (sections && sections.length > 0) { basePrompt += `\n\nPlease specifically include these sections:\n` sections.forEach((section, index) => { basePrompt += `${index + 1}. ${section}\n` }) } // Add additional context if provided if (additionalContext) { basePrompt += `\n\nAdditional context to consider:\n${additionalContext}` } return basePrompt } export async function saveGeneratedContent( content: string, title: string, contentType = "section", primerSectionId?: string, ): Promise<{ success: boolean; message: string; sectionId?: string }> { try { // Create a new section or update an existing one if (primerSectionId) { // Update existing section const updatedSection = await updatePrimerSection(primerSectionId, { title, content, updatedAt: new Date().toISOString(), }) if (!updatedSection) { return { success: false, message: "Failed to update section. Section not found.", } } // Revalidate the primer pages to reflect the changes revalidatePath("/investment-primer") revalidatePath(`/investment-primer/${primerSectionId}`) return { success: true, message: "Content updated successfully", sectionId: primerSectionId, } } else { // Create a new section const newSection = await createPrimerSection({ title, content, description: `AI-generated ${contentType} about ${title}`, order: 999, // Will be placed at the end }) // Revalidate the primer pages to reflect the changes revalidatePath("/investment-primer") return { success: true, message: "Content saved successfully", sectionId: newSection.id, } } } catch (error) { console.error("Error saving generated content:", error) return { success: false, message: "Failed to save content. Please try again.", } } } [V0_FILE]typescript:file="app/actions/ai-research-actions.ts" isMerged="true" "use server" import { generateContentWithGemini } from "@/services/ai-content-service" import type { ResearchQuery, ResearchResult } from "@/types/ai-research" export async function researchTopic(query: ResearchQuery): Promise { try { const prompt = buildResearchPrompt(query) const result = await generateContentWithGemini(prompt) try { // Try to parse the result as JSON const parsedResult = parseResearchResponse(result.content) return { query: query.query, ...parsedResult, } } catch (parseError) { console.error("Error parsing research response:", parseError) // If parsing fails, create a fallback response return createFallbackResponse(query.query, result.content) } } catch (error) { console.error("Error researching topic:", error) return { query: query.query, facts: [], insights: [], relatedQueries: [], error: "Failed to research topic. Please try again.", } } } function buildResearchPrompt(query: ResearchQuery): string { const { query: searchQuery, industry, ticker, timeframe, dataType = "all" } = query let prompt = `Research the following topic: "${searchQuery}"` if (industry) { prompt += ` in the ${industry} industry` } if (ticker) { prompt += ` related to ${ticker}` } if (timeframe) { prompt += ` for the timeframe: ${timeframe}` } prompt += `\n\nFocus on ${dataType === "all" ? "all relevant information" : dataType}.` prompt += `\n\nProvide your response in the following JSON format: { "facts": [ { "text": "Factual statement about the topic", "source": "Source of information (if available)", "relevance": number between 1-10 indicating relevance to query, "date": "Date of the information (if available)", "category": "Category of this fact (e.g., 'Market Size', 'Trend', 'Competitor', etc.)" } ], "insights": [ { "text": "Analytical insight based on the facts", "confidence": number between 1-10 indicating confidence level, "category": "Category of this insight (e.g., 'Growth Potential', 'Risk', 'Opportunity', etc.)" } ], "relatedQueries": [ "Related search query 1", "Related search query 2", "Related search query 3" ] } Provide at least 5 facts and 3 insights. Ensure all information is accurate and relevant to the query. ` return prompt } function parseResearchResponse(content: string): Partial { // Try to extract JSON from the response const jsonMatch = content.match(/```json\n([\s\S]*?)\n```/) || content.match(/({[\s\S]*})/) if (jsonMatch && jsonMatch[1]) { return JSON.parse(jsonMatch[1]) } // If no JSON block found, try to parse the entire content try { return JSON.parse(content) } catch (error) { throw new Error("Could not parse research response as JSON") } } function createFallbackResponse(query: string, content: string): ResearchResult { // Create a simple fallback response when JSON parsing fails const paragraphs = content.split("\n\n").filter((p) => p.trim().length > 0) const facts = paragraphs.slice(0, Math.min(5, paragraphs.length)).map((p, i) => ({ text: p, relevance: 7, category: i === 0 ? "Overview" : "Additional Information", source: "AI Research Assistant", })) const insights = [ { text: "The AI was unable to format the response as structured data, but provided textual information instead.", confidence: 5, category: "Processing Note", }, ] return { query, facts, insights, relatedQueries: [`More about ${query}`, `${query} statistics`, `${query} trends`], } } export async function saveResearchResult( result: ResearchResult, tags: string[] = [], ): Promise<{ success: boolean; id?: string; error?: string }> { try { // In a real implementation, this would save to your database // For now, we'll just simulate a successful save await new Promise((resolve) => setTimeout(resolve, 500)) return { success: true, id: `research-${Date.now()}`, } } catch (error) { console.error("Error saving research result:", error) return { success: false, error: "Failed to save research result.", } } } export async function generateSectionFromResearch( result: ResearchResult, sectionTitle: string, ): Promise<{ content: string; error?: string }> { try { // Build a prompt based on the research results const factsText = result.facts.map((fact) => `- ${fact.text}`).join("\n") const insightsText = result.insights.map((insight) => `- ${insight.text}`).join("\n") const prompt = ` Generate a comprehensive section for an investment primer titled "${sectionTitle}" based on the following research: FACTS: ${factsText} INSIGHTS: ${insightsText} Create a well-structured, informative section that incorporates these facts and insights. Format the content with proper Markdown headings, bullet points, and emphasis where appropriate. The content should be educational, balanced, and suitable for investors. ` const generatedResult = await generateContentWithGemini(prompt) return { content: generatedResult.content } } catch (error) { console.error("Error generating section from research:", error) return { content: "", error: "Failed to generate section from research. Please try again.", } } } [V0_FILE]typescript:file="app/actions/api-status-actions.ts" isMerged="true" "use server" import { checkApiConfiguration } from "@/lib/api-config" /** * Server action to check API configuration status * This safely exposes only the boolean status without revealing API keys */ export async function getApiConfigurationStatus(): Promise<{ allConfigured: boolean status: Record }> { try { const config = checkApiConfiguration() return { allConfigured: config.allConfigured, status: config.status, } } catch (error) { console.error("Error checking API configuration:", error) return { allConfigured: false, status: { fmp: false, polygon: false, gemini: false, kit: false, }, } } } /** * Server action to test individual API endpoints * Returns connection status without exposing keys */ export async function testApiConnections(): Promise<{ fmp: { connected: boolean; message: string } polygon: { connected: boolean; message: string } gemini: { connected: boolean; message: string } kit: { connected: boolean; message: string } }> { const results = { fmp: { connected: false, message: "Not configured" }, polygon: { connected: false, message: "Not configured" }, gemini: { connected: false, message: "Not configured" }, kit: { connected: false, message: "Not configured" }, } try { // Test FMP API if (process.env.FMP_API_KEY) { try { const response = await fetch(`/api/fmp?endpoint=profile&symbol=AAPL`) if (response.ok) { results.fmp = { connected: true, message: "Connected successfully" } } else { results.fmp = { connected: false, message: `HTTP ${response.status}` } } } catch (error) { results.fmp = { connected: false, message: "Connection failed" } } } // Test other APIs similarly... // For now, just check if they're configured if (process.env.POLYGON_API_KEY) { results.polygon = { connected: true, message: "API key configured" } } if (process.env.GEMINI_API_KEY) { results.gemini = { connected: true, message: "API key configured" } } if (process.env.KIT_API_KEY) { results.kit = { connected: true, message: "API key configured" } } } catch (error) { console.error("Error testing API connections:", error) } return results } [V0_FILE]typescript:file="app/actions/automation-dashboard-actions.ts" isMerged="true" "use server" import { supabase } from "@/services/supabase-service" import { revalidatePath } from "next/cache" import { v4 as uuidv4 } from "uuid" // Types for dashboard data export interface NewsletterMetrics { total: number active: number paused: number failed: number completed: number } export interface RunMetrics { total: number success: number failure: number pending: number } export interface TimeSeriesData { date: string count: number status: string } export interface NewsletterPerformance { id: string title: string frequency: string totalRuns: number successRate: number lastRun: string | null status: string } export interface SystemLog { id: string type: string status: string details: any created_at: string } export interface CronJob { id: string name: string path: string schedule: string isActive: boolean lastRun: string | null nextRun: string | null description: string } // Get newsletter metrics export async function getNewsletterMetrics(): Promise { // Fetch all newsletters const { data, error } = await supabase.from("scheduled_newsletters").select("status") if (error) { console.error("Error fetching newsletter metrics:", error) throw new Error("Failed to fetch newsletter metrics") } // Calculate metrics by counting statuses const metrics: NewsletterMetrics = { total: data.length, active: data.filter((item) => item.status === "active").length, paused: data.filter((item) => item.status === "paused").length, failed: data.filter((item) => item.status === "failed").length, completed: data.filter((item) => item.status === "completed").length, } return metrics } // Get run metrics export async function getRunMetrics(days = 30): Promise { // Calculate date range const endDate = new Date() const startDate = new Date() startDate.setDate(startDate.getDate() - days) // Fetch all runs in the date range const { data, error } = await supabase .from("newsletter_run_history") .select("status") .gte("date", startDate.toISOString()) .lte("date", endDate.toISOString()) if (error) { console.error("Error fetching run metrics:", error) throw new Error("Failed to fetch run metrics") } // Calculate metrics by counting statuses const metrics: RunMetrics = { total: data.length, success: data.filter((item) => item.status === "success").length, failure: data.filter((item) => item.status === "failure").length, pending: data.filter((item) => item.status === "pending").length, } return metrics } // Get time series data for runs export async function getRunsTimeSeries(days = 30): Promise { // Calculate date range const endDate = new Date() const startDate = new Date() startDate.setDate(startDate.getDate() - days) // Get all runs in the date range const { data, error } = await supabase .from("newsletter_run_history") .select("date, status") .gte("date", startDate.toISOString()) .lte("date", endDate.toISOString()) .order("date", { ascending: true }) if (error) { console.error("Error fetching runs time series:", error) throw new Error("Failed to fetch runs time series") } // Group by date and status const timeSeriesMap = new Map>() data.forEach((run) => { const date = new Date(run.date).toISOString().split("T")[0] const status = run.status if (!timeSeriesMap.has(date)) { timeSeriesMap.set(date, new Map()) } const statusMap = timeSeriesMap.get(date)! statusMap.set(status, (statusMap.get(status) || 0) + 1) }) // Convert to array format const result: TimeSeriesData[] = [] timeSeriesMap.forEach((statusMap, date) => { statusMap.forEach((count, status) => { result.push({ date, status, count, }) }) }) return result } // Get newsletter performance data export async function getNewsletterPerformance(): Promise { // Get all newsletters const { data: newsletters, error: newslettersError } = await supabase .from("scheduled_newsletters") .select("id, title, frequency, status, last_run_date") if (newslettersError) { console.error("Error fetching newsletters:", newslettersError) throw new Error("Failed to fetch newsletters") } // Get run history for all newsletters const { data: runHistory, error: runHistoryError } = await supabase .from("newsletter_run_history") .select("newsletter_id, status") if (runHistoryError) { console.error("Error fetching run history:", runHistoryError) throw new Error("Failed to fetch run history") } // Calculate performance metrics const performance: NewsletterPerformance[] = newsletters.map((newsletter) => { const runs = runHistory.filter((run) => run.newsletter_id === newsletter.id) const totalRuns = runs.length const successfulRuns = runs.filter((run) => run.status === "success").length const successRate = totalRuns > 0 ? (successfulRuns / totalRuns) * 100 : 0 return { id: newsletter.id, title: newsletter.title, frequency: newsletter.frequency, totalRuns, successRate, lastRun: newsletter.last_run_date, status: newsletter.status, } }) return performance } // Get system logs export async function getSystemLogs(limit = 50, type?: string): Promise { let query = supabase.from("system_logs").select("*").order("created_at", { ascending: false }).limit(limit) if (type) { query = query.eq("type", type) } const { data, error } = await query if (error) { console.error("Error fetching system logs:", error) throw new Error("Failed to fetch system logs") } return data as SystemLog[] } // Get recent errors export async function getRecentErrors(limit = 10): Promise { const { data, error } = await supabase .from("system_logs") .select("*") .eq("status", "error") .order("created_at", { ascending: false }) .limit(limit) if (error) { console.error("Error fetching recent errors:", error) throw new Error("Failed to fetch recent errors") } return data as SystemLog[] } // Manually trigger newsletter processing export async function triggerNewsletterProcessing(): Promise<{ success: boolean; message: string }> { try { const response = await fetch(`${process.env.NEXT_PUBLIC_SITE_URL}/api/cron/process-newsletters`, { method: "GET", headers: { Authorization: `Bearer ${process.env.CRON_SECRET}`, }, }) const result = await response.json() revalidatePath("/automation-dashboard") return { success: response.ok, message: response.ok ? "Newsletter processing triggered successfully" : result.message || "Failed to trigger newsletter processing", } } catch (error) { console.error("Error triggering newsletter processing:", error) return { success: false, message: error instanceof Error ? error.message : "Unknown error occurred", } } } // Get cron jobs export async function getCronJobs(): Promise { try { // Check if automation_jobs table exists const { data: tableExists } = await supabase .from("information_schema.tables") .select("*") .eq("table_name", "automation_jobs") // If table doesn't exist, return mock data if (!tableExists || tableExists.length === 0) { // In a real implementation, this would fetch from a database // For now, we'll return mock data with the updated schedule for the newsletter job const mockJobs: CronJob[] = [ { id: "newsletter-processing", name: "Newsletter Processing", path: "/api/cron/process-newsletters", schedule: "0 23 * * *", // 6 PM EST (11 PM UTC) isActive: true, lastRun: new Date(Date.now() - 24 * 60 * 60 * 1000).toISOString(), // 1 day ago nextRun: getNextRunTime("0 23 * * *"), // Calculate next run at 11 PM UTC description: "Processes scheduled newsletters that are due to be generated and sent. Runs daily at 6 PM EST.", }, { id: "content-cleanup", name: "Content Cleanup", path: "/api/cron/content-cleanup", schedule: "0 0 * * *", // Daily at midnight isActive: true, lastRun: new Date(Date.now() - 24 * 60 * 60 * 1000).toISOString(), // 1 day ago nextRun: new Date(Date.now() + 24 * 60 * 60 * 1000).toISOString(), // 1 day from now description: "Cleans up temporary content and files that are no longer needed.", }, ] return mockJobs } // Fetch from automation_jobs table const { data, error } = await supabase.from("automation_jobs").select("*").order("created_at", { ascending: false }) if (error) { console.error("Error fetching automation jobs:", error) throw new Error("Failed to fetch automation jobs") } // If we have the newsletter processing job, update its schedule const updatedJobs = data.map((job) => { if (job.name === "Newsletter Processing" || job.path === "/api/cron/process-newsletters") { return { ...job, schedule: "0 23 * * *", // 6 PM EST (11 PM UTC) next_run: getNextRunTime("0 23 * * *"), description: job.description + " Runs daily at 6 PM EST.", } } return job }) // Update the database with the new schedule for (const job of updatedJobs) { if (job.name === "Newsletter Processing" || job.path === "/api/cron/process-newsletters") { await supabase .from("automation_jobs") .update({ schedule: "0 23 * * *", next_run: getNextRunTime("0 23 * * *"), description: job.description, }) .eq("id", job.id) } } return updatedJobs.map((job) => ({ id: job.id, name: job.name, path: job.path, schedule: job.schedule, isActive: job.is_active, lastRun: job.last_run, nextRun: job.next_run, description: job.description, })) } catch (error) { console.error("Error fetching cron jobs:", error) throw new Error("Failed to fetch cron jobs") } } // Helper function to calculate the next run time for a cron expression function getNextRunTime(cronExpression: string): string { // This is a simplified implementation // For 6 PM EST (11 PM UTC) daily, we'll calculate the next occurrence const now = new Date() const nextRun = new Date(now) // Set to 11 PM UTC (6 PM EST) nextRun.setUTCHours(23, 0, 0, 0) // If it's already past 11 PM UTC today, move to tomorrow if (now.getTime() >= nextRun.getTime()) { nextRun.setDate(nextRun.getDate() + 1) } return nextRun.toISOString() } // Update cron schedule export async function updateCronSchedule( jobId: string, schedule: string, ): Promise<{ success: boolean; message?: string; job?: CronJob }> { try { // Check if automation_jobs table exists const { data: tableExists } = await supabase .from("information_schema.tables") .select("*") .eq("table_name", "automation_jobs") // If table doesn't exist, just return success (mock implementation) if (!tableExists || tableExists.length === 0) { // Log the update for demonstration purposes console.log(`Updating cron schedule for job ${jobId} to ${schedule}`) return { success: true, message: "Cron schedule updated successfully", } } // Update the job in the database const { error } = await supabase .from("automation_jobs") .update({ schedule, updated_at: new Date().toISOString(), }) .eq("id", jobId) if (error) { console.error("Error updating cron schedule:", error) return { success: false, message: error.message || "Failed to update cron schedule", } } // Update next_run based on the new schedule let nextRun: Date // Special handling for the newsletter job at 6 PM EST if (schedule === "0 23 * * *") { nextRun = new Date() nextRun.setUTCHours(23, 0, 0, 0) // If it's already past 11 PM UTC today, move to tomorrow if (new Date().getTime() >= nextRun.getTime()) { nextRun.setDate(nextRun.getDate() + 1) } } else { // For other schedules, use a simple future time nextRun = new Date(Date.now() + 60 * 60 * 1000) // 1 hour from now } await supabase.from("automation_jobs").update({ next_run: nextRun.toISOString() }).eq("id", jobId) // Revalidate the dashboard page revalidatePath("/automation-dashboard") return { success: true, message: "Cron schedule updated successfully", } } catch (error) { console.error("Error updating cron schedule:", error) return { success: false, message: error instanceof Error ? error.message : "Unknown error occurred", } } } // Create a new automation job export async function createAutomationJob(jobData: { name: string description: string path: string schedule: string }): Promise<{ success: boolean; message?: string; job?: CronJob }> { try { // Check if automation_jobs table exists const { data: tableExists } = await supabase .from("information_schema.tables") .select("*") .eq("table_name", "automation_jobs") // If table doesn't exist, create it if (!tableExists || tableExists.length === 0) { // Create the automation_jobs table await supabase.rpc("create_automation_jobs_table") } const id = uuidv4() const now = new Date().toISOString() // Calculate next run time based on schedule let nextRun: Date // Special handling for jobs scheduled at 6 PM EST if (jobData.schedule === "0 23 * * *") { nextRun = new Date() nextRun.setUTCHours(23, 0, 0, 0) // If it's already past 11 PM UTC today, move to tomorrow if (new Date().getTime() >= nextRun.getTime()) { nextRun.setDate(nextRun.getDate() + 1) } } else { // For other schedules, use a simple future time nextRun = new Date(Date.now() + 60 * 60 * 1000) // 1 hour from now } // Insert the new job const { data, error } = await supabase .from("automation_jobs") .insert({ id, name: jobData.name, description: jobData.description, path: jobData.path, schedule: jobData.schedule, is_active: true, created_at: now, updated_at: now, next_run: nextRun.toISOString(), }) .select() .single() if (error) { console.error("Error creating automation job:", error) return { success: false, message: error.message || "Failed to create automation job", } } // Log the creation for demonstration purposes console.log(`Created new automation job: ${jobData.name}`) // Revalidate the dashboard page revalidatePath("/automation-dashboard") // Return the created job const job: CronJob = { id: data.id, name: data.name, path: data.path, schedule: data.schedule, isActive: data.is_active, lastRun: data.last_run, nextRun: data.next_run, description: data.description, } return { success: true, job, } } catch (error) { console.error("Error creating automation job:", error) return { success: false, message: error instanceof Error ? error.message : "Unknown error occurred", } } } [V0_FILE]typescript:file="app/actions/changelog-actions.ts" isMerged="true" "use server" import { supabase } from "@/services/supabase-client" import type { ChangelogEntry } from "@/types/changelog-types" export async function getChangelogEntries(): Promise { const { data, error } = await supabase .from("changelog_entries") .select("*") .order("date", { ascending: false }) .order("created_at", { ascending: false }) // Secondary sort for entries on the same day if (error) { console.error("Error fetching changelog entries:", error) return [] } return data as ChangelogEntry[] } [V0_FILE]typescript:file="app/actions/execution-metrics-actions.ts" isMerged="true" "use server" import { supabase } from "@/services/supabase-service" export interface ExecutionTrend { date: string success: number failure: number running: number canceled: number total: number } export interface DurationTrend { date: string avgDuration: number minDuration: number maxDuration: number } export interface JobPerformance { jobId: string jobName: string totalExecutions: number successRate: number avgDuration: number failureRate: number } export interface StatusDistribution { status: string count: number percentage: number } export interface TimeOfDayDistribution { hour: number count: number } export interface ExecutionMetricsSummary { totalExecutions: number successRate: number avgDuration: number failureCount: number mostFrequentJob: { jobId: string jobName: string count: number } | null mostFailedJob: { jobId: string jobName: string failureCount: number } | null } // Get execution trends over time (daily aggregation) export async function getExecutionTrends(days = 30, jobId?: string): Promise { try { const endDate = new Date() const startDate = new Date() startDate.setDate(startDate.getDate() - days) // Format dates for SQL query const startDateStr = startDate.toISOString() const endDateStr = endDate.toISOString() // Build the query let query = supabase .from("job_executions") .select("started_at, status") .gte("started_at", startDateStr) .lte("started_at", endDateStr) .order("started_at", { ascending: true }) if (jobId && jobId !== "all") { query = query.eq("job_id", jobId) } const { data, error } = await query if (error) { console.error("Error fetching execution trends:", error) return [] } // Group by date and count statuses const trendMap = new Map< string, { success: number; failure: number; running: number; canceled: number; total: number } >() // Initialize with all dates in the range for (let d = new Date(startDate); d <= endDate; d.setDate(d.getDate() + 1)) { const dateStr = d.toISOString().split("T")[0] trendMap.set(dateStr, { success: 0, failure: 0, running: 0, canceled: 0, total: 0 }) } // Fill in the actual data data.forEach((execution) => { const date = new Date(execution.started_at).toISOString().split("T")[0] const entry = trendMap.get(date) if (entry) { entry.total++ switch (execution.status) { case "success": entry.success++ break case "failure": entry.failure++ break case "running": entry.running++ break case "canceled": entry.canceled++ break } } }) // Convert map to array return Array.from(trendMap.entries()).map(([date, counts]) => ({ date, ...counts, })) } catch (error) { console.error("Error in getExecutionTrends:", error) return [] } } // Get duration trends over time export async function getDurationTrends(days = 30, jobId?: string): Promise { try { const endDate = new Date() const startDate = new Date() startDate.setDate(startDate.getDate() - days) // Format dates for SQL query const startDateStr = startDate.toISOString() const endDateStr = endDate.toISOString() // Build the query let query = supabase .from("job_executions") .select("started_at, duration_ms") .eq("status", "success") // Only include successful executions .not("duration_ms", "is", null) .gte("started_at", startDateStr) .lte("started_at", endDateStr) .order("started_at", { ascending: true }) if (jobId && jobId !== "all") { query = query.eq("job_id", jobId) } const { data, error } = await query if (error) { console.error("Error fetching duration trends:", error) return [] } // Group by date and calculate statistics const durationMap = new Map() // Initialize with all dates in the range for (let d = new Date(startDate); d <= endDate; d.setDate(d.getDate() + 1)) { const dateStr = d.toISOString().split("T")[0] durationMap.set(dateStr, { durations: [] }) } // Fill in the actual data data.forEach((execution) => { if (execution.duration_ms !== null) { const date = new Date(execution.started_at).toISOString().split("T")[0] const entry = durationMap.get(date) if (entry) { entry.durations.push(execution.duration_ms) } } }) // Calculate statistics and convert map to array return Array.from(durationMap.entries()).map(([date, { durations }]) => { if (durations.length === 0) { return { date, avgDuration: 0, minDuration: 0, maxDuration: 0, } } const sum = durations.reduce((acc, val) => acc + val, 0) const avg = Math.round(sum / durations.length) const min = Math.min(...durations) const max = Math.max(...durations) return { date, avgDuration: avg, minDuration: min, maxDuration: max, } }) } catch (error) { console.error("Error in getDurationTrends:", error) return [] } } // Get performance metrics by job export async function getJobPerformance(days = 30): Promise { try { const endDate = new Date() const startDate = new Date() startDate.setDate(startDate.getDate() - days) // Format dates for SQL query const startDateStr = startDate.toISOString() const endDateStr = endDate.toISOString() // Get all executions in the date range const { data: executions, error: executionsError } = await supabase .from("job_executions") .select("job_id, status, duration_ms") .gte("started_at", startDateStr) .lte("started_at", endDateStr) if (executionsError) { console.error("Error fetching job performance:", executionsError) return [] } // Get job names from automation_schedules table instead of automation_jobs const jobIds = [...new Set(executions.map((e) => e.job_id))] // Create a map to store job names const jobNames: Record = {} // Only try to fetch job names if we have job IDs if (jobIds.length > 0) { try { // Try to get job names from automation_schedules table const { data: jobs, error: jobsError } = await supabase .from("automation_schedules") .select("id, name") .in("id", jobIds) if (jobsError) { console.error("Error fetching job names from automation_schedules:", jobsError) // Continue with unknown job names } else if (jobs) { // Populate job names from automation_schedules jobs.forEach((job) => { jobNames[job.id] = job.name }) } } catch (error) { console.error("Error fetching job names:", error) // Continue with unknown job names } } // Group executions by job const jobMap = new Map< string, { totalExecutions: number successCount: number failureCount: number durations: number[] } >() // Initialize map with all job IDs jobIds.forEach((jobId) => { jobMap.set(jobId, { totalExecutions: 0, successCount: 0, failureCount: 0, durations: [], }) }) // Fill in the data executions.forEach((execution) => { const jobData = jobMap.get(execution.job_id) if (jobData) { jobData.totalExecutions++ if (execution.status === "success") { jobData.successCount++ if (execution.duration_ms !== null) { jobData.durations.push(execution.duration_ms) } } else if (execution.status === "failure") { jobData.failureCount++ } } }) // Convert map to array and calculate metrics return Array.from(jobMap.entries()) .map(([jobId, data]) => { const successRate = data.totalExecutions > 0 ? (data.successCount / data.totalExecutions) * 100 : 0 const failureRate = data.totalExecutions > 0 ? (data.failureCount / data.totalExecutions) * 100 : 0 const avgDuration = data.durations.length > 0 ? data.durations.reduce((sum, val) => sum + val, 0) / data.durations.length : 0 return { jobId, jobName: jobNames[jobId] || `Job ${jobId.substring(0, 8)}...`, totalExecutions: data.totalExecutions, successRate, failureRate, avgDuration, } }) .sort((a, b) => b.totalExecutions - a.totalExecutions) // Sort by total executions } catch (error) { console.error("Error in getJobPerformance:", error) return [] } } // Get status distribution export async function getStatusDistribution(days = 30, jobId?: string): Promise { try { const endDate = new Date() const startDate = new Date() startDate.setDate(startDate.getDate() - days) // Format dates for SQL query const startDateStr = startDate.toISOString() const endDateStr = endDate.toISOString() // Build the query let query = supabase .from("job_executions") .select("status", { count: "exact" }) .gte("started_at", startDateStr) .lte("started_at", endDateStr) if (jobId && jobId !== "all") { query = query.eq("job_id", jobId) } const { data, error, count } = await query if (error) { console.error("Error fetching status distribution:", error) return [] } // Count occurrences of each status const statusCounts: Record = { success: 0, failure: 0, running: 0, canceled: 0, } data.forEach((item) => { if (statusCounts[item.status] !== undefined) { statusCounts[item.status]++ } }) // Calculate percentages and format the result const total = count || 0 return Object.entries(statusCounts).map(([status, count]) => ({ status, count, percentage: total > 0 ? (count / total) * 100 : 0, })) } catch (error) { console.error("Error in getStatusDistribution:", error) return [] } } // Get time of day distribution export async function getTimeOfDayDistribution(days = 30, jobId?: string): Promise { try { const endDate = new Date() const startDate = new Date() startDate.setDate(startDate.getDate() - days) // Format dates for SQL query const startDateStr = startDate.toISOString() const endDateStr = endDate.toISOString() // Build the query let query = supabase .from("job_executions") .select("started_at") .gte("started_at", startDateStr) .lte("started_at", endDateStr) if (jobId && jobId !== "all") { query = query.eq("job_id", jobId) } const { data, error } = await query if (error) { console.error("Error fetching time of day distribution:", error) return [] } // Initialize hours array const hourCounts = Array(24).fill(0) // Count executions by hour data.forEach((execution) => { const hour = new Date(execution.started_at).getUTCHours() hourCounts[hour]++ }) // Format the result return hourCounts.map((count, hour) => ({ hour, count, })) } catch (error) { console.error("Error in getTimeOfDayDistribution:", error) return [] } } // Get execution metrics summary export async function getExecutionMetricsSummary(days = 30): Promise { try { const endDate = new Date() const startDate = new Date() startDate.setDate(startDate.getDate() - days) // Format dates for SQL query const startDateStr = startDate.toISOString() const endDateStr = endDate.toISOString() // Get all executions in the date range const { data: executions, error: executionsError, count, } = await supabase .from("job_executions") .select("job_id, status, duration_ms", { count: "exact" }) .gte("started_at", startDateStr) .lte("started_at", endDateStr) if (executionsError) { console.error("Error fetching execution metrics summary:", executionsError) return { totalExecutions: 0, successRate: 0, avgDuration: 0, failureCount: 0, mostFrequentJob: null, mostFailedJob: null, } } // Calculate basic metrics const totalExecutions = count || 0 const successCount = executions.filter((e) => e.status === "success").length const failureCount = executions.filter((e) => e.status === "failure").length const successRate = totalExecutions > 0 ? (successCount / totalExecutions) * 100 : 0 // Calculate average duration const durations = executions .filter((e) => e.status === "success" && e.duration_ms !== null) .map((e) => e.duration_ms) const avgDuration = durations.length > 0 ? durations.reduce((sum, val) => sum + val, 0) / durations.length : 0 // Find most frequent job const jobCounts: Record = {} const jobFailureCounts: Record = {} executions.forEach((execution) => { // Count total executions by job jobCounts[execution.job_id] = (jobCounts[execution.job_id] || 0) + 1 // Count failures by job if (execution.status === "failure") { jobFailureCounts[execution.job_id] = (jobFailureCounts[execution.job_id] || 0) + 1 } }) // Find the job with the most executions let mostFrequentJobId = null let maxCount = 0 Object.entries(jobCounts).forEach(([jobId, count]) => { if (count > maxCount) { mostFrequentJobId = jobId maxCount = count } }) // Find the job with the most failures let mostFailedJobId = null let maxFailures = 0 Object.entries(jobFailureCounts).forEach(([jobId, count]) => { if (count > maxFailures) { mostFailedJobId = jobId maxFailures = count } }) // Get job names from automation_schedules table const jobNames: Record = {} const jobIds = [mostFrequentJobId, mostFailedJobId].filter(Boolean) as string[] if (jobIds.length > 0) { try { // Try to get job names from automation_schedules table const { data: jobs, error: jobsError } = await supabase .from("automation_schedules") .select("id, name") .in("id", jobIds) if (jobsError) { console.error("Error fetching job names from automation_schedules:", jobsError) // Continue with unknown job names } else if (jobs) { // Populate job names from automation_schedules jobs.forEach((job) => { jobNames[job.id] = job.name }) } } catch (error) { console.error("Error fetching job names:", error) // Continue with unknown job names } } // Prepare the result return { totalExecutions, successRate, avgDuration, failureCount, mostFrequentJob: mostFrequentJobId ? { jobId: mostFrequentJobId, jobName: jobNames[mostFrequentJobId] || `Job ${mostFrequentJobId.substring(0, 8)}...`, count: maxCount, } : null, mostFailedJob: mostFailedJobId ? { jobId: mostFailedJobId, jobName: jobNames[mostFailedJobId] || `Job ${mostFailedJobId.substring(0, 8)}...`, failureCount: maxFailures, } : null, } } catch (error) { console.error("Error in getExecutionMetricsSummary:", error) return { totalExecutions: 0, successRate: 0, avgDuration: 0, failureCount: 0, mostFrequentJob: null, mostFailedJob: null, } } } [V0_FILE]typescript:file="app/actions/execution-report-actions.ts" isMerged="true" "use server" import { format } from "date-fns" import type { JobExecution } from "./job-execution-actions" interface ReportOptions { executions: JobExecution[] reportType: string title?: string jobId?: string status?: string dateRange?: { from?: string to?: string } } // Generate PDF Report export async function generatePDFReport(options: ReportOptions): Promise { // In a real implementation, this would use a PDF generation library // For this example, we'll return a simple placeholder // This would normally be a binary PDF // For demonstration, we're returning a simple string that would be converted to PDF const pdfContent = ` Job Execution Report ==================== ${options.title || "Job Execution Report"} Generated: ${format(new Date(), "PPpp")} Report Type: ${options.reportType} Job ID: ${options.jobId || "All Jobs"} Status: ${options.status || "All Statuses"} Date Range: ${options.dateRange?.from || "All Time"} to ${options.dateRange?.to || "Present"} Total Executions: ${options.executions.length} Summary: - Success Rate: ${calculateSuccessRate(options.executions)}% - Average Duration: ${calculateAverageDuration(options.executions)}ms - Failure Count: ${countFailures(options.executions)} ${options.reportType === "detailed" ? generateDetailedContent(options.executions) : ""} ${options.reportType === "trend" ? generateTrendContent(options.executions) : ""} ` // Convert string to Uint8Array (in a real implementation, this would be actual PDF binary data) const encoder = new TextEncoder() return encoder.encode(pdfContent) } // Generate CSV Report export async function generateCSVReport(options: ReportOptions): Promise { let csvContent = "" // Add headers if (options.reportType === "summary") { csvContent = "Job ID,Job Name,Total Executions,Success Rate,Average Duration,Failure Count\n" // Group by job const jobGroups = groupByJob(options.executions) // Add data rows for (const [jobId, execs] of Object.entries(jobGroups)) { const jobName = execs[0]?.job_name || jobId csvContent += `${jobId},${jobName},${execs.length},${calculateSuccessRate(execs)}%,${calculateAverageDuration(execs)}ms,${countFailures(execs)}\n` } } else if (options.reportType === "detailed") { csvContent = "ID,Job ID,Job Name,Status,Started At,Completed At,Duration (ms),Error\n" // Add data rows for (const exec of options.executions) { csvContent += `${exec.id},${exec.job_id},${exec.job_name || "Unknown"},${exec.status},${exec.started_at},${exec.completed_at || ""},${exec.duration_ms || ""},${(exec.error || "").replace(/,/g, ";")}\n` } } else if (options.reportType === "trend") { csvContent = "Date,Total Executions,Success Count,Failure Count,Success Rate,Average Duration\n" // Group by date const dateGroups = groupByDate(options.executions) // Add data rows for (const [date, execs] of Object.entries(dateGroups)) { const successCount = execs.filter((e) => e.status === "success").length const failureCount = execs.filter((e) => e.status === "failure").length csvContent += `${date},${execs.length},${successCount},${failureCount},${calculateSuccessRate(execs)}%,${calculateAverageDuration(execs)}ms\n` } } return csvContent } // Generate JSON Report export async function generateJSONReport(options: ReportOptions): Promise { const report: any = { metadata: { reportType: options.reportType, generatedAt: new Date().toISOString(), jobId: options.jobId || "all", status: options.status || "all", dateRange: options.dateRange || { from: "all", to: "present" }, totalExecutions: options.executions.length, }, } if (options.reportType === "summary") { // Group by job const jobGroups = groupByJob(options.executions) report.summary = { overallSuccessRate: calculateSuccessRate(options.executions), overallAverageDuration: calculateAverageDuration(options.executions), totalFailures: countFailures(options.executions), jobStats: Object.entries(jobGroups).map(([jobId, execs]) => ({ jobId, jobName: execs[0]?.job_name || "Unknown", executionCount: execs.length, successRate: calculateSuccessRate(execs), averageDuration: calculateAverageDuration(execs), failureCount: countFailures(execs), })), } } else if (options.reportType === "detailed") { report.executions = options.executions.map((exec) => ({ id: exec.id, jobId: exec.job_id, jobName: exec.job_name || "Unknown", status: exec.status, startedAt: exec.started_at, completedAt: exec.completed_at, durationMs: exec.duration_ms, error: exec.error, result: exec.result, })) } else if (options.reportType === "trend") { // Group by date const dateGroups = groupByDate(options.executions) report.trends = Object.entries(dateGroups).map(([date, execs]) => ({ date, executionCount: execs.length, successCount: execs.filter((e) => e.status === "success").length, failureCount: execs.filter((e) => e.status === "failure").length, successRate: calculateSuccessRate(execs), averageDuration: calculateAverageDuration(execs), })) } return report } // Helper functions function calculateSuccessRate(executions: JobExecution[]): number { if (executions.length === 0) return 0 const successCount = executions.filter((e) => e.status === "success").length return Math.round((successCount / executions.length) * 100) } function calculateAverageDuration(executions: JobExecution[]): number { if (executions.length === 0) return 0 const completedExecutions = executions.filter((e) => e.duration_ms != null) if (completedExecutions.length === 0) return 0 const totalDuration = completedExecutions.reduce((sum, e) => sum + (e.duration_ms || 0), 0) return Math.round(totalDuration / completedExecutions.length) } function countFailures(executions: JobExecution[]): number { return executions.filter((e) => e.status === "failure").length } function groupByJob(executions: JobExecution[]): Record { return executions.reduce( (groups, exec) => { const jobId = exec.job_id if (!groups[jobId]) { groups[jobId] = [] } groups[jobId].push(exec) return groups }, {} as Record, ) } function groupByDate(executions: JobExecution[]): Record { return executions.reduce( (groups, exec) => { const date = exec.started_at.split("T")[0] if (!groups[date]) { groups[date] = [] } groups[date].push(exec) return groups }, {} as Record, ) } function generateDetailedContent(executions: JobExecution[]): string { let content = "Detailed Execution Information:\n\n" for (const exec of executions.slice(0, 10)) { // Limit to first 10 for brevity content += `Execution ID: ${exec.id}\n` content += `Job: ${exec.job_name || exec.job_id}\n` content += `Status: ${exec.status}\n` content += `Started: ${exec.started_at}\n` content += `Completed: ${exec.completed_at || "N/A"}\n` content += `Duration: ${exec.duration_ms || "N/A"}ms\n` content += `Error: ${exec.error || "None"}\n\n` } if (executions.length > 10) { content += `... and ${executions.length - 10} more executions\n` } return content } function generateTrendContent(executions: JobExecution[]): string { const dateGroups = groupByDate(executions) let content = "Execution Trends:\n\n" content += "Date,Total,Success Rate,Avg Duration\n" for (const [date, execs] of Object.entries(dateGroups)) { content += `${date},${execs.length},${calculateSuccessRate(execs)}%,${calculateAverageDuration(execs)}ms\n` } return content } [V0_FILE]typescript:file="app/actions/job-dependency-actions.ts" isMerged="true" "use server" import { supabase } from "@/services/supabase-service" import { revalidatePath } from "next/cache" export interface JobDependency { id: string jobId: string dependsOnJobId: string dependsOnJobName?: string createdAt: string } // Get dependencies for a job export async function getJobDependencies(jobId: string): Promise { try { // Check if job_dependencies table exists const { data: tableExists, error: tableCheckError } = await supabase .from("information_schema.tables") .select("*") .eq("table_schema", "public") .eq("table_name", "job_dependencies") .single() if (tableCheckError || !tableExists) { console.log("job_dependencies table does not exist yet") return [] } // Get dependencies const { data, error } = await supabase .from("job_dependencies") .select("*") .eq("job_id", jobId) .order("created_at", { ascending: true }) if (error) { console.error("Error fetching job dependencies:", error) return [] } // Get job names for the dependencies const dependencies: JobDependency[] = [] for (const dep of data) { const { data: jobData, error: jobError } = await supabase .from("automation_schedules") .select("name") .eq("id", dep.depends_on_job_id) .single() if (jobError) { console.error("Error fetching job name:", jobError) } dependencies.push({ id: dep.id, jobId: dep.job_id, dependsOnJobId: dep.depends_on_job_id, dependsOnJobName: jobData?.name || "Unknown Job", createdAt: dep.created_at, }) } return dependencies } catch (error) { console.error("Error in getJobDependencies:", error) return [] } } // Get all jobs that could be dependencies (excluding the current job and its existing dependencies) export async function getAvailableDependencies(jobId: string): Promise<{ id: string; name: string }[]> { try { // Get current dependencies const currentDependencies = await getJobDependencies(jobId) const dependencyIds = currentDependencies.map((dep) => dep.dependsOnJobId) // Add the job itself to the exclusion list dependencyIds.push(jobId) // Get all jobs except those in the exclusion list const { data, error } = await supabase .from("automation_schedules") .select("id, name") .order("name", { ascending: true }) if (error) { console.error("Error fetching available dependencies:", error) return [] } // Filter out the jobs that are already dependencies or the job itself return data .filter((job) => !dependencyIds.includes(job.id)) .map((job) => ({ id: job.id, name: job.name, })) } catch (error) { console.error("Error in getAvailableDependencies:", error) return [] } } // Add a dependency export async function addJobDependency( jobId: string, dependsOnJobId: string, ): Promise<{ success: boolean; message?: string; dependency?: JobDependency }> { try { // Check if job_dependencies table exists const { data: tableExists, error: tableCheckError } = await supabase .from("information_schema.tables") .select("*") .eq("table_schema", "public") .eq("table_name", "job_dependencies") .single() if (tableCheckError || !tableExists) { return { success: false, message: "Job dependencies system is not set up yet. Please run the setup first.", } } // Check for circular dependencies const allDependencies = await getAllDependenciesRecursive(dependsOnJobId) if (allDependencies.includes(jobId)) { return { success: false, message: "Cannot add dependency: This would create a circular dependency chain", } } // Insert the dependency const { data, error } = await supabase .from("job_dependencies") .insert({ job_id: jobId, depends_on_job_id: dependsOnJobId, created_at: new Date().toISOString(), }) .select() .single() if (error) { if (error.code === "23505") { // Unique constraint violation return { success: false, message: "This dependency already exists", } } console.error("Error adding job dependency:", error) return { success: false, message: error.message || "Failed to add dependency", } } // Get the job name const { data: jobData, error: jobError } = await supabase .from("automation_schedules") .select("name") .eq("id", dependsOnJobId) .single() if (jobError) { console.error("Error fetching job name:", jobError) } const dependency: JobDependency = { id: data.id, jobId: data.job_id, dependsOnJobId: data.depends_on_job_id, dependsOnJobName: jobData?.name || "Unknown Job", createdAt: data.created_at, } // Revalidate the dashboard page revalidatePath("/automation-dashboard") return { success: true, dependency, } } catch (error) { console.error("Error in addJobDependency:", error) return { success: false, message: error instanceof Error ? error.message : "Unknown error occurred", } } } // Remove a dependency export async function removeJobDependency(dependencyId: string): Promise<{ success: boolean; message?: string }> { try { // Check if job_dependencies table exists const { data: tableExists, error: tableCheckError } = await supabase .from("information_schema.tables") .select("*") .eq("table_schema", "public") .eq("table_name", "job_dependencies") .single() if (tableCheckError || !tableExists) { return { success: false, message: "Job dependencies system is not set up yet. Please run the setup first.", } } const { error } = await supabase.from("job_dependencies").delete().eq("id", dependencyId) if (error) { console.error("Error removing job dependency:", error) return { success: false, message: error.message || "Failed to remove dependency", } } // Revalidate the dashboard page revalidatePath("/automation-dashboard") return { success: true, } } catch (error) { console.error("Error in removeJobDependency:", error) return { success: false, message: error instanceof Error ? error.message : "Unknown error occurred", } } } // Helper function to get all dependencies recursively (to check for circular dependencies) async function getAllDependenciesRecursive(jobId: string, visited: Set = new Set()): Promise { if (visited.has(jobId)) { return Array.from(visited) } visited.add(jobId) const dependencies = await getJobDependencies(jobId) for (const dep of dependencies) { await getAllDependenciesRecursive(dep.dependsOnJobId, visited) } return Array.from(visited) } // Check if all dependencies for a job have completed successfully export async function checkDependenciesCompleted(jobId: string): Promise { try { // Check if job_dependencies table exists const { data: tableExists, error: tableCheckError } = await supabase .from("information_schema.tables") .select("*") .eq("table_schema", "public") .eq("table_name", "job_dependencies") .single() if (tableCheckError || !tableExists) { return true // If dependencies system isn't set up, consider all dependencies "completed" } const dependencies = await getJobDependencies(jobId) if (dependencies.length === 0) { return true // No dependencies, so all are "completed" } for (const dep of dependencies) { // Get the latest execution of the dependency job const { data, error } = await supabase .from("job_executions") .select("*") .eq("job_id", dep.dependsOnJobId) .order("started_at", { ascending: false }) .limit(1) .single() if (error || !data) { return false // Error or no executions found } if (data.status !== "success") { return false // Dependency job didn't complete successfully } } return true // All dependencies completed successfully } catch (error) { console.error("Error in checkDependenciesCompleted:", error) return false } } [V0_FILE]typescript:file="app/actions/job-execution-actions.ts" isMerged="true" "use server" import { supabase } from "@/services/supabase-service" import { v4 as uuidv4 } from "uuid" import { revalidatePath } from "next/cache" export interface JobExecution { id: string jobId: string jobName: string status: "success" | "failure" | "running" | "canceled" startedAt: string completedAt: string | null durationMs: number | null error: string | null result: any logs: string | null createdAt: string } export interface JobExecutionFilters { jobId?: string status?: string startDate?: string endDate?: string limit?: number offset?: number } export interface JobExecutionStats { total: number success: number failure: number running: number canceled: number averageDurationMs: number | null } // Get job execution history with filters export async function getJobExecutions(filters: JobExecutionFilters = {}): Promise { try { // Start building the query let query = supabase .from("job_executions") .select(` id, job_id, status, started_at, completed_at, duration_ms, error, result, logs, created_at `) .order("started_at", { ascending: false }) // Apply filters if (filters.jobId) { query = query.eq("job_id", filters.jobId) } if (filters.status) { query = query.eq("status", filters.status) } if (filters.startDate) { query = query.gte("started_at", filters.startDate) } if (filters.endDate) { query = query.lte("started_at", filters.endDate) } // Apply pagination if (filters.limit) { query = query.limit(filters.limit) } if (filters.offset) { query = query.range(filters.offset, filters.offset + (filters.limit || 10) - 1) } // Execute the query const { data, error } = await query if (error) { console.error("Error fetching job executions:", error) return [] // Return empty array instead of throwing } // Get job names in a separate query const jobIds = [...new Set(data.map((item) => item.job_id))] const jobNames: Record = {} if (jobIds.length > 0) { const { data: jobsData, error: jobsError } = await supabase .from("automation_jobs") .select("id, name") .in("id", jobIds) if (!jobsError && jobsData) { jobsData.forEach((job) => { jobNames[job.id] = job.name }) } } // Transform the data to match our interface return data.map((execution) => ({ id: execution.id, jobId: execution.job_id, jobName: jobNames[execution.job_id] || "Unknown Job", status: execution.status, startedAt: execution.started_at, completedAt: execution.completed_at, durationMs: execution.duration_ms, error: execution.error, result: execution.result, logs: execution.logs, createdAt: execution.created_at, })) } catch (error) { console.error("Error in getJobExecutions:", error) return [] // Return empty array instead of throwing } } // Get job execution statistics export async function getJobExecutionStats(jobId?: string): Promise { try { // Default stats object const stats: JobExecutionStats = { total: 0, success: 0, failure: 0, running: 0, canceled: 0, averageDurationMs: null, } // Get total count by status let query = supabase.from("job_executions").select("status", { count: "exact" }) if (jobId) { query = query.eq("job_id", jobId) } const { data: statusData, error: statusError, count } = await query if (statusError) { console.error("Error fetching job execution stats:", statusError) return stats // Return default stats instead of throwing } // Calculate counts by status stats.total = count || 0 if (statusData && statusData.length > 0) { statusData.forEach((item) => { if (item.status === "success") stats.success++ else if (item.status === "failure") stats.failure++ else if (item.status === "running") stats.running++ else if (item.status === "canceled") stats.canceled++ }) } // Get average duration for successful executions const { data: durationData, error: durationError } = await supabase .from("job_executions") .select("duration_ms") .eq("status", "success") .not("duration_ms", "is", null) if (!durationError && durationData && durationData.length > 0) { const validDurations = durationData.filter((item) => item.duration_ms != null) if (validDurations.length > 0) { const totalDuration = validDurations.reduce((sum, item) => sum + (item.duration_ms || 0), 0) stats.averageDurationMs = Math.round(totalDuration / validDurations.length) } } return stats } catch (error) { console.error("Error in getJobExecutionStats:", error) return { total: 0, success: 0, failure: 0, running: 0, canceled: 0, averageDurationMs: null, } } } // Get a single job execution by ID export async function getJobExecution(id: string): Promise { try { const { data, error } = await supabase .from("job_executions") .select(` id, job_id, status, started_at, completed_at, duration_ms, error, result, logs, created_at `) .eq("id", id) .single() if (error) { console.error("Error fetching job execution:", error) return null } // Get job name let jobName = "Unknown Job" if (data.job_id) { const { data: jobData, error: jobError } = await supabase .from("automation_jobs") .select("name") .eq("id", data.job_id) .single() if (!jobError && jobData) { jobName = jobData.name } } return { id: data.id, jobId: data.job_id, jobName, status: data.status, startedAt: data.started_at, completedAt: data.completed_at, durationMs: data.duration_ms, error: data.error, result: data.result, logs: data.logs, createdAt: data.created_at, } } catch (error) { console.error("Error in getJobExecution:", error) return null } } // Record a new job execution export async function recordJobExecution( jobId: string, status: "success" | "failure" | "running" | "canceled", details: { startedAt?: string completedAt?: string durationMs?: number error?: string result?: any logs?: string }, ): Promise<{ success: boolean; executionId?: string }> { try { const id = uuidv4() const now = new Date().toISOString() const { error } = await supabase.from("job_executions").insert({ id, job_id: jobId, status, started_at: details.startedAt || now, completed_at: details.completedAt, duration_ms: details.durationMs, error: details.error, result: details.result, logs: details.logs, created_at: now, }) if (error) { console.error("Error recording job execution:", error) return { success: false } } // Try to update the last_run field in the automation_jobs table try { await supabase .from("automation_jobs") .update({ last_run: details.startedAt || now }) .eq("id", jobId) } catch (updateError) { console.error("Error updating job last_run:", updateError) // Continue even if this fails } revalidatePath("/automation-dashboard/job-history") return { success: true, executionId: id } } catch (error) { console.error("Error in recordJobExecution:", error) return { success: false } } } // Update an existing job execution export async function updateJobExecution( id: string, updates: { status?: "success" | "failure" | "running" | "canceled" completedAt?: string durationMs?: number error?: string result?: any logs?: string }, ): Promise<{ success: boolean }> { try { const { error } = await supabase .from("job_executions") .update({ status: updates.status, completed_at: updates.completedAt, duration_ms: updates.durationMs, error: updates.error, result: updates.result, logs: updates.logs, }) .eq("id", id) if (error) { console.error("Error updating job execution:", error) return { success: false } } revalidatePath("/automation-dashboard/job-history") return { success: true } } catch (error) { console.error("Error in updateJobExecution:", error) return { success: false } } } [V0_FILE]typescript:file="app/actions/kit-actions.ts" isMerged="true" "use server" import type { KitPublishingOptions, KitPublishingResult } from "@/services/kit-publishing-service" /** * Server action to publish content to Kit */ export async function publishContentToKit(options: KitPublishingOptions): Promise { console.log("Server action: publishContentToKit called with options:", { title: options.title, isDraft: options.isDraft, isPublic: options.isPublic, contentType: options.contentType, }) try { // Get API key from environment variable const apiKey = process.env.KIT_API_KEY if (!apiKey) { console.error("Kit API key not found in environment variables") return { success: false, error: "Kit API key not configured. Please check your server environment variables.", } } // Format the current date in ISO8601 format const now = new Date().toISOString() // Use the v4 API endpoint as specified in the documentation const endpoint = "https://api.kit.com/v4/broadcasts" // Prepare the request body exactly as specified in the documentation const requestBody = { email_template_id: null, // Optional, using default template email_address: null, content: options.content, description: options.summary || "Investment Newsletter", public: options.isPublic === true, published_at: now, send_at: options.isDraft ? null : now, // If not draft, send immediately thumbnail_alt: null, thumbnail_url: options.coverImage || null, preview_text: options.summary || "Investment insights and market analysis", subject: options.title, subscriber_filter: [], // Empty array for all subscribers content_format: "html", // Explicitly specify HTML format } console.log("Sending request to Kit API with API key:", apiKey.substring(0, 5) + "...") // Try different authentication methods const authMethods = [ { headers: { "Content-Type": "application/json", Accept: "application/json", Authorization: `Bearer ${apiKey}`, }, description: "Bearer token in Authorization header", }, { headers: { "Content-Type": "application/json", Accept: "application/json", "X-Kit-Api-Key": apiKey, }, description: "API key in X-Kit-Api-Key header", }, { headers: { "Content-Type": "application/json", Accept: "application/json", "Api-Key": apiKey, }, description: "API key in Api-Key header", }, ] let lastError = null let lastResponse = null let responseData = null // Try each authentication method for (const method of authMethods) { try { console.log(`Trying Kit API with ${method.description}...`) const response = await fetch(endpoint, { method: "POST", headers: method.headers, body: JSON.stringify(requestBody), }) lastResponse = response // Get the raw response const responseText = await response.text() console.log("Kit API response status:", response.status) console.log("Kit API response headers:", Object.fromEntries(response.headers.entries())) console.log("Kit API response body:", responseText.substring(0, 500)) // Try to parse the response as JSON try { responseData = JSON.parse(responseText) } catch (e) { console.error("Failed to parse response as JSON:", e) lastError = "Failed to parse Kit API response as JSON" continue // Try next authentication method } // If successful, return the response if (response.ok) { return { success: true, message: options.isDraft ? "Newsletter saved as draft in Kit" : "Newsletter published to Kit", postUrl: responseData.url || null, postId: responseData.id || null, kitResponse: responseData, } } // Store the error and try the next method lastError = `Kit API error: ${JSON.stringify(responseData)}` } catch (error) { console.error(`Error with ${method.description}:`, error) lastError = `Error with ${method.description}: ${error instanceof Error ? error.message : "Unknown error"}` } } // If we get here, all authentication methods failed console.error("All Kit API authentication methods failed. Last error:", lastError) return { success: false, error: lastError || "Failed to authenticate with Kit API", troubleshooting: "Please verify your Kit API key is correct and has the necessary permissions.", responseStatus: lastResponse?.status, responseDetails: responseData ? JSON.stringify(responseData) : null, } } catch (error) { console.error("Error in publishContentToKit:", error) return { success: false, error: `Error publishing to Kit: ${error instanceof Error ? error.message : "Unknown error"}`, } } } /** * Server action to send content as a broadcast to Kit subscribers */ export async function sendBroadcastToKit(options: KitPublishingOptions): Promise { console.log("Server action: sendBroadcastToKit called with options:", { title: options.title, summary: options.summary, contentLength: options.content ? options.content.length : 0, isPublic: options.isPublic, isDraft: options.isDraft, }) try { // Get API key from environment variable const apiKey = process.env.KIT_API_KEY if (!apiKey) { console.error("Kit API key not found in environment variables") return { success: false, error: "Kit API key not configured", troubleshooting: "Please add KIT_API_KEY to your environment variables.", } } // Format the current date in ISO8601 format const now = new Date().toISOString() // Use the v4 API endpoint as specified in the documentation const endpoint = "https://api.kit.com/v4/broadcasts" // Prepare the request body exactly as specified in the documentation const requestBody = { email_template_id: null, // Optional, using default template email_address: null, content: options.content, description: options.summary || "Investment Newsletter", public: options.isPublic === true, published_at: now, send_at: options.isDraft ? null : now, // If not draft, send immediately thumbnail_alt: null, thumbnail_url: options.coverImage || null, preview_text: options.summary || "Investment insights and market analysis", subject: options.title, subscriber_filter: [], // Empty array for all subscribers } console.log("Sending request to Kit API with API key:", apiKey.substring(0, 5) + "...") // Try different authentication methods const authMethods = [ { headers: { "Content-Type": "application/json", Accept: "application/json", Authorization: `Bearer ${apiKey}`, }, description: "Bearer token in Authorization header", }, { headers: { "Content-Type": "application/json", Accept: "application/json", "X-Kit-Api-Key": apiKey, }, description: "API key in X-Kit-Api-Key header", }, { headers: { "Content-Type": "application/json", Accept: "application/json", "Api-Key": apiKey, }, description: "API key in Api-Key header", }, ] let lastError = null let lastResponse = null let responseData = null // Try each authentication method for (const method of authMethods) { try { console.log(`Trying Kit API with ${method.description}...`) const response = await fetch(endpoint, { method: "POST", headers: method.headers, body: JSON.stringify(requestBody), }) lastResponse = response // Get the raw response const responseText = await response.text() console.log("Kit API response status:", response.status) console.log("Kit API response headers:", Object.fromEntries(response.headers.entries())) console.log("Kit API response body:", responseText.substring(0, 500)) // Try to parse the response as JSON try { responseData = JSON.parse(responseText) } catch (e) { console.error("Failed to parse response as JSON:", e) lastError = "Failed to parse Kit API response as JSON" continue // Try next authentication method } // If successful, return the response if (response.ok) { return { success: true, message: options.isDraft ? "Newsletter saved as draft in Kit" : "Newsletter published to Kit", postUrl: responseData.url || null, postId: responseData.id || null, kitResponse: responseData, } } // Store the error and try the next method lastError = `Kit API error: ${JSON.stringify(responseData)}` } catch (error) { console.error(`Error with ${method.description}:`, error) lastError = `Error with ${method.description}: ${error instanceof Error ? error.message : "Unknown error"}` } } // If we get here, all authentication methods failed console.error("All Kit API authentication methods failed. Last error:", lastError) return { success: false, error: lastError || "Failed to authenticate with Kit API", troubleshooting: "Please verify your Kit API key is correct and has the necessary permissions.", responseStatus: lastResponse?.status, responseDetails: responseData ? JSON.stringify(responseData) : null, } } catch (error) { console.error("Error publishing to Kit:", error) return { success: false, error: `Failed to publish to Kit: ${error instanceof Error ? error.message : "Unknown error"}`, troubleshooting: "Please check your network connection and try again.", } } } /** * Server action to check Kit publishing status */ export async function checkKitStatus(): Promise<{ isConnected: boolean; error?: string }> { console.log("Server action: checkKitStatus called") try { // Get API key from environment variable const apiKey = process.env.KIT_API_KEY if (!apiKey) { console.error("Kit API key not found in environment variables") return { isConnected: false, error: "Kit API key not configured. Please add KIT_API_KEY to your environment variables.", } } // Try different authentication methods const authMethods = [ { headers: { Accept: "application/json", Authorization: `Bearer ${apiKey}`, }, description: "Bearer token in Authorization header", }, { headers: { Accept: "application/json", "X-Kit-Api-Key": apiKey, }, description: "API key in X-Kit-Api-Key header", }, { headers: { Accept: "application/json", "Api-Key": apiKey, }, description: "API key in Api-Key header", }, ] let lastError = null // Try each authentication method for (const method of authMethods) { try { console.log(`Checking Kit API with ${method.description}...`) const response = await fetch("https://api.kit.com/v4/me", { headers: method.headers, }) if (response.ok) { const data = await response.json() return { isConnected: true, kitUser: data.username || "unknown", authMethod: method.description, } } // Store the error and try the next method const responseText = await response.text() lastError = `Status ${response.status}: ${responseText}` } catch (error) { console.error(`Error with ${method.description}:`, error) lastError = `Error with ${method.description}: ${error instanceof Error ? error.message : "Unknown error"}` } } // If we get here, all authentication methods failed return { isConnected: false, error: `Failed to authenticate with Kit API: ${lastError}`, } } catch (error) { console.error("Error in checkKitStatus:", error) return { isConnected: false, error: `Error checking Kit status: ${error instanceof Error ? error.message : "Unknown error"}`, } } } /** * Server action to save content to the library */ export async function saveToLibrary({ title, content, type, }: { title: string content: string type: string }) { try { // Validate inputs if (!title || !content) { return { success: false, error: "Missing required fields" } } // Save to database logic here // This is a placeholder - implement your actual database save logic console.log(`Saving ${type} to library: ${title}`) // Simulate successful save return { success: true } } catch (error) { console.error("Error in saveToLibrary:", error) return { success: false, error: error instanceof Error ? error.message : "Unknown error occurred", } } } /** * Server action to schedule content for Kit publishing at a future date */ export async function scheduleContentForKit( options: KitPublishingOptions & { scheduledDate: string }, ): Promise { console.log("Server action: scheduleContentForKit called with options:", { title: options.title, scheduledDate: options.scheduledDate, isPublic: options.isPublic, contentType: options.contentType, }) try { // Get API key from environment variable const apiKey = process.env.KIT_API_KEY if (!apiKey) { console.error("Kit API key not found in environment variables") return { success: false, error: "Kit API key not configured", troubleshooting: "Please add KIT_API_KEY to your environment variables.", } } // Validate the scheduled date const scheduledDate = new Date(options.scheduledDate) if (isNaN(scheduledDate.getTime())) { return { success: false, error: "Invalid scheduled date format", } } // Format dates in ISO8601 format const now = new Date().toISOString() const scheduledDateISO = scheduledDate.toISOString() // Use the v4 API endpoint as specified in the documentation const endpoint = "https://api.kit.com/v4/broadcasts" // Prepare the request body exactly as specified in the documentation const requestBody = { email_template_id: null, // Optional, using default template email_address: null, content: options.content, description: options.summary || "Investment Newsletter", public: options.isPublic === true, published_at: now, send_at: scheduledDateISO, // Schedule for the future date thumbnail_alt: null, thumbnail_url: options.coverImage || null, preview_text: options.summary || "Investment insights and market analysis", subject: options.title, subscriber_filter: [], // Empty array for all subscribers content_format: "html", // Explicitly specify HTML format } console.log("Scheduling content for Kit with API key:", apiKey.substring(0, 5) + "...") console.log("Content will be sent at:", scheduledDateISO) // Try different authentication methods const authMethods = [ { headers: { "Content-Type": "application/json", Accept: "application/json", Authorization: `Bearer ${apiKey}`, }, description: "Bearer token in Authorization header", }, { headers: { "Content-Type": "application/json", Accept: "application/json", "X-Kit-Api-Key": apiKey, }, description: "API key in X-Kit-Api-Key header", }, { headers: { "Content-Type": "application/json", Accept: "application/json", "Api-Key": apiKey, }, description: "API key in Api-Key header", }, ] let lastError = null let lastResponse = null let responseData = null // Try each authentication method for (const method of authMethods) { try { console.log(`Trying Kit API with ${method.description}...`) const response = await fetch(endpoint, { method: "POST", headers: method.headers, body: JSON.stringify(requestBody), }) lastResponse = response // Get the raw response const responseText = await response.text() console.log("Kit API response status:", response.status) console.log("Kit API response headers:", Object.fromEntries(response.headers.entries())) console.log("Kit API response body:", responseText.substring(0, 500)) // Try to parse the response as JSON try { responseData = JSON.parse(responseText) } catch (e) { console.error("Failed to parse response as JSON:", e) lastError = "Failed to parse Kit API response as JSON" continue // Try next authentication method } // If successful, return the response if (response.ok) { return { success: true, message: `Newsletter scheduled for ${options.scheduledDate}`, postUrl: responseData.url || null, postId: responseData.id || null, kitResponse: responseData, } } // Store the error and try the next method lastError = `Kit API error: ${JSON.stringify(responseData)}` } catch (error) { console.error(`Error with ${method.description}:`, error) lastError = `Error with ${method.description}: ${error instanceof Error ? error.message : "Unknown error"}` } } // If we get here, all authentication methods failed console.error("All Kit API authentication methods failed. Last error:", lastError) return { success: false, error: lastError || "Failed to authenticate with Kit API", troubleshooting: "Please verify your Kit API key is correct and has the necessary permissions.", responseStatus: lastResponse?.status, responseDetails: responseData ? JSON.stringify(responseData) : null, } } catch (error) { console.error("Error in scheduleContentForKit:", error) return { success: false, error: `Error scheduling content for Kit: ${error instanceof Error ? error.message : "Unknown error"}`, } } } [V0_FILE]typescript:file="app/actions/newsletter-automation-actions.ts" isMerged="true" "use server" import { revalidatePath } from "next/cache" import * as newsletterService from "@/services/newsletter-scheduler-service" import type { ScheduledNewsletter, ScheduleFrequency } from "@/services/newsletter-scheduler-service" import { generateContentWithGemini } from "@/app/actions/ai-actions" import { sendBroadcastToKit } from "@/app/actions/kit-actions" import { createContentItem } from "@/services/content-pipeline-service" /** * Fetch all scheduled newsletters */ export async function getScheduledNewsletters() { try { const newsletters = await newsletterService.getAllScheduledNewsletters() return { success: true, data: newsletters } } catch (error) { console.error("Error fetching scheduled newsletters:", error) return { success: false, error: "Failed to fetch scheduled newsletters" } } } /** * Fetch a scheduled newsletter by ID */ export async function getScheduledNewsletterById(id: string) { try { const newsletter = await newsletterService.getScheduledNewsletter(id) if (!newsletter) { return { success: false, error: "Newsletter not found" } } return { success: true, data: newsletter } } catch (error) { console.error(`Error fetching newsletter ${id}:`, error) return { success: false, error: "Failed to fetch newsletter" } } } /** * Create a new scheduled newsletter */ export async function createNewScheduledNewsletter(data: { title: string subtitle: string frequency: ScheduleFrequency time: string days?: string[] date?: number configuration: any }) { try { const newsletter = await newsletterService.createScheduledNewsletter({ ...data, status: "active", lastRunDate: null, }) if (!newsletter) { return { success: false, error: "Failed to create newsletter" } } revalidatePath("/newsletter-reports") return { success: true, data: newsletter } } catch (error) { console.error("Error creating scheduled newsletter:", error) return { success: false, error: "Failed to create newsletter" } } } /** * Update a scheduled newsletter */ export async function updateScheduledNewsletter(id: string, data: Partial) { try { const newsletter = await newsletterService.updateScheduledNewsletter(id, data) if (!newsletter) { return { success: false, error: "Failed to update newsletter" } } revalidatePath("/newsletter-reports") return { success: true, data: newsletter } } catch (error) { console.error(`Error updating newsletter ${id}:`, error) return { success: false, error: "Failed to update newsletter" } } } /** * Toggle the status of a scheduled newsletter */ export async function toggleNewsletterStatus(id: string) { try { const newsletter = await newsletterService.toggleScheduledNewsletterStatus(id) if (!newsletter) { return { success: false, error: "Failed to toggle newsletter status" } } revalidatePath("/newsletter-reports") return { success: true, data: newsletter } } catch (error) { console.error(`Error toggling newsletter status ${id}:`, error) return { success: false, error: "Failed to toggle newsletter status" } } } /** * Delete a scheduled newsletter */ export async function deleteNewsletter(id: string) { try { const success = await newsletterService.deleteScheduledNewsletter(id) if (!success) { return { success: false, error: "Failed to delete newsletter" } } revalidatePath("/newsletter-reports") return { success: true } } catch (error) { console.error(`Error deleting newsletter ${id}:`, error) return { success: false, error: "Failed to delete newsletter" } } } /** * Run a scheduled newsletter immediately */ export async function runNewsletterNow(id: string) { try { // Get the newsletter const newsletter = await newsletterService.getScheduledNewsletter(id) if (!newsletter) { return { success: false, error: "Newsletter not found" } } // Add a pending run record const runRecord = await newsletterService.addNewsletterRunRecord(id, "pending") if (!runRecord) { return { success: false, error: "Failed to create run record" } } // In a real implementation, you would trigger the actual newsletter generation here // For now, we'll just simulate success after a delay setTimeout(async () => { try { await newsletterService.addNewsletterRunRecord(id, "success") } catch (error) { console.error(`Error updating run record for ${id}:`, error) } }, 5000) revalidatePath("/newsletter-reports") return { success: true, message: "Newsletter generation started" } } catch (error) { console.error(`Error running newsletter ${id}:`, error) return { success: false, error: "Failed to run newsletter" } } } /** * Fetch all newsletters that are due to run */ export async function getDueNewsletters() { try { const newsletters = await newsletterService.getDueNewsletters() return { success: true, data: newsletters } } catch (error) { console.error("Error fetching due newsletters:", error) return { success: false, error: "Failed to fetch due newsletters" } } } /** * Process all due newsletters */ export async function processScheduledNewsletters() { try { const dueNewsletters = await newsletterService.getDueNewsletters() const results = [] for (const newsletter of dueNewsletters) { try { // Add a pending run record await newsletterService.addNewsletterRunRecord(newsletter.id, "pending") // Get content from sources const contentItems = await newsletterService.getContentFromSources(newsletter.configuration.contentSources) // Generate AI modules const modules = await newsletterService.generateAutomatedModules( newsletter.configuration.aiModules, newsletter.configuration.sectors, newsletter.configuration.tickers, ) // Prepare content for the prompt const contentSummaries = contentItems .map((item) => `Title: ${item.title}\nDescription: ${item.description}\nTags: ${item.tags.join(", ")}`) .join("\n\n") const modulesContent = modules .map((module) => `Section: ${module.title}\nContent: ${module.content}`) .join("\n\n") // Combine all content for the prompt const contentToInclude = [ contentSummaries ? `CONTENT ITEMS:\n${contentSummaries}` : "", modulesContent ? `SPECIALIZED MODULES:\n${modulesContent}` : "", ] .filter(Boolean) .join("\n\n") // Format the title with the current date const currentDate = new Date().toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric", }) const formattedTitle = newsletter.title.replace("{{date}}", currentDate) // Generate the newsletter content const prompt = `Generate a comprehensive investment newsletter with the title "${formattedTitle}" and subtitle "${newsletter.subtitle}". The newsletter should be approximately ${newsletter.configuration.wordCount} words and include analysis of the following content: ${contentToInclude} Include market data analysis, key insights, and investment recommendations. Format the content for a professional investment audience. Organize the newsletter with clear section headings and a logical flow.` const result = await generateContentWithGemini(prompt) if (result.error) { throw new Error(result.error) } // Format the content for Kit const formattedContent = formatNewsletterForKit(result.content, formattedTitle, newsletter.subtitle) // Save to content pipeline if configured if (newsletter.configuration.publishSettings.saveToContentPipeline) { await createContentItem({ title: formattedTitle, description: newsletter.subtitle, type: "newsletter", stage: "draft", priority: "medium", author: "AI Assistant", tags: ["newsletter", "automated", ...(newsletter.configuration.sectors || [])], }) } // Publish to Kit if configured if (newsletter.configuration.publishSettings.publishToKit) { const tags = ["newsletter", "automated", ...(newsletter.configuration.sectors || [])] await sendBroadcastToKit({ title: formattedTitle, content: formattedContent, summary: newsletter.subtitle, tags, isDraft: newsletter.configuration.publishSettings.publishAsDraft, isPublic: newsletter.configuration.publishSettings.makePublic, }) } // Update with success await newsletterService.addNewsletterRunRecord(newsletter.id, "success") results.push({ id: newsletter.id, title: newsletter.title, status: "success", }) } catch (error) { console.error(`Error processing newsletter ${newsletter.id}:`, error) // Update with failure await newsletterService.addNewsletterRunRecord( newsletter.id, "failure", error instanceof Error ? error.message : "Unknown error", ) results.push({ id: newsletter.id, title: newsletter.title, status: "failure", error: error instanceof Error ? error.message : "Unknown error", }) } } revalidatePath("/newsletter-reports") return { success: true, data: results } } catch (error) { console.error("Error processing scheduled newsletters:", error) return { success: false, error: "Failed to process scheduled newsletters" } } } /** * Format newsletter content for Kit with proper HTML structure */ function formatNewsletterForKit(content: string, title: string, subtitle: string) { // Split content into paragraphs const paragraphs = content.split("\n").filter((p) => p.trim() !== "") // Identify headings (assuming headings are shorter and often end with a colon) const formattedParagraphs = paragraphs.map((paragraph) => { // Check if this is likely a heading if (paragraph.length < 80 && (paragraph.endsWith(":") || /^[A-Z][^.!?]*$/.test(paragraph))) { return `

${paragraph}

` } // Check if this is a subheading (often starts with numbers like "1." or contains key phrases) if ( /^\d+\./.test(paragraph) || paragraph.includes("Key ") || paragraph.includes("Summary") || paragraph.includes("Analysis") ) { return `

${paragraph}

` } // Regular paragraph return `

${paragraph}

` }) // Create the full HTML structure return `

${title}

${subtitle}

${formattedParagraphs.join("\n")}

This newsletter is for informational purposes only and does not constitute investment advice.

Generated automatically on ${new Date().toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric", })}

` } [V0_FILE]typescript:file="app/actions/primer-actions.ts" isMerged="true" "use server" import { revalidatePath } from "next/cache" import { getPrimerSectionFromGitHub, getPrimerFileHistory } from "@/services/github-primer-service" import { getPrimerSections, getPrimerSectionById, getPrimerSubsections, getPrimerInteractiveElements, getIndustryMetrics, getCompanyComparisons, updatePrimerSection, generatePrimerContent, } from "@/services/investment-primer-service" import type { PrimerSection, PrimerSubsection, PrimerInteractiveElement, IndustryMetric, CompanyComparison, } from "@/types/investment-primer" /** * Server action to get all primer sections */ export async function getAllPrimerSections(): Promise { return getPrimerSections() } /** * Server action to get a primer section by ID */ export async function getPrimerSection(id: string): Promise { return getPrimerSectionById(id) } /** * Server action to get subsections for a primer section */ export async function getSectionSubsections(sectionId: string): Promise { return getPrimerSubsections(sectionId) } /** * Server action to get interactive elements for a primer section */ export async function getSectionInteractiveElements( sectionId: string, subsectionId?: string, ): Promise { return getPrimerInteractiveElements(sectionId) } /** * Server action to get industry metrics */ export async function getFinancialSoftwareMetrics(): Promise { return getIndustryMetrics() } /** * Server action to get company comparisons */ export async function getFinancialSoftwareCompanies(): Promise { return getCompanyComparisons() } /** * Server action to update a primer section */ export async function updateSection( id: string, updates: Partial, commitToGitHub = false, ): Promise<{ success: boolean; section?: PrimerSection; error?: string }> { try { const updatedSection = await updatePrimerSection(id, updates, commitToGitHub) if (!updatedSection) { return { success: false, error: "Section not found" } } revalidatePath("/investment-primer") return { success: true, section: updatedSection } } catch (error) { return { success: false, error: `Failed to update section: ${(error as Error).message}`, } } } /** * Server action to generate primer content with AI */ export async function generateAIPrimerContent( topic: string, context?: string, ): Promise<{ content: string; error?: string }> { try { const content = await generatePrimerContent(topic, context) return { content } } catch (error) { return { content: "", error: `Failed to generate content: ${(error as Error).message}`, } } } /** * Server action to get primer section content from GitHub */ export async function getGitHubPrimerContent(path: string): Promise<{ content: string; error?: string }> { try { const content = await getPrimerSectionFromGitHub(path) return { content } } catch (error) { return { content: "", error: `Failed to fetch content from GitHub: ${(error as Error).message}`, } } } /** * Server action to get primer section history from GitHub */ export async function getGitHubPrimerHistory( path: string, ): Promise<{ history: { date: string; author: string; message: string; sha: string }[]; error?: string }> { try { const history = await getPrimerFileHistory(path) return { history } } catch (error) { return { history: [], error: `Failed to fetch history from GitHub: ${(error as Error).message}`, } } } [V0_FILE]typescript:file="app/actions/primer-template-actions.ts" isMerged="true" "use server" import { getIndustries, getIndustryById, getPrimerTemplates, getTemplatesForIndustry, getTemplateById, createPrimerTemplate, updatePrimerTemplate, deletePrimerTemplate, getPrimers, getPrimersForIndustry, getPrimerById, createPrimerFromTemplate, generateIndustryContent, cloneTemplate, } from "@/services/primer-template-service" import type { Industry, PrimerTemplate, Primer } from "@/types/investment-primer" /** * Get all industries */ export async function getAllIndustries(): Promise { return getIndustries() } /** * Get an industry by ID */ export async function getIndustry(id: string): Promise { return getIndustryById(id) } /** * Get all primer templates */ export async function getAllPrimerTemplates(): Promise { return getPrimerTemplates() } /** * Get templates for a specific industry */ export async function getIndustryTemplates(industryId: string): Promise { return getTemplatesForIndustry(industryId) } /** * Get a template by ID */ export async function getPrimerTemplate(id: string): Promise { return getTemplateById(id) } /** * Create a new primer template */ export async function createNewPrimerTemplate( template: Omit, ): Promise<{ success: boolean; template?: PrimerTemplate; error?: string }> { try { const newTemplate = await createPrimerTemplate(template) return { success: true, template: newTemplate } } catch (error) { return { success: false, error: `Failed to create template: ${(error as Error).message}`, } } } /** * Update a primer template */ export async function updateTemplate( id: string, updates: Partial, ): Promise<{ success: boolean; template?: PrimerTemplate; error?: string }> { try { const updatedTemplate = await updatePrimerTemplate(id, updates) if (!updatedTemplate) { return { success: false, error: "Template not found" } } return { success: true, template: updatedTemplate } } catch (error) { return { success: false, error: `Failed to update template: ${(error as Error).message}`, } } } /** * Delete a primer template */ export async function deleteTemplate(id: string): Promise<{ success: boolean; error?: string }> { try { const result = await deletePrimerTemplate(id) if (!result) { return { success: false, error: "Template not found" } } return { success: true } } catch (error) { return { success: false, error: `Failed to delete template: ${(error as Error).message}`, } } } /** * Get all primers */ export async function getAllPrimers(): Promise { return getPrimers() } /** * Get primers for a specific industry */ export async function getIndustryPrimers(industryId: string): Promise { return getPrimersForIndustry(industryId) } /** * Get a primer by ID */ export async function getPrimer(id: string): Promise { return getPrimerById(id) } /** * Create a new primer from a template */ export async function createPrimer( name: string, description: string, industryId: string, templateId: string, createdBy: string, ): Promise<{ success: boolean; primer?: Primer; error?: string }> { try { const primer = await createPrimerFromTemplate(name, description, industryId, templateId, createdBy) return { success: true, primer } } catch (error) { return { success: false, error: `Failed to create primer: ${(error as Error).message}`, } } } /** * Generate industry-specific content with AI */ export async function generateAIIndustryContent( industry: string, section: string, subsection?: string, ): Promise<{ content: string; error?: string }> { try { const content = await generateIndustryContent(industry, section, subsection) return { content } } catch (error) { return { content: "", error: `Failed to generate content: ${(error as Error).message}`, } } } /** * Clone a template for customization */ export async function clonePrimerTemplate( templateId: string, newName: string, newDescription: string, industryId?: string, ): Promise<{ success: boolean; template?: PrimerTemplate; error?: string }> { try { const template = await cloneTemplate(templateId, newName, newDescription, industryId) return { success: true, template } } catch (error) { return { success: false, error: `Failed to clone template: ${(error as Error).message}`, } } } [V0_FILE]typescript:file="app/actions/report-schedule-actions.ts" isMerged="true" "use server" import { v4 as uuidv4 } from "uuid" import { supabase } from "@/services/supabase-service" import type { JobExecutionFilters } from "./job-execution-actions" interface ReportSchedule { id: string name: string reportType: string exportFormat: string frequency: string day?: string time: string email: string includeAttachment: boolean filters: JobExecutionFilters createdAt: string updatedAt: string } export async function createReportSchedule(data: Omit) { try { const id = uuidv4() const now = new Date().toISOString() const { error } = await supabase.from("report_schedules").insert({ id, name: data.name, report_type: data.reportType, export_format: data.exportFormat, frequency: data.frequency, day: data.day, time: data.time, email: data.email, include_attachment: data.includeAttachment, filters: data.filters, created_at: now, updated_at: now, }) if (error) { console.error("Error creating report schedule:", error) throw new Error("Failed to create report schedule") } return { success: true, id } } catch (error) { console.error("Error in createReportSchedule:", error) return { success: false, error: error instanceof Error ? error.message : "Unknown error" } } } [V0_FILE]typescript:file="app/actions/seed-company-analysis.ts" isMerged="true" "use server" import { getCompanyAnalysis } from "@/services/company-analysis-service" export async function seedCompanyAnalysisData() { const tickers = [ "HOOD", // Robinhood "IBKR", // Interactive Brokers "SCHW", // Charles Schwab "NDAQ", // Nasdaq "CME", // CME Group "COIN", // Coinbase "SPGI", // S&P Global "MCO", // Moody's "FDS", // FactSet ] const results = { success: [] as string[], failed: [] as string[], } for (const ticker of tickers) { try { console.log(`Fetching and storing data for ${ticker}...`) const analysis = await getCompanyAnalysis(ticker) if (analysis) { results.success.push(ticker) } else { results.failed.push(ticker) } } catch (error) { console.error(`Error processing ${ticker}:`, error) results.failed.push(ticker) } } return { message: `Processed ${tickers.length} companies. Success: ${results.success.length}, Failed: ${results.failed.length}`, results, } } [V0_FILE]typescript:file="app/actions/seed-playbook-actions.ts" isMerged="true" "use server" import { createClient } from "@supabase/supabase-js" import { revalidatePath } from "next/cache" import type { PlaybookEntry, TagType } from "@/types/investment-playbook" // Create a server-side Supabase client instance for actions const createServerSupabaseClient = () => { const supabaseUrl = process.env.SUPABASE_URL! const supabaseServiceKey = process.env.SUPABASE_SERVICE_ROLE_KEY! if (!supabaseUrl || !supabaseServiceKey) { throw new Error("Missing Supabase environment variables") } return createClient(supabaseUrl, supabaseServiceKey, { auth: { autoRefreshToken: false, persistSession: false, }, }) } export async function seedPlaybookData() { try { console.log("Starting playbook data seeding...") const supabase = createServerSupabaseClient() // Test connection first const { data: testData, error: testError } = await supabase .from("investment_playbook_tags") .select("count") .limit(1) if (testError) { console.error("Database connection test failed:", testError) return { success: false, message: `Database connection failed: ${testError.message}` } } // 1. Define all unique tags const predefinedTags: { name: string; type: TagType }[] = [ // Topic Tags { name: "Thesis Structure", type: "topic" }, { name: "Narrative", type: "topic" }, { name: "Clarity", type: "topic" }, { name: "Problem/Solution", type: "topic" }, { name: "Market Need", type: "topic" }, { name: "Value Proposition", type: "topic" }, { name: "TAM/SAM/SOM", type: "topic" }, { name: "Market Size", type: "topic" }, { name: "Addressable Market", type: "topic" }, { name: "Competitive Advantage", type: "topic" }, { name: "Moats", type: "topic" }, { name: "Sustainability", type: "topic" }, { name: "Catalysts", type: "topic" }, { name: "Triggers", type: "topic" }, { name: "Inflection Points", type: "topic" }, { name: "Financial Modeling", type: "topic" }, { name: "Present Value", type: "topic" }, { name: "Comparable Companies", type: "topic" }, { name: "Multiples", type: "topic" }, { name: "Relative Valuation", type: "topic" }, { name: "WACC", type: "topic" }, { name: "Discount Rate", type: "topic" }, { name: "Cost of Equity", type: "topic" }, { name: "Cost of Debt", type: "topic" }, { name: "Scenario Analysis", type: "topic" }, { name: "Sensitivity Testing", type: "topic" }, { name: "Risk Assessment", type: "topic" }, { name: "Early-Stage Valuation", type: "topic" }, { name: "Venture Capital", type: "topic" }, { name: "Rule of 10", type: "topic" }, { name: "Investment Objectives", type: "topic" }, { name: "Time Horizon", type: "topic" }, { name: "Goal Setting", type: "topic" }, { name: "Portfolio Monitoring", type: "topic" }, { name: "Performance Metrics", type: "topic" }, { name: "Tracking", type: "topic" }, { name: "Position Sizing", type: "topic" }, { name: "Capital Allocation", type: "topic" }, { name: "Exit Strategy", type: "topic" }, { name: "Realization", type: "topic" }, { name: "Investment Horizon", type: "topic" }, { name: "Documentation", type: "topic" }, { name: "Review", type: "topic" }, { name: "Learning", type: "topic" }, // Methodology Tags { name: "DCF", type: "methodology" }, { name: "Comparable Multiples", type: "methodology" }, { name: "SWOT Analysis", type: "methodology" }, { name: "Porter's Five Forces", type: "methodology" }, { name: "Top-Down Analysis", type: "methodology" }, { name: "Bottom-Up Analysis", type: "methodology" }, // Asset Class Tags { name: "Equities", type: "asset_class" }, { name: "Fixed Income", type: "asset_class" }, { name: "Real Estate", type: "asset_class" }, { name: "Venture Capital", type: "asset_class" }, { name: "Crypto", type: "asset_class" }, ] const tagIdMap: Map = new Map() // Process tags one by one with better error handling for (const tag of predefinedTags) { try { console.log(`Processing tag: ${tag.name}`) // Check if tag exists const { data: existingTag, error: selectError } = await supabase .from("investment_playbook_tags") .select("id") .eq("name", tag.name) .maybeSingle() // Use maybeSingle instead of single to avoid errors when no rows found if (selectError) { console.error(`Error checking tag ${tag.name}:`, selectError) throw new Error(`Failed to check tag ${tag.name}: ${selectError.message}`) } if (existingTag) { console.log(`Tag ${tag.name} already exists with ID: ${existingTag.id}`) tagIdMap.set(tag.name, existingTag.id) } else { console.log(`Creating new tag: ${tag.name}`) // Insert new tag const { data: newTag, error: insertError } = await supabase .from("investment_playbook_tags") .insert(tag) .select("id") .single() if (insertError) { console.error(`Error inserting tag ${tag.name}:`, insertError) throw new Error(`Failed to insert tag ${tag.name}: ${insertError.message}`) } if (newTag) { console.log(`Created tag ${tag.name} with ID: ${newTag.id}`) tagIdMap.set(tag.name, newTag.id) } } } catch (tagError: any) { console.error(`Failed to process tag ${tag.name}:`, tagError) throw new Error(`Failed to process tag ${tag.name}: ${tagError.message}`) } } console.log("All tags processed successfully.") // 2. Define a smaller set of example entries for initial testing const exampleEntries: Omit[] = [ { title: "Structuring a Compelling Investment Thesis", module: "Writing Investment Ideas", topic_tags: ["Thesis Structure", "Narrative", "Clarity"].map((name) => tagIdMap.get(name)!).filter(Boolean), methodology_tags: [], asset_class_tags: [], difficulty_level: "Beginner", summary: "Outline key sections of a thesis (Executive Summary, Company Overview, Industry Analysis, Investment Thesis, Risks, Valuation, Catalysts).", content: `

Executive Summary

A concise overview of the investment opportunity, highlighting the key reasons to invest and the expected returns.

Company Overview

Details about the company, its history, products/services, and market position.

Industry Analysis

An examination of the industry landscape, including market size, growth drivers, and competitive dynamics.

Investment Thesis

The core argument for why this investment will succeed, focusing on competitive advantages and catalysts.

Risks

Identification and assessment of potential risks that could impact the investment's performance.

Valuation

A summary of the valuation methodology used and the resulting target price or valuation range.

Catalysts

Specific events or triggers that are expected to unlock value or drive the investment thesis forward.

`, }, { title: "Introduction to Discounted Cash Flow (DCF) Analysis", module: "Valuing Investment Ideas", topic_tags: ["Financial Modeling", "DCF", "Present Value"].map((name) => tagIdMap.get(name)!).filter(Boolean), methodology_tags: ["DCF"].map((name) => tagIdMap.get(name)!).filter(Boolean), asset_class_tags: ["Equities"].map((name) => tagIdMap.get(name)!).filter(Boolean), difficulty_level: "Intermediate", summary: "Explain the basic principles of DCF and its key components (free cash flow, discount rate, terminal value).", content: `

Discounted Cash Flow (DCF) analysis is a valuation method used to estimate the value of an investment based on its expected future cash flows.

Key Components:

Free Cash Flow (FCF): The cash a company generates after accounting for cash outflows to support operations and maintain its capital assets.
Discount Rate: The rate used to convert future cash flows into present value. This is often the Weighted Average Cost of Capital (WACC).
Terminal Value (TV): The value of the company's cash flows beyond the explicit forecast period.

DCF is a powerful tool but relies heavily on assumptions about future performance.

`, }, { title: "Setting Clear Investment Objectives and Time Horizons", module: "Managing Investment Ideas", topic_tags: ["Investment Objectives", "Time Horizon", "Goal Setting"] .map((name) => tagIdMap.get(name)!) .filter(Boolean), methodology_tags: [], asset_class_tags: [], difficulty_level: "Beginner", summary: "Guide on defining investment goals and aligning them with appropriate timeframes.", content: `

Before making any investment, it's crucial to define clear investment objectives and a realistic time horizon.

Investment Objectives:

Capital Appreciation (growth)
Income Generation (dividends, interest)
Capital Preservation (protecting principal)
Specific financial goals (e.g., retirement, down payment)

Time Horizon:

Short-term (less than 3 years): Focus on liquidity and capital preservation.
Medium-term (3-10 years): Balanced approach, moderate risk.
Long-term (over 10 years): Higher risk tolerance for greater potential returns.

Aligning objectives with time horizons helps manage expectations and risk.

`, }, ] // Process entries one by one with better error handling for (const entry of exampleEntries) { try { console.log(`Processing entry: ${entry.title}`) // Check if entry exists const { data: existingEntry, error: selectError } = await supabase .from("investment_playbook_entries") .select("id") .eq("title", entry.title) .maybeSingle() if (selectError) { console.error(`Error checking entry ${entry.title}:`, selectError) throw new Error(`Failed to check entry ${entry.title}: ${selectError.message}`) } if (!existingEntry) { console.log(`Creating new entry: ${entry.title}`) const { error: insertError } = await supabase.from("investment_playbook_entries").insert(entry) if (insertError) { console.error(`Error inserting entry ${entry.title}:`, insertError) throw new Error(`Failed to insert entry ${entry.title}: ${insertError.message}`) } console.log(`Created entry: ${entry.title}`) } else { console.log(`Entry ${entry.title} already exists`) } } catch (entryError: any) { console.error(`Failed to process entry ${entry.title}:`, entryError) throw new Error(`Failed to process entry ${entry.title}: ${entryError.message}`) } } console.log("Playbook entries seeded/verified.") revalidatePath("/investment-primer/playbook") return { success: true, message: "Playbook data seeded successfully!" } } catch (error: any) { console.error("Error seeding playbook data:", error) return { success: false, message: `Failed to seed playbook data: ${error.message}` } } } [V0_FILE]typescript:file="app/actions/valuation-content-actions.ts" isMerged="true" "use server" import { generateContentWithGemini } from "./ai-actions" import { getValuationResults } from "@/services/valuation-service" import type { ValuationScenario, ValuationResult, ValuationAssumptions } from "@/components/newsletter/types" export async function generateValuationAnalysisContent( ticker: string, scenario: ValuationScenario, customAssumptions?: Partial, // Added customAssumptions parameter ): Promise<{ content: string; error?: string }> { try { const valuationResult: ValuationResult = await getValuationResults(ticker, scenario, customAssumptions) // Pass customAssumptions if (valuationResult.error) { return { content: "", error: valuationResult.error } } let prompt = `Generate a professional and concise investment newsletter section summarizing the valuation analysis for ${valuationResult.ticker}. Current Stock Price: $${valuationResult.currentPrice.toFixed(2)}\n` if (valuationResult.scenario === "all") { // For "all" scenarios, we'd ideally run each and summarize. // For this implementation, we'll just run the base case and mention scenarios. // In a full implementation, you'd aggregate results from multiple calls to getValuationResults. const baseCaseResult = await getValuationResults(ticker, "base", customAssumptions) // Pass customAssumptions for base case if (baseCaseResult.error) { return { content: "", error: baseCaseResult.error } } prompt += `\n### Valuation Overview (Base Case)\n` if (baseCaseResult.dcfIntrinsicValue !== null) { prompt += `- **DCF Intrinsic Value:** $${baseCaseResult.dcfIntrinsicValue.toFixed(2)} (${baseCaseResult.dcfUpside})\n` } if (baseCaseResult.multiplesIntrinsicValue !== null) { prompt += `- **Multiples Intrinsic Value (Target P/E ${baseCaseResult.keyAssumptions.find((a) => a.includes("Target P/E"))?.split(": ")[1] || "N/A"}):** $${baseCaseResult.multiplesIntrinsicValue.toFixed(2)} (${baseCaseResult.multiplesUpside})\n` } prompt += `\nThis analysis considers various scenarios (Bull, Base, Bear) to provide a comprehensive view of potential intrinsic values.\n` } else { prompt += `\n### Valuation Analysis (${scenario.charAt(0).toUpperCase() + scenario.slice(1)} Case)\n` if (valuationResult.dcfIntrinsicValue !== null) { prompt += `- **DCF Intrinsic Value:** $${valuationResult.dcfIntrinsicValue.toFixed(2)} (${valuationResult.dcfUpside})\n` } if (valuationResult.multiplesIntrinsicValue !== null) { prompt += `- **Multiples Intrinsic Value (Target P/E ${valuationResult.keyAssumptions.find((a) => a.includes("Target P/E"))?.split(": ")[1] || "N/A"}):** $${valuationResult.multiplesIntrinsicValue.toFixed(2)} (${valuationResult.multiplesUpside})\n` } } prompt += `\n### Key Assumptions\n` valuationResult.keyAssumptions.forEach((assumption) => { prompt += `- ${assumption}\n` }) prompt += `\n### Potential Risks\n` valuationResult.risks.forEach((risk) => { prompt += `- ${risk}\n` }) prompt += `\nProvide a concluding paragraph on the investment implications based on this valuation. Ensure the output is in clear, concise markdown format.` const result = await generateContentWithGemini(prompt) if (result.error) { throw new Error(result.error) } return { content: result.content, error: null } } catch (error) { console.error("Error generating valuation analysis content:", error) return { content: "", error: `Failed to generate valuation analysis: ${error instanceof Error ? error.message : "Unknown error"}`, } } } [V0_FILE]typescript:file="app/api/content-items/route.ts" isMerged="true" import { NextResponse } from "next/server" import { getContentItems } from "@/services/content-pipeline-service" /** * GET /api/content-items * Returns ALL content items (mock + Supabase) as JSON. * Optional query param ?stage=published to filter by stage. */ export async function GET(request: Request) { try { const { searchParams } = new URL(request.url) const stageFilter = searchParams.get("stage") // e.g. "published" const items = await getContentItems() const filtered = stageFilter ? items.filter((it) => it.stage?.toLowerCase() === stageFilter.toLowerCase()) : items return NextResponse.json(filtered, { status: 200 }) } catch (err: any) { console.error("Error in /api/content-items:", err) return NextResponse.json({ message: err?.message || "Failed to fetch content items" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/content-relationships/route.ts" isMerged="true" import { NextResponse } from "next/server" import { getContentRelationships, createContentRelationship, getRelatedContentItems, } from "@/services/content-pipeline-service" import type { ContentRelationshipType } from "@/types/content-pipeline" export async function GET(request: Request) { try { const url = new URL(request.url) const contentId = url.searchParams.get("contentId") if (!contentId) { return NextResponse.json({ success: false, error: "Content ID is required" }, { status: 400 }) } const relationships = await getContentRelationships(contentId) const relatedItems = await getRelatedContentItems(contentId) return NextResponse.json({ success: true, relationships, relatedItems, }) } catch (error) { console.error("Error fetching content relationships:", error) return NextResponse.json({ success: false, error: "Failed to fetch content relationships" }, { status: 500 }) } } export async function POST(request: Request) { try { const { sourceId, targetId, type } = await request.json() if (!sourceId || !targetId || !type) { return NextResponse.json( { success: false, error: "Source ID, target ID, and relationship type are required" }, { status: 400 }, ) } const relationship = await createContentRelationship(sourceId, targetId, type as ContentRelationshipType) return NextResponse.json({ success: true, relationship, }) } catch (error) { console.error("Error creating content relationship:", error) return NextResponse.json({ success: false, error: "Failed to create content relationship" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/convert-idea-to-content/route.ts" isMerged="true" import { NextResponse } from "next/server" import { convertIdeaToContentItem } from "@/services/content-pipeline-service" import type { InvestmentIdea } from "@/types/investment-ideas" import type { ContentStage } from "@/types/content-pipeline" export async function POST(request: Request) { try { const { idea, stage } = await request.json() if (!idea) { return NextResponse.json({ success: false, error: "Investment idea is required" }, { status: 400 }) } const contentItem = await convertIdeaToContentItem(idea as InvestmentIdea, (stage as ContentStage) || "draft") return NextResponse.json({ success: true, contentItem, }) } catch (error) { console.error("Error converting idea to content:", error) return NextResponse.json({ success: false, error: "Failed to convert investment idea to content" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/cron/investment-ideas/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import { processBatchInvestmentIdeas } from "@/services/batch-processing-service" // Simplified authorization check - no API key required function isAuthorized(request: NextRequest): boolean { // Since we're removing the CRON_API_KEY requirement, we'll simplify this // You might want to implement a different authorization method in the future return true } export async function POST(request: NextRequest) { try { // Parse request body const body = await request.json() const { sectors = ["Technology", "Healthcare", "Financial"], count = 3, strategy = "balanced", saveToDatabase = true, enhanceIdeas = false, } = body // Process the batch const result = await processBatchInvestmentIdeas({ sectors, count, strategy, saveToDatabase, enhanceIdeas, }) if (!result.success) { return NextResponse.json( { success: false, error: "Failed to process batch", details: result.errors, }, { status: 500 }, ) } return NextResponse.json({ success: true, ideasGenerated: result.ideasGenerated, ideasSaved: result.ideasSaved, ideas: result.ideas, }) } catch (error) { console.error("Error in cron job:", error) return NextResponse.json( { success: false, error: `Internal server error: ${(error as Error).message}`, }, { status: 500 }, ) } } // GET handler to check status of the cron job API export async function GET(request: NextRequest) { return NextResponse.json({ status: "healthy", timestamp: new Date().toISOString(), }) } [V0_FILE]typescript:file="app/api/cron/job-runner/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import { supabase } from "@/services/supabase-service" import { v4 as uuidv4 } from "uuid" import { checkDependenciesCompleted } from "@/app/actions/job-dependency-actions" export async function POST(request: NextRequest) { try { // Verify the request is authorized const authHeader = request.headers.get("authorization") if (!authHeader || authHeader !== `Bearer ${process.env.CRON_SECRET}`) { return NextResponse.json({ error: "Unauthorized" }, { status: 401 }) } // Get the job ID from the request const { jobId } = await request.json() if (!jobId) { return NextResponse.json({ error: "Job ID is required" }, { status: 400 }) } // Get the job details const { data: job, error: jobError } = await supabase.from("automation_jobs").select("*").eq("id", jobId).single() if (jobError) { return NextResponse.json({ error: `Job not found: ${jobError.message}` }, { status: 404 }) } // Check if the job is active if (!job.is_active) { return NextResponse.json({ error: "Job is not active" }, { status: 400 }) } // Check if all dependencies have completed successfully const dependenciesCompleted = await checkDependenciesCompleted(jobId) if (!dependenciesCompleted) { // Create a job execution record with status "canceled" due to dependencies const executionId = uuidv4() const now = new Date().toISOString() await supabase.from("job_executions").insert({ id: executionId, job_id: jobId, status: "canceled", started_at: now, completed_at: now, error: "Job dependencies have not completed successfully", logs: "Job was not executed because one or more dependencies have not completed successfully.", created_at: now, }) return NextResponse.json({ success: false, message: "Job dependencies have not completed successfully", executionId, }) } // Create a job execution record const executionId = uuidv4() const startTime = new Date().toISOString() await supabase.from("job_executions").insert({ id: executionId, job_id: jobId, status: "running", started_at: startTime, created_at: startTime, }) // Execute the job by calling its API endpoint try { const jobResponse = await fetch(`${process.env.NEXT_PUBLIC_SITE_URL}${job.path}`, { method: "GET", headers: { Authorization: `Bearer ${process.env.CRON_SECRET}`, }, }) const jobResult = await jobResponse.json() const endTime = new Date().toISOString() const durationMs = new Date(endTime).getTime() - new Date(startTime).getTime() // Update the job execution record await supabase .from("job_executions") .update({ status: jobResponse.ok ? "success" : "failure", completed_at: endTime, duration_ms: durationMs, result: jobResult, error: !jobResponse.ok ? JSON.stringify(jobResult) : null, }) .eq("id", executionId) // Update the job's last run time await supabase .from("automation_jobs") .update({ last_run: startTime, }) .eq("id", jobId) return NextResponse.json({ success: jobResponse.ok, message: jobResponse.ok ? "Job executed successfully" : "Job execution failed", result: jobResult, executionId, }) } catch (error) { // Update the job execution record with the error const endTime = new Date().toISOString() const durationMs = new Date(endTime).getTime() - new Date(startTime).getTime() await supabase .from("job_executions") .update({ status: "failure", completed_at: endTime, duration_ms: durationMs, error: error instanceof Error ? error.message : "Unknown error", logs: error instanceof Error ? error.stack : "No stack trace available", }) .eq("id", executionId) return NextResponse.json( { success: false, message: "Job execution failed", error: error instanceof Error ? error.message : "Unknown error", executionId, }, { status: 500 }, ) } } catch (error) { console.error("Error in job runner:", error) return NextResponse.json( { success: false, message: "Error in job runner", error: error instanceof Error ? error.message : "Unknown error", }, { status: 500 }, ) } } [V0_FILE]typescript:file="app/api/cron/process-newsletters/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import { processScheduledNewsletters } from "@/services/newsletter-scheduler-service" export const dynamic = "force-dynamic" export const revalidate = 0 export async function GET(request: NextRequest) { try { // Verify the request is from our cron job const authHeader = request.headers.get("authorization") if (!authHeader || authHeader !== `Bearer ${process.env.CRON_SECRET}`) { return NextResponse.json({ error: "Unauthorized" }, { status: 401 }) } // Process due newsletters const result = await processScheduledNewsletters() // Log the result to the system_logs table try { const { createClient } = await import("@supabase/supabase-js") const supabase = createClient( process.env.NEXT_PUBLIC_SUPABASE_URL || "", process.env.SUPABASE_SERVICE_ROLE_KEY || process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY || "", ) await supabase.from("system_logs").insert({ type: "newsletter_cron", action: "process_newsletters", status: result.failed > 0 ? "error" : "success", details: result, created_at: new Date().toISOString(), }) } catch (logError) { console.error("Error logging to system_logs:", logError) // Continue anyway, this is just logging } return NextResponse.json(result) } catch (error) { console.error("Error in newsletter processing cron:", error) // Log the error to the system_logs table try { const { createClient } = await import("@supabase/supabase-js") const supabase = createClient( process.env.NEXT_PUBLIC_SUPABASE_URL || "", process.env.SUPABASE_SERVICE_ROLE_KEY || process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY || "", ) await supabase.from("system_logs").insert({ type: "newsletter_cron", action: "process_newsletters", status: "error", details: { error: error instanceof Error ? error.message : "Unknown error", stack: error instanceof Error ? error.stack : undefined, }, created_at: new Date().toISOString(), }) } catch (logError) { console.error("Error logging to system_logs:", logError) // Continue anyway, this is just logging } return NextResponse.json({ error: error instanceof Error ? error.message : "Unknown error" }, { status: 500 }) } } [V0_FILE]sql:file="app/api/cron/setup-automation-jobs-table/create-automation-jobs-table.sql" isMerged="true" -- Create a function to create the automation_jobs table if it doesn't exist CREATE OR REPLACE FUNCTION create_automation_jobs_table() RETURNS void AS $$ BEGIN -- Check if the table already exists IF NOT EXISTS ( SELECT FROM information_schema.tables WHERE table_schema = 'public' AND table_name = 'automation_jobs' ) THEN -- Create the automation_jobs table CREATE TABLE automation_jobs ( id UUID PRIMARY KEY, name TEXT NOT NULL, description TEXT, type TEXT NOT NULL, schedule TEXT, parameters JSONB, is_active BOOLEAN DEFAULT true, created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(), updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW() ); -- If automation_schedules exists, copy data from it to automation_jobs IF EXISTS ( SELECT FROM information_schema.tables WHERE table_schema = 'public' AND table_name = 'automation_schedules' ) THEN -- Insert data from automation_schedules to automation_jobs INSERT INTO automation_jobs (id, name, type, schedule, parameters, is_active, created_at, updated_at) SELECT id, name, type, frequency AS schedule, parameters, is_active, created_at, updated_at FROM automation_schedules ON CONFLICT (id) DO NOTHING; END IF; END IF; END; $$ LANGUAGE plpgsql; -- Execute the function SELECT create_automation_jobs_table(); [V0_FILE]typescript:file="app/api/cron/setup-automation-jobs-table/route.ts" isMerged="true" import { NextResponse } from "next/server" import { supabase } from "@/services/supabase-service" import fs from "fs" import path from "path" export async function GET(request: Request) { try { // Read the SQL file const sqlFilePath = path.join( process.cwd(), "app/api/cron/setup-automation-jobs-table/create-automation-jobs-table.sql", ) const sqlQuery = fs.readFileSync(sqlFilePath, "utf8") // Execute the SQL query const { data, error } = await supabase.rpc("create_automation_jobs_table") if (error) { console.error("Error creating automation_jobs table:", error) return NextResponse.json({ success: false, error: error.message }, { status: 500 }) } return NextResponse.json({ success: true, message: "Automation jobs table created or already exists" }) } catch (error) { console.error("Error in setup-automation-jobs-table route:", error) return NextResponse.json( { success: false, error: error instanceof Error ? error.message : "Unknown error" }, { status: 500 }, ) } } [V0_FILE]sql:file="app/api/cron/setup-job-dependencies/create-dependencies-table.sql" isMerged="true" -- Function to set up job dependencies CREATE OR REPLACE FUNCTION setup_job_dependencies() RETURNS void AS $$ BEGIN -- Create job_dependencies table if it doesn't exist IF NOT EXISTS ( SELECT FROM information_schema.tables WHERE table_schema = 'public' AND table_name = 'job_dependencies' ) THEN CREATE TABLE job_dependencies ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), job_id UUID NOT NULL, depends_on_job_id UUID NOT NULL, created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(), CONSTRAINT fk_job_id FOREIGN KEY (job_id) REFERENCES automation_schedules(id) ON DELETE CASCADE, CONSTRAINT fk_depends_on_job_id FOREIGN KEY (depends_on_job_id) REFERENCES automation_schedules(id) ON DELETE CASCADE, CONSTRAINT unique_dependency UNIQUE (job_id, depends_on_job_id) ); -- Create index for faster lookups CREATE INDEX idx_job_dependencies_job_id ON job_dependencies(job_id); CREATE INDEX idx_job_dependencies_depends_on_job_id ON job_dependencies(depends_on_job_id); END IF; END; $$ LANGUAGE plpgsql; -- Execute the function SELECT setup_job_dependencies(); [V0_FILE]typescript:file="app/api/cron/setup-job-dependencies/route.ts" isMerged="true" import { NextResponse } from "next/server" import { supabase } from "@/services/supabase-service" import fs from "fs" import path from "path" export async function GET(request: Request) { try { // Read the SQL file const sqlFilePath = path.join(process.cwd(), "app/api/cron/setup-job-dependencies/create-dependencies-table.sql") const sqlQuery = fs.readFileSync(sqlFilePath, "utf8") // Execute the SQL query const { data, error } = await supabase.rpc("setup_job_dependencies") if (error) { console.error("Error setting up job dependencies:", error) return NextResponse.json({ success: false, error: error.message }, { status: 500 }) } return NextResponse.json({ success: true, message: "Job dependencies system set up successfully" }) } catch (error) { console.error("Error in setup-job-dependencies route:", error) return NextResponse.json( { success: false, error: error instanceof Error ? error.message : "Unknown error" }, { status: 500 }, ) } } [V0_FILE]sql:file="app/api/cron/setup-logs-table/create-function.sql" isMerged="true" -- Create a function to create the system_logs table if it doesn't exist CREATE OR REPLACE FUNCTION create_system_logs_table_if_not_exists() RETURNS void AS $$ BEGIN -- Check if the table exists IF NOT EXISTS ( SELECT FROM pg_tables WHERE schemaname = 'public' AND tablename = 'system_logs' ) THEN -- Create the table CREATE TABLE public.system_logs ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), type TEXT NOT NULL, action TEXT NOT NULL, status TEXT NOT NULL, details JSONB, created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW() ); -- Create indexes CREATE INDEX idx_system_logs_type ON public.system_logs(type); CREATE INDEX idx_system_logs_status ON public.system_logs(status); CREATE INDEX idx_system_logs_created_at ON public.system_logs(created_at); END IF; END; $$ LANGUAGE plpgsql; [V0_FILE]typescript:file="app/api/cron/setup-logs-table/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import { supabase } from "@/services/supabase-service" export const dynamic = "force-dynamic" export const revalidate = 0 export async function GET(request: NextRequest) { try { // Create the system_logs table if it doesn't exist const { error } = await supabase.rpc("create_system_logs_table_if_not_exists") if (error) { console.error("Error creating system_logs table:", error) return NextResponse.json({ error: error.message }, { status: 500 }) } return NextResponse.json({ success: true, message: "System logs table created or already exists" }) } catch (error) { console.error("Error in setup logs table:", error) return NextResponse.json({ error: error instanceof Error ? error.message : "Unknown error" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/enhance-investment-idea/[id]/route.ts" isMerged="true" import { NextResponse } from "next/server" import { enhanceInvestmentIdea } from "@/services/investment-ideas-service" import type { EnhanceIdeaResponse } from "@/types/investment-ideas" export async function GET(request: Request, { params }: { params: { id: string } }) { try { const id = params.id if (!id) { return NextResponse.json( { success: false, error: "Investment idea ID is required", }, { status: 400 }, ) } const enhancedIdea = await enhanceInvestmentIdea(id) if (!enhancedIdea) { return NextResponse.json( { success: false, error: "Investment idea not found", }, { status: 404 }, ) } return NextResponse.json({ success: true, idea: enhancedIdea, }) } catch (error) { console.error("Error enhancing investment idea:", error) return NextResponse.json( { success: false, error: "Failed to enhance investment idea", }, { status: 500 }, ) } } [V0_FILE]typescript:file="app/api/generate-investment-ideas/route.ts" isMerged="true" import { NextResponse } from "next/server" import { generateInvestmentIdeas as generateIdeas } from "@/services/investment-ideas-service" import { authenticateRequest } from "@/lib/api-auth" import type { InvestmentIdeaFormData, GenerateIdeasResponse } from "@/types/investment-ideas" // Export the function for direct use export { generateIdeas as generateInvestmentIdeas } export async function POST(request: Request) { // Authenticate the request - require editor role or higher const auth = await authenticateRequest(request, { requiredRole: "editor" }) if (!auth.authenticated || !auth.authorized) { return auth.response } try { // Parse the request body let formData: InvestmentIdeaFormData try { formData = await request.json() } catch (error) { console.error("Error parsing request JSON:", error) return NextResponse.json( { success: false, error: "Invalid request format", }, { status: 400, headers: { "Content-Type": "application/json" } }, ) } // Validate input if (!formData) { return NextResponse.json( { success: false, error: "Invalid request data", }, { status: 400, headers: { "Content-Type": "application/json" } }, ) } // Validate that we have at least some input data if (!formData.tickers && !formData.sectors && !formData.themes) { return NextResponse.json( { success: false, error: "Please provide at least one ticker, sector, or theme", }, { status: 400, headers: { "Content-Type": "application/json" } }, ) } // Generate ideas try { const { ticker, sector, strategy, timeHorizon, riskTolerance } = formData const ideas = await generateIdeas({ ticker, sector, strategy, timeHorizon, riskTolerance, userId: auth.user.id, // Add user ID for tracking }) return NextResponse.json( { success: true, ideas, }, { headers: { "Content-Type": "application/json" } }, ) } catch (error: any) { console.error("Error in generateIdeas function:", error) return NextResponse.json( { success: false, error: error instanceof Error ? error.message : "Failed to generate investment ideas", }, { status: 500, headers: { "Content-Type": "application/json" } }, ) } } catch (error: any) { console.error("Unhandled error in generate-investment-ideas route:", error) // Ensure we always return a proper JSON response return NextResponse.json( { success: false, error: error instanceof Error ? error.message : "An unexpected error occurred", }, { status: 500, headers: { "Content-Type": "application/json" } }, ) } } [V0_FILE]typescript:file="app/api/kit/publish/route.ts" isMerged="true" import { NextResponse } from "next/server" export async function POST(request: Request) { try { const { title, content, summary, isPublic, isBroadcast, isDraft, contentFormat } = await request.json() // Validate required fields if (!title || !content) { return NextResponse.json( { success: false, error: "Missing required fields: title and content are required" }, { status: 400 }, ) } // Get API key from environment variable const apiKey = process.env.KIT_API_KEY if (!apiKey) { console.error("Kit API key not found in environment variables") return NextResponse.json( { success: false, error: "Kit API key not configured", troubleshooting: "Please add KIT_API_KEY to your environment variables.", }, { status: 500 }, ) } // Format the current date in ISO8601 format const now = new Date().toISOString() // Use the v4 API endpoint as specified in the documentation const endpoint = "https://api.kit.com/v4/broadcasts" // Prepare the request body exactly as specified in the documentation const requestBody = { email_template_id: null, // Optional, using default template email_address: null, content: content, description: summary || "Investment Newsletter", public: isPublic === true, published_at: now, send_at: isBroadcast ? now : null, thumbnail_alt: null, thumbnail_url: null, preview_text: summary || "Investment insights and market analysis", subject: title, subscriber_filter: [], // Empty array for all subscribers } console.log("Sending request to Kit API with API key:", apiKey.substring(0, 5) + "...") // Try different authentication methods const authMethods = [ { headers: { "Content-Type": "application/json", Accept: "application/json", Authorization: `Bearer ${apiKey}`, }, description: "Bearer token in Authorization header", }, { headers: { "Content-Type": "application/json", Accept: "application/json", "X-Kit-Api-Key": apiKey, }, description: "API key in X-Kit-Api-Key header", }, { headers: { "Content-Type": "application/json", Accept: "application/json", "Api-Key": apiKey, }, description: "API key in Api-Key header", }, ] let lastError = null let lastResponse = null let responseData = null // Try each authentication method for (const method of authMethods) { try { console.log(`Trying Kit API with ${method.description}...`) const response = await fetch(endpoint, { method: "POST", headers: method.headers, body: JSON.stringify(requestBody), }) lastResponse = response // Get the raw response const responseText = await response.text() console.log("Kit API response status:", response.status) console.log("Kit API response headers:", Object.fromEntries(response.headers.entries())) console.log("Kit API response body:", responseText.substring(0, 500)) // Try to parse the response as JSON try { responseData = JSON.parse(responseText) } catch (e) { console.error("Failed to parse response as JSON:", e) lastError = "Failed to parse Kit API response as JSON" continue // Try next authentication method } // If successful, return the response if (response.ok) { return NextResponse.json({ success: true, message: isBroadcast ? "Newsletter broadcast sent successfully" : isDraft ? "Newsletter saved as draft in Kit" : "Newsletter published to Kit", postUrl: responseData.url || null, postId: responseData.id || null, kitResponse: responseData, }) } // Store the error and try the next method lastError = `Kit API error: ${JSON.stringify(responseData)}` } catch (error) { console.error(`Error with ${method.description}:`, error) lastError = `Error with ${method.description}: ${error instanceof Error ? error.message : "Unknown error"}` } } // If we get here, all authentication methods failed console.error("All Kit API authentication methods failed. Last error:", lastError) return NextResponse.json( { success: false, error: lastError || "Failed to authenticate with Kit API", troubleshooting: "Please verify your Kit API key is correct and has the necessary permissions.", responseStatus: lastResponse?.status, responseDetails: responseData ? JSON.stringify(responseData) : null, }, { status: lastResponse?.status || 500 }, ) } catch (error) { console.error("Error publishing to Kit:", error) return NextResponse.json( { success: false, error: `Failed to publish to Kit: ${error instanceof Error ? error.message : "Unknown error"}`, troubleshooting: "Please check your network connection and try again.", }, { status: 500 }, ) } } export async function GET(request: Request) { // Simple health check endpoint that also verifies the API key try { const apiKey = process.env.KIT_API_KEY if (!apiKey) { return NextResponse.json({ status: "error", error: "Kit API key not configured in environment variables", timestamp: new Date().toISOString(), }) } // Try different authentication methods const authMethods = [ { headers: { Accept: "application/json", Authorization: `Bearer ${apiKey}`, }, description: "Bearer token in Authorization header", }, { headers: { Accept: "application/json", "X-Kit-Api-Key": apiKey, }, description: "API key in X-Kit-Api-Key header", }, { headers: { Accept: "application/json", "Api-Key": apiKey, }, description: "API key in Api-Key header", }, ] let lastError = null // Try each authentication method for (const method of authMethods) { try { console.log(`Checking Kit API with ${method.description}...`) const response = await fetch("https://api.kit.com/v4/me", { headers: method.headers, }) if (response.ok) { const data = await response.json() return NextResponse.json({ status: "healthy", kitApiStatus: "connected", kitUser: data.username || "unknown", authMethod: method.description, timestamp: new Date().toISOString(), }) } // Store the error and try the next method const responseText = await response.text() lastError = `Status ${response.status}: ${responseText}` } catch (error) { console.error(`Error with ${method.description}:`, error) lastError = `Error with ${method.description}: ${error instanceof Error ? error.message : "Unknown error"}` } } // If we get here, all authentication methods failed return NextResponse.json({ status: "healthy", kitApiStatus: "error", error: `Failed to authenticate with Kit API: ${lastError}`, troubleshooting: "Please verify your Kit API key is correct and has the necessary permissions.", timestamp: new Date().toISOString(), }) } catch (error) { return NextResponse.json({ status: "healthy", kitApiStatus: "error", error: error instanceof Error ? error.message : "Unknown error", timestamp: new Date().toISOString(), }) } } [V0_FILE]typescript:file="app/api/market-data/public/route.ts" isMerged="true" import { NextResponse } from "next/server" import { authenticateRequest } from "@/lib/api-auth" import { getPublicMarketData, getEnhancedMarketData } from "@/services/market-data-service" export async function GET(request: Request) { // Allow unauthenticated access but check if user is authenticated const auth = await authenticateRequest(request, { allowUnauthenticated: true }) try { // Basic market data available to all users const publicData = await getPublicMarketData() // If user is authenticated, provide enhanced data if (auth.authenticated) { const enhancedData = await getEnhancedMarketData() return NextResponse.json({ ...publicData, ...enhancedData, premium: true, }) } // Return basic data for unauthenticated users return NextResponse.json({ ...publicData, premium: false, message: "Sign in for enhanced market data", }) } catch (error) { console.error("Error fetching market data:", error) return NextResponse.json({ error: "Failed to fetch market data" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/market-indices/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" export async function POST(request: NextRequest) { try { const { symbols } = await request.json() if (!Array.isArray(symbols) || symbols.length === 0) { return NextResponse.json({ error: "Invalid symbols array" }, { status: 400 }) } // Use the server-side environment variable const apiKey = process.env.FMP_API_KEY if (!apiKey) { console.error("FMP API key is not defined") return NextResponse.json({ error: "API configuration error" }, { status: 500 }) } // Fetch data for all symbols in a single request if possible const symbolsString = symbols.join(",") const url = `https://financialmodelingprep.com/api/v3/quote/${symbolsString}?apikey=${apiKey}` const response = await fetch(url) if (!response.ok) { throw new Error(`FMP API responded with status: ${response.status}`) } const data = await response.json() return NextResponse.json(data) } catch (error) { console.error("Error fetching market indices:", error) return NextResponse.json({ error: "Failed to fetch market data" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/save-investment-idea/route.ts" isMerged="true" import { NextResponse } from "next/server" import { saveInvestmentIdea as saveIdea } from "@/services/investment-ideas-service" import type { InvestmentIdea, SaveIdeaResponse } from "@/types/investment-ideas" export async function POST(request: Request) { try { const idea: InvestmentIdea = await request.json() if (!idea) { return NextResponse.json( { success: false, error: "Invalid investment idea data", }, { status: 400 }, ) } const id = await saveIdea(idea) return NextResponse.json({ success: true, id, }) } catch (error) { console.error("Error saving investment idea:", error) return NextResponse.json( { success: false, error: "Failed to save investment idea", }, { status: 500 }, ) } } export { saveIdea as saveInvestmentIdea } [V0_FILE]sql:file="app/api/setup-citations-table/create-citations-table.sql" isMerged="true" -- Create citations table for research assistant CREATE TABLE IF NOT EXISTS public.citations ( id TEXT PRIMARY KEY, content_id TEXT NOT NULL, source_title TEXT NOT NULL, source_url TEXT, source_type TEXT NOT NULL CHECK (source_type IN ('article', 'report', 'data', 'news', 'academic', 'book', 'website')), author TEXT, date_published TEXT, date_accessed TEXT NOT NULL, quoted_text TEXT, page_number TEXT, notes TEXT, created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW() ); -- Create indexes for better performance CREATE INDEX IF NOT EXISTS idx_citations_content_id ON public.citations(content_id); CREATE INDEX IF NOT EXISTS idx_citations_created_at ON public.citations(created_at); CREATE INDEX IF NOT EXISTS idx_citations_source_type ON public.citations(source_type); -- Add RLS policies ALTER TABLE public.citations ENABLE ROW LEVEL SECURITY; -- Policy to allow authenticated users to read all citations CREATE POLICY IF NOT EXISTS "Allow authenticated users to read citations" ON public.citations FOR SELECT USING (auth.role() = 'authenticated'); -- Policy to allow authenticated users to insert citations CREATE POLICY IF NOT EXISTS "Allow authenticated users to insert citations" ON public.citations FOR INSERT WITH CHECK (auth.role() = 'authenticated'); -- Policy to allow authenticated users to update their own citations CREATE POLICY IF NOT EXISTS "Allow authenticated users to update citations" ON public.citations FOR UPDATE USING (auth.role() = 'authenticated'); -- Policy to allow authenticated users to delete citations CREATE POLICY IF NOT EXISTS "Allow authenticated users to delete citations" ON public.citations FOR DELETE USING (auth.role() = 'authenticated'); [V0_FILE]typescript:file="app/api/setup-citations-table/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import { supabase } from "@/services/supabase-client" export async function POST(request: NextRequest) { try { // Read the SQL file content const createCitationsTableSQL = ` -- Create citations table for research assistant CREATE TABLE IF NOT EXISTS public.citations ( id TEXT PRIMARY KEY, content_id TEXT NOT NULL, source_title TEXT NOT NULL, source_url TEXT, source_type TEXT NOT NULL CHECK (source_type IN ('article', 'report', 'data', 'news', 'academic', 'book', 'website')), author TEXT, date_published TEXT, date_accessed TEXT NOT NULL, quoted_text TEXT, page_number TEXT, notes TEXT, created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW() ); -- Create indexes for better performance CREATE INDEX IF NOT EXISTS idx_citations_content_id ON public.citations(content_id); CREATE INDEX IF NOT EXISTS idx_citations_created_at ON public.citations(created_at); CREATE INDEX IF NOT EXISTS idx_citations_source_type ON public.citations(source_type); -- Add RLS policies ALTER TABLE public.citations ENABLE ROW LEVEL SECURITY; -- Policy to allow authenticated users to read all citations DROP POLICY IF EXISTS "Allow authenticated users to read citations" ON public.citations; CREATE POLICY "Allow authenticated users to read citations" ON public.citations FOR SELECT USING (true); -- Policy to allow authenticated users to insert citations DROP POLICY IF EXISTS "Allow authenticated users to insert citations" ON public.citations; CREATE POLICY "Allow authenticated users to insert citations" ON public.citations FOR INSERT WITH CHECK (true); -- Policy to allow authenticated users to update their own citations DROP POLICY IF EXISTS "Allow authenticated users to update citations" ON public.citations; CREATE POLICY "Allow authenticated users to update citations" ON public.citations FOR UPDATE USING (true); -- Policy to allow authenticated users to delete citations DROP POLICY IF EXISTS "Allow authenticated users to delete citations" ON public.citations; CREATE POLICY "Allow authenticated users to delete citations" ON public.citations FOR DELETE USING (true); ` // Execute the SQL const { error } = await supabase.rpc("exec_sql", { sql_query: createCitationsTableSQL }) if (error) { console.error("Error creating citations table:", error) // Try alternative approach - execute statements one by one const statements = createCitationsTableSQL .split(";") .map((stmt) => stmt.trim()) .filter((stmt) => stmt.length > 0) for (const statement of statements) { if (statement.includes("--")) continue // Skip comments try { const { error: stmtError } = await supabase.rpc("exec_sql", { sql_query: statement }) if (stmtError) { console.warn("Statement error (may be expected):", stmtError.message) } } catch (err) { console.warn("Statement execution warning:", err) } } } return NextResponse.json({ success: true, message: "Citations table setup completed", }) } catch (error) { console.error("Error in setup-citations-table:", error) return NextResponse.json( { success: false, error: "Failed to setup citations table", details: error instanceof Error ? error.message : "Unknown error", }, { status: 500 }, ) } } export async function GET() { try { // Check if citations table exists const { data, error } = await supabase.from("citations").select("count(*)").limit(1) if (error) { return NextResponse.json({ exists: false, error: error.message, }) } return NextResponse.json({ exists: true, message: "Citations table exists and is accessible", }) } catch (error) { return NextResponse.json({ exists: false, error: error instanceof Error ? error.message : "Unknown error", }) } } [V0_FILE]typescript:file="app/api/workflow-triggers/execute/route.ts" isMerged="true" import { NextResponse } from "next/server" import { authenticateRequest } from "@/lib/api-auth" import { executeWorkflowTrigger } from "@/services/workflow-trigger-service" export async function POST(request: Request) { // Authenticate the request - require admin role const auth = await authenticateRequest(request, { requiredRole: "admin" }) if (!auth.authenticated || !auth.authorized) { return auth.response } try { const body = await request.json() const { triggerId, parameters } = body const result = await executeWorkflowTrigger({ triggerId, parameters, executedBy: auth.user.id, }) return NextResponse.json({ result }) } catch (error) { console.error("Error executing workflow trigger:", error) return NextResponse.json({ error: "Failed to execute workflow trigger" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/content-library/loading.tsx" isMerged="true" import { Skeleton } from "@/components/ui/skeleton" import { Card, CardContent } from "@/components/ui/card" export default function ContentLibraryLoading() { return (

{[1, 2, 3].map((i) => ( ))}

{[1, 2].map((i) => ( ))}

) } [V0_FILE]typescriptreact:file="app/content-pipeline/loading.tsx" isMerged="true" export default function Loading() { return null } [V0_FILE]json:file="components.json" isMerged="true" { "$schema": "https://ui.shadcn.com/schema.json", "style": "default", "rsc": true, "tsx": true, "tailwind": { "config": "tailwind.config.ts", "css": "app/globals.css", "baseColor": "neutral", "cssVariables": true, "prefix": "" }, "aliases": { "components": "@/components", "utils": "@/lib/utils", "ui": "@/components/ui", "lib": "@/lib", "hooks": "@/hooks" }, "iconLibrary": "lucide" } [V0_FILE]typescriptreact:file="components/admin/add-user-dialog.tsx" isMerged="true" "use client" import { useState } from "react" import { z } from "zod" import { useForm } from "react-hook-form" import { zodResolver } from "@hookform/resolvers/zod" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "@/components/ui/dialog" import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Input } from "@/components/ui/input" import { Button } from "@/components/ui/button" import type { UserWithRole } from "@/services/user-role-service" import { setUserRole } from "@/services/user-role-service" import { supabase } from "@/services/supabase-service" const formSchema = z.object({ email: z.string().email({ message: "Please enter a valid email address" }), password: z.string().min(8, { message: "Password must be at least 8 characters" }), role: z.enum(["admin", "editor", "viewer"], { required_error: "Please select a role", }), }) type FormValues = z.infer interface AddUserDialogProps { open: boolean onOpenChange: (open: boolean) => void onUserAdded: (user: UserWithRole) => void } export function AddUserDialog({ open, onOpenChange, onUserAdded }: AddUserDialogProps) { const [isSubmitting, setIsSubmitting] = useState(false) const form = useForm({ resolver: zodResolver(formSchema), defaultValues: { email: "", password: "", role: "viewer", }, }) const onSubmit = async (values: FormValues) => { setIsSubmitting(true) try { // Create user in Supabase Auth const { data: authData, error: authError } = await supabase.auth.admin.createUser({ email: values.email, password: values.password, email_confirm: true, }) if (authError) throw authError // Set user role const userId = authData.user.id const success = await setUserRole(userId, values.role as "admin" | "editor" | "viewer") if (!success) throw new Error("Failed to set user role") // Notify parent component onUserAdded({ id: userId, email: values.email, role: values.role, last_sign_in_at: null, }) // Close dialog and reset form onOpenChange(false) form.reset() } catch (error) { console.error("Error adding user:", error) form.setError("root", { message: "Failed to add user. Please try again.", }) } finally { setIsSubmitting(false) } } return ( ) } [V0_FILE]typescriptreact:file="components/admin/admin-metrics-skeleton.tsx" isMerged="true" import { Card, CardContent, CardHeader } from "@/components/ui/card" import { Skeleton } from "@/components/ui/skeleton" export function AdminMetricsSkeleton() { return ( <> {Array(4) .fill(0) .map((_, i) => ( ))} ) } [V0_FILE]typescriptreact:file="components/admin/automation-jobs-manager.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { Badge } from "@/components/ui/badge" import { Switch } from "@/components/ui/switch" import { MoreHorizontal, Plus, Search } from "lucide-react" import { useToast } from "@/hooks/use-toast" import { supabase } from "@/services/supabase-service" interface AutomationJob { id: string name: string type: string frequency: string is_active: boolean parameters: any created_at?: string updated_at?: string } export function AutomationJobsManager() { const [jobs, setJobs] = useState([]) const [isLoading, setIsLoading] = useState(true) const [searchQuery, setSearchQuery] = useState("") const { toast } = useToast() useEffect(() => { fetchJobs() }, []) async function fetchJobs() { try { setIsLoading(true) const { data, error } = await supabase.from("automation_schedules").select("*").order("name") if (error) throw error setJobs(data || []) } catch (error) { console.error("Error fetching automation jobs:", error) toast({ title: "Error", description: "Failed to load automation jobs. Please try again.", variant: "destructive", }) } finally { setIsLoading(false) } } async function toggleJobStatus(job: AutomationJob) { try { const { error } = await supabase .from("automation_schedules") .update({ is_active: !job.is_active }) .eq("id", job.id) if (error) throw error setJobs(jobs.map((j) => (j.id === job.id ? { ...j, is_active: !j.is_active } : j))) toast({ title: job.is_active ? "Job Disabled" : "Job Enabled", description: `${job.name} has been ${job.is_active ? "disabled" : "enabled"}.`, }) } catch (error) { console.error("Error toggling job status:", error) toast({ title: "Error", description: "Failed to update job status. Please try again.", variant: "destructive", }) } } const filteredJobs = jobs.filter( (job) => job.name.toLowerCase().includes(searchQuery.toLowerCase()) || job.type.toLowerCase().includes(searchQuery.toLowerCase()) || job.frequency.toLowerCase().includes(searchQuery.toLowerCase()), ) return (

Automation Jobs Manage scheduled automation jobs and their execution.

setSearchQuery(e.target.value)} className="max-w-sm" />

Name Type Frequency Status Active {isLoading ? ( Loading jobs... ) : filteredJobs.length === 0 ? ( No jobs found. ) : ( filteredJobs.map((job) => ( {job.name} {job.type} {job.frequency} {job.is_active ? "Active" : "Inactive"} toggleJobStatus(job)} /> Actions Edit View History Run Now Delete )) )}

) } [V0_FILE]typescriptreact:file="components/admin/automation-jobs-skeleton.tsx" isMerged="true" import { Card, CardContent, CardHeader } from "@/components/ui/card" import { Skeleton } from "@/components/ui/skeleton" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" export function AutomationJobsSkeleton() { return (

{Array(5) .fill(0) .map((_, i) => ( ))}

) } [V0_FILE]typescriptreact:file="components/admin/edit-user-dialog.tsx" isMerged="true" "use client" import { useState } from "react" import { z } from "zod" import { useForm } from "react-hook-form" import { zodResolver } from "@hookform/resolvers/zod" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "@/components/ui/dialog" import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Button } from "@/components/ui/button" import type { UserWithRole } from "@/services/user-role-service" import { setUserRole } from "@/services/user-role-service" const formSchema = z.object({ role: z.enum(["admin", "editor", "viewer"], { required_error: "Please select a role", }), }) type FormValues = z.infer interface EditUserDialogProps { open: boolean onOpenChange: (open: boolean) => void user: UserWithRole onUserUpdated: (user: UserWithRole) => void } export function EditUserDialog({ open, onOpenChange, user, onUserUpdated }: EditUserDialogProps) { const [isSubmitting, setIsSubmitting] = useState(false) const form = useForm({ resolver: zodResolver(formSchema), defaultValues: { role: user.role as "admin" | "editor" | "viewer", }, }) const onSubmit = async (values: FormValues) => { setIsSubmitting(true) try { // Update user role const success = await setUserRole(user.id, values.role as "admin" | "editor" | "viewer") if (!success) throw new Error("Failed to update user role") // Notify parent component onUserUpdated({ ...user, role: values.role, }) // Close dialog onOpenChange(false) } catch (error) { console.error("Error updating user:", error) form.setError("root", { message: "Failed to update user. Please try again.", }) } finally { setIsSubmitting(false) } } return ( ) } [V0_FILE]typescriptreact:file="components/admin/recent-activity-list.tsx" isMerged="true" import { getRecentActivity } from "@/app/actions/admin-actions" import { formatDistanceToNow } from "date-fns" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" export async function RecentActivityList() { const activities = await getRecentActivity() return (

{activities.map((activity) => (

{activity.user.name.charAt(0)}

{activity.user.name}

{activity.action}

{formatDistanceToNow(new Date(activity.timestamp), { addSuffix: true })}

))}

) } [V0_FILE]typescriptreact:file="components/admin/system-health-checks.tsx" isMerged="true" import { Badge } from "@/components/ui/badge" import { getSystemHealth } from "@/app/actions/admin-actions" export async function SystemHealthChecks() { const healthChecks = await getSystemHealth() return (

{healthChecks.map((check) => (

{check.name}

{check.status}

))}

) } function getStatusColor(status: string) { switch (status) { case "Healthy": return "bg-green-500" case "Degraded": return "bg-yellow-500" case "Down": return "bg-red-500" default: return "bg-gray-500" } } function getVariant(status: string): "default" | "destructive" | "outline" | "secondary" | "success" { switch (status) { case "Healthy": return "success" case "Degraded": return "secondary" case "Down": return "destructive" default: return "outline" } } [V0_FILE]typescriptreact:file="components/admin/system-settings-skeleton.tsx" isMerged="true" import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card" import { Skeleton } from "@/components/ui/skeleton" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" export function SystemSettingsSkeleton() { return ( General API Content

{Array(3) .fill(0) .map((_, i) => (

))}

{Array(2) .fill(0) .map((_, i) => ( ))}

) } [V0_FILE]typescriptreact:file="components/admin/system-settings.tsx" isMerged="true" "use client" import { useState } from "react" import { z } from "zod" import { useForm } from "react-hook-form" import { zodResolver } from "@hookform/resolvers/zod" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form" import { Input } from "@/components/ui/input" import { Button } from "@/components/ui/button" import { Switch } from "@/components/ui/switch" import { Textarea } from "@/components/ui/textarea" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { useToast } from "@/hooks/use-toast" import { updateSystemSettings } from "@/app/actions/admin-actions" const generalFormSchema = z.object({ siteName: z.string().min(1, { message: "Site name is required" }), siteDescription: z.string().optional(), contactEmail: z.string().email({ message: "Please enter a valid email address" }), enableRegistration: z.boolean(), maintenanceMode: z.boolean(), }) const apiFormSchema = z.object({ apiRateLimit: z.coerce.number().min(10, { message: "Rate limit must be at least 10" }), apiTimeout: z.coerce.number().min(5, { message: "Timeout must be at least 5 seconds" }), enablePublicApi: z.boolean(), defaultApiVersion: z.string(), }) const contentFormSchema = z.object({ defaultContentType: z.string(), maxContentItems: z.coerce.number().min(10, { message: "Must be at least 10" }), enableContentApproval: z.boolean(), contentRetentionDays: z.coerce.number().min(1, { message: "Must be at least 1 day" }), }) type GeneralFormValues = z.infer type ApiFormValues = z.infer type ContentFormValues = z.infer export function SystemSettings() { const [activeTab, setActiveTab] = useState("general") const [isSubmitting, setIsSubmitting] = useState(false) const { toast } = useToast() const generalForm = useForm({ resolver: zodResolver(generalFormSchema), defaultValues: { siteName: "Investment Research Platform", siteDescription: "Advanced research and analysis tools for investment professionals", contactEmail: "admin@example.com", enableRegistration: true, maintenanceMode: false, }, }) const apiForm = useForm({ resolver: zodResolver(apiFormSchema), defaultValues: { apiRateLimit: 100, apiTimeout: 30, enablePublicApi: false, defaultApiVersion: "v1", }, }) const contentForm = useForm({ resolver: zodResolver(contentFormSchema), defaultValues: { defaultContentType: "article", maxContentItems: 1000, enableContentApproval: true, contentRetentionDays: 365, }, }) const onSubmitGeneral = async (values: GeneralFormValues) => { await handleSubmit("general", values) } const onSubmitApi = async (values: ApiFormValues) => { await handleSubmit("api", values) } const onSubmitContent = async (values: ContentFormValues) => { await handleSubmit("content", values) } const handleSubmit = async (type: string, values: any) => { setIsSubmitting(true) try { await updateSystemSettings(type, values) toast({ title: "Settings Updated", description: "System settings have been updated successfully.", }) } catch (error) { console.error(`Error updating ${type} settings:`, error) toast({ title: "Error", description: `Failed to update ${type} settings. Please try again.`, variant: "destructive", }) } finally { setIsSubmitting(false) } } return ( System Settings Configure global settings for the investment research platform. General API Content

( Site Name The name of your investment research platform. )} /> ( Site Description

</FormControl>
                      <FormDescription>A brief description of your platform.</FormDescription>
                      <FormMessage />
                    </FormItem>
                  )}
                />
                <FormField
                  control={generalForm.control}
                  name="contactEmail"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>Contact Email</FormLabel>
                      <FormControl>
                        <Input {...field} />
                      </FormControl>
                      <FormDescription>The primary contact email for system notifications.</FormDescription>
                      <FormMessage />
                    </FormItem>
                  )}
                />
                <div className="grid grid-cols-2 gap-6">
                  <FormField
                    control={generalForm.control}
                    name="enableRegistration"
                    render={({ field }) => (
                      <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
                        <div className="space-y-0.5">
                          <FormLabel className="text-base">User Registration</FormLabel>
                          <FormDescription>Allow new users to register accounts.</FormDescription>
                        </div>
                        <FormControl>
                          <Switch checked={field.value} onCheckedChange={field.onChange} />
                        </FormControl>
                      </FormItem>
                    )}
                  />
                  <FormField
                    control={generalForm.control}
                    name="maintenanceMode"
                    render={({ field }) => (
                      <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
                        <div className="space-y-0.5">
                          <FormLabel className="text-base">Maintenance Mode</FormLabel>
                          <FormDescription>Put the site in maintenance mode.</FormDescription>
                        </div>
                        <FormControl>
                          <Switch checked={field.value} onCheckedChange={field.onChange} />
                        </FormControl>
                      </FormItem>
                    )}
                  />
                </div>
                <Button type="submit" disabled={isSubmitting}>
                  {isSubmitting ? "Saving..." : "Save General Settings"}
                </Button>
              </form>
            </Form>
          </TabsContent>
          <TabsContent value="api" className="pt-6">
            <Form {...apiForm}>
              <form onSubmit={apiForm.handleSubmit(onSubmitApi)} className="space-y-6">
                <div className="grid grid-cols-2 gap-6">
                  <FormField
                    control={apiForm.control}
                    name="apiRateLimit"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>API Rate Limit</FormLabel>
                        <FormControl>
                          <Input type="number" {...field} />
                        </FormControl>
                        <FormDescription>Maximum requests per minute per user.</FormDescription>
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                  <FormField
                    control={apiForm.control}
                    name="apiTimeout"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>API Timeout (seconds)</FormLabel>
                        <FormControl>
                          <Input type="number" {...field} />
                        </FormControl>
                        <FormDescription>Maximum time for API requests to complete.</FormDescription>
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                </div>
                <FormField
                  control={apiForm.control}
                  name="defaultApiVersion"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>Default API Version</FormLabel>
                      <Select onValueChange={field.onChange} defaultValue={field.value}>
                        <FormControl>
                          <SelectTrigger>
                            <SelectValue placeholder="Select API version" />
                          </SelectTrigger>
                        </FormControl>
                        <SelectContent>
                          <SelectItem value="v1">Version 1</SelectItem>
                          <SelectItem value="v2">Version 2</SelectItem>
                          <SelectItem value="v3">Version 3 (Beta)</SelectItem>
                        </SelectContent>
                      </Select>
                      <FormDescription>The default API version to use when not specified.</FormDescription>
                      <FormMessage />
                    </FormItem>
                  )}
                />
                <FormField
                  control={apiForm.control}
                  name="enablePublicApi"
                  render={({ field }) => (
                    <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
                      <div className="space-y-0.5">
                        <FormLabel className="text-base">Public API</FormLabel>
                        <FormDescription>Enable public API access (no authentication required).</FormDescription>
                      </div>
                      <FormControl>
                        <Switch checked={field.value} onCheckedChange={field.onChange} />
                      </FormControl>
                    </FormItem>
                  )}
                />
                <Button type="submit" disabled={isSubmitting}>
                  {isSubmitting ? "Saving..." : "Save API Settings"}
                </Button>
              </form>
            </Form>
          </TabsContent>
          <TabsContent value="content" className="pt-6">
            <Form {...contentForm}>
              <form onSubmit={contentForm.handleSubmit(onSubmitContent)} className="space-y-6">
                <FormField
                  control={contentForm.control}
                  name="defaultContentType"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>Default Content Type</FormLabel>
                      <Select onValueChange={field.onChange} defaultValue={field.value}>
                        <FormControl>
                          <SelectTrigger>
                            <SelectValue placeholder="Select content type" />
                          </SelectTrigger>
                        </FormControl>
                        <SelectContent>
                          <SelectItem value="article">Article</SelectItem>
                          <SelectItem value="newsletter">Newsletter</SelectItem>
                          <SelectItem value="report">Report</SelectItem>
                          <SelectItem value="idea">Investment Idea</SelectItem>
                        </SelectContent>
                      </Select>
                      <FormDescription>The default content type for new content items.</FormDescription>
                      <FormMessage />
                    </FormItem>
                  )}
                />
                <div className="grid grid-cols-2 gap-6">
                  <FormField
                    control={contentForm.control}
                    name="maxContentItems"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>Max Content Items</FormLabel>
                        <FormControl>
                          <Input type="number" {...field} />
                        </FormControl>
                        <FormDescription>Maximum number of content items allowed.</FormDescription>
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                  <FormField
                    control={contentForm.control}
                    name="contentRetentionDays"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>Content Retention (days)</FormLabel>
                        <FormControl>
                          <Input type="number" {...field} />
                        </FormControl>
                        <FormDescription>Number of days to retain content items.</FormDescription>
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                </div>
                <FormField
                  control={contentForm.control}
                  name="enableContentApproval"
                  render={({ field }) => (
                    <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
                      <div className="space-y-0.5">
                        <FormLabel className="text-base">Content Approval</FormLabel>
                        <FormDescription>Require approval before content is published.</FormDescription>
                      </div>
                      <FormControl>
                        <Switch checked={field.value} onCheckedChange={field.onChange} />
                      </FormControl>
                    </FormItem>
                  )}
                />
                <Button type="submit" disabled={isSubmitting}>
                  {isSubmitting ? "Saving..." : "Save Content Settings"}
                </Button>
              </form>
            </Form>
          </TabsContent>
        </Tabs>
      </CardContent>
      <CardFooter className="border-t pt-6">
        <p className="text-sm text-muted-foreground">
          Settings are automatically applied after saving. Some changes may require a system restart.
        </p>
      </CardFooter>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/admin/user-management-skeleton.tsx" isMerged="true"
import { Card, CardContent, CardHeader } from "@/components/ui/card"
import { Skeleton } from "@/components/ui/skeleton"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"

export function UserManagementSkeleton() {
  return (
    <Card>
      <CardHeader>
        <div className="flex items-center justify-between">
          <div>
            <Skeleton className="h-6 w-32 mb-2" />
            <Skeleton className="h-4 w-64" />
          </div>
          <Skeleton className="h-10 w-28" />
        </div>
      </CardHeader>
      <CardContent>
        <Skeleton className="h-10 w-64 mb-4" />

<div className="rounded-md border">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>
                  <Skeleton className="h-4 w-24" />
                </TableHead>
                <TableHead>
                  <Skeleton className="h-4 w-16" />
                </TableHead>
                <TableHead>
                  <Skeleton className="h-4 w-32" />
                </TableHead>
                <TableHead className="w-[80px]"></TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {Array(5)
                .fill(0)
                .map((_, i) => (
                  <TableRow key={i}>
                    <TableCell>
                      <Skeleton className="h-4 w-48" />
                    </TableCell>
                    <TableCell>
                      <Skeleton className="h-6 w-16" />
                    </TableCell>
                    <TableCell>
                      <Skeleton className="h-4 w-24" />
                    </TableCell>
                    <TableCell>
                      <Skeleton className="h-8 w-8" />
                    </TableCell>
                  </TableRow>
                ))}
            </TableBody>
          </Table>
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/admin/user-management.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Badge } from "@/components/ui/badge"
import { MoreHorizontal, Search, UserPlus } from "lucide-react"
import { AddUserDialog } from "@/components/admin/add-user-dialog"
import { EditUserDialog } from "@/components/admin/edit-user-dialog"
import { useToast } from "@/hooks/use-toast"
import { getAllUsersWithRoles } from "@/services/user-role-service"
import type { UserWithRole } from "@/services/user-role-service"

export function UserManagement() {
  const [users, setUsers] = useState<UserWithRole[]>([])
  const [isLoading, setIsLoading] = useState(true)
  const [searchQuery, setSearchQuery] = useState("")
  const [addUserOpen, setAddUserOpen] = useState(false)
  const [editUserOpen, setEditUserOpen] = useState(false)
  const [selectedUser, setSelectedUser] = useState<UserWithRole | null>(null)
  const { toast } = useToast()

// Fetch users on component mount
  useState(() => {
    async function fetchUsers() {
      try {
        const fetchedUsers = await getAllUsersWithRoles()
        setUsers(fetchedUsers)
      } catch (error) {
        console.error("Error fetching users:", error)
        toast({
          title: "Error",
          description: "Failed to load users. Please try again.",
          variant: "destructive",
        })
      } finally {
        setIsLoading(false)
      }
    }

fetchUsers()
  }, [toast])

const filteredUsers = users.filter(
    (user) =>
      user.email.toLowerCase().includes(searchQuery.toLowerCase()) ||
      user.role.toLowerCase().includes(searchQuery.toLowerCase()),
  )

const handleEditUser = (user: UserWithRole) => {
    setSelectedUser(user)
    setEditUserOpen(true)
  }

const handleUserUpdated = (updatedUser: UserWithRole) => {
    setUsers(users.map((user) => (user.id === updatedUser.id ? updatedUser : user)))
    toast({
      title: "User Updated",
      description: `User ${updatedUser.email} has been updated.`,
    })
  }

const handleUserAdded = (newUser: UserWithRole) => {
    setUsers([...users, newUser])
    toast({
      title: "User Added",
      description: `User ${newUser.email} has been added.`,
    })
  }

return (
    <>
      <Card>
        <CardHeader>
          <div className="flex items-center justify-between">
            <div>
              <CardTitle>Users</CardTitle>
              <CardDescription>Manage user accounts and permissions.</CardDescription>
            </div>
            <Button onClick={() => setAddUserOpen(true)}>
              <UserPlus className="mr-2 h-4 w-4" />
              Add User
            </Button>
          </div>
        </CardHeader>
        <CardContent>
          <div className="mb-4 flex items-center gap-2">
            <Search className="h-4 w-4 text-muted-foreground" />
            <Input
              placeholder="Search users..."
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="max-w-sm"
            />
          </div>

<div className="rounded-md border">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Email</TableHead>
                  <TableHead>Role</TableHead>
                  <TableHead>Last Sign In</TableHead>
                  <TableHead className="w-[80px]"></TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {isLoading ? (
                  <TableRow>
                    <TableCell colSpan={4} className="text-center py-8">
                      Loading users...
                    </TableCell>
                  </TableRow>
                ) : filteredUsers.length === 0 ? (
                  <TableRow>
                    <TableCell colSpan={4} className="text-center py-8">
                      No users found.
                    </TableCell>
                  </TableRow>
                ) : (
                  filteredUsers.map((user) => (
                    <TableRow key={user.id}>
                      <TableCell>{user.email}</TableCell>
                      <TableCell>
                        <Badge
                          variant={user.role === "admin" ? "default" : user.role === "editor" ? "secondary" : "outline"}
                        >
                          {user.role}
                        </Badge>
                      </TableCell>
                      <TableCell>
                        {user.last_sign_in_at ? new Date(user.last_sign_in_at).toLocaleDateString() : "Never"}
                      </TableCell>
                      <TableCell>
                        <DropdownMenu>
                          <DropdownMenuTrigger asChild>
                            <Button variant="ghost" className="h-8 w-8 p-0">
                              <span className="sr-only">Open menu</span>
                              <MoreHorizontal className="h-4 w-4" />
                            </Button>
                          </DropdownMenuTrigger>
                          <DropdownMenuContent align="end">
                            <DropdownMenuLabel>Actions</DropdownMenuLabel>
                            <DropdownMenuSeparator />
                            <DropdownMenuItem onClick={() => handleEditUser(user)}>Edit</DropdownMenuItem>
                            <DropdownMenuItem
                              className="text-red-600"
                              onClick={() => {
                                // Handle delete user
                              }}
                            >
                              Delete
                            </DropdownMenuItem>
                          </DropdownMenuContent>
                        </DropdownMenu>
                      </TableCell>
                    </TableRow>
                  ))
                )}
              </TableBody>
            </Table>
          </div>
        </CardContent>
      </Card>

{selectedUser && (
        <EditUserDialog
          open={editUserOpen}
          onOpenChange={setEditUserOpen}
          user={selectedUser}
          onUserUpdated={handleUserUpdated}
        />
      )}
    </>
  )
}
[V0_FILE]typescriptreact:file="components/ai-content-generator/enhanced-ai-content-panel.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Checkbox } from "@/components/ui/checkbox"
import { Loader2, Copy, Edit, Save, Check, Clock, FileText, AlertCircle } from "lucide-react"
import { useToast } from "@/hooks/use-toast"
import { generateAIContent, saveGeneratedContent } from "@/app/actions/ai-content-actions"
import type { ContentType, AIContentRequest } from "@/types/ai-content"
import ReactMarkdown from "react-markdown"
import { useRouter } from "next/navigation"
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"

const contentTypes: ContentType[] = [
  {
    id: "industry-analysis",
    name: "Industry Analysis",
    description: "Comprehensive overview of an industry",
    requiresIndustry: true,
    sections: [
      { id: "overview", title: "Industry Overview", description: "General overview of the industry", required: true },
      {
        id: "market-size",
        title: "Market Size & Growth",
        description: "Market size and growth projections",
        required: true,
      },
      { id: "key-players", title: "Key Players", description: "Major companies in the industry", required: true },
      { id: "business-models", title: "Business Models", description: "Common business models in the industry" },
      { id: "trends", title: "Industry Trends", description: "Current and emerging trends" },
      { id: "regulations", title: "Regulatory Environment", description: "Key regulations affecting the industry" },
      { id: "kpis", title: "Key Performance Indicators", description: "Important metrics for the industry" },
    ],
  },
  {
    id: "company-profile",
    name: "Company Profile",
    description: "Detailed analysis of a specific company",
    requiresTicker: true,
    requiresIndustry: true,
    sections: [
      {
        id: "business-overview",
        title: "Business Overview",
        description: "Overview of the company's business",
        required: true,
      },
      { id: "products", title: "Products & Services", description: "Key products and services", required: true },
      {
        id: "financials",
        title: "Financial Analysis",
        description: "Analysis of financial performance",
        required: true,
      },
      { id: "competitive", title: "Competitive Position", description: "Position relative to competitors" },
      { id: "growth", title: "Growth Strategy", description: "Company's strategy for growth" },
      { id: "management", title: "Management Assessment", description: "Evaluation of the management team" },
      { id: "risks", title: "Key Risks", description: "Major risks facing the company" },
    ],
  },
  {
    id: "market-trends",
    name: "Market Trends",
    description: "Current and emerging trends in the market",
    requiresIndustry: true,
    sections: [
      {
        id: "current-trends",
        title: "Current Market Trends",
        description: "Existing trends in the market",
        required: true,
      },
      { id: "emerging-tech", title: "Emerging Technologies", description: "New technologies affecting the market" },
      { id: "consumer-behavior", title: "Consumer Behavior Shifts", description: "Changes in consumer behavior" },
      {
        id: "competitive-evolution",
        title: "Competitive Landscape Evolution",
        description: "How competition is changing",
      },
      { id: "future-outlook", title: "Future Outlook", description: "Projections for the next 1-3 years" },
    ],
  },
  {
    id: "competitive-landscape",
    name: "Competitive Landscape",
    description: "Analysis of key players and competition",
    requiresIndustry: true,
    sections: [
      {
        id: "major-players",
        title: "Major Players Overview",
        description: "Overview of key competitors",
        required: true,
      },
      { id: "market-share", title: "Market Share Analysis", description: "Analysis of market share distribution" },
      {
        id: "competitive-advantages",
        title: "Competitive Advantages",
        description: "Comparison of competitive advantages",
      },
      { id: "business-models", title: "Business Model Comparison", description: "Comparison of business models" },
      { id: "growth-strategies", title: "Growth Strategies", description: "Comparison of growth strategies" },
      { id: "future-outlook", title: "Future Competitive Outlook", description: "Projected competitive changes" },
    ],
  },
  {
    id: "investment-thesis",
    name: "Investment Thesis",
    description: "Structured investment case for a company",
    requiresTicker: true,
    requiresIndustry: true,
    sections: [
      { id: "summary", title: "Investment Summary", description: "Summary of the investment case", required: true },
      { id: "background", title: "Company Background", description: "Background information on the company" },
      { id: "positioning", title: "Industry Positioning", description: "Company's position in the industry" },
      { id: "catalysts", title: "Growth Catalysts", description: "Factors that could drive growth" },
      { id: "financials", title: "Financial Analysis", description: "Analysis of financial performance" },
      { id: "valuation", title: "Valuation Assessment", description: "Assessment of current valuation" },
      { id: "risks", title: "Risks & Mitigating Factors", description: "Key risks and how they might be mitigated" },
      { id: "conclusion", title: "Investment Conclusion", description: "Final investment recommendation" },
    ],
  },
  {
    id: "risk-analysis",
    name: "Risk Analysis",
    description: "Key risks and mitigating factors",
    requiresIndustry: true,
    sections: [
      { id: "key-risks", title: "Key Risk Factors", description: "Major risk factors", required: true },
      { id: "competitive-threats", title: "Competitive Threats", description: "Threats from competitors" },
      { id: "regulatory-risks", title: "Regulatory Risks", description: "Risks from regulations" },
      { id: "financial-risks", title: "Financial Risks", description: "Financial and market risks" },
      { id: "operational-risks", title: "Operational Risks", description: "Risks in operations" },
      { id: "mitigation", title: "Risk Mitigation Strategies", description: "Strategies to mitigate risks" },
      { id: "risk-reward", title: "Risk-Reward Assessment", description: "Assessment of risk vs. reward" },
    ],
  },
]

export function EnhancedAIContentPanel() {
  const { toast } = useToast()
  const router = useRouter()
  const [contentType, setContentType] = useState<string>("industry-analysis")
  const [ticker, setTicker] = useState<string>("")
  const [industry, setIndustry] = useState<string>("")
  const [additionalContext, setAdditionalContext] = useState<string>("")
  const [selectedSections, setSelectedSections] = useState<string[]>([])
  const [depth, setDepth] = useState<"basic" | "standard" | "comprehensive">("standard")
  const [tone, setTone] = useState<"neutral" | "bullish" | "bearish">("neutral")
  const [isGenerating, setIsGenerating] = useState<boolean>(false)
  const [generatedContent, setGeneratedContent] = useState<string>("")
  const [contentTitle, setContentTitle] = useState<string>("")
  const [isSaving, setIsSaving] = useState<boolean>(false)
  const [showAdvancedOptions, setShowAdvancedOptions] = useState<boolean>(false)
  const [saveError, setSaveError] = useState<string | null>(null)
  const [saveSuccess, setSaveSuccess] = useState<boolean>(false)
  const [savedSectionId, setSavedSectionId] = useState<string | null>(null)
  const [metadata, setMetadata] = useState<{
    wordCount?: number
    readingTime?: number
    generatedAt?: string
  } | null>(null)
  const [activeTab, setActiveTab] = useState<string>("generate")

// Get the current content type configuration
  const currentContentType = contentTypes.find((type) => type.id === contentType) || contentTypes[0]

// Initialize selected sections with required sections
  useEffect(() => {
    const requiredSections = currentContentType.sections
      .filter((section) => section.required)
      .map((section) => section.id)

setSelectedSections(requiredSections)
  }, [contentType, currentContentType.sections])

const handleSectionToggle = (sectionId: string, checked: boolean) => {
    if (checked) {
      setSelectedSections([...selectedSections, sectionId])
    } else {
      setSelectedSections(selectedSections.filter((id) => id !== sectionId))
    }
  }

const handleGenerate = async () => {
    // Reset any previous save states
    setSaveError(null)
    setSaveSuccess(false)
    setSavedSectionId(null)

// Validate inputs
    if (currentContentType.requiresIndustry && !industry.trim()) {
      toast({
        title: "Industry Required",
        description: "Please enter an industry name",
        variant: "destructive",
      })
      return
    }

if (currentContentType.requiresTicker && !ticker.trim()) {
      toast({
        title: "Ticker Required",
        description: "Please enter a company ticker",
        variant: "destructive",
      })
      return
    }

setIsGenerating(true)

try {
      // Prepare the request
      const request: AIContentRequest = {
        contentType,
        ticker: ticker.trim(),
        industry: industry.trim(),
        additionalContext: additionalContext.trim(),
        sections: selectedSections.map((id) => {
          const section = currentContentType.sections.find((s) => s.id === id)
          return section ? section.title : id
        }),
        depth,
        tone,
      }

// Generate the content
      const result = await generateAIContent(request)

if (result.error) {
        toast({
          title: "Generation Failed",
          description: result.error,
          variant: "destructive",
        })
        setIsGenerating(false)
        return
      }

// Set the generated content and metadata
      setGeneratedContent(result.content)
      setMetadata(result.metadata || null)

// Set a default title based on the content type and industry/ticker
      let defaultTitle = ""
      if (contentType === "company-profile" || contentType === "investment-thesis") {
        defaultTitle = `${ticker} - ${currentContentType.name}`
      } else {
        defaultTitle = `${industry} ${currentContentType.name}`
      }
      setContentTitle(defaultTitle)

toast({
        title: "Content Generated",
        description: "Your content has been generated successfully",
      })

// Switch to the preview tab after successful generation
      setActiveTab("preview")
    } catch (error) {
      console.error("Error generating content:", error)
      toast({
        title: "Generation Failed",
        description: "An unexpected error occurred. Please try again.",
        variant: "destructive",
      })
    } finally {
      setIsGenerating(false)
    }
  }

const handleCopyContent = () => {
    navigator.clipboard.writeText(generatedContent)
    toast({
      title: "Copied to Clipboard",
      description: "Content has been copied to your clipboard",
    })
  }

const handleSaveContent = async () => {
    // Reset previous save states
    setSaveError(null)
    setSaveSuccess(false)
    setSavedSectionId(null)

if (!contentTitle.trim()) {
      toast({
        title: "Title Required",
        description: "Please enter a title for your content",
        variant: "destructive",
      })
      return
    }

setIsSaving(true)

try {
      const result = await saveGeneratedContent(generatedContent, contentTitle, contentType)

if (!result.success) {
        setSaveError(result.message)
        toast({
          title: "Save Failed",
          description: result.message,
          variant: "destructive",
        })
        return
      }

// Set success state
      setSaveSuccess(true)
      setSavedSectionId(result.sectionId || null)

toast({
        title: "Content Saved",
        description: "Your content has been saved successfully to the primer",
      })

// Don't reset the form immediately to allow the user to see the success message
      // We'll let them navigate away or reset manually
    } catch (error) {
      console.error("Error saving content:", error)
      setSaveError("An unexpected error occurred. Please try again.")
      toast({
        title: "Save Failed",
        description: "An unexpected error occurred. Please try again.",
        variant: "destructive",
      })
    } finally {
      setIsSaving(false)
    }
  }

const handleViewSavedContent = () => {
    if (savedSectionId) {
      router.push(`/investment-primer?section=${savedSectionId}`)
    }
  }

const handleReset = () => {
    // Reset the form after successful save
    setGeneratedContent("")
    setContentTitle("")
    setMetadata(null)
    setSaveSuccess(false)
    setSavedSectionId(null)
    setSaveError(null)
    setActiveTab("generate")
  }

return (
    <Card className="w-full">
      <CardHeader>
        <CardTitle>AI Content Generator</CardTitle>
        <CardDescription>Generate high-quality investment content with AI</CardDescription>
      </CardHeader>
      <CardContent>
        <Tabs value={activeTab} onValueChange={setActiveTab}>
          <TabsList className="mb-4">
            <TabsTrigger value="generate" onClick={() => setActiveTab("generate")}>
              <FileText className="h-4 w-4 mr-2" />
              Generate
            </TabsTrigger>
            <TabsTrigger
              value="preview"
              onClick={() => (generatedContent ? setActiveTab("preview") : null)}
              disabled={!generatedContent}
            >
              <Edit className="h-4 w-4 mr-2" />
              Preview & Save
            </TabsTrigger>
          </TabsList>

<TabsContent value="generate" className="space-y-6">
            <div className="space-y-4">
              <div>
                <Label htmlFor="content-type">Content Type</Label>
                <Select value={contentType} onValueChange={setContentType}>
                  <SelectTrigger id="content-type">
                    <SelectValue placeholder="Select content type" />
                  </SelectTrigger>
                  <SelectContent>
                    {contentTypes.map((type) => (
                      <SelectItem key={type.id} value={type.id}>
                        {type.name}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
                <p className="text-sm text-muted-foreground mt-1">{currentContentType.description}</p>
              </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                {currentContentType.requiresTicker && (
                  <div>
                    <Label htmlFor="ticker">Company Ticker</Label>
                    <Input
                      id="ticker"
                      value={ticker}
                      onChange={(e) => setTicker(e.target.value)}
                      placeholder="e.g., AAPL"
                    />
                  </div>
                )}

{currentContentType.requiresIndustry && (
                  <div>
                    <Label htmlFor="industry">Industry</Label>
                    <Input
                      id="industry"
                      value={industry}
                      onChange={(e) => setIndustry(e.target.value)}
                      placeholder="e.g., Financial Software"
                    />
                  </div>
                )}
              </div>

<div>
                <div className="flex justify-between items-center mb-2">
                  <Label>Sections to Include</Label>
                </div>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-2 border rounded-md p-3">
                  {currentContentType.sections.map((section) => (
                    <div key={section.id} className="flex items-start space-x-2">
                      <Checkbox
                        id={`section-${section.id}`}
                        checked={selectedSections.includes(section.id)}
                        onCheckedChange={(checked) => handleSectionToggle(section.id, checked === true)}
                        disabled={section.required}
                      />
                      <div className="grid gap-1.5 leading-none">
                        <label
                          htmlFor={`section-${section.id}`}
                          className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                        >
                          {section.title}
                          {section.required && <span className="text-xs text-muted-foreground ml-1">(Required)</span>}
                        </label>
                        <p className="text-xs text-muted-foreground">{section.description}</p>
                      </div>
                    </div>
                  ))}
                </div>
              </div>

<div>
                <Label htmlFor="additional-context">Additional Context (Optional)</Label>
                <Textarea
                  id="additional-context"
                  value={additionalContext}
                  onChange={(e) => setAdditionalContext(e.target.value)}
                  placeholder="Add specific points you'd like the AI to address..."
                  rows={3}
                />
              </div>

<div>
                <Button
                  variant="outline"
                  type="button"
                  onClick={() => setShowAdvancedOptions(!showAdvancedOptions)}
                  className="w-full justify-start"
                >
                  {showAdvancedOptions ? "Hide" : "Show"} Advanced Options
                </Button>

{showAdvancedOptions && (
                  <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
                    <div>
                      <Label htmlFor="depth">Content Depth</Label>
                      <Select value={depth} onValueChange={(value: any) => setDepth(value)}>
                        <SelectTrigger id="depth">
                          <SelectValue placeholder="Select depth" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="basic">Basic</SelectItem>
                          <SelectItem value="standard">Standard</SelectItem>
                          <SelectItem value="comprehensive">Comprehensive</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>

<div>
                      <Label htmlFor="tone">Content Tone</Label>
                      <Select value={tone} onValueChange={(value: any) => setTone(value)}>
                        <SelectTrigger id="tone">
                          <SelectValue placeholder="Select tone" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="neutral">Neutral</SelectItem>
                          <SelectItem value="bullish">Bullish</SelectItem>
                          <SelectItem value="bearish">Bearish</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>
                  </div>
                )}
              </div>

<div className="flex justify-end">
                <Button onClick={handleGenerate} disabled={isGenerating} type="button">
                  {isGenerating ? (
                    <>
                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                      Generating...
                    </>
                  ) : (
                    "Generate Content"
                  )}
                </Button>
              </div>
            </div>
          </TabsContent>

<TabsContent value="preview" className="space-y-6">
            {generatedContent && (
              <div className="space-y-4">
                {saveSuccess && (
                  <Alert className="bg-green-50 border-green-200">
                    <Check className="h-4 w-4 text-green-600" />
                    <AlertTitle className="text-green-800">Content Saved Successfully</AlertTitle>
                    <AlertDescription className="text-green-700">
                      Your content has been saved to the primer.
                    </AlertDescription>
                    <div className="flex gap-2 mt-2">
                      <Button size="sm" variant="outline" onClick={handleReset}>
                        Create New Content
                      </Button>
                      {savedSectionId && (
                        <Button size="sm" onClick={handleViewSavedContent}>
                          View in Primer
                        </Button>
                      )}
                    </div>
                  </Alert>
                )}

{saveError && (
                  <Alert variant="destructive">
                    <AlertCircle className="h-4 w-4" />
                    <AlertTitle>Save Failed</AlertTitle>
                    <AlertDescription>{saveError}</AlertDescription>
                  </Alert>
                )}

<div>
                  <Label htmlFor="content-title">Content Title</Label>
                  <Input
                    id="content-title"
                    value={contentTitle}
                    onChange={(e) => setContentTitle(e.target.value)}
                    placeholder="Enter a title for this content"
                    disabled={saveSuccess}
                  />
                </div>

<div className="border rounded-md p-4">
                  <div className="flex justify-between items-center mb-4">
                    <h3 className="font-medium">Generated Content</h3>
                    <div className="flex gap-2">
                      <Button variant="outline" size="sm" onClick={handleCopyContent}>
                        <Copy className="h-4 w-4 mr-1" />
                        Copy
                      </Button>
                      {!saveSuccess && (
                        <Button size="sm" onClick={handleSaveContent} disabled={isSaving}>
                          {isSaving ? (
                            <>
                              <Loader2 className="mr-1 h-4 w-4 animate-spin" />
                              Saving...
                            </>
                          ) : (
                            <>
                              <Save className="h-4 w-4 mr-1" />
                              Save to Primer
                            </>
                          )}
                        </Button>
                      )}
                    </div>
                  </div>

{metadata && (
                    <div className="flex gap-4 mb-4 text-sm text-muted-foreground">
                      {metadata.wordCount && (
                        <div className="flex items-center">
                          <FileText className="h-4 w-4 mr-1" />
                          {metadata.wordCount} words
                        </div>
                      )}
                      {metadata.readingTime && (
                        <div className="flex items-center">
                          <Clock className="h-4 w-4 mr-1" />
                          {metadata.readingTime} min read
                        </div>
                      )}
                      {metadata.generatedAt && (
                        <div className="flex items-center">
                          <Check className="h-4 w-4 mr-1" />
                          Generated {new Date(metadata.generatedAt).toLocaleDateString()}
                        </div>
                      )}
                    </div>
                  )}

<div className="prose prose-sm max-w-none overflow-auto max-h-[500px] p-4 bg-muted/50 rounded-md">
                    <ReactMarkdown>{generatedContent}</ReactMarkdown>
                  </div>
                </div>

<div className="flex justify-between">
                  <Button variant="outline" onClick={() => setActiveTab("generate")} disabled={isSaving}>
                    Back to Generator
                  </Button>
                  {!saveSuccess && (
                    <Button onClick={handleSaveContent} disabled={isSaving}>
                      {isSaving ? (
                        <>
                          <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                          Saving...
                        </>
                      ) : (
                        "Save to Primer"
                      )}
                    </Button>
                  )}
                </div>
              </div>
            )}
          </TabsContent>
        </Tabs>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/ai-enhanced-editor.tsx" isMerged="true"
"use client"

import { useState, useEffect, useRef } from "react"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Textarea } from "@/components/ui/textarea"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Badge } from "@/components/ui/badge"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { AlertCircle, Check, Copy, Lightbulb, RefreshCw, Save, Wand2, X } from "lucide-react"
import { type AIFeedback, type AIPreference, FeedbackType, FeedbackSeverity } from "@/types/ai-feedback"
import { generateContentWithGemini, enhanceContentWithFeedback } from "@/app/actions/ai-actions"
import {
  getAIPreferences,
  addAIFeedback,
  getAIFeedbackForContent,
  updateAIFeedback,
} from "@/services/ai-content-service"

interface AIEnhancedEditorProps {
  initialContent?: string
  contentId?: string
  contentType?: "investment_idea" | "newsletter" | "report"
  onSave?: (content: string) => void
  readOnly?: boolean
}

export function AIEnhancedEditor({
  initialContent = "",
  contentId = `content-${Date.now()}`,
  contentType = "investment_idea",
  onSave,
  readOnly = false,
}: AIEnhancedEditorProps) {
  const [content, setContent] = useState(initialContent)
  const [selectedPreference, setSelectedPreference] = useState<string>("pref-default")
  const [preferences, setPreferences] = useState<AIPreference[]>([])
  const [activeTab, setActiveTab] = useState("edit")
  const [prompt, setPrompt] = useState("")
  const [isGenerating, setIsGenerating] = useState(false)
  const [generationError, setGenerationError] = useState<string | null>(null)
  const [feedback, setFeedback] = useState<AIFeedback[]>([])
  const [selectedText, setSelectedText] = useState("")
  const [isFeedbackDialogOpen, setIsFeedbackDialogOpen] = useState(false)
  const [newFeedback, setNewFeedback] = useState<{
    type: FeedbackType
    severity: FeedbackSeverity
    suggestedText: string
    comment: string
  }>({
    type: FeedbackType.CONTENT,
    severity: FeedbackSeverity.SUGGESTION,
    suggestedText: "",
    comment: "",
  })
  const textareaRef = useRef<HTMLTextAreaElement>(null)
  const preferencesLoaded = useRef(false)
  const [isDialogOpen, setIsDialogOpen] = useState(false)

// Load preferences and feedback
  useEffect(() => {
    if (!preferencesLoaded.current) {
      const prefs = getAIPreferences()
      setPreferences(prefs)
      preferencesLoaded.current = true
    }

if (contentId) {
      const feedbackItems = getAIFeedbackForContent(contentId)
      setFeedback(feedbackItems)
    }
  }, [contentId])

// Handle text selection
  const handleTextSelection = () => {
    if (textareaRef.current) {
      const start = textareaRef.current.selectionStart
      const end = textareaRef.current.selectionEnd

if (start !== end) {
        const selected = content.substring(start, end)
        setSelectedText(selected)
        setNewFeedback((prev) => ({
          ...prev,
          suggestedText: selected,
        }))
      }
    }
  }

// Generate content
  const handleGenerateContent = async () => {
    if (!prompt.trim()) {
      return
    }

setIsGenerating(true)
    setGenerationError(null)

try {
      const result = await generateContentWithGemini(prompt, selectedPreference)

if (result.error) {
        setGenerationError(result.error)
      } else {
        setContent(result.content)
      }
    } catch (error) {
      setGenerationError(`Error generating content: ${(error as Error).message}`)
    } finally {
      setIsGenerating(false)
    }
  }

// Add feedback
  const handleAddFeedback = () => {
    if (!selectedText || !newFeedback.suggestedText) {
      return
    }

const feedbackItem: Omit<AIFeedback, "id" | "createdAt" | "updatedAt"> = {
      contentId,
      contentType,
      originalText: selectedText,
      suggestedText: newFeedback.suggestedText,
      type: newFeedback.type,
      severity: newFeedback.severity,
      comment: newFeedback.comment,
      accepted: false,
    }

const addedFeedback = addAIFeedback(feedbackItem)
    setFeedback([...feedback, addedFeedback])
    setIsFeedbackDialogOpen(false)
    setSelectedText("")
    setNewFeedback({
      type: FeedbackType.CONTENT,
      severity: FeedbackSeverity.SUGGESTION,
      suggestedText: "",
      comment: "",
    })
  }

// Accept feedback
  const handleAcceptFeedback = async (id: string) => {
    const updatedFeedback = updateAIFeedback(id, { accepted: true })

if (updatedFeedback) {
      // Update the feedback list
      setFeedback(feedback.map((item) => (item.id === id ? updatedFeedback : item)))

// Apply the feedback to the content
      if (updatedFeedback.originalText && updatedFeedback.suggestedText) {
        setContent(content.replace(updatedFeedback.originalText, updatedFeedback.suggestedText))
      }
    }
  }

// Reject feedback
  const handleRejectFeedback = (id: string) => {
    const updatedFeedback = updateAIFeedback(id, { accepted: false })

if (updatedFeedback) {
      setFeedback(feedback.map((item) => (item.id === id ? updatedFeedback : item)))
    }
  }

// Apply all accepted feedback
  const handleApplyAllFeedback = async () => {
    try {
      const result = await enhanceContentWithFeedback(content, feedback, selectedPreference)

if (result.error) {
        setGenerationError(result.error)
      } else {
        setContent(result.enhancedContent)
      }
    } catch (error) {
      setGenerationError(`Error applying feedback: ${(error as Error).message}`)
    }
  }

// Save content
  const handleSaveContent = () => {
    if (onSave) {
      onSave(content)
    }
  }

// Get feedback type badge color
  const getFeedbackTypeColor = (type: FeedbackType) => {
    switch (type) {
      case FeedbackType.STYLE:
        return "bg-purple-100 text-purple-800"
      case FeedbackType.CONTENT:
        return "bg-blue-100 text-blue-800"
      case FeedbackType.ACCURACY:
        return "bg-red-100 text-red-800"
      case FeedbackType.TONE:
        return "bg-green-100 text-green-800"
      case FeedbackType.STRUCTURE:
        return "bg-orange-100 text-orange-800"
      case FeedbackType.GRAMMAR:
        return "bg-indigo-100 text-indigo-800"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

// Get feedback severity badge color
  const getFeedbackSeverityColor = (severity: FeedbackSeverity) => {
    switch (severity) {
      case FeedbackSeverity.SUGGESTION:
        return "bg-blue-100 text-blue-800"
      case FeedbackSeverity.MINOR:
        return "bg-green-100 text-green-800"
      case FeedbackSeverity.MAJOR:
        return "bg-amber-100 text-amber-800"
      case FeedbackSeverity.CRITICAL:
        return "bg-red-100 text-red-800"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

return (
    <Card className="w-full">
      <CardHeader>
        <CardTitle>AI-Enhanced Editor</CardTitle>
        <CardDescription>Create and edit content with AI assistance</CardDescription>
      </CardHeader>
      <CardContent>
        <Tabs value={activeTab} onValueChange={setActiveTab}>
          <TabsList className="grid w-full grid-cols-3">
            <TabsTrigger value="edit">Edit</TabsTrigger>
            <TabsTrigger value="generate">Generate</TabsTrigger>
            <TabsTrigger value="feedback">Feedback ({feedback.length})</TabsTrigger>
          </TabsList>

<TabsContent value="edit" className="space-y-4">
            <div className="flex justify-between items-center">
              <div className="flex items-center space-x-2">
                <Label htmlFor="ai-preference">AI Preference:</Label>
                <Select value={selectedPreference} onValueChange={setSelectedPreference}>
                  <SelectTrigger className="w-[200px]">
                    <SelectValue placeholder="Select preference" />
                  </SelectTrigger>
                  <SelectContent>
                    {preferences.map((pref) => (
                      <SelectItem key={pref.id} value={pref.id}>
                        {pref.name}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>

<div className="flex space-x-2">
                <TooltipProvider>
                  <Tooltip>
                    <TooltipTrigger asChild>
                      <Button
                        variant="outline"
                        size="icon"
                        onClick={() => setIsFeedbackDialogOpen(true)}
                        disabled={!selectedText}
                      >
                        <Lightbulb className="h-4 w-4" />
                      </Button>
                    </TooltipTrigger>
                    <TooltipContent>
                      <p>Add feedback (select text first)</p>
                    </TooltipContent>
                  </Tooltip>
                </TooltipProvider>

<TooltipProvider>
                  <Tooltip>
                    <TooltipTrigger asChild>
                      <Button variant="outline" size="icon" onClick={handleSaveContent}>
                        <Save className="h-4 w-4" />
                      </Button>
                    </TooltipTrigger>
                    <TooltipContent>
                      <p>Save content</p>
                    </TooltipContent>
                  </Tooltip>
                </TooltipProvider>
              </div>
            </div>

<Textarea
              ref={textareaRef}
              value={content}
              onChange={(e) => setContent(e.target.value)}
              onSelect={handleTextSelection}
              placeholder="Enter or edit content here..."
              className="min-h-[400px] font-mono"
              readOnly={readOnly}
            />
          </TabsContent>

<TabsContent value="generate" className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="prompt">Generation Prompt</Label>
              <Textarea
                id="prompt"
                value={prompt}
                onChange={(e) => setPrompt(e.target.value)}
                placeholder="Describe what content you want to generate..."
                className="min-h-[100px]"
              />
            </div>

<div className="flex justify-between items-center">
              <div className="flex items-center space-x-2">
                <Label htmlFor="ai-preference-generate">AI Preference:</Label>
                <Select value={selectedPreference} onValueChange={setSelectedPreference}>
                  <SelectTrigger className="w-[200px]">
                    <SelectValue placeholder="Select preference" />
                  </SelectTrigger>
                  <SelectContent>
                    {preferences.map((pref) => (
                      <SelectItem key={pref.id} value={pref.id}>
                        {pref.name}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>

<Button onClick={handleGenerateContent} disabled={isGenerating || !prompt.trim()}>
                {isGenerating ? (
                  <>
                    <RefreshCw className="mr-2 h-4 w-4 animate-spin" />
                    Generating...
                  </>
                ) : (
                  <>
                    <Wand2 className="mr-2 h-4 w-4" />
                    Generate Content
                  </>
                )}
              </Button>
            </div>

{generationError && (
              <div className="bg-red-50 p-3 rounded-md flex items-start">
                <AlertCircle className="h-5 w-5 text-red-500 mr-2 mt-0.5 flex-shrink-0" />
                <p className="text-sm text-red-700">{generationError}</p>
              </div>
            )}

<div className="space-y-2">
              <Label htmlFor="generated-content">Generated Content</Label>
              <div className="relative">
                <Textarea id="generated-content" value={content} readOnly className="min-h-[300px] font-mono" />
                <Button
                  variant="outline"
                  size="sm"
                  className="absolute top-2 right-2"
                  onClick={() => {
                    navigator.clipboard.writeText(content)
                  }}
                >
                  <Copy className="h-3 w-3 mr-1" />
                  Copy
                </Button>
              </div>
            </div>
          </TabsContent>

<TabsContent value="feedback" className="space-y-4">
            {feedback.length === 0 ? (
              <div className="text-center py-8 text-muted-foreground">
                No feedback available. Select text and add feedback to improve your content.
              </div>
            ) : (
              <>
                <div className="flex justify-between items-center">
                  <h3 className="text-lg font-medium">Content Feedback</h3>
                  <Button onClick={handleApplyAllFeedback}>Apply All Accepted Feedback</Button>
                </div>

<ScrollArea className="h-[400px]">
                  <div className="space-y-4">
                    {feedback.map((item) => (
                      <Card key={item.id}>
                        <CardHeader className="p-4 pb-2">
                          <div className="flex justify-between items-start">
                            <div className="flex flex-wrap gap-2">
                              <Badge className={getFeedbackTypeColor(item.type)}>{item.type}</Badge>
                              <Badge className={getFeedbackSeverityColor(item.severity)}>{item.severity}</Badge>
                            </div>
                            <div className="flex space-x-2">
                              {!item.accepted ? (
                                <Button variant="outline" size="sm" onClick={() => handleAcceptFeedback(item.id)}>
                                  <Check className="h-3 w-3 mr-1" />
                                  Accept
                                </Button>
                              ) : (
                                <Button variant="outline" size="sm" onClick={() => handleRejectFeedback(item.id)}>
                                  <X className="h-3 w-3 mr-1" />
                                  Reject
                                </Button>
                              )}
                            </div>
                          </div>
                        </CardHeader>
                        <CardContent className="p-4 pt-2">
                          <div className="space-y-3">
                            <div>
                              <Label className="text-sm text-muted-foreground">Original Text:</Label>
                              <div className="p-2 bg-muted rounded-md mt-1 text-sm">{item.originalText}</div>
                            </div>

<div>
                              <Label className="text-sm text-muted-foreground">Suggested Text:</Label>
                              <div className="p-2 bg-muted rounded-md mt-1 text-sm">
                                {item.suggestedText || "No suggestion provided"}
                              </div>
                            </div>

{item.comment && (
                              <div>
                                <Label className="text-sm text-muted-foreground">Comment:</Label>
                                <div className="p-2 bg-muted rounded-md mt-1 text-sm">{item.comment}</div>
                              </div>
                            )}
                          </div>
                        </CardContent>
                      </Card>
                    ))}
                  </div>
                </ScrollArea>
              </>
            )}
          </TabsContent>
        </Tabs>
      </CardContent>
      <CardFooter className="flex justify-between">
        <div className="text-sm text-muted-foreground">
          {feedback.length} feedback items ({feedback.filter((f) => f.accepted).length} accepted)
        </div>
        <Button onClick={handleSaveContent}>Save Content</Button>
      </CardFooter>

{/* Feedback Dialog */}
      <Dialog open={isFeedbackDialogOpen} onOpenChange={setIsDialogOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Add Feedback</DialogTitle>
            <DialogDescription>Provide feedback on the selected text to improve content quality.</DialogDescription>
          </DialogHeader>

<div className="space-y-4 py-4">
            <div className="space-y-2">
              <Label>Selected Text:</Label>
              <div className="p-2 bg-muted rounded-md text-sm">{selectedText}</div>
            </div>

<div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="feedback-type">Feedback Type</Label>
                <Select
                  value={newFeedback.type}
                  onValueChange={(value) => setNewFeedback({ ...newFeedback, type: value as FeedbackType })}
                >
                  <SelectTrigger id="feedback-type">
                    <SelectValue placeholder="Select type" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value={FeedbackType.STYLE}>Style</SelectItem>
                    <SelectItem value={FeedbackType.CONTENT}>Content</SelectItem>
                    <SelectItem value={FeedbackType.ACCURACY}>Accuracy</SelectItem>
                    <SelectItem value={FeedbackType.TONE}>Tone</SelectItem>
                    <SelectItem value={FeedbackType.STRUCTURE}>Structure</SelectItem>
                    <SelectItem value={FeedbackType.GRAMMAR}>Grammar</SelectItem>
                    <SelectItem value={FeedbackType.OTHER}>Other</SelectItem>
                  </SelectContent>
                </Select>
              </div>

<div className="space-y-2">
                <Label htmlFor="feedback-severity">Severity</Label>
                <Select
                  value={newFeedback.severity}
                  onValueChange={(value) => setNewFeedback({ ...newFeedback, severity: value as FeedbackSeverity })}
                >
                  <SelectTrigger id="feedback-severity">
                    <SelectValue placeholder="Select severity" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value={FeedbackSeverity.SUGGESTION}>Suggestion</SelectItem>
                    <SelectItem value={FeedbackSeverity.MINOR}>Minor</SelectItem>
                    <SelectItem value={FeedbackSeverity.MAJOR}>Major</SelectItem>
                    <SelectItem value={FeedbackSeverity.CRITICAL}>Critical</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>

<div className="space-y-2">
              <Label htmlFor="suggested-text">Suggested Text</Label>
              <Textarea
                id="suggested-text"
                value={newFeedback.suggestedText}
                onChange={(e) => setNewFeedback({ ...newFeedback, suggestedText: e.target.value })}
                placeholder="Enter suggested text..."
                className="min-h-[100px]"
              />
            </div>

<div className="space-y-2">
              <Label htmlFor="feedback-comment">Comment (Optional)</Label>
              <Textarea
                id="feedback-comment"
                value={newFeedback.comment}
                onChange={(e) => setNewFeedback({ ...newFeedback, comment: e.target.value })}
                placeholder="Add a comment explaining your feedback..."
              />
            </div>
          </div>

<DialogFooter>
            <Button variant="outline" onClick={() => setIsFeedbackDialogOpen(false)}>
              Cancel
            </Button>
            <Button onClick={handleAddFeedback}>Add Feedback</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/api-health-check.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { AlertCircle, CheckCircle, RefreshCw } from "lucide-react"
import { apiConfig, checkApiConfiguration } from "@/lib/api-config"

export function ApiHealthCheck() {
  const [apiStatus, setApiStatus] = useState<Record<string, boolean>>({})
  const [isLoading, setIsLoading] = useState(true)
  const [lastChecked, setLastChecked] = useState<Date | null>(null)

// Check API configuration on mount
  useEffect(() => {
    checkApiHealth()
  }, [])

// Check API health
  const checkApiHealth = () => {
    setIsLoading(true)

const { status } = checkApiConfiguration()
    setApiStatus(status)
    setLastChecked(new Date())

setIsLoading(false)
  }

return (
    <Card>
      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
        <div>
          <CardTitle className="text-xl">API Health Check</CardTitle>
          <CardDescription>Check the status of your API integrations</CardDescription>
        </div>
        <Button variant="outline" onClick={checkApiHealth} disabled={isLoading}>
          {isLoading ? <RefreshCw className="h-4 w-4 animate-spin" /> : <RefreshCw className="h-4 w-4" />}
          <span className="ml-2">Refresh</span>
        </Button>
      </CardHeader>
      <CardContent>
        <div className="space-y-4">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <ApiStatusCard
              name="Financial Modeling Prep"
              isConfigured={apiStatus.fmp}
              apiKey={apiConfig.fmp.apiKey}
              description="Stock data and financial statements"
            />

<ApiStatusCard
              name="Kit"
              isConfigured={apiStatus.kit}
              apiKey={apiConfig.kit.apiKey}
              description="Newsletter publishing platform"
            />
          </div>
        </div>
      </CardContent>
      <CardFooter>
        <p className="text-sm text-muted-foreground">
          Last checked: {lastChecked ? lastChecked.toLocaleString() : "Never"}
        </p>
      </CardFooter>
    </Card>
  )
}

interface ApiStatusCardProps {
  name: string
  isConfigured: boolean
  apiKey: string
  description: string
}

function ApiStatusCard({ name, isConfigured, apiKey, description }: ApiStatusCardProps) {
  // Mask API key for display
  const maskedApiKey = apiKey ? `${apiKey.substring(0, 4)}...${apiKey.substring(apiKey.length - 4)}` : "Not configured"

return (
    <Card>
      <CardHeader className="pb-2">
        <div className="flex justify-between items-start">
          <CardTitle className="text-lg">{name}</CardTitle>
          <Badge className={isConfigured ? "bg-green-100 text-green-800" : "bg-red-100 text-red-800"}>
            {isConfigured ? "Configured" : "Not Configured"}
          </Badge>
        </div>
        <CardDescription>{description}</CardDescription>
      </CardHeader>
      <CardContent>
        <div className="flex items-start space-x-2">
          {isConfigured ? (
            <CheckCircle className="h-5 w-5 text-green-500 mt-0.5" />
          ) : (
            <AlertCircle className="h-5 w-5 text-red-500 mt-0.5" />
          )}
          <div>
            <p className="font-medium">API Key</p>
            <p className="text-sm text-muted-foreground font-mono">{maskedApiKey}</p>
          </div>
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/approval-workflow-editor.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Badge } from "@/components/ui/badge"
import { ChevronDown, ChevronUp, Plus, Save, Trash2, UserPlus, Users } from "lucide-react"
import { type ApprovalWorkflow, type ApprovalStep, ApprovalStatus } from "@/types/approval-workflow"
import {
  createApprovalWorkflow,
  updateApprovalWorkflow,
  getApprovalWorkflow,
} from "@/services/approval-workflow-service"
import { toast } from "@/components/ui/use-toast"

interface ApprovalWorkflowEditorProps {
  workflowId?: string
  onSave?: (workflow: ApprovalWorkflow) => void
  onCancel?: () => void
}

export function ApprovalWorkflowEditor({ workflowId, onSave, onCancel }: ApprovalWorkflowEditorProps) {
  const [workflow, setWorkflow] = useState<ApprovalWorkflow>({
    id: "",
    name: "",
    description: "",
    contentTypes: [],
    steps: [],
    createdAt: "",
    updatedAt: "",
  })

const [loading, setLoading] = useState(false)
  const [saving, setSaving] = useState(false)
  const [activeTab, setActiveTab] = useState("details")
  const [availableRoles] = useState([
    { id: "editor", name: "Editor" },
    { id: "senior-editor", name: "Senior Editor" },
    { id: "compliance", name: "Compliance" },
    { id: "legal", name: "Legal" },
    { id: "publisher", name: "Publisher" },
  ])

const [availableUsers] = useState([
    { id: "user-1", name: "John Doe", role: "Editor", email: "john@example.com" },
    { id: "user-2", name: "Jane Smith", role: "Senior Editor", email: "jane@example.com" },
    { id: "user-3", name: "Robert Johnson", role: "Compliance", email: "robert@example.com" },
    { id: "user-4", name: "Sarah Williams", role: "Legal", email: "sarah@example.com" },
    { id: "user-5", name: "Michael Brown", role: "Publisher", email: "michael@example.com" },
  ])

const [availableContentTypes] = useState([
    { id: "investment-idea", name: "Investment Idea" },
    { id: "research-report", name: "Research Report" },
    { id: "market-analysis", name: "Market Analysis" },
    { id: "newsletter", name: "Newsletter" },
  ])

useEffect(() => {
    const fetchWorkflow = async () => {
      if (!workflowId) return

try {
        setLoading(true)
        const data = await getApprovalWorkflow(workflowId)
        setWorkflow(data)
      } catch (err) {
        console.error("Error fetching workflow:", err)
        toast({
          title: "Error",
          description: "Failed to load approval workflow",
          variant: "destructive",
        })
      } finally {
        setLoading(false)
      }
    }

fetchWorkflow()
  }, [workflowId])

const handleSave = async () => {
    try {
      setSaving(true)

// Validate workflow
      if (!workflow.name.trim()) {
        toast({
          title: "Validation Error",
          description: "Workflow name is required",
          variant: "destructive",
        })
        setActiveTab("details")
        return
      }

if (workflow.steps.length === 0) {
        toast({
          title: "Validation Error",
          description: "At least one approval step is required",
          variant: "destructive",
        })
        setActiveTab("steps")
        return
      }

for (const step of workflow.steps) {
        if (!step.name.trim()) {
          toast({
            title: "Validation Error",
            description: "All steps must have a name",
            variant: "destructive",
          })
          setActiveTab("steps")
          return
        }

if (step.approvers.length === 0) {
          toast({
            title: "Validation Error",
            description: `Step "${step.name}" must have at least one approver`,
            variant: "destructive",
          })
          setActiveTab("steps")
          return
        }
      }

// Save workflow
      let savedWorkflow
      if (workflow.id && workflowId) {
        savedWorkflow = await updateApprovalWorkflow(workflowId, workflow)
      } else {
        savedWorkflow = await createApprovalWorkflow(workflow)
      }

toast({
        title: "Success",
        description: "Approval workflow saved successfully",
      })

if (onSave) {
        onSave(savedWorkflow)
      }
    } catch (err) {
      console.error("Error saving workflow:", err)
      toast({
        title: "Error",
        description: "Failed to save approval workflow",
        variant: "destructive",
      })
    } finally {
      setSaving(false)
    }
  }

const addStep = () => {
    const newStep: ApprovalStep = {
      id: `step-${Date.now()}`,
      name: "",
      description: "",
      approvers: [],
      status: ApprovalStatus.PENDING,
      order: workflow.steps.length,
    }

setWorkflow({
      ...workflow,
      steps: [...workflow.steps, newStep],
    })
  }

const updateStep = (index: number, updatedStep: Partial<ApprovalStep>) => {
    const updatedSteps = [...workflow.steps]
    updatedSteps[index] = { ...updatedSteps[index], ...updatedStep }

setWorkflow({
      ...workflow,
      steps: updatedSteps,
    })
  }

const removeStep = (index: number) => {
    const updatedSteps = workflow.steps.filter((_, i) => i !== index)

// Update order of remaining steps
    updatedSteps.forEach((step, i) => {
      step.order = i
    })

setWorkflow({
      ...workflow,
      steps: updatedSteps,
    })
  }

const moveStepUp = (index: number) => {
    if (index === 0) return

const updatedSteps = [...workflow.steps]
    const temp = updatedSteps[index]
    updatedSteps[index] = updatedSteps[index - 1]
    updatedSteps[index - 1] = temp

// Update order
    updatedSteps.forEach((step, i) => {
      step.order = i
    })

setWorkflow({
      ...workflow,
      steps: updatedSteps,
    })
  }

const moveStepDown = (index: number) => {
    if (index === workflow.steps.length - 1) return

const updatedSteps = [...workflow.steps]
    const temp = updatedSteps[index]
    updatedSteps[index] = updatedSteps[index + 1]
    updatedSteps[index + 1] = temp

// Update order
    updatedSteps.forEach((step, i) => {
      step.order = i
    })

setWorkflow({
      ...workflow,
      steps: updatedSteps,
    })
  }

const addApprover = (stepIndex: number, approverType: "user" | "role", approverId: string) => {
    const updatedSteps = [...workflow.steps]
    const step = updatedSteps[stepIndex]

// Find the approver details
    let approver
    if (approverType === "user") {
      approver = availableUsers.find((user) => user.id === approverId)
      if (approver) {
        // Check if this user is already an approver
        const existingApprover = step.approvers.find((a) => a.id === approver?.id)
        if (existingApprover) {
          toast({
            title: "Warning",
            description: `${approver.name} is already an approver for this step`,
            variant: "default",
          })
          return
        }

step.approvers.push({
          id: approver.id,
          name: approver.name,
          email: approver.email,
          role: approver.role,
        })
      }
    } else if (approverType === "role") {
      approver = availableRoles.find((role) => role.id === approverId)
      if (approver) {
        // Check if this role is already an approver
        const existingApprover = step.approvers.find((a) => a.role === approver?.name)
        if (existingApprover) {
          toast({
            title: "Warning",
            description: `${approver.name} role is already an approver for this step`,
            variant: "default",
          })
          return
        }

step.approvers.push({
          role: approver.name,
        })
      }
    }

setWorkflow({
      ...workflow,
      steps: updatedSteps,
    })
  }

const removeApprover = (stepIndex: number, approverIndex: number) => {
    const updatedSteps = [...workflow.steps]
    const step = updatedSteps[stepIndex]

step.approvers = step.approvers.filter((_, i) => i !== approverIndex)

setWorkflow({
      ...workflow,
      steps: updatedSteps,
    })
  }

const toggleContentType = (contentTypeId: string) => {
    const updatedContentTypes = [...workflow.contentTypes]
    const index = updatedContentTypes.indexOf(contentTypeId)

if (index >= 0) {
      updatedContentTypes.splice(index, 1)
    } else {
      updatedContentTypes.push(contentTypeId)
    }

setWorkflow({
      ...workflow,
      contentTypes: updatedContentTypes,
    })
  }

if (loading) {
    return (
      <Card>
        <CardHeader>
          <CardTitle>Approval Workflow</CardTitle>
          <CardDescription>Loading workflow details...</CardDescription>
        </CardHeader>
      </Card>
    )
  }

return (
    <Card className="w-full">
      <CardHeader>
        <CardTitle>{workflowId ? "Edit" : "Create"} Approval Workflow</CardTitle>
        <CardDescription>Configure multi-step approval processes for content items</CardDescription>
      </CardHeader>
      <CardContent>
        <Tabs value={activeTab} onValueChange={setActiveTab}>
          <TabsList className="mb-4">
            <TabsTrigger value="details">Workflow Details</TabsTrigger>
            <TabsTrigger value="steps">Approval Steps</TabsTrigger>
          </TabsList>

<TabsContent value="details" className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="workflow-name">Workflow Name</Label>
              <Input
                id="workflow-name"
                value={workflow.name}
                onChange={(e) => setWorkflow({ ...workflow, name: e.target.value })}
                placeholder="e.g., Standard Content Approval"
              />
            </div>

<div className="space-y-2">
              <Label htmlFor="workflow-description">Description</Label>
              <Textarea
                id="workflow-description"
                value={workflow.description}
                onChange={(e) => setWorkflow({ ...workflow, description: e.target.value })}
                placeholder="Describe the purpose and scope of this approval workflow"
                rows={3}
              />
            </div>

<div className="space-y-2">
              <Label>Applicable Content Types</Label>
              <div className="flex flex-wrap gap-2 mt-2">
                {availableContentTypes.map((contentType) => (
                  <Badge
                    key={contentType.id}
                    variant={workflow.contentTypes.includes(contentType.id) ? "default" : "outline"}
                    className="cursor-pointer"
                    onClick={() => toggleContentType(contentType.id)}
                  >
                    {contentType.name}
                  </Badge>
                ))}
              </div>
            </div>
          </TabsContent>

<TabsContent value="steps" className="space-y-6">
            {workflow.steps.length === 0 ? (
              <div className="text-center py-8 border border-dashed rounded-md">
                <p className="text-muted-foreground mb-4">No approval steps defined yet</p>
                <Button onClick={addStep}>
                  <Plus className="h-4 w-4 mr-2" />
                  Add First Step
                </Button>
              </div>
            ) : (
              <div className="space-y-6">
                {workflow.steps.map((step, index) => (
                  <Card key={step.id} className="relative">
                    <CardHeader className="pb-2">
                      <div className="flex justify-between items-start">
                        <div className="space-y-1">
                          <Label htmlFor={`step-${index}-name`}>Step {index + 1} Name</Label>
                          <Input
                            id={`step-${index}-name`}
                            value={step.name}
                            onChange={(e) => updateStep(index, { name: e.target.value })}
                            placeholder="e.g., Editorial Review"
                            className="max-w-md"
                          />
                        </div>
                        <div className="flex items-center gap-1">
                          <Button variant="ghost" size="icon" onClick={() => moveStepUp(index)} disabled={index === 0}>
                            <ChevronUp className="h-4 w-4" />
                          </Button>
                          <Button
                            variant="ghost"
                            size="icon"
                            onClick={() => moveStepDown(index)}
                            disabled={index === workflow.steps.length - 1}
                          >
                            <ChevronDown className="h-4 w-4" />
                          </Button>
                          <Button variant="ghost" size="icon" onClick={() => removeStep(index)}>
                            <Trash2 className="h-4 w-4 text-red-500" />
                          </Button>
                        </div>
                      </div>
                    </CardHeader>
                    <CardContent className="space-y-4">
                      <div className="space-y-2">
                        <Label htmlFor={`step-${index}-description`}>Description</Label>
                        <Textarea
                          id={`step-${index}-description`}
                          value={step.description}
                          onChange={(e) => updateStep(index, { description: e.target.value })}
                          placeholder="Describe what happens in this approval step"
                          rows={2}
                        />
                      </div>

<div className="space-y-2">
                        <div className="flex justify-between items-center">
                          <Label className="flex items-center gap-1">
                            <Users className="h-4 w-4" />
                            Approvers
                          </Label>
                          <div className="flex gap-2">
                            <Select onValueChange={(value) => addApprover(index, "user", value)}>
                              <SelectTrigger className="w-[180px]">
                                <SelectValue placeholder="Add User" />
                              </SelectTrigger>
                              <SelectContent>
                                {availableUsers.map((user) => (
                                  <SelectItem key={user.id} value={user.id}>
                                    {user.name} ({user.role})
                                  </SelectItem>
                                ))}
                              </SelectContent>
                            </Select>

<Select onValueChange={(value) => addApprover(index, "role", value)}>
                              <SelectTrigger className="w-[180px]">
                                <SelectValue placeholder="Add Role" />
                              </SelectTrigger>
                              <SelectContent>
                                {availableRoles.map((role) => (
                                  <SelectItem key={role.id} value={role.id}>
                                    Any {role.name}
                                  </SelectItem>
                                ))}
                              </SelectContent>
                            </Select>
                          </div>
                        </div>

{step.approvers.length === 0 ? (
                          <div className="text-center py-3 border border-dashed rounded-md">
                            <p className="text-sm text-muted-foreground">No approvers assigned</p>
                          </div>
                        ) : (
                          <div className="space-y-2 mt-2">
                            {step.approvers.map((approver, approverIndex) => (
                              <div
                                key={approverIndex}
                                className="flex justify-between items-center p-2 bg-muted/20 rounded-md"
                              >
                                <div className="flex items-center gap-2">
                                  <UserPlus className="h-4 w-4 text-muted-foreground" />
                                  <span>
                                    {approver.name ? approver.name : `Any ${approver.role}`}
                                    {approver.role && approver.name && ` (${approver.role})`}
                                  </span>
                                </div>
                                <Button
                                  variant="ghost"
                                  size="icon"
                                  onClick={() => removeApprover(index, approverIndex)}
                                >
                                  <Trash2 className="h-4 w-4 text-red-500" />
                                </Button>
                              </div>
                            ))}
                          </div>
                        )}
                      </div>
                    </CardContent>
                  </Card>
                ))}

<Button onClick={addStep} variant="outline" className="w-full">
                  <Plus className="h-4 w-4 mr-2" />
                  Add Another Step
                </Button>
              </div>
            )}
          </TabsContent>
        </Tabs>
      </CardContent>
      <CardFooter className="flex justify-between border-t pt-4">
        {onCancel && (
          <Button variant="outline" onClick={onCancel}>
            Cancel
          </Button>
        )}
        <Button onClick={handleSave} disabled={saving}>
          {saving ? (
            "Saving..."
          ) : (
            <>
              <Save className="h-4 w-4 mr-2" />
              Save Workflow
            </>
          )}
        </Button>
      </CardFooter>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/approval-workflow-manager.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Switch } from "@/components/ui/switch"
import { Badge } from "@/components/ui/badge"
import { Separator } from "@/components/ui/separator"
import { ScrollArea } from "@/components/ui/scroll-area"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogFooter,
} from "@/components/ui/dialog"
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
import { ArrowRight, ChevronDown, ChevronUp, Edit, Loader2, Plus, Trash2, Users } from "lucide-react"
import { useToast } from "@/components/ui/use-toast"
import type { ApprovalWorkflow, ApprovalStep, ApprovalRole } from "@/types/approval-workflow"
import type { ContentType, ContentStage } from "@/types/content-pipeline"
import {
  getApprovalWorkflows,
  createApprovalWorkflow,
  updateApprovalWorkflow,
  deleteApprovalWorkflow,
  getApprovalRoles,
} from "@/services/approval-workflow-service"

export function ApprovalWorkflowManager() {
  const [workflows, setWorkflows] = useState<ApprovalWorkflow[]>([])
  const [roles, setRoles] = useState<ApprovalRole[]>([])
  const [isLoading, setIsLoading] = useState(true)
  const [activeTab, setActiveTab] = useState("workflows")
  const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false)
  const [isEditDialogOpen, setIsEditDialogOpen] = useState(false)
  const [selectedWorkflow, setSelectedWorkflow] = useState<ApprovalWorkflow | null>(null)

// Form state for creating/editing workflows
  const [formState, setFormState] = useState<{
    name: string
    description: string
    fromStage: ContentStage
    toStage: ContentStage
    contentTypes: ContentType[]
    steps: ApprovalStep[]
    isActive: boolean
  }>({
    name: "",
    description: "",
    fromStage: "draft",
    toStage: "published",
    contentTypes: [],
    steps: [],
    isActive: true,
  })

const { toast } = useToast()

// Load workflows and roles
  useEffect(() => {
    const fetchData = async () => {
      setIsLoading(true)
      try {
        const [fetchedWorkflows, fetchedRoles] = await Promise.all([getApprovalWorkflows(), getApprovalRoles()])
        setWorkflows(fetchedWorkflows)
        setRoles(fetchedRoles)
      } catch (error) {
        console.error("Error fetching data:", error)
        toast({
          title: "Error",
          description: "Failed to load approval workflows",
          variant: "destructive",
        })
      } finally {
        setIsLoading(false)
      }
    }

fetchData()
  }, [toast])

// Reset form state
  const resetFormState = () => {
    setFormState({
      name: "",
      description: "",
      fromStage: "draft",
      toStage: "published",
      contentTypes: [],
      steps: [],
      isActive: true,
    })
  }

// Open edit dialog
  const handleEditWorkflow = (workflow: ApprovalWorkflow) => {
    setSelectedWorkflow(workflow)
    setFormState({
      name: workflow.name,
      description: workflow.description,
      fromStage: workflow.fromStage,
      toStage: workflow.toStage,
      contentTypes: workflow.contentTypes || [],
      steps: [...workflow.steps],
      isActive: workflow.isActive,
    })
    setIsEditDialogOpen(true)
  }

// Handle form submission for creating a workflow
  const handleCreateWorkflow = async () => {
    if (!formState.name) {
      toast({
        title: "Error",
        description: "Workflow name is required",
        variant: "destructive",
      })
      return
    }

if (formState.steps.length === 0) {
      toast({
        title: "Error",
        description: "At least one approval step is required",
        variant: "destructive",
      })
      return
    }

try {
      const newWorkflow = await createApprovalWorkflow({
        name: formState.name,
        description: formState.description,
        fromStage: formState.fromStage,
        toStage: formState.toStage,
        contentTypes: formState.contentTypes.length > 0 ? formState.contentTypes : undefined,
        steps: formState.steps,
        isActive: formState.isActive,
      })

setWorkflows([...workflows, newWorkflow])
      setIsCreateDialogOpen(false)
      resetFormState()

toast({
        title: "Success",
        description: "Approval workflow created successfully",
      })
    } catch (error) {
      console.error("Error creating workflow:", error)
      toast({
        title: "Error",
        description: "Failed to create approval workflow",
        variant: "destructive",
      })
    }
  }

// Handle form submission for updating a workflow
  const handleUpdateWorkflow = async () => {
    if (!selectedWorkflow) return

if (!formState.name) {
      toast({
        title: "Error",
        description: "Workflow name is required",
        variant: "destructive",
      })
      return
    }

if (formState.steps.length === 0) {
      toast({
        title: "Error",
        description: "At least one approval step is required",
        variant: "destructive",
      })
      return
    }

try {
      const updatedWorkflow = await updateApprovalWorkflow(selectedWorkflow.id, {
        name: formState.name,
        description: formState.description,
        fromStage: formState.fromStage,
        toStage: formState.toStage,
        contentTypes: formState.contentTypes.length > 0 ? formState.contentTypes : undefined,
        steps: formState.steps,
        isActive: formState.isActive,
      })

if (updatedWorkflow) {
        setWorkflows(workflows.map((w) => (w.id === updatedWorkflow.id ? updatedWorkflow : w)))
        setIsEditDialogOpen(false)
        setSelectedWorkflow(null)
        resetFormState()

toast({
          title: "Success",
          description: "Approval workflow updated successfully",
        })
      }
    } catch (error) {
      console.error("Error updating workflow:", error)
      toast({
        title: "Error",
        description: "Failed to update approval workflow",
        variant: "destructive",
      })
    }
  }

// Handle deleting a workflow
  const handleDeleteWorkflow = async (id: string) => {
    try {
      const success = await deleteApprovalWorkflow(id)

if (success) {
        setWorkflows(workflows.filter((w) => w.id !== id))

toast({
          title: "Success",
          description: "Approval workflow deleted successfully",
        })
      }
    } catch (error) {
      console.error("Error deleting workflow:", error)
      toast({
        title: "Error",
        description: "Failed to delete approval workflow",
        variant: "destructive",
      })
    }
  }

// Add a new step to the form
  const handleAddStep = () => {
    const newStep: ApprovalStep = {
      id: `temp-step-${Date.now()}`,
      name: `Step ${formState.steps.length + 1}`,
      description: "",
      approverRoles: [],
      order: formState.steps.length + 1,
      isRequired: true,
    }

setFormState({
      ...formState,
      steps: [...formState.steps, newStep],
    })
  }

// Remove a step from the form
  const handleRemoveStep = (stepId: string) => {
    const updatedSteps = formState.steps.filter((step) => step.id !== stepId)

// Reorder the remaining steps
    const reorderedSteps = updatedSteps.map((step, index) => ({
      ...step,
      order: index + 1,
    }))

setFormState({
      ...formState,
      steps: reorderedSteps,
    })
  }

// Move a step up in the order
  const handleMoveStepUp = (stepId: string) => {
    const stepIndex = formState.steps.findIndex((step) => step.id === stepId)
    if (stepIndex <= 0) return

const updatedSteps = [...formState.steps]
    const temp = updatedSteps[stepIndex]
    updatedSteps[stepIndex] = updatedSteps[stepIndex - 1]
    updatedSteps[stepIndex - 1] = temp

// Update order properties
    const reorderedSteps = updatedSteps.map((step, index) => ({
      ...step,
      order: index + 1,
    }))

setFormState({
      ...formState,
      steps: reorderedSteps,
    })
  }

// Move a step down in the order
  const handleMoveStepDown = (stepId: string) => {
    const stepIndex = formState.steps.findIndex((step) => step.id === stepId)
    if (stepIndex === -1 || stepIndex >= formState.steps.length - 1) return

const updatedSteps = [...formState.steps]
    const temp = updatedSteps[stepIndex]
    updatedSteps[stepIndex] = updatedSteps[stepIndex + 1]
    updatedSteps[stepIndex + 1] = temp

// Update order properties
    const reorderedSteps = updatedSteps.map((step, index) => ({
      ...step,
      order: index + 1,
    }))

setFormState({
      ...formState,
      steps: reorderedSteps,
    })
  }

// Update a step in the form
  const handleUpdateStep = (stepId: string, updates: Partial<ApprovalStep>) => {
    setFormState({
      ...formState,
      steps: formState.steps.map((step) => (step.id === stepId ? { ...step, ...updates } : step)),
    })
  }

// Toggle a role for a step
  const handleToggleRoleForStep = (stepId: string, roleId: string) => {
    const step = formState.steps.find((s) => s.id === stepId)
    if (!step) return

const hasRole = step.approverRoles.includes(roleId)
    const updatedRoles = hasRole ? step.approverRoles.filter((id) => id !== roleId) : [...step.approverRoles, roleId]

handleUpdateStep(stepId, { approverRoles: updatedRoles })
  }

// Toggle a content type
  const handleToggleContentType = (contentType: ContentType) => {
    const hasType = formState.contentTypes.includes(contentType)
    const updatedTypes = hasType
      ? formState.contentTypes.filter((type) => type !== contentType)
      : [...formState.contentTypes, contentType]

setFormState({
      ...formState,
      contentTypes: updatedTypes,
    })
  }

// Format stage name
  const formatStageName = (stage: string) => {
    return stage.charAt(0).toUpperCase() + stage.slice(1)
  }

// Get role name by ID
  const getRoleName = (roleId: string) => {
    const role = roles.find((r) => r.id === roleId)
    return role ? role.name : "Unknown Role"
  }

return (
    <Card className="bg-slate-900 border-slate-800">
      <CardHeader>
        <div className="flex items-center justify-between">
          <div>
            <CardTitle className="text-white">Approval Workflows</CardTitle>
            <CardDescription className="text-gray-400">
              Configure multi-step approval processes for content
            </CardDescription>
          </div>
          <Button
            onClick={() => setIsCreateDialogOpen(true)}
            className="bg-blue-600 hover:bg-blue-700"
            disabled={isLoading}
          >
            <Plus className="mr-2 h-4 w-4" />
            New Workflow
          </Button>
        </div>
      </CardHeader>
      <CardContent>
        <Tabs value={activeTab} onValueChange={setActiveTab}>
          <TabsList className="bg-slate-800 border-slate-700">
            <TabsTrigger value="workflows" className="data-[state=active]:bg-slate-700 data-[state=active]:text-white">
              Workflows
            </TabsTrigger>
            <TabsTrigger value="roles" className="data-[state=active]:bg-slate-700 data-[state=active]:text-white">
              Approval Roles
            </TabsTrigger>
          </TabsList>

<TabsContent value="workflows" className="space-y-4 mt-4">
            {isLoading ? (
              <div className="flex justify-center items-center py-8">
                <Loader2 className="h-8 w-8 animate-spin text-blue-500" />
              </div>
            ) : workflows.length === 0 ? (
              <div className="text-center py-8 text-gray-400">
                No approval workflows found. Create a new workflow to get started.
              </div>
            ) : (
              <div className="space-y-4">
                {workflows.map((workflow) => (
                  <Card key={workflow.id} className="bg-slate-800 border-slate-700">
                    <CardHeader className="pb-2">
                      <div className="flex justify-between items-start">
                        <div>
                          <div className="flex items-center gap-2 mb-1">
                            <Badge
                              className={
                                workflow.isActive ? "bg-green-900 text-green-100" : "bg-gray-700 text-gray-300"
                              }
                            >
                              {workflow.isActive ? "Active" : "Inactive"}
                            </Badge>
                            {workflow.contentTypes && workflow.contentTypes.length > 0 && (
                              <div className="flex flex-wrap gap-1">
                                {workflow.contentTypes.map((type) => (
                                  <Badge
                                    key={type}
                                    variant="outline"
                                    className="bg-slate-700 border-slate-600 text-white capitalize"
                                  >
                                    {type}
                                  </Badge>
                                ))}
                              </div>
                            )}
                          </div>
                          <CardTitle className="text-white">{workflow.name}</CardTitle>
                          <CardDescription className="text-gray-400">{workflow.description}</CardDescription>
                        </div>
                        <div className="flex gap-2">
                          <Button
                            variant="ghost"
                            size="icon"
                            onClick={() => handleEditWorkflow(workflow)}
                            className="text-gray-400 hover:text-white"
                          >
                            <Edit className="h-4 w-4" />
                          </Button>
                          <Button
                            variant="ghost"
                            size="icon"
                            onClick={() => handleDeleteWorkflow(workflow.id)}
                            className="text-red-400 hover:text-red-300"
                          >
                            <Trash2 className="h-4 w-4" />
                          </Button>
                        </div>
                      </div>
                    </CardHeader>
                    <CardContent className="pb-2">
                      <div className="space-y-4">
                        <div className="flex items-center gap-2">
                          <Badge variant="outline" className="bg-slate-700 border-slate-600 text-white capitalize">
                            {formatStageName(workflow.fromStage)}
                          </Badge>
                          <ArrowRight className="h-4 w-4 text-gray-500" />
                          <Badge variant="outline" className="bg-slate-700 border-slate-600 text-white capitalize">
                            {formatStageName(workflow.toStage)}
                          </Badge>
                        </div>

<Accordion type="single" collapsible className="w-full">
                          <AccordionItem value="steps" className="border-slate-700">
                            <AccordionTrigger className="text-white hover:text-white hover:no-underline py-2">
                              <div className="flex items-center gap-2">
                                <Users className="h-4 w-4" />
                                <span>Approval Steps ({workflow.steps.length})</span>
                              </div>
                            </AccordionTrigger>
                            <AccordionContent>
                              <div className="space-y-3 pl-6">
                                {workflow.steps
                                  .sort((a, b) => a.order - b.order)
                                  .map((step, index) => (
                                    <div key={step.id} className="flex items-start gap-2 p-2 rounded-md bg-slate-700">
                                      <Badge className="bg-blue-900 text-blue-100 flex-shrink-0 mt-0.5">
                                        {index + 1}
                                      </Badge>
                                      <div className="flex-1">
                                        <div className="font-medium text-white">{step.name}</div>
                                        {step.description && (
                                          <div className="text-sm text-gray-300 mt-1">{step.description}</div>
                                        )}
                                        <div className="flex flex-wrap gap-1 mt-2">
                                          {step.approverRoles.map((roleId) => (
                                            <Badge
                                              key={roleId}
                                              variant="outline"
                                              className="bg-slate-600 border-slate-500 text-white"
                                            >
                                              {getRoleName(roleId)}
                                            </Badge>
                                          ))}
                                        </div>
                                        <div className="flex items-center gap-2 mt-2 text-xs text-gray-400">
                                          {step.isRequired && <span>Required</span>}
                                          {step.requiresAllApprovers && <span>All approvers must approve</span>}
                                        </div>
                                      </div>
                                    </div>
                                  ))}
                              </div>
                            </AccordionContent>
                          </AccordionItem>
                        </Accordion>
                      </div>
                    </CardContent>
                    <CardFooter className="pt-2 text-xs text-gray-400">
                      Created: {new Date(workflow.createdAt).toLocaleDateString()}
                      {workflow.updatedAt !== workflow.createdAt && (
                        <span className="ml-2">• Updated: {new Date(workflow.updatedAt).toLocaleDateString()}</span>
                      )}
                    </CardFooter>
                  </Card>
                ))}
              </div>
            )}
          </TabsContent>

<TabsContent value="roles" className="space-y-4 mt-4">
            {isLoading ? (
              <div className="flex justify-center items-center py-8">
                <Loader2 className="h-8 w-8 animate-spin text-blue-500" />
              </div>
            ) : roles.length === 0 ? (
              <div className="text-center py-8 text-gray-400">
                No approval roles found. Create roles to assign approvers.
              </div>
            ) : (
              <div className="space-y-4">
                {roles.map((role) => (
                  <Card key={role.id} className="bg-slate-800 border-slate-700">
                    <CardHeader className="pb-2">
                      <div className="flex justify-between items-start">
                        <div>
                          <CardTitle className="text-white">{role.name}</CardTitle>
                          {role.description && (
                            <CardDescription className="text-gray-400">{role.description}</CardDescription>
                          )}
                        </div>
                        <div className="flex gap-2">
                          <Button variant="ghost" size="icon" className="text-gray-400 hover:text-white">
                            <Edit className="h-4 w-4" />
                          </Button>
                        </div>
                      </div>
                    </CardHeader>
                    <CardContent>
                      <div className="space-y-2">
                        <div className="text-sm font-medium text-gray-400">Users ({role.users.length})</div>
                        <div className="flex flex-wrap gap-2">
                          {role.users.map((userId) => (
                            <Badge key={userId} variant="outline" className="bg-slate-700 border-slate-600 text-white">
                              User {userId}
                            </Badge>
                          ))}
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                ))}
              </div>
            )}
          </TabsContent>
        </Tabs>
      </CardContent>

{/* Create Workflow Dialog */}
      <Dialog open={isCreateDialogOpen} onOpenChange={setIsCreateDialogOpen}>
        <DialogContent className="bg-slate-900 border-slate-800 text-white max-w-4xl">
          <DialogHeader>
            <DialogTitle>Create Approval Workflow</DialogTitle>
            <DialogDescription className="text-gray-400">
              Define a multi-step approval process for content items
            </DialogDescription>
          </DialogHeader>

<div className="grid gap-4 py-4">
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="workflow-name" className="text-white">
                  Workflow Name
                </Label>
                <Input
                  id="workflow-name"
                  value={formState.name}
                  onChange={(e) => setFormState({ ...formState, name: e.target.value })}
                  placeholder="Enter workflow name"
                  className="bg-slate-800 border-slate-700 text-white"
                />
              </div>

<div className="space-y-2">
                <Label className="text-white">Status</Label>
                <div className="flex items-center space-x-2">
                  <Switch
                    checked={formState.isActive}
                    onCheckedChange={(checked) => setFormState({ ...formState, isActive: checked })}
                    className="data-[state=checked]:bg-blue-600"
                  />
                  <Label className="text-white">{formState.isActive ? "Active" : "Inactive"}</Label>
                </div>
              </div>
            </div>

<div className="space-y-2">
              <Label htmlFor="workflow-description" className="text-white">
                Description
              </Label>
              <Input
                id="workflow-description"
                value={formState.description}
                onChange={(e) => setFormState({ ...formState, description: e.target.value })}
                placeholder="Enter workflow description"
                className="bg-slate-800 border-slate-700 text-white"
              />
            </div>

<div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="from-stage" className="text-white">
                  From Stage
                </Label>
                <Select
                  value={formState.fromStage}
                  onValueChange={(value: ContentStage) => setFormState({ ...formState, fromStage: value })}
                >
                  <SelectTrigger id="from-stage" className="bg-slate-800 border-slate-700 text-white">
                    <SelectValue placeholder="Select stage" />
                  </SelectTrigger>
                  <SelectContent className="bg-slate-800 border-slate-700 text-white">
                    <SelectItem value="idea">Idea</SelectItem>
                    <SelectItem value="draft">Draft</SelectItem>
                    <SelectItem value="review">Review</SelectItem>
                    <SelectItem value="published">Published</SelectItem>
                  </SelectContent>
                </Select>
              </div>

<div className="space-y-2">
                <Label htmlFor="to-stage" className="text-white">
                  To Stage
                </Label>
                <Select
                  value={formState.toStage}
                  onValueChange={(value: ContentStage) => setFormState({ ...formState, toStage: value })}
                >
                  <SelectTrigger id="to-stage" className="bg-slate-800 border-slate-700 text-white">
                    <SelectValue placeholder="Select stage" />
                  </SelectTrigger>
                  <SelectContent className="bg-slate-800 border-slate-700 text-white">
                    <SelectItem value="idea">Idea</SelectItem>
                    <SelectItem value="draft">Draft</SelectItem>
                    <SelectItem value="review">Review</SelectItem>
                    <SelectItem value="published">Published</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>

<div className="space-y-2">
              <Label className="text-white">Content Types (Optional)</Label>
              <div className="flex flex-wrap gap-2">
                {["article", "newsletter", "report", "idea"].map((type) => (
                  <Badge
                    key={type}
                    variant={formState.contentTypes.includes(type as ContentType) ? "default" : "outline"}
                    className={
                      formState.contentTypes.includes(type as ContentType)
                        ? "bg-blue-600 hover:bg-blue-700 cursor-pointer"
                        : "bg-slate-800 border-slate-700 text-white hover:bg-slate-700 cursor-pointer"
                    }
                    onClick={() => handleToggleContentType(type as ContentType)}
                  >
                    {type}
                  </Badge>
                ))}
              </div>
              <p className="text-xs text-gray-400">Leave empty to apply to all content types</p>
            </div>

<div className="space-y-4">
              <div className="flex items-center justify-between">
                <h3 className="text-lg font-medium text-white">Approval Steps</h3>
                <Button onClick={handleAddStep} className="bg-blue-600 hover:bg-blue-700">
                  <Plus className="mr-2 h-4 w-4" />
                  Add Step
                </Button>
              </div>

{formState.steps.length === 0 ? (
                <div className="text-center py-4 text-gray-400">No steps defined. Add at least one approval step.</div>
              ) : (
                <ScrollArea className="h-[300px] pr-4">
                  <div className="space-y-4">
                    {formState.steps.map((step, index) => (
                      <Card key={step.id} className="bg-slate-800 border-slate-700">
                        <CardHeader className="pb-2">
                          <div className="flex justify-between items-center">
                            <div className="flex items-center gap-2">
                              <Badge className="bg-blue-900 text-blue-100">{index + 1}</Badge>
                              <Input
                                value={step.name}
                                onChange={(e) => handleUpdateStep(step.id, { name: e.target.value })}
                                placeholder="Step name"
                                className="bg-slate-700 border-slate-600 text-white"
                              />
                            </div>
                            <div className="flex gap-1">
                              <Button
                                variant="ghost"
                                size="icon"
                                onClick={() => handleMoveStepUp(step.id)}
                                disabled={index === 0}
                                className="text-gray-400 hover:text-white"
                              >
                                <ChevronUp className="h-4 w-4" />
                              </Button>
                              <Button
                                variant="ghost"
                                size="icon"
                                onClick={() => handleMoveStepDown(step.id)}
                                disabled={index === formState.steps.length - 1}
                                className="text-gray-400 hover:text-white"
                              >
                                <ChevronDown className="h-4 w-4" />
                              </Button>
                              <Button
                                variant="ghost"
                                size="icon"
                                onClick={() => handleRemoveStep(step.id)}
                                className="text-red-400 hover:text-red-300"
                              >
                                <Trash2 className="h-4 w-4" />
                              </Button>
                            </div>
                          </div>
                        </CardHeader>
                        <CardContent className="space-y-4">
                          <div className="space-y-2">
                            <Label className="text-white">Description</Label>
                            <Input
                              value={step.description || ""}
                              onChange={(e) => handleUpdateStep(step.id, { description: e.target.value })}
                              placeholder="Step description (optional)"
                              className="bg-slate-700 border-slate-600 text-white"
                            />
                          </div>

<div className="space-y-2">
                            <Label className="text-white">Approver Roles</Label>
                            <div className="grid grid-cols-2 gap-2">
                              {roles.map((role) => (
                                <div key={role.id} className="flex items-center space-x-2">
                                  <input
                                    type="checkbox"
                                    id={`role-${step.id}-${role.id}`}
                                    checked={step.approverRoles.includes(role.id)}
                                    onChange={() => handleToggleRoleForStep(step.id, role.id)}
                                    className="rounded border-gray-600 text-blue-600 focus:ring-blue-600 bg-slate-700"
                                  />
                                  <Label htmlFor={`role-${step.id}-${role.id}`} className="text-white cursor-pointer">
                                    {role.name}
                                  </Label>
                                </div>
                              ))}
                            </div>
                          </div>

<div className="grid grid-cols-2 gap-4">
                            <div className="flex items-center space-x-2">
                              <Switch
                                id={`required-${step.id}`}
                                checked={step.isRequired}
                                onCheckedChange={(checked) => handleUpdateStep(step.id, { isRequired: checked })}
                                className="data-[state=checked]:bg-blue-600"
                              />
                              <Label htmlFor={`required-${step.id}`} className="text-white cursor-pointer">
                                Required Step
                              </Label>
                            </div>

<div className="flex items-center space-x-2">
                              <Switch
                                id={`all-approvers-${step.id}`}
                                checked={step.requiresAllApprovers}
                                onCheckedChange={(checked) =>
                                  handleUpdateStep(step.id, { requiresAllApprovers: checked })
                                }
                                className="data-[state=checked]:bg-blue-600"
                              />
                              <Label htmlFor={`all-approvers-${step.id}`} className="text-white cursor-pointer">
                                Require All Approvers
                              </Label>
                            </div>
                          </div>
                        </CardContent>
                      </Card>
                    ))}
                  </div>
                </ScrollArea>
              )}
            </div>
          </div>

<DialogFooter>
            <Button
              variant="outline"
              onClick={() => {
                setIsCreateDialogOpen(false)
                resetFormState()
              }}
              className="bg-transparent border-slate-600 text-white hover:bg-slate-800 hover:text-white"
            >
              Cancel
            </Button>
            <Button onClick={handleCreateWorkflow} className="bg-blue-600 hover:bg-blue-700">
              Create Workflow
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

{/* Edit Workflow Dialog */}
      <Dialog open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen}>
        <DialogContent className="bg-slate-900 border-slate-800 text-white max-w-4xl">
          <DialogHeader>
            <DialogTitle>Edit Approval Workflow</DialogTitle>
            <DialogDescription className="text-gray-400">
              Modify the approval workflow settings and steps
            </DialogDescription>
          </DialogHeader>

<div className="grid gap-4 py-4">
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="edit-workflow-name" className="text-white">
                  Workflow Name
                </Label>
                <Input
                  id="edit-workflow-name"
                  value={formState.name}
                  onChange={(e) => setFormState({ ...formState, name: e.target.value })}
                  placeholder="Enter workflow name"
                  className="bg-slate-800 border-slate-700 text-white"
                />
              </div>

<div className="space-y-2">
              <Label htmlFor="edit-workflow-description" className="text-white">
                Description
              </Label>
              <Input
                id="edit-workflow-description"
                value={formState.description}
                onChange={(e) => setFormState({ ...formState, description: e.target.value })}
                placeholder="Enter workflow description"
                className="bg-slate-800 border-slate-700 text-white"
              />
            </div>

<div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="edit-from-stage" className="text-white">
                  From Stage
                </Label>
                <Select
                  value={formState.fromStage}
                  onValueChange={(value: ContentStage) => setFormState({ ...formState, fromStage: value })}
                >
                  <SelectTrigger id="edit-from-stage" className="bg-slate-800 border-slate-700 text-white">
                    <SelectValue placeholder="Select stage" />
                  </SelectTrigger>
                  <SelectContent className="bg-slate-800 border-slate-700 text-white">
                    <SelectItem value="idea">Idea</SelectItem>
                    <SelectItem value="draft">Draft</SelectItem>
                    <SelectItem value="review">Review</SelectItem>
                    <SelectItem value="published">Published</SelectItem>
                  </SelectContent>
                </Select>
              </div>

<div className="space-y-2">
                <Label htmlFor="edit-to-stage" className="text-white">
                  To Stage
                </Label>
                <Select
                  value={formState.toStage}
                  onValueChange={(value: ContentStage) => setFormState({ ...formState, toStage: value })}
                >
                  <SelectTrigger id="edit-to-stage" className="bg-slate-800 border-slate-700 text-white">
                    <SelectValue placeholder="Select stage" />
                  </SelectTrigger>
                  <SelectContent className="bg-slate-800 border-slate-700 text-white">
                    <SelectItem value="idea">Idea</SelectItem>
                    <SelectItem value="draft">Draft</SelectItem>
                    <SelectItem value="review">Review</SelectItem>
                    <SelectItem value="published">Published</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>

<div className="space-y-2">
                            <Label className="text-white">Approver Roles</Label>
                            <div className="grid grid-cols-2 gap-2">
                              {roles.map((role) => (
                                <div key={role.id} className="flex items-center space-x-2">
                                  <input
                                    type="checkbox"
                                    id={`edit-role-${step.id}-${role.id}`}
                                    checked={step.approverRoles.includes(role.id)}
                                    onChange={() => handleToggleRoleForStep(step.id, role.id)}
                                    className="rounded border-gray-600 text-blue-600 focus:ring-blue-600 bg-slate-700"
                                  />
                                  <Label
                                    htmlFor={`edit-role-${step.id}-${role.id}`}
                                    className="text-white cursor-pointer"
                                  >
                                    {role.name}
                                  </Label>
                                </div>
                              ))}
                            </div>
                          </div>

<div className="grid grid-cols-2 gap-4">
                            <div className="flex items-center space-x-2">
                              <Switch
                                id={`edit-required-${step.id}`}
                                checked={step.isRequired}
                                onCheckedChange={(checked) => handleUpdateStep(step.id, { isRequired: checked })}
                                className="data-[state=checked]:bg-blue-600"
                              />
                              <Label htmlFor={`edit-required-${step.id}`} className="text-white cursor-pointer">
                                Required Step
                              </Label>
                            </div>

<div className="flex items-center space-x-2">
                              <Switch
                                id={`edit-all-approvers-${step.id}`}
                                checked={step.requiresAllApprovers}
                                onCheckedChange={(checked) =>
                                  handleUpdateStep(step.id, { requiresAllApprovers: checked })
                                }
                                className="data-[state=checked]:bg-blue-600"
                              />
                              <Label htmlFor={`edit-all-approvers-${step.id}`} className="text-white cursor-pointer">
                                Require All Approvers
                              </Label>
                            </div>
                          </div>
                        </CardContent>
                      </Card>
                    ))}
                  </div>
                </ScrollArea>
              )}
            </div>
          </div>

<DialogFooter>
            <Button
              variant="outline"
              onClick={() => {
                setIsEditDialogOpen(false)
                setSelectedWorkflow(null)
                resetFormState()
              }}
              className="bg-transparent border-slate-600 text-white hover:bg-slate-800 hover:text-white"
            >
              Cancel
            </Button>
            <Button onClick={handleUpdateWorkflow} className="bg-blue-600 hover:bg-blue-700">
              Update Workflow
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/approval-workflow-visualizer.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
import { type ApprovalWorkflow, ApprovalStatus } from "@/types/approval-workflow"
import type { ContentItem } from "@/types/content-pipeline"
import { getApprovalWorkflowForContent } from "@/services/approval-workflow-service"

interface ApprovalWorkflowVisualizerProps {
  contentItem: ContentItem
}

export function ApprovalWorkflowVisualizer({ contentItem }: ApprovalWorkflowVisualizerProps) {
  const [workflow, setWorkflow] = useState<ApprovalWorkflow | null>(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

useEffect(() => {
    const fetchWorkflow = async () => {
      try {
        setLoading(true)
        const workflowData = await getApprovalWorkflowForContent(contentItem.id)
        setWorkflow(workflowData)
      } catch (err) {
        console.error("Error fetching approval workflow:", err)
        setError("Failed to load approval workflow")
      } finally {
        setLoading(false)
      }
    }

if (contentItem.id) {
      fetchWorkflow()
    }
  }, [contentItem.id])

const getStepStatusColor = (status: ApprovalStatus) => {
    switch (status) {
      case ApprovalStatus.PENDING:
        return "bg-yellow-500"
      case ApprovalStatus.APPROVED:
        return "bg-green-500"
      case ApprovalStatus.REJECTED:
        return "bg-red-500"
      default:
        return "bg-gray-300"
    }
  }

if (loading) {
    return (
      <Card>
        <CardHeader>
          <CardTitle>Approval Workflow</CardTitle>
          <CardDescription>Loading workflow visualization...</CardDescription>
        </CardHeader>
      </Card>
    )
  }

if (error) {
    return (
      <Card>
        <CardHeader>
          <CardTitle>Approval Workflow</CardTitle>
          <CardDescription className="text-red-500">{error}</CardDescription>
        </CardHeader>
      </Card>
    )
  }

if (!workflow) {
    return (
      <Card>
        <CardHeader>
          <CardTitle>Approval Workflow</CardTitle>
          <CardDescription>No approval workflow found for this content</CardDescription>
        </CardHeader>
      </Card>
    )
  }

return (
    <Card>
      <CardHeader>
        <CardTitle>Approval Workflow</CardTitle>
        <CardDescription>{workflow.name}</CardDescription>
      </CardHeader>
      <CardContent>
        <div className="relative">
          {/* Workflow timeline */}
          <div className="absolute left-4 top-0 bottom-0 w-0.5 bg-gray-200" />

<div className="space-y-8 relative ml-4">
            {workflow.steps.map((step, index) => (
              <div key={step.id} className="relative pl-8">
                {/* Timeline node */}
                <div
                  className={`absolute left-0 w-8 h-8 rounded-full flex items-center justify-center ${getStepStatusColor(step.status)}`}
                  style={{ transform: "translateX(-50%)" }}
                >
                  <span className="text-white font-medium">{index + 1}</span>
                </div>

{/* Step content */}
                <div className="bg-muted/20 p-4 rounded-md">
                  <div className="flex justify-between items-center mb-2">
                    <h3 className="font-medium">{step.name}</h3>
                    <Badge
                      variant="outline"
                      className={
                        step.status === ApprovalStatus.APPROVED
                          ? "bg-green-50 text-green-700 border-green-200"
                          : step.status === ApprovalStatus.REJECTED
                            ? "bg-red-50 text-red-700 border-red-200"
                            : "bg-yellow-50 text-yellow-700 border-yellow-200"
                      }
                    >
                      {step.status === ApprovalStatus.APPROVED
                        ? "Approved"
                        : step.status === ApprovalStatus.REJECTED
                          ? "Rejected"
                          : "Pending"}
                    </Badge>
                  </div>

<p className="text-sm text-muted-foreground mb-3">{step.description}</p>

{/* Approvers */}
                  <div className="flex flex-wrap gap-2">
                    <span className="text-sm text-muted-foreground mr-1">Approvers:</span>
                    {step.approvers.map((approver, i) => (
                      <TooltipProvider key={i}>
                        <Tooltip>
                          <TooltipTrigger asChild>
                            <div className="flex items-center gap-1 text-sm">
                              <Avatar className="h-6 w-6">
                                <AvatarImage src={approver.avatarUrl || "/placeholder.svg"} />
                                <AvatarFallback>
                                  {approver.name?.substring(0, 2) || approver.role?.substring(0, 2) || "??"}
                                </AvatarFallback>
                              </Avatar>
                              <span>{approver.name || approver.role}</span>
                            </div>
                          </TooltipTrigger>
                          <TooltipContent>
                            <p>
                              {approver.name || "Any"} {approver.role ? `(${approver.role})` : ""}
                            </p>
                          </TooltipContent>
                        </Tooltip>
                      </TooltipProvider>
                    ))}
                  </div>

{/* Status details */}
                  {step.status === ApprovalStatus.APPROVED && step.approvedAt && (
                    <div className="mt-2 text-sm text-green-600">
                      Approved on {new Date(step.approvedAt).toLocaleDateString()}
                    </div>
                  )}

{step.status === ApprovalStatus.REJECTED && step.rejectedAt && (
                    <div className="mt-2 text-sm text-red-600">
                      Rejected on {new Date(step.rejectedAt).toLocaleDateString()}
                    </div>
                  )}
                </div>
              </div>
            ))}
          </div>
        </div>
      </CardContent>
    </Card>
  )
}

// Make sure to add null checks in the ApprovalWorkflowVisualizer component similar to those in the ApprovalStatusPanel
[V0_FILE]typescriptreact:file="components/automation-dashboard/add-job-dialog.tsx" isMerged="true"
"use client"

import { useState } from "react"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { createAutomationJob } from "@/app/actions/automation-dashboard-actions"
import { useToast } from "@/hooks/use-toast"

interface CronJob {
  id: string
  name: string
  path: string
  schedule: string
  isActive: boolean
  lastRun: string | null
  nextRun: string | null
  description: string
}

interface AddJobDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  onJobAdded: (job: CronJob) => void
}

export function AddJobDialog({ open, onOpenChange, onJobAdded }: AddJobDialogProps) {
  const { toast } = useToast()
  const [activeTab, setActiveTab] = useState("simple")
  const [isSubmitting, setIsSubmitting] = useState(false)

// Form state
  const [name, setName] = useState("")
  const [description, setDescription] = useState("")
  const [path, setPath] = useState("/api/cron/")
  const [frequency, setFrequency] = useState<"daily" | "hourly" | "custom">("daily")
  const [time, setTime] = useState("18:00") // Default to 6 PM
  const [interval, setInterval] = useState("1")
  const [cronExpression, setCronExpression] = useState("0 23 * * *") // Default to 6 PM EST

const resetForm = () => {
    setName("")
    setDescription("")
    setPath("/api/cron/")
    setFrequency("daily")
    setTime("18:00")
    setInterval("1")
    setCronExpression("0 23 * * *")
    setActiveTab("simple")
  }

const generateCronExpression = (): string => {
    if (activeTab === "simple") {
      if (frequency === "daily") {
        // Special case for 6 PM EST
        if (time === "18:00") {
          return "0 23 * * *" // 11 PM UTC
        }

const [hours, minutes] = time.split(":").map(Number)
        return `${minutes} ${hours} * * *`
      } else if (frequency === "hourly") {
        const intervalNum = Number.parseInt(interval, 10)
        return `0 */${intervalNum} * * *`
      }
    }

return cronExpression
  }

const handleSubmit = async () => {
    if (!name || !path) {
      toast({
        title: "Missing fields",
        description: "Please fill in all required fields.",
        variant: "destructive",
        duration: 3000,
      })
      return
    }

setIsSubmitting(true)

try {
      const schedule = generateCronExpression()
      const result = await createAutomationJob({
        name,
        description,
        path,
        schedule,
      })

if (result.success && result.job) {
        onJobAdded(result.job)
        resetForm()
        onOpenChange(false)
      } else {
        toast({
          title: "Failed to create job",
          description: result.message || "An error occurred while creating the job.",
          variant: "destructive",
          duration: 5000,
        })
      }
    } catch (error) {
      console.error("Error creating automation job:", error)
      toast({
        title: "Error",
        description: "An unexpected error occurred. Please try again.",
        variant: "destructive",
        duration: 5000,
      })
    } finally {
      setIsSubmitting(false)
    }
  }

return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-[500px]">
        <DialogHeader>
          <DialogTitle>Add New Automation Job</DialogTitle>
          <DialogDescription>Create a new scheduled job for your automation tasks.</DialogDescription>
        </DialogHeader>

<div className="space-y-4 py-4">
          <div className="space-y-2">
            <Label htmlFor="name">Job Name</Label>
            <Input
              id="name"
              value={name}
              onChange={(e) => setName(e.target.value)}
              placeholder="Newsletter Processing"
            />
          </div>

<div className="space-y-2">
            <Label htmlFor="description">Description</Label>
            <Input
              id="description"
              value={description}
              onChange={(e) => setDescription(e.target.value)}
              placeholder="Processes scheduled newsletters"
            />
          </div>

<div className="space-y-2">
            <Label htmlFor="path">API Path</Label>
            <Input
              id="path"
              value={path}
              onChange={(e) => setPath(e.target.value)}
              placeholder="/api/cron/process-newsletters"
            />
          </div>

<Tabs value={activeTab} onValueChange={setActiveTab} className="mt-4">
            <TabsList className="grid w-full grid-cols-2">
              <TabsTrigger value="simple">Simple</TabsTrigger>
              <TabsTrigger value="advanced">Advanced</TabsTrigger>
            </TabsList>

<TabsContent value="simple" className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="frequency">Frequency</Label>
                <Select value={frequency} onValueChange={(value: "daily" | "hourly" | "custom") => setFrequency(value)}>
                  <SelectTrigger id="frequency">
                    <SelectValue placeholder="Select frequency" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="daily">Daily</SelectItem>
                    <SelectItem value="hourly">Hourly</SelectItem>
                  </SelectContent>
                </Select>
              </div>

{frequency === "daily" && (
                <div className="space-y-2">
                  <Label htmlFor="time">Time</Label>
                  <Select value={time} onValueChange={setTime}>
                    <SelectTrigger id="time">
                      <SelectValue placeholder="Select time" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="18:00">6:00 PM EST (Recommended)</SelectItem>
                      <SelectItem value="00:00">12:00 AM</SelectItem>
                      <SelectItem value="06:00">6:00 AM</SelectItem>
                      <SelectItem value="12:00">12:00 PM</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              )}

{frequency === "hourly" && (
                <div className="space-y-2">
                  <Label htmlFor="interval">Every X Hours</Label>
                  <Select value={interval} onValueChange={setInterval}>
                    <SelectTrigger id="interval">
                      <SelectValue placeholder="Select interval" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="1">Every hour</SelectItem>
                      <SelectItem value="2">Every 2 hours</SelectItem>
                      <SelectItem value="4">Every 4 hours</SelectItem>
                      <SelectItem value="6">Every 6 hours</SelectItem>
                      <SelectItem value="12">Every 12 hours</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              )}

<div className="pt-2">
                <p className="text-sm text-muted-foreground">
                  Generated cron expression:{" "}
                  <code className="bg-muted px-1 py-0.5 rounded">{generateCronExpression()}</code>
                </p>
              </div>
            </TabsContent>

<TabsContent value="advanced" className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="cron-expression">Cron Expression</Label>
                <Input
                  id="cron-expression"
                  placeholder="* * * * *"
                  value={cronExpression}
                  onChange={(e) => setCronExpression(e.target.value)}
                />
                <p className="text-xs text-muted-foreground">Format: minute hour day-of-month month day-of-week</p>
              </div>

<div className="bg-muted p-3 rounded-md">
                <h4 className="font-medium text-sm">Common Patterns</h4>
                <div className="grid grid-cols-2 gap-2 mt-2">
                  <Button variant="outline" size="sm" onClick={() => setCronExpression("0 8 * * *")}>
                    Daily at 8 AM
                  </Button>
                  <Button variant="outline" size="sm" onClick={() => setCronExpression("0 23 * * *")}>
                    Daily at 6 PM EST
                  </Button>
                  <Button variant="outline" size="sm" onClick={() => setCronExpression("0 9 * * 1-5")}>
                    Weekdays at 9 AM
                  </Button>
                  <Button variant="outline" size="sm" onClick={() => setCronExpression("0 */4 * * *")}>
                    Every 4 hours
                  </Button>
                </div>
              </div>
            </TabsContent>
          </Tabs>
        </div>

<DialogFooter>
          <Button variant="outline" onClick={() => onOpenChange(false)}>
            Cancel
          </Button>
          <Button onClick={handleSubmit} disabled={isSubmitting}>
            {isSubmitting ? "Creating..." : "Create Job"}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescriptreact:file="components/automation-dashboard/automation-metrics-cards.tsx" isMerged="true"
"use client"

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import {
  getNewsletterMetrics,
  getRunMetrics,
  type NewsletterMetrics,
  type RunMetrics,
} from "@/app/actions/automation-dashboard-actions"
import { useEffect, useState } from "react"
import { CheckCircle, AlertCircle, BarChart, FileText } from "lucide-react"

export function AutomationMetricsCards() {
  const [newsletterMetrics, setNewsletterMetrics] = useState<NewsletterMetrics | null>(null)
  const [runMetrics, setRunMetrics] = useState<RunMetrics | null>(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

useEffect(() => {
    async function fetchMetrics() {
      try {
        setLoading(true)
        setError(null)

// Fetch metrics one at a time to isolate any potential errors
        const newsletterData = await getNewsletterMetrics()
        setNewsletterMetrics(newsletterData)

const runData = await getRunMetrics(30)
        setRunMetrics(runData)
      } catch (err) {
        console.error("Error fetching metrics:", err)
        setError(err instanceof Error ? err.message : "An unknown error occurred")
      } finally {
        setLoading(false)
      }
    }

fetchMetrics()
  }, [])

// Calculate success rate
  const successRate = runMetrics && runMetrics.total > 0 ? (runMetrics.success / runMetrics.total) * 100 : 0

if (error) {
    return (
      <div className="p-4 mb-4 text-sm text-red-700 bg-red-100 rounded-lg">
        <p>Error loading metrics: {error}</p>
        <p className="mt-2">Please check your database tables and try again.</p>
      </div>
    )
  }

return (
    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
      <Card>
        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
          <CardTitle className="text-sm font-medium">Total Newsletters</CardTitle>
          <FileText className="h-4 w-4 text-muted-foreground" />
        </CardHeader>
        <CardContent>
          <div className="text-2xl font-bold">{loading ? "Loading..." : newsletterMetrics?.total || 0}</div>
          <p className="text-xs text-muted-foreground">
            {loading
              ? "Loading..."
              : `${newsletterMetrics?.active || 0} active, ${newsletterMetrics?.paused || 0} paused`}
          </p>
        </CardContent>
      </Card>
      <Card>
        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
          <CardTitle className="text-sm font-medium">Success Rate</CardTitle>
          <BarChart className="h-4 w-4 text-muted-foreground" />
        </CardHeader>
        <CardContent>
          <div className="text-2xl font-bold">{loading ? "Loading..." : `${successRate.toFixed(1)}%`}</div>
          <p className="text-xs text-muted-foreground">Last 30 days</p>
        </CardContent>
      </Card>
      <Card>
        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
          <CardTitle className="text-sm font-medium">Successful Runs</CardTitle>
          <CheckCircle className="h-4 w-4 text-muted-foreground" />
        </CardHeader>
        <CardContent>
          <div className="text-2xl font-bold">{loading ? "Loading..." : runMetrics?.success || 0}</div>
          <p className="text-xs text-muted-foreground">Last 30 days</p>
        </CardContent>
      </Card>
      <Card>
        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
          <CardTitle className="text-sm font-medium">Failed Runs</CardTitle>
          <AlertCircle className="h-4 w-4 text-muted-foreground" />
        </CardHeader>
        <CardContent>
          <div className="text-2xl font-bold">{loading ? "Loading..." : runMetrics?.failure || 0}</div>
          <p className="text-xs text-muted-foreground">Last 30 days</p>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/automation-dashboard/cron-schedule-manager.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { useToast } from "@/hooks/use-toast"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Switch } from "@/components/ui/switch"
import { Clock, Save, Plus, AlertCircle } from "lucide-react"
import { updateCronSchedule, getCronJobs } from "@/app/actions/automation-dashboard-actions"
import { AddJobDialog } from "./add-job-dialog"
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
import { JobDependenciesManager } from "./job-dependencies-manager"

interface CronJob {
  id: string
  name: string
  path: string
  schedule: string
  isActive: boolean
  lastRun: string | null
  nextRun: string | null
  description: string
}

interface CronScheduleManagerProps {
  initialJobs: CronJob[]
}

export function CronScheduleManager({ initialJobs }: CronScheduleManagerProps) {
  const { toast } = useToast()
  const [jobs, setJobs] = useState<CronJob[]>(initialJobs)
  const [activeTab, setActiveTab] = useState("schedule")
  const [scheduleTab, setScheduleTab] = useState("simple")
  const [selectedJob, setSelectedJob] = useState<string>(jobs[0]?.id || "")
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [isAddJobDialogOpen, setIsAddJobDialogOpen] = useState(false)

// Simple schedule state
  const [frequency, setFrequency] = useState<"daily" | "twice-daily">("daily")
  const [time, setTime] = useState("18:00") // Default to 6 PM
  const [secondTime, setSecondTime] = useState("16:00")

// Advanced schedule state
  const [cronExpression, setCronExpression] = useState("")

// Refresh jobs list
  const refreshJobs = async () => {
    try {
      const refreshedJobs = await getCronJobs()
      setJobs(refreshedJobs)

// If no job is selected and we have jobs, select the first one
      if (!selectedJob && refreshedJobs.length > 0) {
        setSelectedJob(refreshedJobs[0].id)
      }
    } catch (error) {
      console.error("Error refreshing jobs:", error)
      toast({
        title: "Error",
        description: "Failed to refresh automation jobs.",
        variant: "destructive",
        duration: 5000,
      })
    }
  }

const handleJobSelect = (jobId: string) => {
    const job = jobs.find((j) => j.id === jobId)
    setSelectedJob(jobId)

if (job) {
      // Parse cron expression to set simple UI state
      const cronParts = job.schedule.split(" ")

// Simple parsing logic - this is basic and doesn't cover all cases
      if (
        cronParts[0] === "0" &&
        cronParts[1] === "23" &&
        cronParts[2] === "*" &&
        cronParts[3] === "*" &&
        cronParts[4] === "*"
      ) {
        // Daily at 6 PM EST (11 PM UTC)
        setFrequency("daily")
        setTime("18:00") // 6 PM
        setScheduleTab("simple")
      } else if (cronParts[1] === "*" && cronParts[2] !== "*") {
        // Daily at specific hour
        setFrequency("daily")
        const hour = Number.parseInt(cronParts[2])
        const minute = Number.parseInt(cronParts[1] === "*" ? "0" : cronParts[1])
        setTime(`${hour.toString().padStart(2, "0")}:${minute.toString().padStart(2, "0")}`)
        setScheduleTab("simple")
      } else if (cronParts[1] !== "*" && cronParts[2] !== "*") {
        // Specific times
        // This is a simplification - actual parsing would be more complex
        setFrequency("twice-daily")
        setScheduleTab("simple")
      } else {
        // Complex expression, switch to advanced tab
        setScheduleTab("advanced")
      }

setCronExpression(job.schedule)
    }
  }

const generateCronExpression = (): string => {
    if (scheduleTab === "simple") {
      if (frequency === "daily") {
        // For 6 PM EST (11 PM UTC)
        if (time === "18:00") {
          return "0 23 * * *"
        }

const [hours, minutes] = time.split(":").map(Number)
        return `${minutes} ${hours} * * *`
      } else if (frequency === "twice-daily") {
        const [hours1, minutes1] = time.split(":").map(Number)
        const [hours2, minutes2] = secondTime.split(":").map(Number)

// For twice daily, we'll use a simplified approach
        // In a real implementation, you might want to use multiple cron jobs
        // or a more sophisticated cron expression
        return `${minutes1} ${hours1},${hours2} * * *`
      }
    }

return cronExpression
  }

const handleSaveSchedule = async () => {
    if (!selectedJob) return

setIsSubmitting(true)

try {
      const newSchedule = generateCronExpression()
      const result = await updateCronSchedule(selectedJob, newSchedule)

if (result.success) {
        // Update local state
        setJobs(jobs.map((job) => (job.id === selectedJob ? { ...job, schedule: newSchedule } : job)))

toast({
          title: "Schedule updated",
          description: "The cron schedule has been updated successfully.",
          duration: 3000,
        })

// Refresh jobs to get updated next run time
        refreshJobs()
      } else {
        toast({
          title: "Failed to update schedule",
          description: result.message || "An error occurred while updating the schedule.",
          variant: "destructive",
          duration: 5000,
        })
      }
    } catch (error) {
      console.error("Error updating cron schedule:", error)
      toast({
        title: "Error",
        description: "An unexpected error occurred. Please try again.",
        variant: "destructive",
        duration: 5000,
      })
    } finally {
      setIsSubmitting(false)
    }
  }

const toggleJobStatus = async (jobId: string, currentStatus: boolean) => {
    // In a real implementation, this would call an API to enable/disable the job
    setJobs(jobs.map((job) => (job.id === jobId ? { ...job, isActive: !currentStatus } : job)))

toast({
      title: currentStatus ? "Job disabled" : "Job enabled",
      description: `The job has been ${currentStatus ? "disabled" : "enabled"} successfully.`,
      duration: 3000,
    })
  }

const formatNextRun = (dateString: string | null) => {
    if (!dateString) return "Not scheduled"

const date = new Date(dateString)
    return date.toLocaleString()
  }

const handleJobAdded = (newJob: CronJob) => {
    // Add the new job to the list
    setJobs([newJob, ...jobs])

// Select the new job
    setSelectedJob(newJob.id)

toast({
      title: "Job created",
      description: `The job "${newJob.name}" has been created successfully.`,
      duration: 3000,
    })
  }

useEffect(() => {
    refreshJobs()
  }, [])

const selectedJobData = jobs.find((j) => j.id === selectedJob)

return (
    <>
      <Card>
        <CardHeader>
          <CardTitle>Cron Schedule Manager</CardTitle>
          <CardDescription>Configure when your automated tasks run</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <Alert>
            <AlertCircle className="h-4 w-4" />
            <AlertTitle>Newsletter Processing Schedule</AlertTitle>
            <AlertDescription>
              The newsletter processing job is now configured to run once per day at 6 PM EST.
            </AlertDescription>
          </Alert>

<div className="space-y-2">
            <Label htmlFor="job-select">Select Job</Label>
            <Select value={selectedJob} onValueChange={handleJobSelect}>
              <SelectTrigger id="job-select">
                <SelectValue placeholder="Select a job" />
              </SelectTrigger>
              <SelectContent>
                {jobs.map((job) => (
                  <SelectItem key={job.id} value={job.id}>
                    {job.name}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

{selectedJob && (
            <>
              <div className="flex items-center justify-between">
                <div>
                  <h4 className="font-medium">Job Status</h4>
                  <p className="text-sm text-muted-foreground">
                    {jobs.find((j) => j.id === selectedJob)?.isActive
                      ? "This job is currently active"
                      : "This job is currently disabled"}
                  </p>
                </div>
                <Switch
                  checked={jobs.find((j) => j.id === selectedJob)?.isActive || false}
                  onCheckedChange={() =>
                    toggleJobStatus(selectedJob, jobs.find((j) => j.id === selectedJob)?.isActive || false)
                  }
                />
              </div>

<div className="space-y-1">
                <h4 className="font-medium">Job Details</h4>
                <p className="text-sm text-muted-foreground">{jobs.find((j) => j.id === selectedJob)?.description}</p>
                <div className="flex items-center mt-2 text-sm">
                  <Clock className="h-4 w-4 mr-1 text-muted-foreground" />
                  <span>Next run: {formatNextRun(jobs.find((j) => j.id === selectedJob)?.nextRun || null)}</span>
                </div>
              </div>

<Tabs value={activeTab} onValueChange={setActiveTab} className="mt-4">
                <TabsList className="grid w-full grid-cols-2">
                  <TabsTrigger value="schedule">Schedule</TabsTrigger>
                  <TabsTrigger value="dependencies">Dependencies</TabsTrigger>
                </TabsList>

<TabsContent value="schedule">
                  <Tabs value={scheduleTab} onValueChange={setScheduleTab} className="mt-4">
                    <TabsList className="grid w-full grid-cols-2">
                      <TabsTrigger value="simple">Simple</TabsTrigger>
                      <TabsTrigger value="advanced">Advanced</TabsTrigger>
                    </TabsList>

<TabsContent value="simple" className="space-y-4">
                      <div className="space-y-2">
                        <Label htmlFor="frequency">Frequency</Label>
                        <Select
                          value={frequency}
                          onValueChange={(value: "daily" | "twice-daily") => setFrequency(value)}
                        >
                          <SelectTrigger id="frequency">
                            <SelectValue placeholder="Select frequency" />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="daily">Once daily</SelectItem>
                            <SelectItem value="twice-daily">Twice daily</SelectItem>
                          </SelectContent>
                        </Select>
                      </div>

<div className="space-y-2">
                        <Label htmlFor="time">{frequency === "daily" ? "Time" : "First Time"}</Label>
                        <Input id="time" type="time" value={time} onChange={(e) => setTime(e.target.value)} />
                      </div>

{frequency === "twice-daily" && (
                        <div className="space-y-2">
                          <Label htmlFor="second-time">Second Time</Label>
                          <Input
                            id="second-time"
                            type="time"
                            value={secondTime}
                            onChange={(e) => setSecondTime(e.target.value)}
                          />
                        </div>
                      )}

<div className="pt-2">
                        <p className="text-sm text-muted-foreground">
                          Generated cron expression:{" "}
                          <code className="bg-muted px-1 py-0.5 rounded">{generateCronExpression()}</code>
                        </p>
                      </div>
                    </TabsContent>

<TabsContent value="advanced" className="space-y-4">
                      <div className="space-y-2">
                        <Label htmlFor="cron-expression">Cron Expression</Label>
                        <Input
                          id="cron-expression"
                          placeholder="* * * * *"
                          value={cronExpression}
                          onChange={(e) => setCronExpression(e.target.value)}
                        />
                        <p className="text-xs text-muted-foreground">
                          Format: minute hour day-of-month month day-of-week
                        </p>
                      </div>

<div className="bg-muted p-3 rounded-md">
                        <h4 className="font-medium text-sm">Common Patterns</h4>
                        <div className="grid grid-cols-2 gap-2 mt-2">
                          <Button variant="outline" size="sm" onClick={() => setCronExpression("0 8 * * *")}>
                            Daily at 8 AM
                          </Button>
                          <Button variant="outline" size="sm" onClick={() => setCronExpression("0 23 * * *")}>
                            Daily at 6 PM EST
                          </Button>
                          <Button variant="outline" size="sm" onClick={() => setCronExpression("0 9 * * 1-5")}>
                            Weekdays at 9 AM
                          </Button>
                          <Button variant="outline" size="sm" onClick={() => setCronExpression("0 */4 * * *")}>
                            Every 4 hours
                          </Button>
                        </div>
                      </div>
                    </TabsContent>
                  </Tabs>

<div className="flex justify-end mt-4">
                    <Button onClick={handleSaveSchedule} disabled={isSubmitting || !selectedJob}>
                      {isSubmitting ? (
                        <>
                          <span className="animate-spin mr-2">⏳</span>
                          Saving...
                        </>
                      ) : (
                        <>
                          <Save className="h-4 w-4 mr-2" />
                          Save Schedule
                        </>
                      )}
                    </Button>
                  </div>
                </TabsContent>

<TabsContent value="dependencies">
                  {selectedJobData && (
                    <JobDependenciesManager jobId={selectedJobData.id} jobName={selectedJobData.name} />
                  )}
                </TabsContent>
              </Tabs>
            </>
          )}
        </CardContent>
        <CardFooter className="flex justify-between">
          <Button variant="outline" onClick={() => setIsAddJobDialogOpen(true)}>
            <Plus className="h-4 w-4 mr-2" />
            Add New Job
          </Button>
        </CardFooter>
      </Card>

<AddJobDialog open={isAddJobDialogOpen} onOpenChange={setIsAddJobDialogOpen} onJobAdded={handleJobAdded} />
    </>
  )
}
[V0_FILE]typescriptreact:file="components/automation-dashboard/dashboard-skeleton.tsx" isMerged="true"
import { Skeleton } from "@/components/ui/skeleton"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"

export function DashboardSkeleton() {
  return (
    <div className="space-y-8">
      {/* Metrics Cards Skeleton */}
      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
        {Array.from({ length: 4 }).map((_, i) => (
          <Card key={i}>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">
                <Skeleton className="h-4 w-24" />
              </CardTitle>
              <Skeleton className="h-4 w-4 rounded-full" />
            </CardHeader>
            <CardContent>
              <Skeleton className="h-8 w-16 mb-1" />
              <Skeleton className="h-3 w-32" />
            </CardContent>
          </Card>
        ))}
      </div>

{/* Chart Skeleton */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        <Card className="md:col-span-2">
          <CardHeader>
            <CardTitle>
              <Skeleton className="h-5 w-40" />
            </CardTitle>
            <Skeleton className="h-4 w-64" />
          </CardHeader>
          <CardContent>
            <Skeleton className="h-[250px] w-full" />
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle>
              <Skeleton className="h-5 w-32" />
            </CardTitle>
            <Skeleton className="h-4 w-48" />
          </CardHeader>
          <CardContent className="space-y-4">
            {Array.from({ length: 3 }).map((_, i) => (
              <Skeleton key={i} className="h-16 w-full" />
            ))}
          </CardContent>
        </Card>
      </div>

{/* Table Skeleton */}
      <Card>
        <CardHeader>
          <CardTitle>
            <Skeleton className="h-5 w-48" />
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="space-y-2">
            <Skeleton className="h-10 w-full" />
            {Array.from({ length: 5 }).map((_, i) => (
              <Skeleton key={i} className="h-12 w-full" />
            ))}
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/automation-dashboard/duration-trends-chart.tsx" isMerged="true"
"use client"

import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend } from "recharts"
import type { DurationTrend } from "@/app/actions/execution-metrics-actions"

interface DurationTrendsChartProps {
  data: DurationTrend[]
  loading: boolean
}

export function DurationTrendsChart({ data, loading }: DurationTrendsChartProps) {
  if (loading) {
    return (
      <div className="h-80 w-full flex items-center justify-center">
        <p className="text-muted-foreground">Loading chart data...</p>
      </div>
    )
  }

if (data.length === 0) {
    return (
      <div className="h-80 w-full flex items-center justify-center">
        <p className="text-muted-foreground">No duration data available</p>
      </div>
    )
  }

// Format the data for display
  const formattedData = data.map((item) => ({
    ...item,
    avgDurationSec: item.avgDuration ? (item.avgDuration / 1000).toFixed(1) : 0,
    minDurationSec: item.minDuration ? (item.minDuration / 1000).toFixed(1) : 0,
    maxDurationSec: item.maxDuration ? (item.maxDuration / 1000).toFixed(1) : 0,
  }))

return (
    <div className="h-80 w-full">
      <ResponsiveContainer width="100%" height="100%">
        <LineChart
          data={formattedData}
          margin={{
            top: 10,
            right: 30,
            left: 0,
            bottom: 0,
          }}
        >
          <CartesianGrid strokeDasharray="3 3" />
          <XAxis dataKey="date" />
          <YAxis label={{ value: "Duration (seconds)", angle: -90, position: "insideLeft" }} />
          <Tooltip formatter={(value) => [`${value} sec`, "Duration"]} />
          <Legend />
          <Line
            type="monotone"
            dataKey="avgDurationSec"
            stroke="#3b82f6"
            name="Avg Duration"
            strokeWidth={2}
            dot={{ r: 1 }}
            activeDot={{ r: 5 }}
          />
          <Line
            type="monotone"
            dataKey="minDurationSec"
            stroke="#10b981"
            name="Min Duration"
            strokeWidth={1}
            strokeDasharray="5 5"
            dot={false}
          />
          <Line
            type="monotone"
            dataKey="maxDurationSec"
            stroke="#ef4444"
            name="Max Duration"
            strokeWidth={1}
            strokeDasharray="5 5"
            dot={false}
          />
        </LineChart>
      </ResponsiveContainer>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/automation-dashboard/execution-metrics-dashboard.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { AlertCircle } from "lucide-react"
import { ExecutionTrendsChart } from "./execution-trends-chart"
import { DurationTrendsChart } from "./duration-trends-chart"
import { JobPerformanceTable } from "./job-performance-table"
import { StatusDistributionChart } from "./status-distribution-chart"
import { TimeOfDayChart } from "./time-of-day-chart"
import { ExecutionMetricsSummaryCards } from "./execution-metrics-summary-cards"
import {
  getExecutionTrends,
  getDurationTrends,
  getJobPerformance,
  getStatusDistribution,
  getTimeOfDayDistribution,
  getExecutionMetricsSummary,
  type ExecutionTrend,
  type DurationTrend,
  type JobPerformance,
  type StatusDistribution,
  type TimeOfDayDistribution,
  type ExecutionMetricsSummary,
} from "@/app/actions/execution-metrics-actions"
import { getCronJobs, type CronJob } from "@/app/actions/automation-dashboard-actions"

export function ExecutionMetricsDashboard() {
  const [timeRange, setTimeRange] = useState("30")
  const [selectedJobId, setSelectedJobId] = useState<string>("all")
  const [jobs, setJobs] = useState<CronJob[]>([])
  const [executionTrends, setExecutionTrends] = useState<ExecutionTrend[]>([])
  const [durationTrends, setDurationTrends] = useState<DurationTrend[]>([])
  const [jobPerformance, setJobPerformance] = useState<JobPerformance[]>([])
  const [statusDistribution, setStatusDistribution] = useState<StatusDistribution[]>([])
  const [timeOfDayDistribution, setTimeOfDayDistribution] = useState<TimeOfDayDistribution[]>([])
  const [metricsSummary, setMetricsSummary] = useState<ExecutionMetricsSummary | null>(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const [jobsError, setJobsError] = useState<string | null>(null)

// Fetch jobs for the filter dropdown
  useEffect(() => {
    async function fetchJobs() {
      try {
        const jobsData = await getCronJobs()
        setJobs(jobsData)
      } catch (err) {
        console.error("Error fetching jobs:", err)
        setJobsError("Failed to load jobs data. Using job IDs instead of names.")
        // Continue without job data
      }
    }

fetchJobs()
  }, [])

// Fetch metrics data when filters change
  useEffect(() => {
    async function fetchMetricsData() {
      setLoading(true)
      setError(null)

try {
        const days = Number.parseInt(timeRange)
        const jobId = selectedJobId === "all" ? undefined : selectedJobId

// Fetch all metrics data in parallel with error handling for each request
        const [trendsData, durationData, performanceData, statusData, timeData, summaryData] = await Promise.allSettled(
          [
            getExecutionTrends(days, jobId),
            getDurationTrends(days, jobId),
            getJobPerformance(days),
            getStatusDistribution(days, jobId),
            getTimeOfDayDistribution(days, jobId),
            getExecutionMetricsSummary(days),
          ],
        )

// Handle each result individually
        if (trendsData.status === "fulfilled") {
          setExecutionTrends(trendsData.value)
        } else {
          console.error("Error fetching execution trends:", trendsData.reason)
          setExecutionTrends([])
        }

if (durationData.status === "fulfilled") {
          setDurationTrends(durationData.value)
        } else {
          console.error("Error fetching duration trends:", durationData.reason)
          setDurationTrends([])
        }

if (performanceData.status === "fulfilled") {
          setJobPerformance(performanceData.value)
        } else {
          console.error("Error fetching job performance:", performanceData.reason)
          setJobPerformance([])
        }

if (statusData.status === "fulfilled") {
          setStatusDistribution(statusData.value)
        } else {
          console.error("Error fetching status distribution:", statusData.reason)
          setStatusDistribution([])
        }

if (timeData.status === "fulfilled") {
          setTimeOfDayDistribution(timeData.value)
        } else {
          console.error("Error fetching time of day distribution:", timeData.reason)
          setTimeOfDayDistribution([])
        }

if (summaryData.status === "fulfilled") {
          setMetricsSummary(summaryData.value)
        } else {
          console.error("Error fetching metrics summary:", summaryData.reason)
          setMetricsSummary(null)
        }
      } catch (err) {
        console.error("Error fetching metrics data:", err)
        setError("Failed to load some metrics data. Please try again later.")
      } finally {
        setLoading(false)
      }
    }

fetchMetricsData()
  }, [timeRange, selectedJobId])

// Check if we have any data to display
  const hasData =
    executionTrends.length > 0 ||
    durationTrends.length > 0 ||
    jobPerformance.length > 0 ||
    statusDistribution.length > 0 ||
    timeOfDayDistribution.length > 0 ||
    metricsSummary !== null

return (
    <div className="space-y-6">
      {error && (
        <Alert variant="destructive">
          <AlertCircle className="h-4 w-4" />
          <AlertDescription>{error}</AlertDescription>
        </Alert>
      )}

{jobsError && (
        <Alert>
          <AlertCircle className="h-4 w-4" />
          <AlertDescription>{jobsError}</AlertDescription>
        </Alert>
      )}

<div className="flex flex-col sm:flex-row justify-between gap-4">
        <Select value={timeRange} onValueChange={setTimeRange}>
          <SelectTrigger className="w-[180px]">
            <SelectValue placeholder="Select time range" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="7">Last 7 days</SelectItem>
            <SelectItem value="30">Last 30 days</SelectItem>
            <SelectItem value="90">Last 90 days</SelectItem>
            <SelectItem value="180">Last 6 months</SelectItem>
            <SelectItem value="365">Last year</SelectItem>
          </SelectContent>
        </Select>

{!hasData && !loading ? (
        <Card>
          <CardContent className="flex flex-col items-center justify-center p-6">
            <div className="text-center space-y-2">
              <h3 className="text-lg font-medium">No execution data available</h3>
              <p className="text-sm text-muted-foreground">
                There are no job executions recorded in the selected time period.
              </p>
              <p className="text-sm text-muted-foreground mt-4">
                Try selecting a different time range or run some jobs to generate execution data.
              </p>
            </div>
          </CardContent>
        </Card>
      ) : (
        <>
          {/* Summary Cards */}
          {metricsSummary && <ExecutionMetricsSummaryCards summary={metricsSummary} loading={loading} />}

{/* Main Charts */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <Card className="col-span-1 md:col-span-2">
              <CardHeader>
                <CardTitle>Execution Trends</CardTitle>
                <CardDescription>Success and failure rates over time</CardDescription>
              </CardHeader>
              <CardContent>
                <ExecutionTrendsChart data={executionTrends} loading={loading} />
              </CardContent>
            </Card>

<Card>
              <CardHeader>
                <CardTitle>Duration Trends</CardTitle>
                <CardDescription>Average execution duration over time</CardDescription>
              </CardHeader>
              <CardContent>
                <DurationTrendsChart data={durationTrends} loading={loading} />
              </CardContent>
            </Card>

<Card>
              <CardHeader>
                <CardTitle>Status Distribution</CardTitle>
                <CardDescription>Distribution of execution statuses</CardDescription>
              </CardHeader>
              <CardContent>
                <StatusDistributionChart data={statusDistribution} loading={loading} />
              </CardContent>
            </Card>
          </div>

{/* Tabs for additional views */}
          <Tabs defaultValue="performance">
            <TabsList className="grid w-full grid-cols-3">
              <TabsTrigger value="performance">Job Performance</TabsTrigger>
              <TabsTrigger value="time">Time Analysis</TabsTrigger>
              <TabsTrigger value="trends">Trend Analysis</TabsTrigger>
            </TabsList>

<TabsContent value="performance" className="mt-6">
              <Card>
                <CardHeader>
                  <CardTitle>Job Performance Comparison</CardTitle>
                  <CardDescription>Compare success rates and execution times across different jobs</CardDescription>
                </CardHeader>
                <CardContent>
                  <JobPerformanceTable data={jobPerformance} loading={loading} />
                </CardContent>
              </Card>
            </TabsContent>

<TabsContent value="time" className="mt-6">
              <Card>
                <CardHeader>
                  <CardTitle>Time of Day Distribution</CardTitle>
                  <CardDescription>When jobs are most frequently executed</CardDescription>
                </CardHeader>
                <CardContent>
                  <TimeOfDayChart data={timeOfDayDistribution} loading={loading} />
                </CardContent>
              </Card>
            </TabsContent>

<TabsContent value="trends" className="mt-6">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <Card>
                  <CardHeader>
                    <CardTitle>Success Rate Trend</CardTitle>
                    <CardDescription>How success rates have changed over time</CardDescription>
                  </CardHeader>
                  <CardContent>
                    {/* Success Rate Trend Chart would go here */}
                    <div className="h-80 flex items-center justify-center text-muted-foreground">
                      {loading ? "Loading..." : "Success rate trend visualization"}
                    </div>
                  </CardContent>
                </Card>

<Card>
                  <CardHeader>
                    <CardTitle>Execution Volume Trend</CardTitle>
                    <CardDescription>How execution volume has changed over time</CardDescription>
                  </CardHeader>
                  <CardContent>
                    {/* Execution Volume Trend Chart would go here */}
                    <div className="h-80 flex items-center justify-center text-muted-foreground">
                      {loading ? "Loading..." : "Execution volume trend visualization"}
                    </div>
                  </CardContent>
                </Card>
              </div>
            </TabsContent>
          </Tabs>
        </>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/automation-dashboard/execution-metrics-skeleton.tsx" isMerged="true"
import { Skeleton } from "@/components/ui/skeleton"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"

export function ExecutionMetricsSkeleton() {
  return (
    <div className="space-y-6">
      {/* Filter Skeleton */}
      <div className="flex flex-col sm:flex-row justify-between gap-4">
        <Skeleton className="h-10 w-[180px]" />
        <Skeleton className="h-10 w-[220px]" />
      </div>

{/* Summary Cards Skeleton */}
      <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-6 gap-4">
        {Array(6)
          .fill(0)
          .map((_, i) => (
            <Card key={i}>
              <CardContent className="pt-6">
                <div className="flex items-center justify-between">
                  <div>
                    <Skeleton className="h-4 w-32 mb-2" />
                    <Skeleton className="h-8 w-16" />
                  </div>
                  <Skeleton className="h-5 w-5 rounded-full" />
                </div>
              </CardContent>
            </Card>
          ))}
      </div>

{/* Main Charts Skeleton */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        <Card className="col-span-1 md:col-span-2">
          <CardHeader>
            <CardTitle>
              <Skeleton className="h-6 w-40" />
            </CardTitle>
            <Skeleton className="h-4 w-64" />
          </CardHeader>
          <CardContent>
            <Skeleton className="h-80 w-full" />
          </CardContent>
        </Card>

{/* Tabs Skeleton */}
      <div>
        <Skeleton className="h-10 w-full mb-6" />
        <Card>
          <CardHeader>
            <CardTitle>
              <Skeleton className="h-6 w-40" />
            </CardTitle>
            <Skeleton className="h-4 w-64" />
          </CardHeader>
          <CardContent>
            <Skeleton className="h-80 w-full" />
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/automation-dashboard/execution-metrics-summary-cards.tsx" isMerged="true"
"use client"

import { Card, CardContent } from "@/components/ui/card"
import { XCircle, Clock, Activity, Award, AlertTriangle } from "lucide-react"
import type { ExecutionMetricsSummary } from "@/app/actions/execution-metrics-actions"

interface ExecutionMetricsSummaryCardsProps {
  summary: ExecutionMetricsSummary
  loading: boolean
}

export function ExecutionMetricsSummaryCards({ summary, loading }: ExecutionMetricsSummaryCardsProps) {
  if (loading) {
    return (
      <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-6 gap-4">
        {Array(6)
          .fill(0)
          .map((_, i) => (
            <Card key={i}>
              <CardContent className="pt-6">
                <div className="h-16 flex items-center justify-center">
                  <p className="text-muted-foreground">Loading...</p>
                </div>
              </CardContent>
            </Card>
          ))}
      </div>
    )
  }

return (
    <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-6 gap-4">
      <Card>
        <CardContent className="pt-6">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-muted-foreground">Total Executions</p>
              <p className="text-2xl font-bold">{summary.totalExecutions}</p>
            </div>
            <Activity className="h-5 w-5 text-muted-foreground" />
          </div>
        </CardContent>
      </Card>

<Card>
        <CardContent className="pt-6">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-muted-foreground">Success Rate</p>
              <p className="text-2xl font-bold">{summary.successRate.toFixed(1)}%</p>
            </div>
            <div className="h-5 w-5 flex items-center justify-center">
              <div
                className="h-4 w-4 rounded-full"
                style={{
                  background: `conic-gradient(rgb(34, 197, 94) ${summary.successRate}%, rgb(239, 68, 68) 0)`,
                }}
              />
            </div>
          </div>
        </CardContent>
      </Card>

<Card>
        <CardContent className="pt-6">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-muted-foreground">Avg. Duration</p>
              <p className="text-2xl font-bold">
                {summary.avgDuration ? `${(summary.avgDuration / 1000).toFixed(1)}s` : "N/A"}
              </p>
            </div>
            <Clock className="h-5 w-5 text-muted-foreground" />
          </div>
        </CardContent>
      </Card>

<Card>
        <CardContent className="pt-6">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-muted-foreground">Failed Executions</p>
              <p className="text-2xl font-bold">{summary.failureCount}</p>
            </div>
            <XCircle className="h-5 w-5 text-red-500" />
          </div>
        </CardContent>
      </Card>

<Card>
        <CardContent className="pt-6">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-muted-foreground">Most Frequent Job</p>
              <p className="text-lg font-bold truncate max-w-[140px]">{summary.mostFrequentJob?.jobName || "N/A"}</p>
              <p className="text-xs text-muted-foreground">
                {summary.mostFrequentJob ? `${summary.mostFrequentJob.count} executions` : ""}
              </p>
            </div>
            <Award className="h-5 w-5 text-blue-500" />
          </div>
        </CardContent>
      </Card>

<Card>
        <CardContent className="pt-6">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-muted-foreground">Most Failed Job</p>
              <p className="text-lg font-bold truncate max-w-[140px]">{summary.mostFailedJob?.jobName || "N/A"}</p>
              <p className="text-xs text-muted-foreground">
                {summary.mostFailedJob ? `${summary.mostFailedJob.failureCount} failures` : ""}
              </p>
            </div>
            <AlertTriangle className="h-5 w-5 text-yellow-500" />
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/automation-dashboard/execution-trends-chart.tsx" isMerged="true"
"use client"

import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend } from "recharts"
import type { ExecutionTrend } from "@/app/actions/execution-metrics-actions"

interface ExecutionTrendsChartProps {
  data: ExecutionTrend[]
  loading: boolean
}

export function ExecutionTrendsChart({ data, loading }: ExecutionTrendsChartProps) {
  if (loading) {
    return (
      <div className="h-80 w-full flex items-center justify-center">
        <p className="text-muted-foreground">Loading chart data...</p>
      </div>
    )
  }

if (data.length === 0) {
    return (
      <div className="h-80 w-full flex items-center justify-center">
        <p className="text-muted-foreground">No execution data available</p>
      </div>
    )
  }

return (
    <div className="h-80 w-full">
      <ResponsiveContainer width="100%" height="100%">
        <AreaChart
          data={data}
          margin={{
            top: 10,
            right: 30,
            left: 0,
            bottom: 0,
          }}
        >
          <CartesianGrid strokeDasharray="3 3" />
          <XAxis dataKey="date" />
          <YAxis />
          <Tooltip
            formatter={(value, name) => {
              return [value, name.charAt(0).toUpperCase() + name.slice(1)]
            }}
          />
          <Legend />
          <Area type="monotone" dataKey="success" stackId="1" stroke="#10b981" fill="#10b981" name="Success" />
          <Area type="monotone" dataKey="failure" stackId="1" stroke="#ef4444" fill="#ef4444" name="Failure" />
          <Area type="monotone" dataKey="running" stackId="1" stroke="#3b82f6" fill="#3b82f6" name="Running" />
          <Area type="monotone" dataKey="canceled" stackId="1" stroke="#f59e0b" fill="#f59e0b" name="Canceled" />
        </AreaChart>
      </ResponsiveContainer>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/automation-dashboard/index.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { AutomationMetricsCards } from "./automation-metrics-cards"
import { RunsTimeSeriesChart } from "./runs-time-series-chart"
import { NewsletterPerformanceTable } from "./newsletter-performance-table"
import { SystemLogsTable } from "./system-logs-table"
import { RecentErrorsList } from "./recent-errors-list"
import { ManualTriggerCard } from "./manual-trigger-card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { History, RefreshCw } from "lucide-react"
import { toast } from "@/components/ui/use-toast"

export function AutomationDashboard() {
  const [isRefreshing, setIsRefreshing] = useState(false)

const handleRefreshData = async () => {
    setIsRefreshing(true)

try {
      console.log("[v0] Triggering stock data refresh...")
      const response = await fetch("/api/cron/investment-ideas", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          sectors: ["Technology", "Healthcare", "Financial", "Energy", "Consumer"],
          count: 5,
          strategy: "balanced",
          saveToDatabase: true,
          enhanceIdeas: false,
        }),
      })

const result = await response.json()

if (!response.ok || !result.success) {
        toast({
          title: "Refresh Failed",
          description: result.error || "Failed to refresh stock data",
          variant: "destructive",
        })
        return
      }

toast({
        title: "Data Refreshed",
        description: `Successfully generated ${result.ideasGenerated} new investment ideas`,
      })
    } catch (error) {
      console.error("[v0] Error refreshing data:", error)
      toast({
        title: "Refresh Error",
        description: "Failed to refresh stock data. Please try again.",
        variant: "destructive",
      })
    } finally {
      setIsRefreshing(false)
    }
  }

return (
    <div className="space-y-8">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold">Automation Dashboard</h1>
          <p className="text-muted-foreground">Monitor and manage your automated workflows</p>
        </div>
        <Button onClick={handleRefreshData} disabled={isRefreshing} className="bg-blue-600 hover:bg-blue-700">
          {isRefreshing ? (
            <>
              <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2" />
              Refreshing...
            </>
          ) : (
            <>
              <RefreshCw className="h-4 w-4 mr-2" />
              Refresh Data
            </>
          )}
        </Button>
      </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        <Card className="md:col-span-2">
          <CardHeader>
            <CardTitle>Newsletter Runs Over Time</CardTitle>
            <CardDescription>Visualize the success and failure rates of your automated newsletters</CardDescription>
          </CardHeader>
          <CardContent>
            <RunsTimeSeriesChart />
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle>Recent Errors</CardTitle>
            <CardDescription>Latest errors from your automation system</CardDescription>
          </CardHeader>
          <CardContent>
            <RecentErrorsList />
          </CardContent>
        </Card>
      </div>

<Tabs defaultValue="performance">
        <TabsList className="grid w-full grid-cols-4 mb-4">
          <TabsTrigger value="performance">Newsletter Performance</TabsTrigger>
          <TabsTrigger value="logs">System Logs</TabsTrigger>
          <TabsTrigger value="actions">Actions</TabsTrigger>
          <TabsTrigger value="history" asChild>
            <Link href="/automation-dashboard/job-history">Job History</Link>
          </TabsTrigger>
        </TabsList>

<Card>
              <CardHeader>
                <CardTitle>Quick Actions</CardTitle>
                <CardDescription>Common tasks for managing your newsletter automation</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="space-y-2">
                  <Link href="/automation-dashboard/job-history">
                    <Button variant="outline" className="w-full flex items-center justify-start gap-2 bg-transparent">
                      <History className="h-4 w-4" />
                      View Job Execution History
                    </Button>
                  </Link>
                </div>
              </CardContent>
            </Card>
          </div>
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/automation-dashboard/job-dependencies-manager.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { useToast } from "@/hooks/use-toast"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
import { Trash2, Plus, AlertCircle, ArrowDownToLine, Info } from "lucide-react"
import {
  getJobDependencies,
  getAvailableDependencies,
  addJobDependency,
  removeJobDependency,
  type JobDependency,
} from "@/app/actions/job-dependency-actions"

interface JobDependenciesManagerProps {
  jobId: string
  jobName: string
}

export function JobDependenciesManager({ jobId, jobName }: JobDependenciesManagerProps) {
  const { toast } = useToast()
  const [dependencies, setDependencies] = useState<JobDependency[]>([])
  const [availableDependencies, setAvailableDependencies] = useState<{ id: string; name: string }[]>([])
  const [selectedDependency, setSelectedDependency] = useState<string>("")
  const [isLoading, setIsLoading] = useState(true)
  const [isAdding, setIsAdding] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [setupNeeded, setSetupNeeded] = useState(false)

const loadDependencies = async () => {
    setIsLoading(true)
    setError(null)
    try {
      const deps = await getJobDependencies(jobId)
      setDependencies(deps)

const availableDeps = await getAvailableDependencies(jobId)
      setAvailableDependencies(availableDeps)

if (availableDeps.length > 0 && !selectedDependency) {
        setSelectedDependency(availableDeps[0].id)
      }

// If both calls succeeded but returned empty arrays, the system might not be set up
      if (deps.length === 0 && availableDeps.length === 0) {
        setSetupNeeded(true)
      } else {
        setSetupNeeded(false)
      }
    } catch (error) {
      console.error("Error loading dependencies:", error)
      setError("Failed to load job dependencies. The dependencies system might not be set up yet.")
      setSetupNeeded(true)
    } finally {
      setIsLoading(false)
    }
  }

const handleAddDependency = async () => {
    if (!selectedDependency) return

setIsAdding(true)
    try {
      const result = await addJobDependency(jobId, selectedDependency)

if (result.success && result.dependency) {
        setDependencies([...dependencies, result.dependency])

// Update available dependencies
        const updatedAvailable = availableDependencies.filter((dep) => dep.id !== selectedDependency)
        setAvailableDependencies(updatedAvailable)

if (updatedAvailable.length > 0) {
          setSelectedDependency(updatedAvailable[0].id)
        } else {
          setSelectedDependency("")
        }

toast({
          title: "Dependency added",
          description: "The job dependency has been added successfully.",
          duration: 3000,
        })
      } else {
        toast({
          title: "Failed to add dependency",
          description: result.message || "An error occurred while adding the dependency.",
          variant: "destructive",
          duration: 5000,
        })

if (result.message?.includes("not set up yet")) {
          setSetupNeeded(true)
        }
      }
    } catch (error) {
      console.error("Error adding dependency:", error)
      toast({
        title: "Error",
        description: "An unexpected error occurred. Please try again.",
        variant: "destructive",
        duration: 5000,
      })
    } finally {
      setIsAdding(false)
    }
  }

const handleRemoveDependency = async (dependencyId: string) => {
    try {
      const result = await removeJobDependency(dependencyId)

if (result.success) {
        // Find the removed dependency to add it back to available list
        const removedDep = dependencies.find((dep) => dep.id === dependencyId)

// Update dependencies list
        setDependencies(dependencies.filter((dep) => dep.id !== dependencyId))

// Update available dependencies if we found the removed one
        if (removedDep) {
          const depJob = {
            id: removedDep.dependsOnJobId,
            name: removedDep.dependsOnJobName || "Unknown Job",
          }
          setAvailableDependencies([...availableDependencies, depJob])
        }

toast({
          title: "Dependency removed",
          description: "The job dependency has been removed successfully.",
          duration: 3000,
        })

// Refresh dependencies to ensure everything is in sync
        loadDependencies()
      } else {
        toast({
          title: "Failed to remove dependency",
          description: result.message || "An error occurred while removing the dependency.",
          variant: "destructive",
          duration: 5000,
        })

if (result.message?.includes("not set up yet")) {
          setSetupNeeded(true)
        }
      }
    } catch (error) {
      console.error("Error removing dependency:", error)
      toast({
        title: "Error",
        description: "An unexpected error occurred. Please try again.",
        variant: "destructive",
        duration: 5000,
      })
    }
  }

useEffect(() => {
    if (jobId) {
      loadDependencies()
    }
  }, [jobId])

if (isLoading) {
    return (
      <Card>
        <CardHeader>
          <CardTitle>Job Dependencies</CardTitle>
          <CardDescription>Loading dependencies...</CardDescription>
        </CardHeader>
        <CardContent className="flex justify-center py-6">
          <div className="animate-pulse flex space-x-4">
            <div className="rounded-full bg-slate-200 h-10 w-10"></div>
            <div className="flex-1 space-y-6 py-1">
              <div className="h-2 bg-slate-200 rounded"></div>
              <div className="space-y-3">
                <div className="grid grid-cols-3 gap-4">
                  <div className="h-2 bg-slate-200 rounded col-span-2"></div>
                  <div className="h-2 bg-slate-200 rounded col-span-1"></div>
                </div>
                <div className="h-2 bg-slate-200 rounded"></div>
              </div>
            </div>
          </div>
        </CardContent>
      </Card>
    )
  }

if (setupNeeded) {
    return (
      <Card>
        <CardHeader>
          <CardTitle>Job Dependencies</CardTitle>
          <CardDescription>Configure which jobs must complete before {jobName} runs</CardDescription>
        </CardHeader>
        <CardContent>
          <Alert className="mb-4">
            <Info className="h-4 w-4" />
            <AlertTitle>Setup Required</AlertTitle>
            <AlertDescription>
              The job dependencies system needs to be set up before you can configure dependencies. Please visit the{" "}
              <a href="/automation-dashboard/setup-dependencies" className="underline font-medium">
                setup page
              </a>{" "}
              to initialize the system.
            </AlertDescription>
          </Alert>
        </CardContent>
      </Card>
    )
  }

if (error) {
    return (
      <Card>
        <CardHeader>
          <CardTitle>Job Dependencies</CardTitle>
          <CardDescription>Configure which jobs must complete before {jobName} runs</CardDescription>
        </CardHeader>
        <CardContent>
          <Alert variant="destructive">
            <AlertCircle className="h-4 w-4" />
            <AlertTitle>Error</AlertTitle>
            <AlertDescription>{error}</AlertDescription>
          </Alert>
          <Button onClick={loadDependencies} className="mt-4">
            Retry
          </Button>
        </CardContent>
      </Card>
    )
  }

return (
    <Card>
      <CardHeader>
        <CardTitle>Job Dependencies</CardTitle>
        <CardDescription>Configure which jobs must complete before {jobName} runs</CardDescription>
      </CardHeader>
      <CardContent className="space-y-4">
        {dependencies.length === 0 ? (
          <Alert>
            <AlertCircle className="h-4 w-4" />
            <AlertTitle>No dependencies configured</AlertTitle>
            <AlertDescription>
              This job will run according to its schedule without waiting for other jobs to complete.
            </AlertDescription>
          </Alert>
        ) : (
          <div className="space-y-2">
            <h3 className="text-sm font-medium">Current Dependencies</h3>
            <p className="text-sm text-muted-foreground mb-2">
              This job will only run after the following jobs have completed successfully:
            </p>
            <div className="space-y-2">
              {dependencies.map((dep) => (
                <div key={dep.id} className="flex items-center justify-between bg-muted p-2 rounded-md">
                  <div className="flex items-center">
                    <ArrowDownToLine className="h-4 w-4 mr-2 text-muted-foreground" />
                    <span>{dep.dependsOnJobName}</span>
                  </div>
                  <Button
                    variant="ghost"
                    size="icon"
                    onClick={() => handleRemoveDependency(dep.id)}
                    title="Remove dependency"
                  >
                    <Trash2 className="h-4 w-4 text-destructive" />
                  </Button>
                </div>
              ))}
            </div>
          </div>
        )}

{availableDependencies.length > 0 && (
          <div className="pt-4 border-t">
            <h3 className="text-sm font-medium mb-2">Add Dependency</h3>
            <div className="flex items-center gap-2">
              <Select
                value={selectedDependency}
                onValueChange={setSelectedDependency}
                disabled={isAdding || availableDependencies.length === 0}
              >
                <SelectTrigger className="flex-1">
                  <SelectValue placeholder="Select a job" />
                </SelectTrigger>
                <SelectContent>
                  {availableDependencies.map((job) => (
                    <SelectItem key={job.id} value={job.id}>
                      {job.name}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
              <Button
                onClick={handleAddDependency}
                disabled={isAdding || !selectedDependency || availableDependencies.length === 0}
              >
                {isAdding ? (
                  <>
                    <span className="animate-spin mr-2">⏳</span>
                    Adding...
                  </>
                ) : (
                  <>
                    <Plus className="h-4 w-4 mr-2" />
                    Add
                  </>
                )}
              </Button>
            </div>
          </div>
        )}

{availableDependencies.length === 0 && dependencies.length > 0 && (
          <Alert className="mt-4">
            <AlertCircle className="h-4 w-4" />
            <AlertTitle>All possible dependencies added</AlertTitle>
            <AlertDescription>You've added all possible dependencies for this job.</AlertDescription>
          </Alert>
        )}
      </CardContent>
      <CardFooter>
        <div className="text-xs text-muted-foreground">
          <p>
            Dependencies ensure jobs run in the correct order. A job with dependencies will only run after all its
            dependencies have completed successfully.
          </p>
        </div>
      </CardFooter>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/automation-dashboard/job-dependency-graph.tsx" isMerged="true"
"use client"

import { useEffect, useRef, useState } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
import { AlertCircle } from "lucide-react"
import { getJobDependencies } from "@/app/actions/job-dependency-actions"
import { getCronJobs } from "@/app/actions/automation-dashboard-actions"

interface JobNode {
  id: string
  name: string
  dependencies: string[]
}

export function JobDependencyGraph() {
  const canvasRef = useRef<HTMLCanvasElement>(null)
  const [jobs, setJobs] = useState<JobNode[]>([])
  const [error, setError] = useState<string | null>(null)
  const [isLoading, setIsLoading] = useState(true)

useEffect(() => {
    const loadData = async () => {
      try {
        setIsLoading(true)
        // Get all jobs
        const allJobs = await getCronJobs()

// Get dependencies for each job
        const jobNodes: JobNode[] = []

for (const job of allJobs) {
          const dependencies = await getJobDependencies(job.id)
          jobNodes.push({
            id: job.id,
            name: job.name,
            dependencies: dependencies.map((dep) => dep.dependsOnJobId),
          })
        }

setJobs(jobNodes)
      } catch (err) {
        setError("Failed to load job dependency data")
        console.error(err)
      } finally {
        setIsLoading(false)
      }
    }

loadData()
  }, [])

useEffect(() => {
    if (!canvasRef.current || jobs.length === 0 || isLoading) return

const canvas = canvasRef.current
    const ctx = canvas.getContext("2d")
    if (!ctx) return

// Clear canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height)

// Set canvas dimensions
    const width = canvas.width
    const height = canvas.height

// Calculate positions for each job node
    const nodeRadius = 40
    const nodePositions: Record<string, { x: number; y: number }> = {}

// Find root nodes (jobs with no dependencies)
    const dependentJobIds = new Set(jobs.flatMap((job) => job.dependencies))
    const rootJobs = jobs.filter((job) => !dependentJobIds.has(job.id))

// Position root jobs at the top
    const rootSpacing = width / (rootJobs.length + 1)
    rootJobs.forEach((job, index) => {
      nodePositions[job.id] = {
        x: rootSpacing * (index + 1),
        y: nodeRadius + 20,
      }
    })

// Position dependent jobs in layers
    let currentLayer = rootJobs
    let layerIndex = 1

while (currentLayer.length > 0) {
      const nextLayer: JobNode[] = []

// Find jobs that depend on the current layer
      jobs.forEach((job) => {
        if (job.dependencies.some((depId) => currentLayer.some((layerJob) => layerJob.id === depId))) {
          if (!nodePositions[job.id]) {
            nextLayer.push(job)
          }
        }
      })

// Position the next layer
      const layerSpacing = width / (nextLayer.length + 1)
      nextLayer.forEach((job, index) => {
        nodePositions[job.id] = {
          x: layerSpacing * (index + 1),
          y: (layerIndex + 1) * (nodeRadius * 2 + 40),
        }
      })

currentLayer = nextLayer
      layerIndex++
    }

// Position any remaining jobs
    const remainingJobs = jobs.filter((job) => !nodePositions[job.id])
    const remainingSpacing = width / (remainingJobs.length + 1)
    remainingJobs.forEach((job, index) => {
      nodePositions[job.id] = {
        x: remainingSpacing * (index + 1),
        y: (layerIndex + 1) * (nodeRadius * 2 + 40),
      }
    })

// Draw connections
    ctx.strokeStyle = "#888"
    ctx.lineWidth = 2

jobs.forEach((job) => {
      const jobPos = nodePositions[job.id]

job.dependencies.forEach((depId) => {
        const depPos = nodePositions[depId]
        if (jobPos && depPos) {
          ctx.beginPath()
          ctx.moveTo(depPos.x, depPos.y + nodeRadius)
          ctx.lineTo(jobPos.x, jobPos.y - nodeRadius)

// Draw arrow
          const angle = Math.atan2(jobPos.y - nodeRadius - depPos.y - nodeRadius, jobPos.x - depPos.x)
          const arrowLength = 10
          ctx.lineTo(
            jobPos.x - arrowLength * Math.cos(angle - Math.PI / 6),
            jobPos.y - nodeRadius - arrowLength * Math.sin(angle - Math.PI / 6),
          )
          ctx.moveTo(jobPos.x, jobPos.y - nodeRadius)
          ctx.lineTo(
            jobPos.x - arrowLength * Math.cos(angle + Math.PI / 6),
            jobPos.y - nodeRadius - arrowLength * Math.sin(angle + Math.PI / 6),
          )

ctx.stroke()
        }
      })
    })

// Draw nodes
    jobs.forEach((job) => {
      const pos = nodePositions[job.id]
      if (!pos) return

// Draw circle
      ctx.beginPath()
      ctx.arc(pos.x, pos.y, nodeRadius, 0, Math.PI * 2)
      ctx.fillStyle = "#f1f5f9"
      ctx.fill()
      ctx.strokeStyle = "#64748b"
      ctx.stroke()

// Draw text
      ctx.fillStyle = "#334155"
      ctx.font = "12px sans-serif"
      ctx.textAlign = "center"
      ctx.textBaseline = "middle"

// Wrap text if needed
      const words = job.name.split(" ")
      let line = ""
      const lineHeight = 14
      let y = pos.y - (lineHeight / 2) * (words.length > 1 ? words.length - 1 : 0)

for (let i = 0; i < words.length; i++) {
        const testLine = line + words[i] + " "
        const metrics = ctx.measureText(testLine)

if (metrics.width > nodeRadius * 1.8 && i > 0) {
          ctx.fillText(line, pos.x, y)
          line = words[i] + " "
          y += lineHeight
        } else {
          line = testLine
        }
      }
      ctx.fillText(line, pos.x, y)
    })
  }, [jobs, isLoading])

if (isLoading) {
    return (
      <Card>
        <CardHeader>
          <CardTitle>Job Dependency Graph</CardTitle>
          <CardDescription>Loading dependency visualization...</CardDescription>
        </CardHeader>
        <CardContent className="h-[400px] flex items-center justify-center">
          <div className="animate-pulse text-muted-foreground">Loading dependency data...</div>
        </CardContent>
      </Card>
    )
  }

if (error) {
    return (
      <Card>
        <CardHeader>
          <CardTitle>Job Dependency Graph</CardTitle>
          <CardDescription>Visual representation of job dependencies</CardDescription>
        </CardHeader>
        <CardContent>
          <Alert variant="destructive">
            <AlertCircle className="h-4 w-4" />
            <AlertTitle>Error</AlertTitle>
            <AlertDescription>{error}</AlertDescription>
          </Alert>
        </CardContent>
      </Card>
    )
  }

if (jobs.length === 0) {
    return (
      <Card>
        <CardHeader>
          <CardTitle>Job Dependency Graph</CardTitle>
          <CardDescription>Visual representation of job dependencies</CardDescription>
        </CardHeader>
        <CardContent>
          <Alert>
            <AlertCircle className="h-4 w-4" />
            <AlertTitle>No Dependencies</AlertTitle>
            <AlertDescription>
              No job dependencies have been configured yet. Configure dependencies in the Cron Schedule Manager.
            </AlertDescription>
          </Alert>
        </CardContent>
      </Card>
    )
  }

return (
    <Card>
      <CardHeader>
        <CardTitle>Job Dependency Graph</CardTitle>
        <CardDescription>Visual representation of job dependencies</CardDescription>
      </CardHeader>
      <CardContent>
        <div className="border rounded-md overflow-hidden">
          <canvas ref={canvasRef} width={800} height={400} className="w-full h-[400px]" />
        </div>
        <p className="text-xs text-muted-foreground mt-2">
          This graph shows the dependency relationships between jobs. Jobs at the top run first, and jobs below them run
          only after their dependencies complete successfully.
        </p>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/automation-dashboard/job-execution-reports.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Button } from "@/components/ui/button"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Download, BarChart, LineChart, Table, Calendar, Mail } from "lucide-react"
import { format } from "date-fns"
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
import { Skeleton } from "@/components/ui/skeleton"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Checkbox } from "@/components/ui/checkbox"
import { useToast } from "@/hooks/use-toast"
import type { JobExecution } from "@/app/actions/job-execution-actions"
import { generateCSVReport, generateJSONReport, generatePDFReport } from "@/app/actions/execution-report-actions"
import { createReportSchedule } from "@/app/actions/report-schedule-actions"

interface JobExecutionReportsProps {
  executions: JobExecution[]
  jobs: { id: string; name: string }[]
  dateRange: { from?: Date; to?: Date }
  jobId?: string
  status?: string
}

export function JobExecutionReports({ executions, jobs, dateRange, jobId, status }: JobExecutionReportsProps) {
  const { toast } = useToast()
  const [reportType, setReportType] = useState<string>("summary")
  const [exportFormat, setExportFormat] = useState<string>("pdf")
  const [isGenerating, setIsGenerating] = useState<boolean>(false)
  const [error, setError] = useState<string | null>(null)
  const [isScheduleDialogOpen, setIsScheduleDialogOpen] = useState<boolean>(false)

// Schedule form state
  const [scheduleName, setScheduleName] = useState<string>("")
  const [scheduleFrequency, setScheduleFrequency] = useState<string>("weekly")
  const [scheduleDay, setScheduleDay] = useState<string>("monday")
  const [scheduleTime, setScheduleTime] = useState<string>("09:00")
  const [scheduleEmail, setScheduleEmail] = useState<string>("")
  const [includeAttachment, setIncludeAttachment] = useState<boolean>(true)
  const [isScheduling, setIsScheduling] = useState<boolean>(false)

// Get the selected job name
  const selectedJobName = jobId ? jobs.find((job) => job.id === jobId)?.name || "Unknown Job" : "All Jobs"

// Format date range for report title
  const dateRangeText = dateRange.from
    ? dateRange.to
      ? `${format(dateRange.from, "MMM d, yyyy")} - ${format(dateRange.to, "MMM d, yyyy")}`
      : `${format(dateRange.from, "MMM d, yyyy")}`
    : "All Time"

// Generate report title
  const reportTitle = `${selectedJobName} Execution ${status ? `(${status.toUpperCase()})` : ""} - ${dateRangeText}`

// Generate report
  const generateReport = async () => {
    setIsGenerating(true)
    setError(null)

try {
      let reportData

switch (exportFormat) {
        case "pdf":
          reportData = await generatePDFReport({
            executions,
            reportType,
            title: reportTitle,
            jobId,
            status,
            dateRange: {
              from: dateRange.from ? format(dateRange.from, "yyyy-MM-dd") : undefined,
              to: dateRange.to ? format(dateRange.to, "yyyy-MM-dd") : undefined,
            },
          })

// Create a blob and download
          const pdfBlob = new Blob([reportData], { type: "application/pdf" })
          const pdfUrl = URL.createObjectURL(pdfBlob)
          const pdfLink = document.createElement("a")
          pdfLink.href = pdfUrl
          pdfLink.download = `job-execution-${reportType}-report-${format(new Date(), "yyyy-MM-dd")}.pdf`
          pdfLink.click()
          break

case "csv":
          reportData = await generateCSVReport({
            executions,
            reportType,
            jobId,
            status,
            dateRange: {
              from: dateRange.from ? format(dateRange.from, "yyyy-MM-dd") : undefined,
              to: dateRange.to ? format(dateRange.to, "yyyy-MM-dd") : undefined,
            },
          })

// Create a blob and download
          const csvBlob = new Blob([reportData], { type: "text/csv" })
          const csvUrl = URL.createObjectURL(csvBlob)
          const csvLink = document.createElement("a")
          csvLink.href = csvUrl
          csvLink.download = `job-execution-${reportType}-report-${format(new Date(), "yyyy-MM-dd")}.csv`
          csvLink.click()
          break

case "json":
          reportData = await generateJSONReport({
            executions,
            reportType,
            jobId,
            status,
            dateRange: {
              from: dateRange.from ? format(dateRange.from, "yyyy-MM-dd") : undefined,
              to: dateRange.to ? format(dateRange.to, "yyyy-MM-dd") : undefined,
            },
          })

// Create a blob and download
          const jsonBlob = new Blob([JSON.stringify(reportData, null, 2)], { type: "application/json" })
          const jsonUrl = URL.createObjectURL(jsonBlob)
          const jsonLink = document.createElement("a")
          jsonLink.href = jsonUrl
          jsonLink.download = `job-execution-${reportType}-report-${format(new Date(), "yyyy-MM-dd")}.json`
          jsonLink.click()
          break
      }
    } catch (err) {
      console.error("Error generating report:", err)
      setError("Failed to generate report. Please try again.")
    } finally {
      setIsGenerating(false)
    }
  }

// Schedule report
  const scheduleReport = async () => {
    setIsScheduling(true)
    setError(null)

try {
      // Validate form
      if (!scheduleName.trim()) {
        throw new Error("Please enter a schedule name")
      }

if (!scheduleEmail.trim()) {
        throw new Error("Please enter an email address")
      }

// Create schedule
      const result = await createReportSchedule({
        name: scheduleName,
        reportType,
        exportFormat,
        frequency: scheduleFrequency,
        day: scheduleDay,
        time: scheduleTime,
        email: scheduleEmail,
        includeAttachment,
        filters: {
          jobId,
          status,
          dateRange: {
            from: dateRange.from ? format(dateRange.from, "yyyy-MM-dd") : undefined,
            to: dateRange.to ? format(dateRange.to, "yyyy-MM-dd") : undefined,
          },
        },
      })

if (result.success) {
        toast({
          title: "Report scheduled",
          description: `Your report will be delivered ${scheduleFrequency === "daily" ? "daily" : `every ${scheduleDay}`} at ${scheduleTime}.`,
          duration: 5000,
        })
        setIsScheduleDialogOpen(false)
      } else {
        throw new Error(result.error || "Failed to schedule report")
      }
    } catch (err) {
      console.error("Error scheduling report:", err)
      setError(err instanceof Error ? err.message : "Failed to schedule report. Please try again.")
    } finally {
      setIsScheduling(false)
    }
  }

return (
    <div className="space-y-6">
      <Card>
        <CardHeader>
          <CardTitle>Job Execution Reports</CardTitle>
          <CardDescription>Generate and download reports of job execution history</CardDescription>
        </CardHeader>
        <CardContent>
          {error && (
            <Alert variant="destructive" className="mb-6">
              <AlertTitle>Error</AlertTitle>
              <AlertDescription>{error}</AlertDescription>
            </Alert>
          )}

<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
            <div className="space-y-4">
              <div>
                <h3 className="text-lg font-medium mb-2">Report Configuration</h3>
                <div className="space-y-4">
                  <div className="space-y-2">
                    <label className="text-sm font-medium">Report Type</label>
                    <Select value={reportType} onValueChange={setReportType}>
                      <SelectTrigger>
                        <SelectValue placeholder="Select Report Type" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="summary">Summary Report</SelectItem>
                        <SelectItem value="detailed">Detailed Report</SelectItem>
                        <SelectItem value="trend">Trend Analysis</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>

<div className="space-y-2">
                    <label className="text-sm font-medium">Export Format</label>
                    <Select value={exportFormat} onValueChange={setExportFormat}>
                      <SelectTrigger>
                        <SelectValue placeholder="Select Export Format" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="pdf">PDF Document</SelectItem>
                        <SelectItem value="csv">CSV Spreadsheet</SelectItem>
                        <SelectItem value="json">JSON Data</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                </div>
              </div>

<div>
                <h3 className="text-lg font-medium mb-2">Report Preview</h3>
                <Card className="bg-muted/40">
                  <CardHeader className="pb-2">
                    <CardTitle className="text-base">{reportTitle}</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="flex items-center justify-center p-6">
                      {reportType === "summary" && <BarChart className="h-24 w-24 text-muted-foreground" />}
                      {reportType === "detailed" && <Table className="h-24 w-24 text-muted-foreground" />}
                      {reportType === "trend" && <LineChart className="h-24 w-24 text-muted-foreground" />}
                    </div>
                  </CardContent>
                </Card>
              </div>
            </div>

<div className="space-y-4">
              <div>
                <h3 className="text-lg font-medium mb-2">Report Details</h3>
                <div className="space-y-4">
                  <div className="grid grid-cols-2 gap-4">
                    <div className="space-y-1">
                      <p className="text-sm font-medium">Job</p>
                      <p className="text-sm">{selectedJobName}</p>
                    </div>
                    <div className="space-y-1">
                      <p className="text-sm font-medium">Status</p>
                      <p className="text-sm">{status ? status.toUpperCase() : "All Statuses"}</p>
                    </div>
                    <div className="space-y-1">
                      <p className="text-sm font-medium">Date Range</p>
                      <p className="text-sm">{dateRangeText}</p>
                    </div>
                    <div className="space-y-1">
                      <p className="text-sm font-medium">Executions</p>
                      <p className="text-sm">{executions.length}</p>
                    </div>
                  </div>
                </div>
              </div>

<div>
                <h3 className="text-lg font-medium mb-2">Report Content</h3>
                <Tabs defaultValue="summary" value={reportType} onValueChange={setReportType}>
                  <TabsList className="grid w-full grid-cols-3">
                    <TabsTrigger value="summary">Summary</TabsTrigger>
                    <TabsTrigger value="detailed">Detailed</TabsTrigger>
                    <TabsTrigger value="trend">Trends</TabsTrigger>
                  </TabsList>
                  <TabsContent value="summary" className="mt-4">
                    <div className="space-y-2">
                      <p className="text-sm">Includes:</p>
                      <ul className="list-disc list-inside text-sm space-y-1">
                        <li>Total execution count</li>
                        <li>Success/failure rates</li>
                        <li>Average execution duration</li>
                        <li>Most common errors</li>
                        <li>Performance summary</li>
                      </ul>
                    </div>
                  </TabsContent>
                  <TabsContent value="detailed" className="mt-4">
                    <div className="space-y-2">
                      <p className="text-sm">Includes:</p>
                      <ul className="list-disc list-inside text-sm space-y-1">
                        <li>Individual execution details</li>
                        <li>Complete error logs</li>
                        <li>Execution parameters</li>
                        <li>Result data</li>
                        <li>Timing information</li>
                      </ul>
                    </div>
                  </TabsContent>
                  <TabsContent value="trend" className="mt-4">
                    <div className="space-y-2">
                      <p className="text-sm">Includes:</p>
                      <ul className="list-disc list-inside text-sm space-y-1">
                        <li>Success rate over time</li>
                        <li>Execution duration trends</li>
                        <li>Failure pattern analysis</li>
                        <li>Time-of-day performance</li>
                        <li>Comparative metrics</li>
                      </ul>
                    </div>
                  </TabsContent>
                </Tabs>
              </div>
            </div>
          </div>
        </CardContent>
        <CardFooter className="flex justify-between">
          <Dialog open={isScheduleDialogOpen} onOpenChange={setIsScheduleDialogOpen}>
            <DialogTrigger asChild>
              <Button variant="outline">
                <Calendar className="h-4 w-4 mr-2" />
                Schedule Report
              </Button>
            </DialogTrigger>
            <DialogContent className="sm:max-w-[500px]">
              <DialogHeader>
                <DialogTitle>Schedule Report Delivery</DialogTitle>
                <DialogDescription>Set up automatic delivery of this report to your email inbox.</DialogDescription>
              </DialogHeader>
              <div className="space-y-4 py-4">
                <div className="space-y-2">
                  <Label htmlFor="schedule-name">Schedule Name</Label>
                  <Input
                    id="schedule-name"
                    placeholder="Weekly Job Summary"
                    value={scheduleName}
                    onChange={(e) => setScheduleName(e.target.value)}
                  />
                </div>

<div className="space-y-2">
                  <Label>Frequency</Label>
                  <RadioGroup value={scheduleFrequency} onValueChange={setScheduleFrequency}>
                    <div className="flex items-center space-x-2">
                      <RadioGroupItem value="daily" id="daily" />
                      <Label htmlFor="daily">Daily</Label>
                    </div>
                    <div className="flex items-center space-x-2">
                      <RadioGroupItem value="weekly" id="weekly" />
                      <Label htmlFor="weekly">Weekly</Label>
                    </div>
                    <div className="flex items-center space-x-2">
                      <RadioGroupItem value="monthly" id="monthly" />
                      <Label htmlFor="monthly">Monthly</Label>
                    </div>
                  </RadioGroup>
                </div>

{scheduleFrequency === "weekly" && (
                  <div className="space-y-2">
                    <Label htmlFor="schedule-day">Day of Week</Label>
                    <Select value={scheduleDay} onValueChange={setScheduleDay}>
                      <SelectTrigger id="schedule-day">
                        <SelectValue placeholder="Select day" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="monday">Monday</SelectItem>
                        <SelectItem value="tuesday">Tuesday</SelectItem>
                        <SelectItem value="wednesday">Wednesday</SelectItem>
                        <SelectItem value="thursday">Thursday</SelectItem>
                        <SelectItem value="friday">Friday</SelectItem>
                        <SelectItem value="saturday">Saturday</SelectItem>
                        <SelectItem value="sunday">Sunday</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                )}

{scheduleFrequency === "monthly" && (
                  <div className="space-y-2">
                    <Label htmlFor="schedule-day">Day of Month</Label>
                    <Select value={scheduleDay} onValueChange={setScheduleDay}>
                      <SelectTrigger id="schedule-day">
                        <SelectValue placeholder="Select day" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="1">1st</SelectItem>
                        <SelectItem value="15">15th</SelectItem>
                        <SelectItem value="last">Last day</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                )}

<div className="space-y-2">
                  <Label htmlFor="schedule-time">Time</Label>
                  <Input
                    id="schedule-time"
                    type="time"
                    value={scheduleTime}
                    onChange={(e) => setScheduleTime(e.target.value)}
                  />
                </div>

<div className="space-y-2">
                  <Label htmlFor="schedule-email">Email Address</Label>
                  <Input
                    id="schedule-email"
                    type="email"
                    placeholder="your.email@example.com"
                    value={scheduleEmail}
                    onChange={(e) => setScheduleEmail(e.target.value)}
                  />
                </div>

<div className="flex items-center space-x-2 pt-2">
                  <Checkbox
                    id="include-attachment"
                    checked={includeAttachment}
                    onCheckedChange={(checked) => setIncludeAttachment(checked === true)}
                  />
                  <Label htmlFor="include-attachment">Include report as attachment</Label>
                </div>

<div className="bg-muted p-3 rounded-md mt-4">
                  <h4 className="text-sm font-medium mb-2">Report Summary</h4>
                  <p className="text-sm">
                    {reportType.charAt(0).toUpperCase() + reportType.slice(1)} report for {selectedJobName}
                    {status ? ` (${status.toUpperCase()})` : ""} will be delivered
                    {scheduleFrequency === "daily"
                      ? " daily"
                      : scheduleFrequency === "weekly"
                        ? ` every ${scheduleDay.charAt(0).toUpperCase() + scheduleDay.slice(1)}`
                        : " monthly"}{" "}
                    at {scheduleTime}.
                  </p>
                </div>
              </div>
              <DialogFooter>
                <Button variant="outline" onClick={() => setIsScheduleDialogOpen(false)}>
                  Cancel
                </Button>
                <Button onClick={scheduleReport} disabled={isScheduling}>
                  {isScheduling ? (
                    <>
                      <Skeleton className="h-4 w-4 mr-2 rounded-full animate-pulse" />
                      Scheduling...
                    </>
                  ) : (
                    <>
                      <Mail className="h-4 w-4 mr-2" />
                      Schedule Delivery
                    </>
                  )}
                </Button>
              </DialogFooter>
            </DialogContent>
          </Dialog>

<Button onClick={generateReport} disabled={isGenerating}>
            {isGenerating ? (
              <>
                <Skeleton className="h-4 w-4 mr-2 rounded-full animate-pulse" />
                Generating...
              </>
            ) : (
              <>
                <Download className="h-4 w-4 mr-2" />
                Generate {exportFormat.toUpperCase()}
              </>
            )}
          </Button>
        </CardFooter>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/automation-dashboard/job-execution-stats.tsx" isMerged="true"
"use client"

import { Card, CardContent } from "@/components/ui/card"
import type { JobExecutionStats as StatsType } from "@/app/actions/job-execution-actions"
import { CheckCircle, XCircle, Clock, Activity } from "lucide-react"

interface JobExecutionStatsProps {
  stats: StatsType
  className?: string
}

export function JobExecutionStats({ stats, className = "" }: JobExecutionStatsProps) {
  const successRate = stats.total > 0 ? (stats.success / stats.total) * 100 : 0

return (
    <div className={`grid grid-cols-1 md:grid-cols-5 gap-4 ${className}`}>
      <Card>
        <CardContent className="pt-6">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-muted-foreground">Total Executions</p>
              <p className="text-2xl font-bold">{stats.total}</p>
            </div>
            <Activity className="h-5 w-5 text-muted-foreground" />
          </div>
        </CardContent>
      </Card>

<Card>
        <CardContent className="pt-6">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-muted-foreground">Success Rate</p>
              <p className="text-2xl font-bold">{successRate.toFixed(1)}%</p>
            </div>
            <div className="h-5 w-5 flex items-center justify-center">
              <div
                className="h-4 w-4 rounded-full"
                style={{
                  background: `conic-gradient(rgb(34, 197, 94) ${successRate}%, rgb(239, 68, 68) 0)`,
                }}
              />
            </div>
          </div>
        </CardContent>
      </Card>

<Card>
        <CardContent className="pt-6">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-muted-foreground">Successful</p>
              <p className="text-2xl font-bold">{stats.success}</p>
            </div>
            <CheckCircle className="h-5 w-5 text-green-500" />
          </div>
        </CardContent>
      </Card>

<Card>
        <CardContent className="pt-6">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-muted-foreground">Failed</p>
              <p className="text-2xl font-bold">{stats.failure}</p>
            </div>
            <XCircle className="h-5 w-5 text-red-500" />
          </div>
        </CardContent>
      </Card>

<Card>
        <CardContent className="pt-6">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-muted-foreground">Avg. Duration</p>
              <p className="text-2xl font-bold">
                {stats.averageDurationMs ? `${(stats.averageDurationMs / 1000).toFixed(1)}s` : "N/A"}
              </p>
            </div>
            <Clock className="h-5 w-5 text-muted-foreground" />
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/automation-dashboard/job-execution-table.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Skeleton } from "@/components/ui/skeleton"
import { format } from "date-fns"
import { ChevronDown, ChevronUp, Clock, AlertTriangle, CheckCircle, XCircle, Loader2 } from "lucide-react"
import type { JobExecution } from "@/app/actions/job-execution-actions"

interface JobExecutionTableProps {
  executions: JobExecution[]
  loading: boolean
}

export function JobExecutionTable({ executions, loading }: JobExecutionTableProps) {
  const router = useRouter()
  const [expandedRows, setExpandedRows] = useState<Record<string, boolean>>({})

// Toggle row expansion
  const toggleRowExpansion = (id: string) => {
    setExpandedRows((prev) => ({
      ...prev,
      [id]: !prev[id],
    }))
  }

// Format duration
  const formatDuration = (ms: number | null) => {
    if (ms === null) return "N/A"
    if (ms < 1000) return `${ms}ms`
    const seconds = Math.floor(ms / 1000)
    if (seconds < 60) return `${seconds}s`
    const minutes = Math.floor(seconds / 60)
    const remainingSeconds = seconds % 60
    return `${minutes}m ${remainingSeconds}s`
  }

// Get status badge
  const getStatusBadge = (status: string) => {
    switch (status) {
      case "success":
        return (
          <Badge variant="outline" className="bg-green-50 text-green-700 border-green-200">
            <CheckCircle className="h-3 w-3 mr-1" />
            Success
          </Badge>
        )
      case "failure":
        return (
          <Badge variant="outline" className="bg-red-50 text-red-700 border-red-200">
            <XCircle className="h-3 w-3 mr-1" />
            Failed
          </Badge>
        )
      case "running":
        return (
          <Badge variant="outline" className="bg-blue-50 text-blue-700 border-blue-200">
            <Loader2 className="h-3 w-3 mr-1 animate-spin" />
            Running
          </Badge>
        )
      case "canceled":
        return (
          <Badge variant="outline" className="bg-yellow-50 text-yellow-700 border-yellow-200">
            <AlertTriangle className="h-3 w-3 mr-1" />
            Canceled
          </Badge>
        )
      default:
        return <Badge variant="outline">{status}</Badge>
    }
  }

// Render loading state
  if (loading) {
    return (
      <div>
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead className="w-[50px]"></TableHead>
              <TableHead>Job</TableHead>
              <TableHead>Status</TableHead>
              <TableHead>Started</TableHead>
              <TableHead>Duration</TableHead>
              <TableHead>Completed</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {Array.from({ length: 5 }).map((_, i) => (
              <TableRow key={i}>
                <TableCell>
                  <Skeleton className="h-4 w-4" />
                </TableCell>
                <TableCell>
                  <Skeleton className="h-4 w-[150px]" />
                </TableCell>
                <TableCell>
                  <Skeleton className="h-6 w-[100px]" />
                </TableCell>
                <TableCell>
                  <Skeleton className="h-4 w-[120px]" />
                </TableCell>
                <TableCell>
                  <Skeleton className="h-4 w-[80px]" />
                </TableCell>
                <TableCell>
                  <Skeleton className="h-4 w-[120px]" />
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </div>
    )
  }

// Render empty state
  if (executions.length === 0) {
    return (
      <div className="text-center py-8">
        <Clock className="mx-auto h-12 w-12 text-muted-foreground" />
        <h3 className="mt-4 text-lg font-semibold">No execution history found</h3>
        <p className="mt-2 text-sm text-muted-foreground">There are no job executions matching your current filters.</p>
      </div>
    )
  }

// Render table
  return (
    <div>
      <Table>
        <TableHeader>
          <TableRow>
            <TableHead className="w-[50px]"></TableHead>
            <TableHead>Job</TableHead>
            <TableHead>Status</TableHead>
            <TableHead>Started</TableHead>
            <TableHead>Duration</TableHead>
            <TableHead>Completed</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {executions.map((execution) => (
            <>
              <TableRow key={execution.id} className="cursor-pointer hover:bg-muted/50">
                <TableCell onClick={() => toggleRowExpansion(execution.id)}>
                  {expandedRows[execution.id] ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
                </TableCell>
                <TableCell onClick={() => toggleRowExpansion(execution.id)}>
                  <div className="font-medium">{execution.jobName}</div>
                  <div className="text-xs text-muted-foreground truncate max-w-[200px]">
                    ID: {execution.id.substring(0, 8)}...
                  </div>
                </TableCell>
                <TableCell onClick={() => toggleRowExpansion(execution.id)}>
                  {getStatusBadge(execution.status)}
                </TableCell>
                <TableCell onClick={() => toggleRowExpansion(execution.id)}>
                  <div className="font-medium">{format(new Date(execution.startedAt), "MMM d, yyyy")}</div>
                  <div className="text-xs text-muted-foreground">
                    {format(new Date(execution.startedAt), "h:mm:ss a")}
                  </div>
                </TableCell>
                <TableCell onClick={() => toggleRowExpansion(execution.id)}>
                  {formatDuration(execution.durationMs)}
                </TableCell>
                <TableCell onClick={() => toggleRowExpansion(execution.id)}>
                  {execution.completedAt ? (
                    <div>
                      <div className="font-medium">{format(new Date(execution.completedAt), "MMM d, yyyy")}</div>
                      <div className="text-xs text-muted-foreground">
                        {format(new Date(execution.completedAt), "h:mm:ss a")}
                      </div>
                    </div>
                  ) : (
                    <span className="text-muted-foreground">-</span>
                  )}
                </TableCell>
              </TableRow>
              {expandedRows[execution.id] && (
                <TableRow className="bg-muted/30">
                  <TableCell colSpan={6} className="p-4">
                    <div className="space-y-4">
                      {execution.error && (
                        <div className="bg-red-50 p-3 rounded border border-red-200">
                          <h4 className="text-sm font-semibold text-red-700 mb-1">Error</h4>
                          <pre className="text-xs text-red-800 whitespace-pre-wrap">{execution.error}</pre>
                        </div>
                      )}

{execution.result && (
                        <div>
                          <h4 className="text-sm font-semibold mb-1">Result</h4>
                          <pre className="text-xs bg-slate-50 p-3 rounded border overflow-auto max-h-[200px]">
                            {typeof execution.result === "object"
                              ? JSON.stringify(execution.result, null, 2)
                              : String(execution.result)}
                          </pre>
                        </div>
                      )}

{execution.logs && (
                        <div>
                          <h4 className="text-sm font-semibold mb-1">Logs</h4>
                          <pre className="text-xs bg-slate-50 p-3 rounded border overflow-auto max-h-[200px]">
                            {execution.logs}
                          </pre>
                        </div>
                      )}

<div className="flex justify-end">
                        <Button
                          variant="outline"
                          size="sm"
                          onClick={() => router.push(`/automation-dashboard/job-history/${execution.id}`)}
                        >
                          View Details
                        </Button>
                      </div>
                    </div>
                  </TableCell>
                </TableRow>
              )}
            </>
          ))}
        </TableBody>
      </Table>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/automation-dashboard/job-execution-timeline.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { format, formatDistanceToNow } from "date-fns"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { CheckCircle, XCircle, Clock, Ban, Eye } from "lucide-react"
import type { JobExecution } from "@/app/actions/job-execution-actions"

interface JobExecutionTimelineProps {
  executions: JobExecution[]
  loading: boolean
}

export function JobExecutionTimeline({ executions, loading }: JobExecutionTimelineProps) {
  const [selectedExecution, setSelectedExecution] = useState<JobExecution | null>(null)

const getStatusIcon = (status: string) => {
    switch (status) {
      case "success":
        return <CheckCircle className="h-5 w-5 text-green-500" />
      case "failure":
        return <XCircle className="h-5 w-5 text-red-500" />
      case "running":
        return <Clock className="h-5 w-5 text-blue-500 animate-pulse" />
      case "canceled":
        return <Ban className="h-5 w-5 text-gray-500" />
      default:
        return null
    }
  }

const getStatusBadge = (status: string) => {
    switch (status) {
      case "success":
        return <Badge className="bg-green-500">Success</Badge>
      case "failure":
        return <Badge variant="destructive">Failure</Badge>
      case "running":
        return <Badge className="bg-blue-500">Running</Badge>
      case "canceled":
        return <Badge variant="outline">Canceled</Badge>
      default:
        return <Badge variant="secondary">{status}</Badge>
    }
  }

const formatDuration = (ms: number | null) => {
    if (!ms) return "N/A"

const seconds = Math.floor(ms / 1000)
    if (seconds < 60) return `${seconds}s`

const minutes = Math.floor(seconds / 60)
    const remainingSeconds = seconds % 60
    return `${minutes}m ${remainingSeconds}s`
  }

if (loading) {
    return (
      <div className="h-[400px] flex items-center justify-center">
        <p className="text-muted-foreground">Loading execution history...</p>
      </div>
    )
  }

if (executions.length === 0) {
    return (
      <div className="h-[200px] flex flex-col items-center justify-center border rounded-md">
        <p className="text-muted-foreground">No execution history found</p>
        <p className="text-sm text-muted-foreground mt-1">Try adjusting your filters or run some jobs first</p>
      </div>
    )
  }

return (
    <>
      <div className="space-y-8 relative before:absolute before:inset-0 before:ml-5 before:w-0.5 before:-translate-x-1/2 before:bg-muted before:h-full">
        {executions.map((execution) => (
          <div key={execution.id} className="relative pl-6">
            <div className="absolute left-0 flex items-center justify-center w-10 h-10 rounded-full bg-background border">
              {getStatusIcon(execution.status)}
            </div>

<div className="ml-4">
              <div className="flex flex-col sm:flex-row sm:items-center gap-2 mb-1">
                <h4 className="text-lg font-medium">{execution.jobName}</h4>
                {getStatusBadge(execution.status)}
              </div>

<div className="flex flex-col sm:flex-row sm:items-center text-sm text-muted-foreground gap-x-2">
                <span>{format(new Date(execution.startedAt), "MMM d, yyyy HH:mm:ss")}</span>
                <span className="hidden sm:inline">•</span>
                <span>{formatDistanceToNow(new Date(execution.startedAt), { addSuffix: true })}</span>
                {execution.durationMs && (
                  <>
                    <span className="hidden sm:inline">•</span>
                    <span>Duration: {formatDuration(execution.durationMs)}</span>
                  </>
                )}
              </div>

{execution.error && (
                <div className="mt-2 p-3 bg-red-50 text-red-800 rounded-md text-sm">
                  <p className="font-medium">Error:</p>
                  <p className="truncate">{execution.error}</p>
                </div>
              )}

<div className="mt-2">
                <Button variant="outline" size="sm" onClick={() => setSelectedExecution(execution)}>
                  <Eye className="h-4 w-4 mr-1" />
                  View Details
                </Button>
              </div>
            </div>
          </div>
        ))}
      </div>

{/* Execution Details Dialog */}
      <Dialog open={!!selectedExecution} onOpenChange={(open) => !open && setSelectedExecution(null)}>
        <DialogContent className="max-w-3xl max-h-[80vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle>Execution Details</DialogTitle>
            <DialogDescription>
              {selectedExecution && (
                <div className="flex items-center gap-2 mt-1">
                  {getStatusBadge(selectedExecution.status)}
                  <span>{format(new Date(selectedExecution.startedAt), "MMMM d, yyyy HH:mm:ss")}</span>
                </div>
              )}
            </DialogDescription>
          </DialogHeader>

{selectedExecution && (
            <div className="mt-4 space-y-4">
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <h4 className="text-sm font-medium mb-1">Job</h4>
                  <p>{selectedExecution.jobName}</p>
                </div>
                <div>
                  <h4 className="text-sm font-medium mb-1">Duration</h4>
                  <p>{selectedExecution.durationMs ? formatDuration(selectedExecution.durationMs) : "N/A"}</p>
                </div>
                <div>
                  <h4 className="text-sm font-medium mb-1">Started At</h4>
                  <p>{format(new Date(selectedExecution.startedAt), "MMMM d, yyyy HH:mm:ss")}</p>
                </div>
                <div>
                  <h4 className="text-sm font-medium mb-1">Completed At</h4>
                  <p>
                    {selectedExecution.completedAt
                      ? format(new Date(selectedExecution.completedAt), "MMMM d, yyyy HH:mm:ss")
                      : "Not completed"}
                  </p>
                </div>
              </div>

<Tabs defaultValue="result">
                <TabsList>
                  <TabsTrigger value="result">Result</TabsTrigger>
                  <TabsTrigger value="logs">Logs</TabsTrigger>
                  {selectedExecution.error && <TabsTrigger value="error">Error</TabsTrigger>}
                </TabsList>

<TabsContent value="result" className="mt-4">
                  <div className="bg-muted p-4 rounded-md overflow-x-auto">
                    <pre className="text-sm">
                      {selectedExecution.result
                        ? JSON.stringify(selectedExecution.result, null, 2)
                        : "No result data available"}
                    </pre>
                  </div>
                </TabsContent>

<TabsContent value="logs" className="mt-4">
                  <div className="bg-muted p-4 rounded-md overflow-x-auto max-h-[400px]">
                    <pre className="text-sm whitespace-pre-wrap">{selectedExecution.logs || "No logs available"}</pre>
                  </div>
                </TabsContent>

{selectedExecution.error && (
                  <TabsContent value="error" className="mt-4">
                    <div className="bg-red-50 p-4 rounded-md overflow-x-auto">
                      <pre className="text-sm text-red-800 whitespace-pre-wrap">{selectedExecution.error}</pre>
                    </div>
                  </TabsContent>
                )}
              </Tabs>
            </div>
          )}
        </DialogContent>
      </Dialog>
    </>
  )
}
[V0_FILE]typescriptreact:file="components/automation-dashboard/job-history-skeleton.tsx" isMerged="true"
import { Skeleton } from "@/components/ui/skeleton"

export function JobHistorySkeleton() {
  return (
    <div className="flex-1 space-y-4 p-8 pt-6">
      <div className="flex items-center justify-between space-y-2">
        <Skeleton className="h-8 w-64" />
      </div>
      <div className="space-y-4">
        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
          {Array(4)
            .fill(0)
            .map((_, i) => (
              <Skeleton key={i} className="h-32" />
            ))}
        </div>

<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-7">
          <div className="col-span-4">
            <Skeleton className="h-[300px]" />
          </div>
          <div className="col-span-3">
            <Skeleton className="h-[300px]" />
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/automation-dashboard/job-history-view.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { useSearchParams, useRouter } from "next/navigation"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Button } from "@/components/ui/button"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Calendar } from "@/components/ui/calendar"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { format } from "date-fns"
import { CalendarIcon, RefreshCw, AlertCircle } from "lucide-react"
import { cn } from "@/lib/utils"
import { JobExecutionTable } from "./job-execution-table"
import { JobExecutionStats } from "./job-execution-stats"
import { JobExecutionTimeline } from "./job-execution-timeline"
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
import { JobExecutionReports } from "./job-execution-reports"
import {
  getJobExecutions,
  getJobExecutionStats,
  type JobExecution,
  type JobExecutionStats as StatsType,
} from "@/app/actions/job-execution-actions"
import { getCronJobs } from "@/app/actions/automation-dashboard-actions"

export function JobHistoryView() {
  const router = useRouter()
  const searchParams = useSearchParams()

// Get query parameters
  const jobId = searchParams.get("jobId") || undefined
  const status = searchParams.get("status") || undefined
  const view = searchParams.get("view") || "table"

// State
  const [executions, setExecutions] = useState<JobExecution[]>([])
  const [stats, setStats] = useState<StatsType | null>(null)
  const [jobs, setJobs] = useState<{ id: string; name: string }[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const [dateRange, setDateRange] = useState<{ from?: Date; to?: Date }>({})
  const [filters, setFilters] = useState({
    jobId,
    status,
    startDate: dateRange.from ? format(dateRange.from, "yyyy-MM-dd") : undefined,
    endDate: dateRange.to ? format(dateRange.to, "yyyy-MM-dd") : undefined,
  })

// Load data
  useEffect(() => {
    async function loadData() {
      setLoading(true)
      setError(null)
      try {
        // Fetch jobs
        const jobsData = await getCronJobs()
        setJobs(jobsData.map((job) => ({ id: job.id, name: job.name })))

// Fetch executions with filters
        const executionsData = await getJobExecutions({
          jobId,
          status,
          startDate: dateRange.from ? format(dateRange.from, "yyyy-MM-dd") : undefined,
          endDate: dateRange.to ? format(dateRange.to, "yyyy-MM-dd") : undefined,
          limit: 50,
        })
        setExecutions(executionsData)

// Fetch stats
        const statsData = await getJobExecutionStats(jobId)
        setStats(statsData)
      } catch (err) {
        console.error("Error loading job history data:", err)
        setError("Failed to load job execution data. Please try again later.")
      } finally {
        setLoading(false)
      }
    }

loadData()
  }, [jobId, status, dateRange])

// Apply filters
  const applyFilters = () => {
    const params = new URLSearchParams()
    if (filters.jobId && filters.jobId !== "all") params.set("jobId", filters.jobId)
    if (filters.status && filters.status !== "all") params.set("status", filters.status)
    params.set("view", view)

router.push(`/automation-dashboard/job-history?${params.toString()}`)
  }

// Reset filters
  const resetFilters = () => {
    setFilters({
      jobId: undefined,
      status: undefined,
      startDate: undefined,
      endDate: undefined,
    })
    setDateRange({})
    router.push("/automation-dashboard/job-history")
  }

// Change view
  const changeView = (newView: string) => {
    const params = new URLSearchParams(searchParams)
    params.set("view", newView)
    router.push(`/automation-dashboard/job-history?${params.toString()}`)
  }

// Refresh data
  const refreshData = () => {
    router.refresh()
  }

return (
    <div className="space-y-6">
      <Card>
        <CardHeader>
          <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
            <div>
              <CardTitle>Job Execution History</CardTitle>
              <CardDescription>View the history and results of your automated job executions</CardDescription>
            </div>

<div className="flex items-center gap-2">
              <Button variant="outline" size="sm" onClick={refreshData}>
                <RefreshCw className="h-4 w-4 mr-2" />
                Refresh
              </Button>
            </div>
          </div>
        </CardHeader>
        <CardContent>
          {error && (
            <Alert variant="destructive" className="mb-6">
              <AlertCircle className="h-4 w-4" />
              <AlertTitle>Error</AlertTitle>
              <AlertDescription>{error}</AlertDescription>
            </Alert>
          )}

{/* Filters */}
          <div className="mb-6 space-y-4">
            <div className="flex flex-col md:flex-row gap-4">
              <div className="grid w-full md:w-auto grid-cols-2 md:grid-cols-4 gap-4">
                <div className="space-y-2">
                  <label className="text-sm font-medium">Job</label>
                  <Select
                    value={filters.jobId || "all"}
                    onValueChange={(value) => setFilters({ ...filters, jobId: value === "all" ? undefined : value })}
                  >
                    <SelectTrigger>
                      <SelectValue placeholder="All Jobs" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="all">All Jobs</SelectItem>
                      {jobs.map((job) => (
                        <SelectItem key={job.id} value={job.id}>
                          {job.name}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>

<div className="space-y-2">
                  <label className="text-sm font-medium">Status</label>
                  <Select
                    value={filters.status || "all"}
                    onValueChange={(value) => setFilters({ ...filters, status: value === "all" ? undefined : value })}
                  >
                    <SelectTrigger>
                      <SelectValue placeholder="All Statuses" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="all">All Statuses</SelectItem>
                      <SelectItem value="success">Success</SelectItem>
                      <SelectItem value="failure">Failure</SelectItem>
                      <SelectItem value="running">Running</SelectItem>
                      <SelectItem value="canceled">Canceled</SelectItem>
                    </SelectContent>
                  </Select>
                </div>

<div className="space-y-2">
                  <label className="text-sm font-medium">Date Range</label>
                  <Popover>
                    <PopoverTrigger asChild>
                      <Button
                        variant="outline"
                        className={cn(
                          "w-full justify-start text-left font-normal",
                          !dateRange.from && "text-muted-foreground",
                        )}
                      >
                        <CalendarIcon className="mr-2 h-4 w-4" />
                        {dateRange.from ? (
                          dateRange.to ? (
                            <>
                              {format(dateRange.from, "LLL dd, y")} - {format(dateRange.to, "LLL dd, y")}
                            </>
                          ) : (
                            format(dateRange.from, "LLL dd, y")
                          )
                        ) : (
                          <span>Pick a date range</span>
                        )}
                      </Button>
                    </PopoverTrigger>
                    <PopoverContent className="w-auto p-0" align="start">
                      <Calendar
                        initialFocus
                        mode="range"
                        defaultMonth={dateRange.from}
                        selected={dateRange}
                        onSelect={setDateRange}
                        numberOfMonths={2}
                      />
                    </PopoverContent>
                  </Popover>
                </div>

<div className="flex items-end gap-2">
                  <Button onClick={applyFilters}>Apply Filters</Button>
                  <Button variant="outline" onClick={resetFilters}>
                    Reset
                  </Button>
                </div>
              </div>
            </div>
          </div>

{/* Stats */}
          {stats && <JobExecutionStats stats={stats} className="mb-6" />}

{/* View Tabs */}
          <Tabs value={view} onValueChange={changeView} className="mt-6">
            <TabsList className="grid w-full grid-cols-3">
              <TabsTrigger value="table">Table View</TabsTrigger>
              <TabsTrigger value="timeline">Timeline View</TabsTrigger>
              <TabsTrigger value="reports">Reports</TabsTrigger>
            </TabsList>

<TabsContent value="reports" className="mt-4">
              <JobExecutionReports
                executions={executions}
                jobs={jobs}
                dateRange={dateRange}
                jobId={jobId}
                status={status}
              />
            </TabsContent>
          </Tabs>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/automation-dashboard/job-performance-table.tsx" isMerged="true"
"use client"

import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Progress } from "@/components/ui/progress"
import type { JobPerformance } from "@/app/actions/execution-metrics-actions"

interface JobPerformanceTableProps {
  data: JobPerformance[]
  loading: boolean
}

export function JobPerformanceTable({ data, loading }: JobPerformanceTableProps) {
  if (loading) {
    return (
      <div className="h-80 w-full flex items-center justify-center">
        <p className="text-muted-foreground">Loading job performance data...</p>
      </div>
    )
  }

if (data.length === 0) {
    return (
      <div className="h-80 w-full flex items-center justify-center">
        <p className="text-muted-foreground">No job performance data available</p>
      </div>
    )
  }

return (
    <div className="overflow-x-auto">
      <Table>
        <TableHeader>
          <TableRow>
            <TableHead>Job Name</TableHead>
            <TableHead>Total Executions</TableHead>
            <TableHead>Success Rate</TableHead>
            <TableHead>Avg. Duration</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {data.map((job) => (
            <TableRow key={job.jobId}>
              <TableCell className="font-medium">{job.jobName}</TableCell>
              <TableCell>{job.totalExecutions}</TableCell>
              <TableCell>
                <div className="flex items-center gap-2">
                  <Progress
                    value={job.successRate}
                    className="h-2 w-20"
                    indicatorClassName={
                      job.successRate > 80 ? "bg-green-500" : job.successRate > 50 ? "bg-yellow-500" : "bg-red-500"
                    }
                  />
                  <span>{job.successRate.toFixed(1)}%</span>
                </div>
              </TableCell>
              <TableCell>{(job.avgDuration / 1000).toFixed(1)}s</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/automation-dashboard/manual-trigger-card.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { triggerNewsletterProcessing } from "@/app/actions/automation-dashboard-actions"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { AlertCircle, CheckCircle, Play } from "lucide-react"

export function ManualTriggerCard() {
  const [loading, setLoading] = useState(false)
  const [result, setResult] = useState<{ success: boolean; message: string } | null>(null)

async function handleTrigger() {
    setLoading(true)
    setResult(null)
    try {
      const response = await triggerNewsletterProcessing()
      setResult(response)
    } catch (error) {
      setResult({
        success: false,
        message: error instanceof Error ? error.message : "Unknown error occurred",
      })
    } finally {
      setLoading(false)
    }
  }

return (
    <Card>
      <CardHeader>
        <CardTitle>Manual Processing</CardTitle>
        <CardDescription>Manually trigger the newsletter processing job</CardDescription>
      </CardHeader>
      <CardContent className="space-y-4">
        <Button onClick={handleTrigger} disabled={loading} className="w-full">
          {loading ? "Processing..." : "Process Newsletters Now"}
          {!loading && <Play className="ml-2 h-4 w-4" />}
        </Button>

{result && (
          <div
            className={`p-3 rounded-md flex items-start space-x-2 ${
              result.success ? "bg-green-50 text-green-700" : "bg-red-50 text-red-700"
            }`}
          >
            {result.success ? (
              <CheckCircle className="h-5 w-5 mt-0.5 flex-shrink-0" />
            ) : (
              <AlertCircle className="h-5 w-5 mt-0.5 flex-shrink-0" />
            )}
            <div>
              <p className="font-medium">{result.success ? "Success" : "Error"}</p>
              <p className="text-sm">{result.message}</p>
            </div>
          </div>
        )}
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/automation-dashboard/newsletter-performance-table.tsx" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import { getNewsletterPerformance, type NewsletterPerformance } from "@/app/actions/automation-dashboard-actions"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { formatDistanceToNow } from "date-fns"

export function NewsletterPerformanceTable() {
  const [newsletters, setNewsletters] = useState<NewsletterPerformance[]>([])
  const [loading, setLoading] = useState(true)
  const [searchTerm, setSearchTerm] = useState("")

useEffect(() => {
    async function fetchData() {
      try {
        const data = await getNewsletterPerformance()
        setNewsletters(data)
      } catch (error) {
        console.error("Error fetching newsletter performance:", error)
      } finally {
        setLoading(false)
      }
    }

fetchData()
  }, [])

// Filter newsletters based on search term
  const filteredNewsletters = newsletters.filter((newsletter) =>
    newsletter.title.toLowerCase().includes(searchTerm.toLowerCase()),
  )

return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <h3 className="text-lg font-medium">Newsletter Performance</h3>
        <Input
          placeholder="Search newsletters..."
          value={searchTerm}
          onChange={(e) => setSearchTerm(e.target.value)}
          className="max-w-sm"
        />
      </div>

{loading ? (
        <div className="h-[400px] flex items-center justify-center">Loading newsletter data...</div>
      ) : (
        <div className="rounded-md border">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Title</TableHead>
                <TableHead>Frequency</TableHead>
                <TableHead>Success Rate</TableHead>
                <TableHead>Total Runs</TableHead>
                <TableHead>Last Run</TableHead>
                <TableHead>Status</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {filteredNewsletters.length === 0 ? (
                <TableRow>
                  <TableCell colSpan={6} className="h-24 text-center">
                    No newsletters found
                  </TableCell>
                </TableRow>
              ) : (
                filteredNewsletters.map((newsletter) => (
                  <TableRow key={newsletter.id}>
                    <TableCell className="font-medium">{newsletter.title}</TableCell>
                    <TableCell>{formatFrequency(newsletter.frequency)}</TableCell>
                    <TableCell>{newsletter.successRate.toFixed(1)}%</TableCell>
                    <TableCell>{newsletter.totalRuns}</TableCell>
                    <TableCell>
                      {newsletter.lastRun
                        ? formatDistanceToNow(new Date(newsletter.lastRun), { addSuffix: true })
                        : "Never"}
                    </TableCell>
                    <TableCell>
                      <StatusBadge status={newsletter.status} />
                    </TableCell>
                  </TableRow>
                ))
              )}
            </TableBody>
          </Table>
        </div>
      )}
    </div>
  )
}

// Helper function to format frequency
function formatFrequency(frequency: string): string {
  switch (frequency) {
    case "daily":
      return "Daily"
    case "weekly":
      return "Weekly"
    case "monthly":
      return "Monthly"
    case "custom":
      return "Custom"
    default:
      return frequency
  }
}

// Status badge component
function StatusBadge({ status }: { status: string }) {
  switch (status) {
    case "active":
      return <Badge className="bg-green-500">Active</Badge>
    case "paused":
      return <Badge variant="outline">Paused</Badge>
    case "failed":
      return <Badge variant="destructive">Failed</Badge>
    case "completed":
      return <Badge className="bg-blue-500">Completed</Badge>
    default:
      return <Badge variant="secondary">{status}</Badge>
  }
}
[V0_FILE]typescriptreact:file="components/automation-dashboard/recent-errors-list.tsx" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import { getRecentErrors, type SystemLog } from "@/app/actions/automation-dashboard-actions"
import { Button } from "@/components/ui/button"
import { format } from "date-fns"
import { AlertCircle, ChevronDown, ChevronUp, RefreshCw } from "lucide-react"

export function RecentErrorsList() {
  const [errors, setErrors] = useState<SystemLog[]>([])
  const [loading, setLoading] = useState(true)
  const [expandedErrorId, setExpandedErrorId] = useState<string | null>(null)

useEffect(() => {
    fetchErrors()
  }, [])

async function fetchErrors() {
    setLoading(true)
    try {
      const data = await getRecentErrors(5)
      setErrors(data)
    } catch (error) {
      console.error("Error fetching recent errors:", error)
    } finally {
      setLoading(false)
    }
  }

function toggleErrorExpansion(id: string) {
    setExpandedErrorId(expandedErrorId === id ? null : id)
  }

return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <h3 className="text-sm font-medium">Recent Errors</h3>
        <Button variant="ghost" size="icon" onClick={fetchErrors}>
          <RefreshCw className="h-4 w-4" />
        </Button>
      </div>

{loading ? (
        <div className="h-[200px] flex items-center justify-center">Loading errors...</div>
      ) : errors.length === 0 ? (
        <div className="h-[200px] flex items-center justify-center text-muted-foreground">No recent errors</div>
      ) : (
        <div className="space-y-2">
          {errors.map((error) => (
            <div key={error.id} className="rounded-md border p-3 space-y-2">
              <div className="flex items-start justify-between">
                <div className="flex items-start space-x-2">
                  <AlertCircle className="h-4 w-4 text-red-500 mt-0.5" />
                  <div>
                    <div className="font-medium text-sm">{error.type}</div>
                    <div className="text-xs text-muted-foreground">
                      {format(new Date(error.created_at), "MMM d, yyyy HH:mm:ss")}
                    </div>
                  </div>
                </div>
                <Button variant="ghost" size="icon" className="h-6 w-6" onClick={() => toggleErrorExpansion(error.id)}>
                  {expandedErrorId === error.id ? (
                    <ChevronUp className="h-3 w-3" />
                  ) : (
                    <ChevronDown className="h-3 w-3" />
                  )}
                </Button>
              </div>
              {expandedErrorId === error.id && (
                <div className="bg-muted/50 rounded p-2 text-xs font-mono overflow-auto max-h-[100px]">
                  {typeof error.details === "string" ? error.details : JSON.stringify(error.details, null, 2)}
                </div>
              )}
            </div>
          ))}
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/automation-dashboard/runs-time-series-chart.tsx" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import { getRunsTimeSeries, type TimeSeriesData } from "@/app/actions/automation-dashboard-actions"
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from "recharts"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"

export function RunsTimeSeriesChart() {
  const [timeSeriesData, setTimeSeriesData] = useState<TimeSeriesData[]>([])
  const [loading, setLoading] = useState(true)
  const [days, setDays] = useState("30")

useEffect(() => {
    async function fetchData() {
      setLoading(true)
      try {
        const data = await getRunsTimeSeries(Number.parseInt(days))
        setTimeSeriesData(data)
      } catch (error) {
        console.error("Error fetching time series data:", error)
      } finally {
        setLoading(false)
      }
    }

fetchData()
  }, [days])

// Process data for the chart
  const chartData = processTimeSeriesData(timeSeriesData)

return (
    <div className="space-y-4">
      <div className="flex justify-end">
        <Select value={days} onValueChange={setDays}>
          <SelectTrigger className="w-[180px]">
            <SelectValue placeholder="Select time range" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="7">Last 7 days</SelectItem>
            <SelectItem value="30">Last 30 days</SelectItem>
            <SelectItem value="90">Last 90 days</SelectItem>
          </SelectContent>
        </Select>
      </div>

{loading ? (
        <div className="h-[300px] flex items-center justify-center">Loading chart data...</div>
      ) : (
        <div className="h-[300px]">
          <ResponsiveContainer width="100%" height="100%">
            <BarChart data={chartData} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
              <CartesianGrid strokeDasharray="3 3" />
              <XAxis dataKey="date" />
              <YAxis />
              <Tooltip />
              <Legend />
              <Bar dataKey="success" stackId="a" fill="#10b981" name="Success" />
              <Bar dataKey="failure" stackId="a" fill="#ef4444" name="Failure" />
              <Bar dataKey="pending" stackId="a" fill="#f59e0b" name="Pending" />
            </BarChart>
          </ResponsiveContainer>
        </div>
      )}
    </div>
  )
}

// Helper function to process time series data for the chart
function processTimeSeriesData(data: TimeSeriesData[]) {
  const dateMap = new Map<string, { date: string; success: number; failure: number; pending: number }>()

// Initialize with all dates in the range
  const dates = [...new Set(data.map((item) => item.date))].sort()
  dates.forEach((date) => {
    dateMap.set(date, {
      date,
      success: 0,
      failure: 0,
      pending: 0,
    })
  })

// Fill in the actual data
  data.forEach((item) => {
    const entry = dateMap.get(item.date)
    if (entry) {
      switch (item.status) {
        case "success":
          entry.success = item.count
          break
        case "failure":
          entry.failure = item.count
          break
        case "pending":
          entry.pending = item.count
          break
      }
    }
  })

return Array.from(dateMap.values())
}
[V0_FILE]typescriptreact:file="components/automation-dashboard/status-distribution-chart.tsx" isMerged="true"
"use client"

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { ResponsiveContainer, PieChart, Pie, Cell, Tooltip, Legend } from "recharts"

interface StatusDistributionChartProps {
  data: { name: string; value: number }[]
}

const COLORS = ["#0088FE", "#00C49F", "#FFBB28", "#FF8042", "#AF19FF"]

export function StatusDistributionChart({ data }: StatusDistributionChartProps) {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Job Status Distribution</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="h-[300px]">
          <ResponsiveContainer width="100%" height="100%">
            <PieChart>
              <Pie
                data={data}
                cx="50%"
                cy="50%"
                outerRadius={100}
                fill="#8884d8"
                dataKey="value"
                labelLine={false}
                label={({ name, percent }) => `${name} ${(percent * 100).toFixed(0)}%`}
              >
                {data.map((entry, index) => (
                  <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                ))}
              </Pie>
              <Tooltip />
              <Legend />
            </PieChart>
          </ResponsiveContainer>
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/automation-dashboard/system-logs-table.tsx" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import { getSystemLogs, type SystemLog } from "@/app/actions/automation-dashboard-actions"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { format } from "date-fns"
import { ChevronDown, ChevronUp, RefreshCw } from "lucide-react"

export function SystemLogsTable() {
  const [logs, setLogs] = useState<SystemLog[]>([])
  const [loading, setLoading] = useState(true)
  const [logType, setLogType] = useState<string | undefined>("all") // Updated default value
  const [expandedLogId, setExpandedLogId] = useState<string | null>(null)

useEffect(() => {
    fetchLogs()
  }, [logType])

async function fetchLogs() {
    setLoading(true)
    try {
      const data = await getSystemLogs(50, logType)
      setLogs(data)
    } catch (error) {
      console.error("Error fetching system logs:", error)
    } finally {
      setLoading(false)
    }
  }

function toggleLogExpansion(id: string) {
    setExpandedLogId(expandedLogId === id ? null : id)
  }

return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <h3 className="text-lg font-medium">System Logs</h3>
        <div className="flex items-center space-x-2">
          <Select value={logType} onValueChange={(value) => setLogType(value)}>
            <SelectTrigger className="w-[180px]">
              <SelectValue placeholder="All log types" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">All log types</SelectItem>
              <SelectItem value="newsletter_cron">Newsletter Cron</SelectItem>
              <SelectItem value="system">System</SelectItem>
              <SelectItem value="user">User</SelectItem>
            </SelectContent>
          </Select>
          <Button variant="outline" size="icon" onClick={fetchLogs}>
            <RefreshCw className="h-4 w-4" />
          </Button>
        </div>
      </div>

{loading ? (
        <div className="h-[400px] flex items-center justify-center">Loading system logs...</div>
      ) : (
        <div className="rounded-md border">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead className="w-[180px]">Timestamp</TableHead>
                <TableHead>Type</TableHead>
                <TableHead>Status</TableHead>
                <TableHead className="w-full">Details</TableHead>
                <TableHead className="w-[50px]"></TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {logs.length === 0 ? (
                <TableRow>
                  <TableCell colSpan={5} className="h-24 text-center">
                    No logs found
                  </TableCell>
                </TableRow>
              ) : (
                logs.map((log) => (
                  <>
                    <TableRow key={log.id}>
                      <TableCell className="font-mono text-xs">
                        {format(new Date(log.created_at), "yyyy-MM-dd HH:mm:ss")}
                      </TableCell>
                      <TableCell>
                        <Badge variant="outline">{log.type}</Badge>
                      </TableCell>
                      <TableCell>
                        <StatusBadge status={log.status} />
                      </TableCell>
                      <TableCell className="font-mono text-xs truncate max-w-[400px]">
                        {typeof log.details === "string" ? log.details : JSON.stringify(log.details).substring(0, 100)}
                      </TableCell>
                      <TableCell>
                        <Button variant="ghost" size="icon" onClick={() => toggleLogExpansion(log.id)}>
                          {expandedLogId === log.id ? (
                            <ChevronUp className="h-4 w-4" />
                          ) : (
                            <ChevronDown className="h-4 w-4" />
                          )}
                        </Button>
                      </TableCell>
                    </TableRow>
                    {expandedLogId === log.id && (
                      <TableRow>
                        <TableCell colSpan={5} className="bg-muted/50">
                          <pre className="text-xs overflow-auto p-2 max-h-[200px]">
                            {typeof log.details === "string" ? log.details : JSON.stringify(log.details, null, 2)}
                          </pre>
                        </TableCell>
                      </TableRow>
                    )}
                  </>
                ))
              )}
            </TableBody>
          </Table>
        </div>
      )}
    </div>
  )
}

// Status badge component
function StatusBadge({ status }: { status: string }) {
  switch (status) {
    case "success":
      return <Badge className="bg-green-500">Success</Badge>
    case "error":
      return <Badge variant="destructive">Error</Badge>
    case "warning":
      return <Badge className="bg-yellow-500">Warning</Badge>
    case "info":
      return <Badge className="bg-blue-500">Info</Badge>
    default:
      return <Badge variant="secondary">{status}</Badge>
  }
}
[V0_FILE]typescriptreact:file="components/automation-dashboard/time-of-day-chart.tsx" isMerged="true"
"use client"

import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from "recharts"
import type { TimeOfDayDistribution } from "@/app/actions/execution-metrics-actions"

interface TimeOfDayChartProps {
  data: TimeOfDayDistribution[]
  loading: boolean
}

export function TimeOfDayChart({ data, loading }: TimeOfDayChartProps) {
  if (loading) {
    return (
      <div className="h-80 w-full flex items-center justify-center">
        <p className="text-muted-foreground">Loading chart data...</p>
      </div>
    )
  }

if (data.length === 0 || data.every((item) => item.count === 0)) {
    return (
      <div className="h-80 w-full flex items-center justify-center">
        <p className="text-muted-foreground">No time distribution data available</p>
      </div>
    )
  }

// Format the data for display
  const formattedData = data.map((item) => ({
    hour: `${item.hour}:00`,
    count: item.count,
  }))

return (
    <div className="h-80 w-full">
      <ResponsiveContainer width="100%" height="100%">
        <BarChart
          data={formattedData}
          margin={{
            top: 10,
            right: 30,
            left: 0,
            bottom: 0,
          }}
        >
          <CartesianGrid strokeDasharray="3 3" />
          <XAxis dataKey="hour" label={{ value: "Hour of Day (UTC)", position: "insideBottom", offset: -5 }} />
          <YAxis label={{ value: "Number of Executions", angle: -90, position: "insideLeft" }} />
          <Tooltip />
          <Bar dataKey="count" fill="#3b82f6" name="Executions" />
        </BarChart>
      </ResponsiveContainer>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/automation-scheduler.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Switch } from "@/components/ui/switch"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Badge } from "@/components/ui/badge"
import { Separator } from "@/components/ui/separator"
import { Calendar, Clock, Edit, Plus, Trash2, Zap, AlertCircle, CheckCircle2 } from "lucide-react"

// Types for automation tasks
interface AutomationTask {
  id: string
  name: string
  type: "content-generation" | "data-collection" | "publishing" | "notification" | "analysis"
  schedule: {
    frequency: "daily" | "weekly" | "monthly" | "custom"
    time: string
    days?: string[]
    date?: number
  }
  lastRun: string | null
  nextRun: string
  status: "active" | "paused" | "failed" | "completed"
  createdAt: string
  configuration: Record<string, any>
}

export function AutomationScheduler() {
  const [activeTab, setActiveTab] = useState("scheduled")
  const [tasks, setTasks] = useState<AutomationTask[]>([
    {
      id: "task-1",
      name: "Daily Market Summary",
      type: "content-generation",
      schedule: {
        frequency: "daily",
        time: "07:00",
      },
      lastRun: "2023-05-09T07:00:00Z",
      nextRun: "2023-05-10T07:00:00Z",
      status: "active",
      createdAt: "2023-04-15T10:30:00Z",
      configuration: {
        template: "market-summary",
        sources: ["bloomberg", "reuters", "wsj"],
        includeSectors: true,
        includeIndices: true,
      },
    },
    {
      id: "task-2",
      name: "Weekly Stock Analysis",
      type: "analysis",
      schedule: {
        frequency: "weekly",
        time: "18:00",
        days: ["friday"],
      },
      lastRun: "2023-05-05T18:00:00Z",
      nextRun: "2023-05-12T18:00:00Z",
      status: "active",
      createdAt: "2023-03-20T14:15:00Z",
      configuration: {
        tickers: ["AAPL", "MSFT", "GOOGL", "AMZN", "NVDA"],
        metrics: ["pe", "eps", "revenue", "growth"],
        generateCharts: true,
      },
    },
    {
      id: "task-3",
      name: "Monthly Newsletter",
      type: "publishing",
      schedule: {
        frequency: "monthly",
        time: "09:00",
        date: 1,
      },
      lastRun: "2023-05-01T09:00:00Z",
      nextRun: "2023-06-01T09:00:00Z",
      status: "active",
      createdAt: "2023-01-10T11:45:00Z",
      configuration: {
        template: "monthly-insights",
        audience: "premium-subscribers",
        includeMarketRecap: true,
        includeTopPicks: true,
      },
    },
    {
      id: "task-4",
      name: "Earnings Calendar Update",
      type: "data-collection",
      schedule: {
        frequency: "daily",
        time: "05:30",
      },
      lastRun: "2023-05-09T05:30:00Z",
      nextRun: "2023-05-10T05:30:00Z",
      status: "failed",
      createdAt: "2023-02-05T16:20:00Z",
      configuration: {
        source: "earnings-whispers",
        lookAheadDays: 14,
        focusSectors: ["technology", "healthcare", "financials"],
      },
    },
    {
      id: "task-5",
      name: "Weekly Investment Idea Generation",
      type: "content-generation",
      schedule: {
        frequency: "weekly",
        time: "07:00",
        days: ["monday"],
      },
      lastRun: null,
      nextRun: "2023-05-15T07:00:00Z",
      status: "active",
      createdAt: "2023-05-10T10:30:00Z",
      configuration: {
        sectors: ["Technology", "Healthcare", "Financial"],
        strategy: "balanced",
        useAI: true,
        riskTolerance: 60,
        saveToContentPipeline: true,
      },
    },
  ])

// Get status badge color
  const getStatusColor = (status: string) => {
    switch (status) {
      case "active":
        return "bg-green-100 text-green-800"
      case "paused":
        return "bg-amber-100 text-amber-800"
      case "failed":
        return "bg-red-100 text-red-800"
      case "completed":
        return "bg-blue-100 text-blue-800"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

// Get type badge color
  const getTypeColor = (type: string) => {
    switch (type) {
      case "content-generation":
        return "bg-purple-100 text-purple-800"
      case "data-collection":
        return "bg-blue-100 text-blue-800"
      case "publishing":
        return "bg-green-100 text-green-800"
      case "notification":
        return "bg-orange-100 text-orange-800"
      case "analysis":
        return "bg-indigo-100 text-indigo-800"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

// Format date for display
  const formatDate = (dateString: string) => {
    const date = new Date(dateString)
    return date.toLocaleString("en-US", {
      month: "short",
      day: "numeric",
      year: "numeric",
      hour: "numeric",
      minute: "2-digit",
      hour12: true,
    })
  }

// Toggle task status
  const toggleTaskStatus = (id: string) => {
    setTasks(
      tasks.map((task) => {
        if (task.id === id) {
          const newStatus = task.status === "active" ? "paused" : "active"
          return { ...task, status: newStatus }
        }
        return task
      }),
    )
  }

// Delete task
  const deleteTask = (id: string) => {
    setTasks(tasks.filter((task) => task.id !== id))
  }

return (
    <div className="space-y-6">
      <Card>
        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
          <div>
            <CardTitle className="text-xl">Automation Scheduler</CardTitle>
            <CardDescription>Schedule and manage automated content tasks</CardDescription>
          </div>
          <Button>
            <Plus className="mr-2 h-4 w-4" />
            New Automation
          </Button>
        </CardHeader>
        <CardContent>
          <Tabs value={activeTab} onValueChange={setActiveTab}>
            <TabsList className="grid w-full grid-cols-3">
              <TabsTrigger value="scheduled">Scheduled Tasks</TabsTrigger>
              <TabsTrigger value="history">Run History</TabsTrigger>
              <TabsTrigger value="templates">Templates</TabsTrigger>
            </TabsList>

<TabsContent value="scheduled" className="space-y-4">
              <div className="flex justify-between items-center">
                <div className="text-sm text-muted-foreground">
                  {tasks.filter((task) => task.status === "active").length} active tasks
                </div>
                <Select defaultValue="all">
                  <SelectTrigger className="w-[180px]">
                    <SelectValue placeholder="Filter by type" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">All Types</SelectItem>
                    <SelectItem value="content-generation">Content Generation</SelectItem>
                    <SelectItem value="data-collection">Data Collection</SelectItem>
                    <SelectItem value="publishing">Publishing</SelectItem>
                    <SelectItem value="notification">Notification</SelectItem>
                    <SelectItem value="analysis">Analysis</SelectItem>
                  </SelectContent>
                </Select>
              </div>

<div className="space-y-4">
                {tasks.map((task) => (
                  <Card key={task.id} className="overflow-hidden">
                    <CardHeader className="bg-muted/50 p-4 pb-0">
                      <div className="flex justify-between items-start">
                        <div className="space-y-1">
                          <CardTitle className="text-lg">{task.name}</CardTitle>
                          <div className="flex flex-wrap gap-2">
                            <Badge className={getTypeColor(task.type)}>{task.type.replace("-", " ")}</Badge>
                            <Badge className={getStatusColor(task.status)}>{task.status}</Badge>
                          </div>
                        </div>
                        <div className="flex items-center space-x-2">
                          <Switch
                            checked={task.status === "active"}
                            onCheckedChange={() => toggleTaskStatus(task.id)}
                          />
                          <Button variant="ghost" size="icon">
                            <Edit className="h-4 w-4" />
                          </Button>
                          <Button variant="ghost" size="icon" onClick={() => deleteTask(task.id)}>
                            <Trash2 className="h-4 w-4" />
                          </Button>
                        </div>
                      </div>
                    </CardHeader>
                    <CardContent className="p-4 pt-2">
                      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                          <div className="text-sm font-medium">Schedule</div>
                          <div className="flex items-center mt-1 text-sm">
                            <Calendar className="h-4 w-4 mr-1 text-muted-foreground" />
                            <span className="capitalize">
                              {task.schedule.frequency}
                              {task.schedule.frequency === "weekly" && task.schedule.days
                                ? ` (${task.schedule.days.join(", ")})`
                                : ""}
                              {task.schedule.frequency === "monthly" && task.schedule.date
                                ? ` (Day ${task.schedule.date})`
                                : ""}
                            </span>
                            <Clock className="h-4 w-4 ml-2 mr-1 text-muted-foreground" />
                            <span>{task.schedule.time}</span>
                          </div>
                        </div>
                        <div>
                          <div className="text-sm font-medium">Next Run</div>
                          <div className="text-sm mt-1">{formatDate(task.nextRun)}</div>
                        </div>
                      </div>

<div className="text-sm">
                        <div className="font-medium mb-1">Configuration</div>
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-x-4 gap-y-2">
                          {Object.entries(task.configuration).map(([key, value]) => (
                            <div key={key} className="flex justify-between">
                              <span className="text-muted-foreground capitalize">{key.replace(/([A-Z])/g, " $1")}</span>
                              <span className="font-medium">
                                {Array.isArray(value) ? value.join(", ") : value.toString()}
                              </span>
                            </div>
                          ))}
                        </div>
                      </div>

{task.status === "failed" && (
                        <div className="mt-4 flex items-start bg-red-50 p-3 rounded-md">
                          <AlertCircle className="h-5 w-5 text-red-500 mr-2 mt-0.5 flex-shrink-0" />
                          <div>
                            <div className="font-medium text-red-800">Task failed on last run</div>
                            <p className="text-sm text-red-700">
                              Error connecting to data source. Please check your API credentials and try again.
                            </p>
                          </div>
                        </div>
                      )}
                    </CardContent>
                    <CardFooter className="bg-muted/30 px-4 py-2 text-xs text-muted-foreground">
                      <div className="flex justify-between w-full">
                        <span>Created {formatDate(task.createdAt)}</span>
                        {task.lastRun && <span>Last run {formatDate(task.lastRun)}</span>}
                      </div>
                    </CardFooter>
                  </Card>
                ))}
              </div>
            </TabsContent>

<TabsContent value="history" className="space-y-4">
              <div className="bg-muted/50 p-4 rounded-lg">
                <div className="flex items-center mb-4">
                  <div className="w-full">
                    <h3 className="text-lg font-medium">Run History</h3>
                    <p className="text-sm text-muted-foreground">View the execution history of your automated tasks</p>
                  </div>
                  <div className="flex gap-2">
                    <Select defaultValue="7days">
                      <SelectTrigger className="w-[150px]">
                        <SelectValue placeholder="Time period" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="24hours">Last 24 hours</SelectItem>
                        <SelectItem value="7days">Last 7 days</SelectItem>
                        <SelectItem value="30days">Last 30 days</SelectItem>
                        <SelectItem value="custom">Custom range</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                </div>

<div className="space-y-3">
                  <div className="flex items-center p-3 bg-white rounded-md border">
                    <div className="mr-3">
                      <CheckCircle2 className="h-5 w-5 text-green-500" />
                    </div>
                    <div className="flex-1">
                      <div className="font-medium">Daily Market Summary</div>
                      <div className="text-sm text-muted-foreground">Completed successfully in 45 seconds</div>
                    </div>
                    <div className="text-right">
                      <div className="text-sm font-medium">May 9, 2023</div>
                      <div className="text-xs text-muted-foreground">07:00 AM</div>
                    </div>
                  </div>

<div className="flex items-center p-3 bg-white rounded-md border">
                    <div className="mr-3">
                      <CheckCircle2 className="h-5 w-5 text-green-500" />
                    </div>
                    <div className="flex-1">
                      <div className="font-medium">Weekly Stock Analysis</div>
                      <div className="text-sm text-muted-foreground">
                        Completed successfully in 2 minutes 12 seconds
                      </div>
                    </div>
                    <div className="text-right">
                      <div className="text-sm font-medium">May 5, 2023</div>
                      <div className="text-xs text-muted-foreground">06:00 PM</div>
                    </div>
                  </div>

<div className="flex items-center p-3 bg-white rounded-md border">
                    <div className="mr-3">
                      <AlertCircle className="h-5 w-5 text-red-500" />
                    </div>
                    <div className="flex-1">
                      <div className="font-medium">Earnings Calendar Update</div>
                      <div className="text-sm text-red-500">Failed: API connection error</div>
                    </div>
                    <div className="text-right">
                      <div className="text-sm font-medium">May 9, 2023</div>
                      <div className="text-xs text-muted-foreground">05:30 AM</div>
                    </div>
                  </div>

<div className="flex items-center p-3 bg-white rounded-md border">
                    <div className="mr-3">
                      <CheckCircle2 className="h-5 w-5 text-green-500" />
                    </div>
                    <div className="flex-1">
                      <div className="font-medium">Monthly Newsletter</div>
                      <div className="text-sm text-muted-foreground">
                        Completed successfully in 3 minutes 45 seconds
                      </div>
                    </div>
                    <div className="text-right">
                      <div className="text-sm font-medium">May 1, 2023</div>
                      <div className="text-xs text-muted-foreground">09:00 AM</div>
                    </div>
                  </div>
                </div>
              </div>
            </TabsContent>

<TabsContent value="templates" className="space-y-4">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <Card>
                  <CardHeader className="pb-2">
                    <CardTitle className="text-lg">Market Summary</CardTitle>
                    <CardDescription>Daily market overview with key indices and movers</CardDescription>
                  </CardHeader>
                  <CardContent className="pb-2">
                    <div className="space-y-2 text-sm">
                      <div className="flex justify-between">
                        <span className="text-muted-foreground">Type</span>
                        <span>Content Generation</span>
                      </div>
                      <div className="flex justify-between">
                        <span className="text-muted-foreground">Frequency</span>
                        <span>Daily</span>
                      </div>
                      <div className="flex justify-between">
                        <span className="text-muted-foreground">Data Sources</span>
                        <span>Bloomberg, Reuters, WSJ</span>
                      </div>
                    </div>
                  </CardContent>
                  <CardFooter>
                    <Button variant="outline" className="w-full">
                      <Zap className="mr-2 h-4 w-4" />
                      Use Template
                    </Button>
                  </CardFooter>
                </Card>

<Card>
                  <CardHeader className="pb-2">
                    <CardTitle className="text-lg">Stock Analysis</CardTitle>
                    <CardDescription>Detailed analysis of selected stocks with metrics</CardDescription>
                  </CardHeader>
                  <CardContent className="pb-2">
                    <div className="space-y-2 text-sm">
                      <div className="flex justify-between">
                        <span className="text-muted-foreground">Type</span>
                        <span>Analysis</span>
                      </div>
                      <div className="flex justify-between">
                        <span className="text-muted-foreground">Frequency</span>
                        <span>Weekly</span>
                      </div>
                      <div className="flex justify-between">
                        <span className="text-muted-foreground">Metrics</span>
                        <span>PE, EPS, Revenue, Growth</span>
                      </div>
                    </div>
                  </CardContent>
                  <CardFooter>
                    <Button variant="outline" className="w-full">
                      <Zap className="mr-2 h-4 w-4" />
                      Use Template
                    </Button>
                  </CardFooter>
                </Card>

<Card>
                  <CardHeader className="pb-2">
                    <CardTitle className="text-lg">Newsletter</CardTitle>
                    <CardDescription>Monthly newsletter with market insights and picks</CardDescription>
                  </CardHeader>
                  <CardContent className="pb-2">
                    <div className="space-y-2 text-sm">
                      <div className="flex justify-between">
                        <span className="text-muted-foreground">Type</span>
                        <span>Publishing</span>
                      </div>
                      <div className="flex justify-between">
                        <span className="text-muted-foreground">Frequency</span>
                        <span>Monthly</span>
                      </div>
                      <div className="flex justify-between">
                        <span className="text-muted-foreground">Sections</span>
                        <span>Market Recap, Top Picks</span>
                      </div>
                    </div>
                  </CardContent>
                  <CardFooter>
                    <Button variant="outline" className="w-full">
                      <Zap className="mr-2 h-4 w-4" />
                      Use Template
                    </Button>
                  </CardFooter>
                </Card>

<Card>
                  <CardHeader className="pb-2">
                    <CardTitle className="text-lg">Data Collection</CardTitle>
                    <CardDescription>Automated data collection from various sources</CardDescription>
                  </CardHeader>
                  <CardContent className="pb-2">
                    <div className="space-y-2 text-sm">
                      <div className="flex justify-between">
                        <span className="text-muted-foreground">Type</span>
                        <span>Data Collection</span>
                      </div>
                      <div className="flex justify-between">
                        <span className="text-muted-foreground">Frequency</span>
                        <span>Daily</span>
                      </div>
                      <div className="flex justify-between">
                        <span className="text-muted-foreground">Sources</span>
                        <span>APIs, Web Scraping</span>
                      </div>
                    </div>
                  </CardContent>
                  <CardFooter>
                    <Button variant="outline" className="w-full">
                      <Zap className="mr-2 h-4 w-4" />
                      Use Template
                    </Button>
                  </CardFooter>
                </Card>
              </div>
            </TabsContent>
          </Tabs>
        </CardContent>
      </Card>

<Card>
        <CardHeader>
          <CardTitle>Create New Automation</CardTitle>
          <CardDescription>Set up a new automated task for your content pipeline</CardDescription>
        </CardHeader>
        <CardContent>
          <form className="space-y-4">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="task-name">Task Name</Label>
                <Input id="task-name" placeholder="Enter task name" />
              </div>

<div className="space-y-2">
                <Label htmlFor="task-type">Task Type</Label>
                <Select>
                  <SelectTrigger id="task-type">
                    <SelectValue placeholder="Select task type" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="content-generation">Content Generation</SelectItem>
                    <SelectItem value="data-collection">Data Collection</SelectItem>
                    <SelectItem value="publishing">Publishing</SelectItem>
                    <SelectItem value="notification">Notification</SelectItem>
                    <SelectItem value="analysis">Analysis</SelectItem>
                  </SelectContent>
                </Select>
              </div>

<div className="space-y-2">
                <Label htmlFor="frequency">Frequency</Label>
                <Select>
                  <SelectTrigger id="frequency">
                    <SelectValue placeholder="Select frequency" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="daily">Daily</SelectItem>
                    <SelectItem value="weekly">Weekly</SelectItem>
                    <SelectItem value="monthly">Monthly</SelectItem>
                    <SelectItem value="custom">Custom</SelectItem>
                  </SelectContent>
                </Select>
              </div>

<div className="space-y-2">
              <Label htmlFor="description">Description</Label>
              <Input id="description" placeholder="Enter task description" />
            </div>

<div className="space-y-2">
              <div className="flex items-center justify-between">
                <Label htmlFor="active">Active</Label>
                <Switch id="active" defaultChecked />
              </div>
              <p className="text-sm text-muted-foreground">Enable or disable this automation task</p>
            </div>
          </form>
        </CardContent>
        <CardFooter className="flex justify-between">
          <Button variant="outline">Cancel</Button>
          <Button>Create Automation</Button>
        </CardFooter>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/client-api-health-check.tsx" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { AlertCircle, Check, RefreshCw } from "lucide-react"
import { checkClientApiConfiguration } from "@/lib/api-config"

export function ClientApiHealthCheck() {
  const [apiStatus, setApiStatus] = useState<Record<string, boolean>>({})
  const [isLoading, setIsLoading] = useState(true)

useEffect(() => {
    const checkApis = () => {
      setIsLoading(true)
      try {
        const { status } = checkClientApiConfiguration()
        // Filter out CRON_API_KEY from the status object
        const filteredStatus = Object.fromEntries(Object.entries(status).filter(([key]) => key !== "CRON_API_KEY"))
        setApiStatus(filteredStatus)
      } catch (error) {
        console.error("Error checking API status:", error)
      } finally {
        setIsLoading(false)
      }
    }

checkApis()
  }, [])

return (
    <Card>
      <CardHeader>
        <CardTitle>Client API Status</CardTitle>
        <CardDescription>Check the status of client-side API connections</CardDescription>
      </CardHeader>
      <CardContent>
        {isLoading ? (
          <div className="flex justify-center items-center py-4">
            <RefreshCw className="h-6 w-6 animate-spin text-muted-foreground" />
          </div>
        ) : (
          <div className="space-y-4">
            {Object.entries(apiStatus).map(([api, isConfigured]) => (
              <div key={api} className="flex items-center justify-between">
                <div className="flex items-center">
                  <span className="font-medium capitalize">{api}</span>
                </div>
                <Badge
                  variant="outline"
                  className={`${
                    isConfigured ? "bg-green-100 text-green-800" : "bg-red-100 text-red-800"
                  } flex items-center`}
                >
                  {isConfigured ? (
                    <>
                      <Check className="h-3 w-3 mr-1" />
                      Configured
                    </>
                  ) : (
                    <>
                      <AlertCircle className="h-3 w-3 mr-1" />
                      Not Configured
                    </>
                  )}
                </Badge>
              </div>
            ))}

{Object.values(apiStatus).some((status) => !status) && (
              <div className="mt-4 p-3 bg-amber-50 border border-amber-200 rounded-md text-sm text-amber-800">
                <p>
                  <strong>Note:</strong> Some client-side APIs are not configured. This may limit functionality in the
                  browser.
                </p>
              </div>
            )}
          </div>
        )}
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/company-analysis/company-detail.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { ArrowUpRight, ChevronLeft } from "lucide-react"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import type { CompanyAnalysis } from "@/types/company-analysis"
import { CompanyOverview } from "./company-overview"
import { FinancialAnalysis } from "./financial-analysis"
import { ValuationAnalysis } from "./valuation-analysis"
import { RiskAnalysis } from "./risk-analysis"
import { TechnicalAnalysis } from "./technical-analysis"
import { InvestmentThesis } from "./investment-thesis"
import { NewsAndEvents } from "./news-and-events"

interface CompanyDetailProps {
  company: CompanyAnalysis
}

export function CompanyDetail({ company }: CompanyDetailProps) {
  const [activeTab, setActiveTab] = useState("overview")

return (
    <div className="space-y-6">
      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
        <div>
          <Link
            href="/company-analysis"
            className="flex items-center text-sm text-muted-foreground hover:text-primary mb-2"
          >
            <ChevronLeft className="h-4 w-4 mr-1" />
            Back to Companies
          </Link>
          <div className="flex items-center gap-3">
            <h1 className="text-3xl font-bold">{company.name}</h1>
            <Badge variant="outline" className="text-sm font-medium">
              {company.ticker}
            </Badge>
          </div>
          <div className="flex items-center gap-2 mt-1">
            <Badge variant="secondary">{company.sector}</Badge>
            <Badge variant="secondary">{company.industry}</Badge>
          </div>
        </div>
        <Button variant="outline" size="sm" className="gap-1" asChild>
          <a href={`https://finance.yahoo.com/quote/${company.ticker}`} target="_blank" rel="noopener noreferrer">
            View on Yahoo Finance
            <ArrowUpRight className="h-3.5 w-3.5" />
          </a>
        </Button>
      </div>

<Card>
        <CardHeader className="pb-0">
          <CardTitle>Company Analysis</CardTitle>
          <CardDescription>Last updated: {new Date(company.lastUpdated).toLocaleDateString()}</CardDescription>
        </CardHeader>
        <CardContent>
          <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
            <TabsList className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-7 w-full">
              <TabsTrigger value="overview">Overview</TabsTrigger>
              <TabsTrigger value="financials">Financials</TabsTrigger>
              <TabsTrigger value="valuation">Valuation</TabsTrigger>
              <TabsTrigger value="risks">Risks</TabsTrigger>
              <TabsTrigger value="technical">Technical</TabsTrigger>
              <TabsTrigger value="thesis">Thesis</TabsTrigger>
              <TabsTrigger value="news">News</TabsTrigger>
            </TabsList>
            <TabsContent value="overview" className="mt-6">
              <CompanyOverview company={company} />
            </TabsContent>
            <TabsContent value="financials" className="mt-6">
              <FinancialAnalysis financials={company.financials} />
            </TabsContent>
            <TabsContent value="valuation" className="mt-6">
              <ValuationAnalysis valuation={company.valuation} ticker={company.ticker} />
            </TabsContent>
            <TabsContent value="risks" className="mt-6">
              <RiskAnalysis risks={company.risks} />
            </TabsContent>
            <TabsContent value="technical" className="mt-6">
              <TechnicalAnalysis technical={company.technicalAnalysis} ticker={company.ticker} />
            </TabsContent>
            <TabsContent value="thesis" className="mt-6">
              <InvestmentThesis
                thesis={company.investmentThesis}
                analystRatings={company.analystRatings}
                competitiveAdvantages={company.competitiveAdvantages}
                growthDrivers={company.growthDrivers}
              />
            </TabsContent>
            <TabsContent value="news" className="mt-6">
              <NewsAndEvents news={company.newsEvents} ticker={company.ticker} />
            </TabsContent>
          </Tabs>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/company-analysis/company-overview.tsx" isMerged="true"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Separator } from "@/components/ui/separator"
import { Badge } from "@/components/ui/badge"
import { Check, User } from "lucide-react"
import type { CompanyAnalysis } from "@/types/company-analysis"

interface CompanyOverviewProps {
  company: CompanyAnalysis
}

export function CompanyOverview({ company }: CompanyOverviewProps) {
  return (
    <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
      <div className="lg:col-span-2 space-y-6">
        <Card>
          <CardHeader>
            <CardTitle>Company Description</CardTitle>
          </CardHeader>
          <CardContent>
            <p className="text-sm text-muted-foreground leading-relaxed">{company.description}</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle>Business Model</CardTitle>
          </CardHeader>
          <CardContent>
            <p className="text-sm text-muted-foreground leading-relaxed">{company.businessModel}</p>
          </CardContent>
        </Card>

<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <Card>
            <CardHeader>
              <CardTitle>Competitive Advantages</CardTitle>
            </CardHeader>
            <CardContent>
              <ul className="space-y-2">
                {company.competitiveAdvantages.map((advantage, index) => (
                  <li key={index} className="flex items-start gap-2 text-sm">
                    <Check className="h-4 w-4 text-green-500 mt-0.5 shrink-0" />
                    <span>{advantage}</span>
                  </li>
                ))}
              </ul>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle>Growth Drivers</CardTitle>
            </CardHeader>
            <CardContent>
              <ul className="space-y-2">
                {company.growthDrivers.map((driver, index) => (
                  <li key={index} className="flex items-start gap-2 text-sm">
                    <Check className="h-4 w-4 text-green-500 mt-0.5 shrink-0" />
                    <span>{driver}</span>
                  </li>
                ))}
              </ul>
            </CardContent>
          </Card>
        </div>
      </div>

<div className="space-y-6">
        <Card>
          <CardHeader>
            <CardTitle>Management Team</CardTitle>
            <CardDescription>Key executives and leadership</CardDescription>
          </CardHeader>
          <CardContent className="px-2">
            <div className="space-y-4">
              {company.managementTeam.map((executive, index) => (
                <div key={index} className="px-4 py-3 rounded-lg bg-muted/50">
                  <div className="flex items-center gap-3 mb-2">
                    <div className="h-8 w-8 rounded-full bg-primary/10 flex items-center justify-center">
                      <User className="h-4 w-4 text-primary" />
                    </div>
                    <div>
                      <h4 className="font-medium">{executive.name}</h4>
                      <p className="text-xs text-muted-foreground">
                        {executive.position} (Since {executive.since})
                      </p>
                    </div>
                  </div>
                  <p className="text-xs text-muted-foreground mb-2">{executive.background}</p>

{(executive.strengths || executive.concerns) && (
                    <div className="mt-2 space-y-1.5">
                      {executive.strengths && (
                        <div className="flex items-start gap-1.5">
                          <Badge variant="outline" className="bg-green-50 text-green-700 border-green-200 text-[10px]">
                            Strengths
                          </Badge>
                          <span className="text-xs">{executive.strengths}</span>
                        </div>
                      )}

{executive.concerns && (
                        <div className="flex items-start gap-1.5">
                          <Badge variant="outline" className="bg-amber-50 text-amber-700 border-amber-200 text-[10px]">
                            Concerns
                          </Badge>
                          <span className="text-xs">{executive.concerns}</span>
                        </div>
                      )}
                    </div>
                  )}
                </div>
              ))}
            </div>
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle>Company Information</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-2">
              <div className="flex justify-between text-sm">
                <span className="text-muted-foreground">Ticker</span>
                <span className="font-medium">{company.ticker}</span>
              </div>
              <Separator />
              <div className="flex justify-between text-sm">
                <span className="text-muted-foreground">Sector</span>
                <span className="font-medium">{company.sector}</span>
              </div>
              <Separator />
              <div className="flex justify-between text-sm">
                <span className="text-muted-foreground">Industry</span>
                <span className="font-medium">{company.industry}</span>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/company-analysis/investment-thesis.tsx" isMerged="true"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Separator } from "@/components/ui/separator"
import { Check, ThumbsDown, ThumbsUp } from "lucide-react"
import type { AnalystRating } from "@/types/company-analysis"

interface InvestmentThesisProps {
  thesis: string
  analystRatings: AnalystRating[]
  competitiveAdvantages: string[]
  growthDrivers: string[]
}

export function InvestmentThesis({
  thesis,
  analystRatings,
  competitiveAdvantages,
  growthDrivers,
}: InvestmentThesisProps) {
  // Calculate analyst consensus
  const ratingCounts = {
    buy: analystRatings.filter((r) => r.rating === "buy" || r.rating === "overweight").length,
    hold: analystRatings.filter((r) => r.rating === "hold").length,
    sell: analystRatings.filter((r) => r.rating === "underweight" || r.rating === "sell").length,
  }

const totalRatings = ratingCounts.buy + ratingCounts.hold + ratingCounts.sell

const buyPercentage = Math.round((ratingCounts.buy / totalRatings) * 100)
  const holdPercentage = Math.round((ratingCounts.hold / totalRatings) * 100)
  const sellPercentage = Math.round((ratingCounts.sell / totalRatings) * 100)

// Calculate average price target
  const averagePriceTarget = analystRatings.reduce((sum, rating) => sum + rating.priceTarget, 0) / analystRatings.length

// Determine consensus rating
  let consensusRating = "Neutral"
  if (buyPercentage >= 70) consensusRating = "Strong Buy"
  else if (buyPercentage >= 50) consensusRating = "Buy"
  else if (sellPercentage >= 70) consensusRating = "Strong Sell"
  else if (sellPercentage >= 50) consensusRating = "Sell"

const consensusColor =
    consensusRating === "Strong Buy" || consensusRating === "Buy"
      ? "success"
      : consensusRating === "Strong Sell" || consensusRating === "Sell"
        ? "destructive"
        : "outline"

return (
    <div className="space-y-6">
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div className="lg:col-span-2 space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>Investment Thesis</CardTitle>
              <CardDescription>Comprehensive investment case for the company</CardDescription>
            </CardHeader>
            <CardContent>
              <p className="text-sm text-muted-foreground whitespace-pre-line leading-relaxed">{thesis}</p>
            </CardContent>
          </Card>

<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <Card>
              <CardHeader>
                <CardTitle>Bull Case</CardTitle>
              </CardHeader>
              <CardContent>
                <ul className="space-y-2">
                  {competitiveAdvantages.map((advantage, index) => (
                    <li key={index} className="flex items-start gap-2 text-sm">
                      <ThumbsUp className="h-4 w-4 text-green-500 mt-0.5 shrink-0" />
                      <span>{advantage}</span>
                    </li>
                  ))}
                </ul>
              </CardContent>
            </Card>

<Card>
              <CardHeader>
                <CardTitle>Bear Case</CardTitle>
              </CardHeader>
              <CardContent>
                <ul className="space-y-2">
                  {/* In a real implementation, this would come from the API */}
                  <li className="flex items-start gap-2 text-sm">
                    <ThumbsDown className="h-4 w-4 text-red-500 mt-0.5 shrink-0" />
                    <span>Increasing competitive pressure could erode market share</span>
                  </li>
                  <li className="flex items-start gap-2 text-sm">
                    <ThumbsDown className="h-4 w-4 text-red-500 mt-0.5 shrink-0" />
                    <span>Regulatory changes pose uncertainty for future growth</span>
                  </li>
                  <li className="flex items-start gap-2 text-sm">
                    <ThumbsDown className="h-4 w-4 text-red-500 mt-0.5 shrink-0" />
                    <span>Valuation appears stretched relative to historical averages</span>
                  </li>
                </ul>
              </CardContent>
            </Card>
          </div>
        </div>

<div className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>Analyst Consensus</CardTitle>
              <CardDescription>Based on {totalRatings} analyst ratings</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="flex justify-between items-center mb-4">
                <span className="text-sm">Consensus:</span>
                <Badge variant={consensusColor}>{consensusRating}</Badge>
              </div>

<div className="space-y-3">
                <div>
                  <div className="flex justify-between text-sm mb-1">
                    <span>Buy</span>
                    <span>
                      {ratingCounts.buy} ({buyPercentage}%)
                    </span>
                  </div>
                  <div className="w-full bg-muted rounded-full h-2.5">
                    <div className="bg-green-500 h-2.5 rounded-full" style={{ width: `${buyPercentage}%` }}></div>
                  </div>
                </div>

<div>
                  <div className="flex justify-between text-sm mb-1">
                    <span>Hold</span>
                    <span>
                      {ratingCounts.hold} ({holdPercentage}%)
                    </span>
                  </div>
                  <div className="w-full bg-muted rounded-full h-2.5">
                    <div className="bg-amber-500 h-2.5 rounded-full" style={{ width: `${holdPercentage}%` }}></div>
                  </div>
                </div>

<div>
                  <div className="flex justify-between text-sm mb-1">
                    <span>Sell</span>
                    <span>
                      {ratingCounts.sell} ({sellPercentage}%)
                    </span>
                  </div>
                  <div className="w-full bg-muted rounded-full h-2.5">
                    <div className="bg-red-500 h-2.5 rounded-full" style={{ width: `${sellPercentage}%` }}></div>
                  </div>
                </div>
              </div>

<div className="flex justify-between items-center">
                <span className="text-sm">Average Price Target:</span>
                <span className="font-bold">${averagePriceTarget.toFixed(2)}</span>
              </div>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle>Key Catalysts</CardTitle>
            </CardHeader>
            <CardContent>
              <ul className="space-y-2">
                {/* In a real implementation, this would come from the API */}
                <li className="flex items-start gap-2 text-sm">
                  <Check className="h-4 w-4 text-blue-500 mt-0.5 shrink-0" />
                  <span>Q4 Earnings Report (Expected Feb 2024)</span>
                </li>
                <li className="flex items-start gap-2 text-sm">
                  <Check className="h-4 w-4 text-blue-500 mt-0.5 shrink-0" />
                  <span>New Product Launch (Q1 2024)</span>
                </li>
                <li className="flex items-start gap-2 text-sm">
                  <Check className="h-4 w-4 text-blue-500 mt-0.5 shrink-0" />
                  <span>Investor Day (March 2024)</span>
                </li>
                <li className="flex items-start gap-2 text-sm">
                  <Check className="h-4 w-4 text-blue-500 mt-0.5 shrink-0" />
                  <span>Potential Expansion Announcement</span>
                </li>
              </ul>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle>Recent Analyst Actions</CardTitle>
            </CardHeader>
            <CardContent className="p-0">
              <div className="divide-y">
                {analystRatings.slice(0, 3).map((rating, index) => (
                  <div key={index} className="p-4">
                    <div className="flex justify-between items-start mb-1">
                      <span className="font-medium text-sm">{rating.firm}</span>
                      <Badge
                        variant={
                          rating.rating === "buy" || rating.rating === "overweight"
                            ? "success"
                            : rating.rating === "underweight" || rating.rating === "sell"
                              ? "destructive"
                              : "outline"
                        }
                        className="text-xs"
                      >
                        {rating.rating.charAt(0).toUpperCase() + rating.rating.slice(1)}
                      </Badge>
                    </div>
                    <div className="flex justify-between text-xs text-muted-foreground mb-2">
                      <span>{rating.analyst || "Analyst"}</span>
                      <span>{new Date(rating.date).toLocaleDateString()}</span>
                    </div>
                    <div className="flex justify-between items-center mb-1">
                      <span className="text-xs">Price Target:</span>
                      <span className="font-medium">${rating.priceTarget.toFixed(2)}</span>
                    </div>
                    {rating.commentary && <p className="text-xs text-muted-foreground mt-2">{rating.commentary}</p>}
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/company-analysis/news-and-events.tsx" isMerged="true"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { ArrowUpRight, Calendar } from "lucide-react"
import Link from "next/link"
import type { NewsEvent } from "@/types/company-analysis"

interface NewsAndEventsProps {
  news: NewsEvent[]
  ticker: string
}

export function NewsAndEvents({ news, ticker }: NewsAndEventsProps) {
  // Group news by month
  const groupedNews = news.reduce(
    (acc, newsItem) => {
      const date = new Date(newsItem.date)
      const monthYear = `${date.toLocaleString("default", { month: "long" })} ${date.getFullYear()}`

if (!acc[monthYear]) {
        acc[monthYear] = []
      }

acc[monthYear].push(newsItem)
      return acc
    },
    {} as Record<string, NewsEvent[]>,
  )

const sentimentColors = {
    positive: "bg-green-50 text-green-700 border-green-200",
    negative: "bg-red-50 text-red-700 border-red-200",
    neutral: "bg-blue-50 text-blue-700 border-blue-200",
  }

return (
    <div className="space-y-6">
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div className="lg:col-span-2">
          <Card>
            <CardHeader>
              <CardTitle>Recent News</CardTitle>
              <CardDescription>Latest news and developments</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-6">
                {Object.entries(groupedNews).map(([monthYear, monthNews]) => (
                  <div key={monthYear}>
                    <h3 className="text-sm font-medium mb-3">{monthYear}</h3>
                    <div className="space-y-4">
                      {monthNews.map((newsItem) => (
                        <div key={newsItem.id} className="flex gap-4">
                          <div className="w-16 shrink-0">
                            <div className="text-xs text-muted-foreground">
                              {new Date(newsItem.date).toLocaleDateString(undefined, {
                                day: "numeric",
                                month: "short",
                              })}
                            </div>
                          </div>
                          <div className="flex-1 space-y-1">
                            <div className="flex items-start justify-between gap-2">
                              <Link
                                href={newsItem.url}
                                target="_blank"
                                rel="noopener noreferrer"
                                className="font-medium text-sm hover:underline flex items-center gap-1"
                              >
                                {newsItem.title}
                                <ArrowUpRight className="h-3 w-3" />
                              </Link>
                              <Badge variant="outline" className={sentimentColors[newsItem.sentiment]}>
                                {newsItem.sentiment.charAt(0).toUpperCase() + newsItem.sentiment.slice(1)}
                              </Badge>
                            </div>
                            <div className="flex items-center gap-2">
                              <span className="text-xs text-muted-foreground">{newsItem.source}</span>
                            </div>
                            {newsItem.impactAssessment && (
                              <p className="text-xs text-muted-foreground mt-1">
                                <span className="font-medium">Impact: </span>
                                {newsItem.impactAssessment}
                              </p>
                            )}
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        </div>

<div className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>Upcoming Events</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                {/* In a real implementation, this would come from the API */}
                <div className="flex gap-3">
                  <div className="h-10 w-10 rounded-full bg-primary/10 flex items-center justify-center shrink-0">
                    <Calendar className="h-5 w-5 text-primary" />
                  </div>
                  <div>
                    <h4 className="font-medium text-sm">Q4 2023 Earnings Call</h4>
                    <p className="text-xs text-muted-foreground">February 15, 2024 • 5:00 PM ET</p>
                  </div>
                </div>

<div className="flex gap-3">
                  <div className="h-10 w-10 rounded-full bg-primary/10 flex items-center justify-center shrink-0">
                    <Calendar className="h-5 w-5 text-primary" />
                  </div>
                  <div>
                    <h4 className="font-medium text-sm">Investor Conference</h4>
                    <p className="text-xs text-muted-foreground">March 10, 2024 • All Day</p>
                  </div>
                </div>

<div className="flex gap-3">
                  <div className="h-10 w-10 rounded-full bg-primary/10 flex items-center justify-center shrink-0">
                    <Calendar className="h-5 w-5 text-primary" />
                  </div>
                  <div>
                    <h4 className="font-medium text-sm">Annual Shareholder Meeting</h4>
                    <p className="text-xs text-muted-foreground">April 20, 2024 • 10:00 AM ET</p>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle>News Sentiment Trend</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="aspect-video bg-muted rounded-md flex items-center justify-center">
                <p className="text-sm text-muted-foreground">
                  News sentiment chart for {ticker} would be displayed here
                </p>
              </div>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle>Related Resources</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-3">
                <Link
                  href={`https://finance.yahoo.com/quote/${ticker}`}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="flex items-center justify-between text-sm hover:underline"
                >
                  <span>Yahoo Finance</span>
                  <ArrowUpRight className="h-3.5 w-3.5" />
                </Link>

<Link
                  href={`https://www.sec.gov/cgi-bin/browse-edgar?CIK=${ticker}&owner=exclude&action=getcompany`}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="flex items-center justify-between text-sm hover:underline"
                >
                  <span>SEC Filings (EDGAR)</span>
                  <ArrowUpRight className="h-3.5 w-3.5" />
                </Link>

<Link
                  href={`https://seekingalpha.com/symbol/${ticker}`}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="flex items-center justify-between text-sm hover:underline"
                >
                  <span>Seeking Alpha</span>
                  <ArrowUpRight className="h-3.5 w-3.5" />
                </Link>

<Link
                  href={`https://www.marketwatch.com/investing/stock/${ticker.toLowerCase()}`}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="flex items-center justify-between text-sm hover:underline"
                >
                  <span>MarketWatch</span>
                  <ArrowUpRight className="h-3.5 w-3.5" />
                </Link>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/company-analysis/risk-analysis.tsx" isMerged="true"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { AlertTriangle, ShieldAlert, ShieldCheck } from "lucide-react"
import type { CompanyRisk } from "@/types/company-analysis"
import type { JSX } from "react" // Import JSX to declare JSX.Element

interface RiskAnalysisProps {
  risks: CompanyRisk[]
}

export function RiskAnalysis({ risks }: RiskAnalysisProps) {
  // Group risks by category
  const risksByCategory = risks.reduce(
    (acc, risk) => {
      if (!acc[risk.category]) {
        acc[risk.category] = []
      }
      acc[risk.category].push(risk)
      return acc
    },
    {} as Record<string, CompanyRisk[]>,
  )

const categoryLabels: Record<string, string> = {
    operational: "Operational",
    financial: "Financial",
    strategic: "Strategic",
    regulatory: "Regulatory",
    market: "Market",
    other: "Other",
  }

const categoryIcons: Record<string, JSX.Element> = {
    operational: <ShieldAlert className="h-5 w-5 text-amber-500" />,
    financial: <ShieldAlert className="h-5 w-5 text-blue-500" />,
    strategic: <ShieldAlert className="h-5 w-5 text-purple-500" />,
    regulatory: <ShieldAlert className="h-5 w-5 text-red-500" />,
    market: <ShieldAlert className="h-5 w-5 text-green-500" />,
    other: <ShieldAlert className="h-5 w-5 text-gray-500" />,
  }

const impactColors: Record<string, string> = {
    low: "bg-green-50 text-green-700 border-green-200",
    medium: "bg-amber-50 text-amber-700 border-amber-200",
    high: "bg-orange-50 text-orange-700 border-orange-200",
    critical: "bg-red-50 text-red-700 border-red-200",
  }

const likelihoodColors: Record<string, string> = {
    low: "bg-green-50 text-green-700 border-green-200",
    medium: "bg-amber-50 text-amber-700 border-amber-200",
    high: "bg-red-50 text-red-700 border-red-200",
  }

return (
    <div className="space-y-6">
      <Card>
        <CardHeader>
          <CardTitle>Risk Assessment</CardTitle>
          <CardDescription>Key risks that could impact the company's performance</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="space-y-6">
            {Object.entries(risksByCategory).map(([category, categoryRisks]) => (
              <div key={category} className="space-y-4">
                <div className="flex items-center gap-2">
                  {categoryIcons[category] || <AlertTriangle className="h-5 w-5 text-amber-500" />}
                  <h3 className="font-medium">{categoryLabels[category] || category} Risks</h3>
                </div>

<div className="space-y-4">
                  {categoryRisks.map((risk) => (
                    <Card key={risk.id} className="overflow-hidden">
                      <div className="border-l-4 border-l-amber-500 pl-4 py-4 pr-5">
                        <div className="flex justify-between items-start mb-2">
                          <h4 className="font-medium">{risk.title}</h4>
                          <div className="flex gap-2">
                            <Badge variant="outline" className={impactColors[risk.potentialImpact]}>
                              {risk.potentialImpact.charAt(0).toUpperCase() + risk.potentialImpact.slice(1)} Impact
                            </Badge>
                            <Badge variant="outline" className={likelihoodColors[risk.likelihoodOfOccurrence]}>
                              {risk.likelihoodOfOccurrence.charAt(0).toUpperCase() +
                                risk.likelihoodOfOccurrence.slice(1)}{" "}
                              Likelihood
                            </Badge>
                          </div>
                        </div>
                        <p className="text-sm text-muted-foreground mb-3">{risk.description}</p>

{risk.mitigationStrategy && (
                          <div className="flex items-start gap-2 bg-green-50 p-2 rounded-md">
                            <ShieldCheck className="h-4 w-4 text-green-600 mt-0.5 shrink-0" />
                            <div>
                              <span className="text-xs font-medium text-green-700">Mitigation Strategy:</span>
                              <p className="text-xs text-green-700">{risk.mitigationStrategy}</p>
                            </div>
                          </div>
                        )}
                      </div>
                    </Card>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/company-analysis/technical-analysis.tsx" isMerged="true"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Separator } from "@/components/ui/separator"
import { ArrowDown, ArrowUp, TrendingDown, TrendingUp } from "lucide-react"
import type { TechnicalAnalysisData } from "@/types/company-analysis"

interface TechnicalAnalysisProps {
  technical: TechnicalAnalysisData
  ticker: string
}

export function TechnicalAnalysis({ technical, ticker }: TechnicalAnalysisProps) {
  return (
    <div className="space-y-6">
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        <Card>
          <CardHeader>
            <CardTitle>Price Chart</CardTitle>
            <CardDescription>Historical price performance with key indicators</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="aspect-video bg-muted rounded-md flex items-center justify-center">
              <p className="text-sm text-muted-foreground">Price chart for {ticker} would be displayed here</p>
            </div>
          </CardContent>
        </Card>

<div className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>Moving Averages</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-3">
                <div className="flex justify-between items-center">
                  <span className="text-sm">50-Day MA</span>
                  <span className="font-medium">${technical.movingAverages.ma50.toFixed(2)}</span>
                </div>

<div className="flex justify-between items-center">
                  <span className="text-sm">200-Day MA</span>
                  <span className="font-medium">${technical.movingAverages.ma200.toFixed(2)}</span>
                </div>

<div className="flex justify-between items-center">
                  <span className="text-sm">MA Status</span>
                  <Badge
                    variant={
                      technical.movingAverages.status === "bullish"
                        ? "success"
                        : technical.movingAverages.status === "bearish"
                          ? "destructive"
                          : "outline"
                    }
                    className="flex items-center gap-1"
                  >
                    {technical.movingAverages.status === "bullish" ? (
                      <TrendingUp className="h-3 w-3" />
                    ) : technical.movingAverages.status === "bearish" ? (
                      <TrendingDown className="h-3 w-3" />
                    ) : null}
                    {technical.movingAverages.status.charAt(0).toUpperCase() + technical.movingAverages.status.slice(1)}
                  </Badge>
                </div>
              </div>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle>Relative Strength</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-3">
                <div className="flex justify-between items-center">
                  <span className="text-sm">RSI (14)</span>
                  <div className="flex items-center gap-2">
                    <span className="font-medium">{technical.relativeStrength.rsIndex.toFixed(1)}</span>
                    <Badge
                      variant={
                        technical.relativeStrength.rsIndex > 70
                          ? "destructive"
                          : technical.relativeStrength.rsIndex < 30
                            ? "success"
                            : "outline"
                      }
                      className="text-xs"
                    >
                      {technical.relativeStrength.rsIndex > 70
                        ? "Overbought"
                        : technical.relativeStrength.rsIndex < 30
                          ? "Oversold"
                          : "Neutral"}
                    </Badge>
                  </div>
                </div>

<div className="flex justify-between items-center">
                  <span className="text-sm">vs. Industry (3M)</span>
                  <div className="flex items-center gap-1">
                    {technical.relativeStrength.vsIndustry3Month > 0 ? (
                      <ArrowUp className="h-3.5 w-3.5 text-green-500" />
                    ) : (
                      <ArrowDown className="h-3.5 w-3.5 text-red-500" />
                    )}
                    <span className="font-medium">
                      {technical.relativeStrength.vsIndustry3Month > 0 ? "+" : ""}
                      {technical.relativeStrength.vsIndustry3Month.toFixed(1)}%
                    </span>
                  </div>
                </div>

<div className="flex justify-between items-center">
                  <span className="text-sm">vs. Sector (3M)</span>
                  <div className="flex items-center gap-1">
                    {technical.relativeStrength.vsSector3Month > 0 ? (
                      <ArrowUp className="h-3.5 w-3.5 text-green-500" />
                    ) : (
                      <ArrowDown className="h-3.5 w-3.5 text-red-500" />
                    )}
                    <span className="font-medium">
                      {technical.relativeStrength.vsSector3Month > 0 ? "+" : ""}
                      {technical.relativeStrength.vsSector3Month.toFixed(1)}%
                    </span>
                  </div>
                </div>

<div className="flex justify-between items-center">
                  <span className="text-sm">vs. Market (3M)</span>
                  <div className="flex items-center gap-1">
                    {technical.relativeStrength.vsMarket3Month > 0 ? (
                      <ArrowUp className="h-3.5 w-3.5 text-green-500" />
                    ) : (
                      <ArrowDown className="h-3.5 w-3.5 text-red-500" />
                    )}
                    <span className="font-medium">
                      {technical.relativeStrength.vsMarket3Month > 0 ? "+" : ""}
                      {technical.relativeStrength.vsMarket3Month.toFixed(1)}%
                    </span>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        <Card>
          <CardHeader>
            <CardTitle>Support & Resistance</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              <div>
                <h4 className="text-sm font-medium mb-2">Resistance Levels</h4>
                <div className="flex flex-wrap gap-2">
                  {technical.supportResistance.resistance.map((level, index) => (
                    <Badge key={index} variant="outline" className="py-1.5">
                      ${level.toFixed(2)}
                    </Badge>
                  ))}
                </div>
              </div>

<div>
                <h4 className="text-sm font-medium mb-2">Support Levels</h4>
                <div className="flex flex-wrap gap-2">
                  {technical.supportResistance.support.map((level, index) => (
                    <Badge key={index} variant="outline" className="py-1.5">
                      ${level.toFixed(2)}
                    </Badge>
                  ))}
                </div>
              </div>
            </div>
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle>Volume Analysis</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-3">
              <div className="flex justify-between items-center">
                <span className="text-sm">Average Daily Volume</span>
                <span className="font-medium">
                  {technical.volumeAnalysis.averageDailyVolume.toLocaleString()} shares
                </span>
              </div>

<div className="flex justify-between items-center">
                <span className="text-sm">Volume Trend</span>
                <Badge
                  variant={
                    technical.volumeAnalysis.volumeTrend === "increasing"
                      ? "success"
                      : technical.volumeAnalysis.volumeTrend === "decreasing"
                        ? "destructive"
                        : "outline"
                  }
                >
                  {technical.volumeAnalysis.volumeTrend.charAt(0).toUpperCase() +
                    technical.volumeAnalysis.volumeTrend.slice(1)}
                </Badge>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/company-analysis/valuation-analysis.tsx" isMerged="true"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Progress } from "@/components/ui/progress"
import { Badge } from "@/components/ui/badge"
import { Separator } from "@/components/ui/separator"
import { ArrowDown, ArrowUp, Info } from "lucide-react"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
import type { CompanyValuation, IntrinsicValueEstimate } from "@/types/company-analysis"

interface ValuationAnalysisProps {
  valuation: CompanyValuation
  ticker: string
}

export function ValuationAnalysis({ valuation, ticker }: ValuationAnalysisProps) {
  const formatCurrency = (value: number) => {
    if (value >= 1000000000) {
      return `$${(value / 1000000000).toFixed(1)}B`
    } else if (value >= 1000000) {
      return `$${(value / 1000000).toFixed(1)}M`
    } else {
      return `$${value.toFixed(2)}`
    }
  }

return (
    <div className="space-y-6">
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        <Card>
          <CardHeader>
            <CardTitle>Valuation Multiples</CardTitle>
            <CardDescription>Current valuation metrics relative to industry</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <ValuationMetricRow
              label="P/E Ratio"
              value={valuation.peRatio.value.toFixed(1)}
              industryAvg={valuation.peRatio.industryAverage.toFixed(1)}
              percentile={valuation.peRatio.percentile}
              tooltip="Price to Earnings ratio measures the current share price relative to earnings per share"
              lowerIsBetter={true}
            />

<div className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>Intrinsic Value Estimates</CardTitle>
              <CardDescription>Estimated fair value based on different models</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                {valuation.intrinsicValueEstimates.map((estimate, index) => (
                  <IntrinsicValueCard key={index} estimate={estimate} />
                ))}
              </div>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle>Additional Metrics</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-3">
                <div className="flex justify-between items-center">
                  <div className="flex items-center gap-2">
                    <span className="text-sm">Enterprise Value</span>
                    <TooltipProvider>
                      <Tooltip>
                        <TooltipTrigger>
                          <Info className="h-3.5 w-3.5 text-muted-foreground" />
                        </TooltipTrigger>
                        <TooltipContent>
                          <p className="max-w-xs text-xs">
                            Enterprise Value = Market Cap + Debt - Cash. Represents the total value of the company.
                          </p>
                        </TooltipContent>
                      </Tooltip>
                    </TooltipProvider>
                  </div>
                  <span className="font-medium">{formatCurrency(valuation.enterpriseValue)}</span>
                </div>

{valuation.dividendYield !== undefined && (
                  <>
                    <div className="flex justify-between items-center">
                      <div className="flex items-center gap-2">
                        <span className="text-sm">Dividend Yield</span>
                        <TooltipProvider>
                          <Tooltip>
                            <TooltipTrigger>
                              <Info className="h-3.5 w-3.5 text-muted-foreground" />
                            </TooltipTrigger>
                            <TooltipContent>
                              <p className="max-w-xs text-xs">
                                Annual dividend payments as a percentage of share price.
                              </p>
                            </TooltipContent>
                          </Tooltip>
                        </TooltipProvider>
                      </div>
                      <span className="font-medium">{valuation.dividendYield.toFixed(2)}%</span>
                    </div>

<Separator />
                  </>
                )}

{valuation.fcfYield !== undefined && (
                  <>
                    <div className="flex justify-between items-center">
                      <div className="flex items-center gap-2">
                        <span className="text-sm">Free Cash Flow Yield</span>
                        <TooltipProvider>
                          <Tooltip>
                            <TooltipTrigger>
                              <Info className="h-3.5 w-3.5 text-muted-foreground" />
                            </TooltipTrigger>
                            <TooltipContent>
                              <p className="max-w-xs text-xs">
                                Free cash flow per share divided by share price. Higher is generally better.
                              </p>
                            </TooltipContent>
                          </Tooltip>
                        </TooltipProvider>
                      </div>
                      <span className="font-medium">{valuation.fcfYield.toFixed(2)}%</span>
                    </div>

<Separator />
                  </>
                )}
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}

interface ValuationMetricRowProps {
  label: string
  value: string
  industryAvg: string
  percentile: number
  tooltip: string
  lowerIsBetter?: boolean
}

function ValuationMetricRow({
  label,
  value,
  industryAvg,
  percentile,
  tooltip,
  lowerIsBetter = true,
}: ValuationMetricRowProps) {
  // For metrics where lower is better (like P/E), we invert the percentile for the progress bar
  // so that being in a low percentile (which is good) shows as more green
  const adjustedPercentile = lowerIsBetter ? 100 - percentile : percentile

// Determine if the company's metric is better or worse than industry average
  const numericValue = Number.parseFloat(value)
  const numericIndustryAvg = Number.parseFloat(industryAvg)
  const isBetter = lowerIsBetter ? numericValue < numericIndustryAvg : numericValue > numericIndustryAvg

return (
    <div className="space-y-2">
      <div className="flex justify-between items-center">
        <div className="flex items-center gap-2">
          <span className="text-sm">{label}</span>
          <TooltipProvider>
            <Tooltip>
              <TooltipTrigger>
                <Info className="h-3.5 w-3.5 text-muted-foreground" />
              </TooltipTrigger>
              <TooltipContent>
                <p className="max-w-xs text-xs">{tooltip}</p>
              </TooltipContent>
            </Tooltip>
          </TooltipProvider>
        </div>
        <div className="flex items-center gap-2">
          <span className="font-medium">{value}</span>
          <Badge variant={isBetter ? "success" : "destructive"} className="text-xs">
            {isBetter ? <ArrowDown className="h-3 w-3 mr-0.5" /> : <ArrowUp className="h-3 w-3 mr-0.5" />}
            vs {industryAvg}
          </Badge>
        </div>
      </div>
      <div className="flex items-center gap-2">
        <Progress value={adjustedPercentile} className="h-2" />
        <span className="text-xs text-muted-foreground w-12 text-right">{percentile.toFixed(0)}%ile</span>
      </div>
    </div>
  )
}

interface IntrinsicValueCardProps {
  estimate: IntrinsicValueEstimate
}

function IntrinsicValueCard({ estimate }: IntrinsicValueCardProps) {
  return (
    <div className="rounded-lg border p-3">
      <div className="flex justify-between items-center mb-2">
        <div className="flex items-center gap-2">
          <Badge variant="outline" className="font-medium">
            {estimate.model}
          </Badge>
          <span className="text-xs text-muted-foreground">{new Date(estimate.date).toLocaleDateString()}</span>
        </div>
        <Badge variant={estimate.upside > 0 ? "success" : "destructive"} className="text-xs">
          {estimate.upside > 0 ? "+" : ""}
          {estimate.upside}% Upside
        </Badge>
      </div>

<div className="flex items-center justify-between mb-2">
        <span className="text-sm">Target Value:</span>
        <span className="font-bold text-lg">${estimate.value.toFixed(2)}</span>
      </div>

<div className="text-xs text-muted-foreground">
        <span className="font-medium text-foreground">Assumptions: </span>
        {estimate.assumptions}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/compound-interest-calculator.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Label } from "@/components/ui/label"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Separator } from "@/components/ui/separator"

export function CompoundInterestCalculator() {
  const [principal, setPrincipal] = useState<number>(10000)
  const [annualRate, setAnnualRate] = useState<number>(5) // in percent
  const [years, setYears] = useState<number>(10)
  const [compoundingFrequency, setCompoundingFrequency] = useState<number>(12) // monthly
  const [futureValue, setFutureValue] = useState<number | null>(null)

const calculateFutureValue = () => {
    if (principal <= 0 || annualRate < 0 || years <= 0 || compoundingFrequency <= 0) {
      setFutureValue(null)
      return
    }

const rate = annualRate / 100
    const n = compoundingFrequency
    const t = years

const fv = principal * Math.pow(1 + rate / n, n * t)
    setFutureValue(fv)
  }

return (
    <Card className="shadow-lg hover:shadow-xl transition-shadow duration-300 h-full flex flex-col">
      <CardHeader>
        <CardTitle className="text-xl font-semibold text-slate-800">Compound Interest Calculator</CardTitle>
      </CardHeader>
      <CardContent className="flex-grow flex flex-col justify-between">
        <div className="grid grid-cols-1 gap-4 mb-6">
          <div>
            <Label htmlFor="principal">Principal Amount ($)</Label>
            <Input
              id="principal"
              type="number"
              value={principal}
              onChange={(e) => setPrincipal(Number.parseFloat(e.target.value))}
              placeholder="10000"
            />
          </div>
          <div>
            <Label htmlFor="annualRate">Annual Interest Rate (%)</Label>
            <Input
              id="annualRate"
              type="number"
              value={annualRate}
              onChange={(e) => setAnnualRate(Number.parseFloat(e.target.value))}
              placeholder="5"
            />
          </div>
          <div>
            <Label htmlFor="years">Investment Period (Years)</Label>
            <Input
              id="years"
              type="number"
              value={years}
              onChange={(e) => setYears(Number.parseFloat(e.target.value))}
              placeholder="10"
            />
          </div>
          <div>
            <Label htmlFor="compoundingFrequency">Compounding Frequency</Label>
            <Select
              value={String(compoundingFrequency)}
              onValueChange={(value) => setCompoundingFrequency(Number.parseInt(value))}
            >
              <SelectTrigger id="compoundingFrequency">
                <SelectValue placeholder="Select frequency" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="1">Annually</SelectItem>
                <SelectItem value="2">Semi-Annually</SelectItem>
                <SelectItem value="4">Quarterly</SelectItem>
                <SelectItem value="12">Monthly</SelectItem>
                <SelectItem value="365">Daily</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </div>
        <div className="mt-auto">
          <Button onClick={calculateFutureValue} className="w-full bg-blue-600 hover:bg-blue-700 text-white">
            Calculate
          </Button>
          {futureValue !== null && (
            <>
              <Separator className="my-4" />
              <div className="text-center">
                <p className="text-slate-600 text-sm">Future Value:</p>
                <p className="text-2xl font-bold text-slate-900">
                  ${futureValue.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
                </p>
              </div>
            </>
          )}
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/content-analytics.tsx" isMerged="true"
"use client"

export interface ContentAnalyticsData {
  contentByType: {
    type: string
    count: number
  }[]
  contentByStage: {
    stage: string
    count: number
  }[]
  contentByMonth: {
    month: string
    count: number
  }[]
  topTags: {
    tag: string
    count: number
  }[]
  authorPerformance: {
    author: string
    published: number
    engagement: number
  }[]
}

interface ContentAnalyticsProps {
  data?: ContentAnalyticsData | null
}

export function ContentAnalytics({ data }: ContentAnalyticsProps) {
  const [activeTab, setActiveTab] = useState("overview")

// If no data is provided, use sample data
  const analyticsData: ContentAnalyticsData = data || {
    contentByType: [
      { type: "article", count: 24 },
      { type: "newsletter", count: 12 },
      { type: "report", count: 8 },
      { type: "idea", count: 18 },
    ],
    contentByStage: [
      { stage: "idea", count: 15 },
      { stage: "draft", count: 22 },
      { stage: "review", count: 10 },
      { stage: "published", count: 15 },
    ],
    contentByMonth: [
      { month: "Jan", count: 5 },
      { month: "Feb", count: 7 },
      { month: "Mar", count: 10 },
      { month: "Apr", count: 8 },
      { month: "May", count: 12 },
      { month: "Jun", count: 15 },
    ],
    topTags: [
      { tag: "AI", count: 18 },
      { tag: "Semiconductors", count: 14 },
      { tag: "Cloud", count: 12 },
      { tag: "Cybersecurity", count: 10 },
      { tag: "Fintech", count: 8 },
    ],
    authorPerformance: [
      { author: "John Doe", published: 12, engagement: 85 },
      { author: "Jane Smith", published: 8, engagement: 92 },
      { author: "Alex Johnson", published: 15, engagement: 78 },
      { author: "Sarah Williams", published: 7, engagement: 88 },
    ],
  }

return (
    <div className="space-y-6">
      <Tabs value={activeTab} onValueChange={setActiveTab}>
        <TabsList>
          <TabsTrigger value="overview">Overview</TabsTrigger>
          <TabsTrigger value="content">Content</TabsTrigger>
          <TabsTrigger value="authors">Authors</TabsTrigger>
          <TabsTrigger value="engagement">Engagement</TabsTrigger>
        </TabsList>

<TabsContent value="overview" className="space-y-4">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            <Card>
              <CardHeader className="pb-2">
                <CardTitle className="text-lg">Content by Type</CardTitle>
                <CardDescription>Distribution of content across different types</CardDescription>
              </CardHeader>
              <CardContent className="pt-0">
                <div className="flex items-center justify-center h-60">
                  <PieChart className="h-40 w-40 text-muted-foreground" />
                </div>
                <div className="grid grid-cols-2 gap-2 mt-2">
                  {analyticsData.contentByType.map((item) => (
                    <div key={item.type} className="flex justify-between items-center">
                      <span className="text-sm capitalize">{item.type}</span>
                      <span className="font-medium">{item.count}</span>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>

<Card>
              <CardHeader className="pb-2">
                <CardTitle className="text-lg">Content by Stage</CardTitle>
                <CardDescription>Current status of content in pipeline</CardDescription>
              </CardHeader>
              <CardContent className="pt-0">
                <div className="flex items-center justify-center h-60">
                  <BarChart className="h-40 w-40 text-muted-foreground" />
                </div>
                <div className="grid grid-cols-2 gap-2 mt-2">
                  {analyticsData.contentByStage.map((item) => (
                    <div key={item.stage} className="flex justify-between items-center">
                      <span className="text-sm capitalize">{item.stage}</span>
                      <span className="font-medium">{item.count}</span>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>

<Card>
              <CardHeader className="pb-2">
                <CardTitle className="text-lg">Content Production</CardTitle>
                <CardDescription>Content created over time</CardDescription>
              </CardHeader>
              <CardContent className="pt-0">
                <div className="flex items-center justify-center h-60">
                  <LineChart className="h-40 w-40 text-muted-foreground" />
                </div>
                <div className="grid grid-cols-3 gap-2 mt-2">
                  {analyticsData.contentByMonth.map((item) => (
                    <div key={item.month} className="flex justify-between items-center">
                      <span className="text-sm">{item.month}</span>
                      <span className="font-medium">{item.count}</span>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>
          </div>

<Card>
            <CardHeader className="pb-2">
              <CardTitle className="text-lg">Top Tags</CardTitle>
              <CardDescription>Most frequently used tags</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
                {analyticsData.topTags.map((item) => (
                  <div key={item.tag} className="flex flex-col items-center justify-center p-4 bg-muted rounded-lg">
                    <span className="text-2xl font-bold">{item.count}</span>
                    <span className="text-sm text-muted-foreground">{item.tag}</span>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="content">
          <Card>
            <CardHeader>
              <CardTitle>Content Analysis</CardTitle>
              <CardDescription>Detailed analysis of content performance</CardDescription>
            </CardHeader>
            <CardContent>
              <p className="text-muted-foreground">Content analysis data will be displayed here.</p>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="authors">
          <Card>
            <CardHeader>
              <CardTitle>Author Performance</CardTitle>
              <CardDescription>Content production and engagement by author</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                {analyticsData.authorPerformance.map((author) => (
                  <div key={author.author} className="flex items-center justify-between border-b pb-4">
                    <div>
                      <div className="font-medium">{author.author}</div>
                      <div className="text-sm text-muted-foreground">{author.published} pieces published</div>
                    </div>
                    <div className="flex items-center">
                      <div className="mr-4">
                        <div className="text-sm text-muted-foreground">Engagement</div>
                        <div className="font-medium">{author.engagement}%</div>
                      </div>
                      <div className="h-2 w-24 bg-muted rounded-full overflow-hidden">
                        <div className="h-full bg-primary" style={{ width: `${author.engagement}%` }}></div>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="engagement">
          <Card>
            <CardHeader>
              <CardTitle>Engagement Metrics</CardTitle>
              <CardDescription>How users interact with your content</CardDescription>
            </CardHeader>
            <CardContent>
              <p className="text-muted-foreground">Engagement metrics will be displayed here.</p>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/content-item-selector.tsx" isMerged="true"
"use client"

import { useState, useEffect, useRef } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Checkbox } from "@/components/ui/checkbox"
import { Loader2, Search, Filter, Plus } from "lucide-react"
import { getContentItems } from "@/services/content-pipeline-service"
import type { ContentItem } from "@/types/content-pipeline"

interface ContentItemSelectorProps {
  onSelect?: (items: ContentItem[]) => void
  initialSelectedIds?: string[]
}

export function ContentItemSelector({ onSelect, initialSelectedIds = [] }: ContentItemSelectorProps) {
  const [contentItems, setContentItems] = useState<ContentItem[]>([])
  const [filteredItems, setFilteredItems] = useState<ContentItem[]>([])
  const [selectedIds, setSelectedIds] = useState<string[]>(initialSelectedIds)
  const [searchQuery, setSearchQuery] = useState("")
  const [isLoading, setIsLoading] = useState(true)

// Use a ref to track if we've already called onSelect with the current selection
  const prevSelectedIdsRef = useRef<string[]>([])

useEffect(() => {
    const fetchContentItems = async () => {
      setIsLoading(true)
      try {
        const items = await getContentItems()
        setContentItems(items)
        setFilteredItems(items)
      } catch (error) {
        console.error("Error fetching content items:", error)
      } finally {
        setIsLoading(false)
      }
    }

fetchContentItems()
  }, [])

useEffect(() => {
    if (searchQuery) {
      const query = searchQuery.toLowerCase()
      setFilteredItems(
        contentItems.filter(
          (item) =>
            item.title.toLowerCase().includes(query) ||
            item.description.toLowerCase().includes(query) ||
            item.tags.some((tag) => tag.toLowerCase().includes(query)),
        ),
      )
    } else {
      setFilteredItems(contentItems)
    }
  }, [searchQuery, contentItems])

const handleToggleSelect = (id: string) => {
    setSelectedIds((prev) => {
      const newSelectedIds = prev.includes(id) ? prev.filter((i) => i !== id) : [...prev, id]
      return newSelectedIds
    })
  }

// Only call onSelect when selectedIds or contentItems actually change
  useEffect(() => {
    // Skip the initial render
    if (contentItems.length === 0) return

// Check if the selection has actually changed
    const currentSelection = JSON.stringify(selectedIds.sort())
    const prevSelection = JSON.stringify(prevSelectedIdsRef.current.sort())

if (currentSelection !== prevSelection) {
      const selectedItems = contentItems.filter((item) => selectedIds.includes(item.id))

// Check if onSelect is a function before calling it
      if (typeof onSelect === "function") {
        onSelect(selectedItems)
      }

// Update the ref to the current selection
      prevSelectedIdsRef.current = [...selectedIds]
    }
  }, [selectedIds, contentItems, onSelect])

const getStageColor = (stage: string) => {
    switch (stage) {
      case "idea":
        return "bg-blue-900 text-blue-100"
      case "draft":
        return "bg-amber-900 text-amber-100"
      case "review":
        return "bg-purple-900 text-purple-100"
      case "published":
        return "bg-green-900 text-green-100"
      default:
        return "bg-gray-900 text-gray-100"
    }
  }

return (
    <Card className="bg-slate-900 border-slate-800">
      <CardHeader>
        <CardTitle className="text-white">Content Library</CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="flex gap-2">
          <div className="relative flex-grow">
            <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-500" />
            <Input
              placeholder="Search content..."
              className="pl-8 bg-slate-800 border-slate-700 text-white"
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
            />
          </div>
          <Button variant="outline" className="bg-slate-800 border-slate-700 text-white">
            <Filter className="h-4 w-4 mr-1" />
            Filter
          </Button>
        </div>

{isLoading ? (
          <div className="flex justify-center items-center py-8">
            <Loader2 className="h-8 w-8 animate-spin text-blue-500" />
          </div>
        ) : filteredItems.length === 0 ? (
          <div className="text-center py-8 text-gray-400">
            <p>No content items found.</p>
          </div>
        ) : (
          <div className="space-y-2 max-h-[400px] overflow-y-auto pr-2">
            {filteredItems.map((item) => (
              <div
                key={item.id}
                className={`flex items-start p-3 rounded-md border ${
                  selectedIds.includes(item.id) ? "bg-blue-900/20 border-blue-800" : "bg-slate-800 border-slate-700"
                } hover:bg-slate-700 cursor-pointer transition-colors`}
                onClick={() => handleToggleSelect(item.id)}
              >
                <Checkbox
                  checked={selectedIds.includes(item.id)}
                  onCheckedChange={() => handleToggleSelect(item.id)}
                  className="mr-3 mt-1"
                />
                <div className="flex-grow">
                  <div className="flex items-center gap-2 flex-wrap">
                    <Badge className={getStageColor(item.stage)}>{item.stage}</Badge>
                    <Badge variant="outline" className="bg-slate-700 border-slate-600 text-white">
                      {item.type}
                    </Badge>
                  </div>
                  <h3 className="font-medium mt-1 text-white">{item.title}</h3>
                  <p className="text-sm text-gray-400 mt-1 line-clamp-2">{item.description}</p>
                  <div className="flex flex-wrap gap-1 mt-2">
                    {item.tags.slice(0, 3).map((tag, index) => (
                      <Badge
                        key={index}
                        variant="outline"
                        className="text-xs bg-slate-700 border-slate-600 text-gray-300"
                      >
                        {tag}
                      </Badge>
                    ))}
                    {item.tags.length > 3 && (
                      <Badge variant="outline" className="text-xs bg-slate-700 border-slate-600 text-gray-300">
                        +{item.tags.length - 3}
                      </Badge>
                    )}
                  </div>
                </div>
              </div>
            ))}
          </div>
        )}

<div className="flex justify-between items-center pt-2 border-t border-slate-700">
          <div className="text-sm text-gray-400">
            {selectedIds.length} item{selectedIds.length !== 1 ? "s" : ""} selected
          </div>
          <Button className="bg-blue-600 hover:bg-blue-700">
            <Plus className="h-4 w-4 mr-1" />
            Add Selected
          </Button>
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/content-library/smart-organization-panel.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { ScrollArea } from "@/components/ui/scroll-area"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Plus, Settings, Hash, ChevronRight, ChevronDown } from "lucide-react"
import {
  getContentCategories,
  getSmartFolders,
  getContentSeries,
  getTagHierarchy,
  getTagSuggestions,
  createSmartFolder,
  createContentSeries,
  type ContentCategory,
  type SmartFolder,
  type ContentSeries,
  type TagHierarchy,
} from "@/services/smart-content-organization-service"
import { toast } from "@/hooks/use-toast"

interface SmartOrganizationPanelProps {
  onContentFilter?: (filter: any) => void
}

export function SmartOrganizationPanel({ onContentFilter }: SmartOrganizationPanelProps) {
  const [categories, setCategories] = useState<ContentCategory[]>([])
  const [smartFolders, setSmartFolders] = useState<SmartFolder[]>([])
  const [contentSeries, setContentSeries] = useState<ContentSeries[]>([])
  const [tagHierarchy, setTagHierarchy] = useState<TagHierarchy[]>([])
  const [expandedCategories, setExpandedCategories] = useState<Set<string>>(new Set())
  const [expandedTags, setExpandedTags] = useState<Set<string>>(new Set())
  const [tagSuggestions, setTagSuggestions] = useState<string[]>([])
  const [tagInput, setTagInput] = useState("")

useEffect(() => {
    loadData()
  }, [])

const loadData = async () => {
    try {
      const [categoriesData, foldersData, seriesData, tagsData] = await Promise.all([
        getContentCategories(),
        getSmartFolders(),
        getContentSeries(),
        getTagHierarchy(),
      ])

setCategories(categoriesData)
      setSmartFolders(foldersData)
      setContentSeries(seriesData)
      setTagHierarchy(tagsData)
    } catch (error) {
      console.error("Error loading organization data:", error)
    }
  }

const handleTagInputChange = async (value: string) => {
    setTagInput(value)
    if (value.length > 1) {
      const suggestions = await getTagSuggestions(value)
      setTagSuggestions(suggestions)
    } else {
      setTagSuggestions([])
    }
  }

const toggleCategoryExpansion = (categoryId: string) => {
    setExpandedCategories((prev) => {
      const newSet = new Set(prev)
      if (newSet.has(categoryId)) {
        newSet.delete(categoryId)
      } else {
        newSet.add(categoryId)
      }
      return newSet
    })
  }

const toggleTagExpansion = (tagId: string) => {
    setExpandedTags((prev) => {
      const newSet = new Set(prev)
      if (newSet.has(tagId)) {
        newSet.delete(tagId)
      } else {
        newSet.add(tagId)
      }
      return newSet
    })
  }

const CategoryItem = ({ category, level = 0 }: { category: ContentCategory; level?: number }) => (
    <div className={`${level > 0 ? "ml-4" : ""}`}>
      <div
        className="flex items-center justify-between p-2 hover:bg-gray-50 rounded cursor-pointer"
        onClick={() => {
          if (category.children && category.children.length > 0) {
            toggleCategoryExpansion(category.id)
          }
          onContentFilter?.({ category: category.id })
        }}
      >
        <div className="flex items-center gap-2">
          {category.children && category.children.length > 0 ? (
            expandedCategories.has(category.id) ? (
              <ChevronDown className="h-4 w-4" />
            ) : (
              <ChevronRight className="h-4 w-4" />
            )
          ) : (
            <div className="w-4" />
          )}
          <div className="w-3 h-3 rounded-full" style={{ backgroundColor: category.color }} />
          <span className="text-sm font-medium">{category.name}</span>
        </div>
        {category.itemCount !== undefined && (
          <Badge variant="secondary" className="text-xs">
            {category.itemCount}
          </Badge>
        )}
      </div>

{category.children && expandedCategories.has(category.id) && (
        <div className="ml-2">
          {category.children.map((child) => (
            <CategoryItem key={child.id} category={child} level={level + 1} />
          ))}
        </div>
      )}
    </div>
  )

const TagItem = ({ tag, level = 0 }: { tag: TagHierarchy; level?: number }) => (
    <div className={`${level > 0 ? "ml-4" : ""}`}>
      <div
        className="flex items-center justify-between p-2 hover:bg-gray-50 rounded cursor-pointer"
        onClick={() => {
          if (tag.children && tag.children.length > 0) {
            toggleTagExpansion(tag.id)
          }
          onContentFilter?.({ tag: tag.name })
        }}
      >
        <div className="flex items-center gap-2">
          {tag.children && tag.children.length > 0 ? (
            expandedTags.has(tag.id) ? (
              <ChevronDown className="h-4 w-4" />
            ) : (
              <ChevronRight className="h-4 w-4" />
            )
          ) : (
            <Hash className="h-3 w-3 text-gray-400" />
          )}
          <span className="text-sm">{tag.name}</span>
        </div>
        <Badge variant="secondary" className="text-xs">
          {tag.count}
        </Badge>
      </div>

{tag.children && expandedTags.has(tag.id) && (
        <div className="ml-2">
          {tag.children.map((child) => (
            <TagItem key={child.id} tag={child} level={level + 1} />
          ))}
        </div>
      )}
    </div>
  )

return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <Settings className="h-5 w-5" />
          Smart Organization
        </CardTitle>
      </CardHeader>
      <CardContent>
        <Tabs defaultValue="categories" className="w-full">
          <TabsList className="grid w-full grid-cols-4">
            <TabsTrigger value="categories">Categories</TabsTrigger>
            <TabsTrigger value="folders">Folders</TabsTrigger>
            <TabsTrigger value="series">Series</TabsTrigger>
            <TabsTrigger value="tags">Tags</TabsTrigger>
          </TabsList>

<TabsContent value="categories" className="space-y-4">
            <div className="flex justify-between items-center">
              <h4 className="font-medium">Content Categories</h4>
              <Button size="sm" variant="outline">
                <Plus className="h-4 w-4 mr-1" />
                Add
              </Button>
            </div>

<ScrollArea className="h-64">
              <div className="space-y-1">
                {categories.map((category) => (
                  <CategoryItem key={category.id} category={category} />
                ))}
              </div>
            </ScrollArea>
          </TabsContent>

<TabsContent value="folders" className="space-y-4">
            <div className="flex justify-between items-center">
              <h4 className="font-medium">Smart Folders</h4>
              <Dialog>
                <DialogTrigger asChild>
                  <Button size="sm" variant="outline">
                    <Plus className="h-4 w-4 mr-1" />
                    Create
                  </Button>
                </DialogTrigger>
                <DialogContent>
                  <DialogHeader>
                    <DialogTitle>Create Smart Folder</DialogTitle>
                    <DialogDescription>
                      Create a dynamic folder that automatically organizes content based on rules
                    </DialogDescription>
                  </DialogHeader>
                  <CreateSmartFolderForm onSuccess={loadData} />
                </DialogContent>
              </Dialog>
            </div>

<ScrollArea className="h-64">
              <div className="space-y-2">
                {smartFolders.map((folder) => (
                  <div
                    key={folder.id}
                    className="flex items-center justify-between p-3 border rounded-lg hover:bg-gray-50 cursor-pointer"
                    onClick={() => onContentFilter?.({ smartFolder: folder.id })}
                  >
                    <div className="flex items-center gap-3">
                      <div className="text-lg">{folder.icon}</div>
                      <div>
                        <div className="font-medium text-sm">{folder.name}</div>
                        <div className="text-xs text-gray-500">{folder.description}</div>
                      </div>
                    </div>
                    <Badge variant="secondary" className="text-xs">
                      {folder.itemCount}
                    </Badge>
                  </div>
                ))}
              </div>
            </ScrollArea>
          </TabsContent>

<TabsContent value="series" className="space-y-4">
            <div className="flex justify-between items-center">
              <h4 className="font-medium">Content Series</h4>
              <Dialog>
                <DialogTrigger asChild>
                  <Button size="sm" variant="outline">
                    <Plus className="h-4 w-4 mr-1" />
                    Create
                  </Button>
                </DialogTrigger>
                <DialogContent>
                  <DialogHeader>
                    <DialogTitle>Create Content Series</DialogTitle>
                    <DialogDescription>Group related content into a series or campaign</DialogDescription>
                  </DialogHeader>
                  <CreateContentSeriesForm onSuccess={loadData} />
                </DialogContent>
              </Dialog>
            </div>

<ScrollArea className="h-64">
              <div className="space-y-2">
                {contentSeries.map((series) => (
                  <div
                    key={series.id}
                    className="p-3 border rounded-lg hover:bg-gray-50 cursor-pointer"
                    onClick={() => onContentFilter?.({ series: series.id })}
                  >
                    <div className="flex justify-between items-start mb-2">
                      <div className="font-medium text-sm">{series.name}</div>
                      <Badge variant={series.status === "active" ? "default" : "secondary"} className="text-xs">
                        {series.status}
                      </Badge>
                    </div>
                    <div className="text-xs text-gray-500 mb-2">{series.description}</div>
                    <div className="flex justify-between items-center">
                      <div className="text-xs text-gray-500">{series.contentIds.length} items</div>
                      <div className="flex gap-1">
                        {series.tags.slice(0, 2).map((tag) => (
                          <Badge key={tag} variant="outline" className="text-xs">
                            {tag}
                          </Badge>
                        ))}
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </ScrollArea>
          </TabsContent>

<TabsContent value="tags" className="space-y-4">
            <div className="space-y-2">
              <Label>Tag Search</Label>
              <div className="relative">
                <Input
                  placeholder="Search tags..."
                  value={tagInput}
                  onChange={(e) => handleTagInputChange(e.target.value)}
                />
                {tagSuggestions.length > 0 && (
                  <div className="absolute top-full left-0 right-0 bg-white border rounded-md shadow-lg z-10 max-h-32 overflow-y-auto">
                    {tagSuggestions.map((suggestion) => (
                      <div
                        key={suggestion}
                        className="p-2 hover:bg-gray-50 cursor-pointer text-sm"
                        onClick={() => {
                          setTagInput(suggestion)
                          setTagSuggestions([])
                          onContentFilter?.({ tag: suggestion })
                        }}
                      >
                        {suggestion}
                      </div>
                    ))}
                  </div>
                )}
              </div>
            </div>

<ScrollArea className="h-64">
              <div className="space-y-1">
                {tagHierarchy.map((tag) => (
                  <TagItem key={tag.id} tag={tag} />
                ))}
              </div>
            </ScrollArea>
          </TabsContent>
        </Tabs>
      </CardContent>
    </Card>
  )
}

// Helper components for creating smart folders and series
function CreateSmartFolderForm({ onSuccess }: { onSuccess: () => void }) {
  const [name, setName] = useState("")
  const [description, setDescription] = useState("")
  const [icon, setIcon] = useState("📁")

const handleSubmit = async () => {
    if (!name.trim()) return

try {
      await createSmartFolder({
        name,
        description,
        icon,
        rules: [], // Basic implementation
        color: "#3B82F6",
      })

toast({
        title: "Smart Folder Created",
        description: `"${name}" has been created successfully`,
      })

onSuccess()
    } catch (error) {
      console.error("Error creating smart folder:", error)
      toast({
        title: "Creation Failed",
        description: "Could not create smart folder. Please try again.",
        variant: "destructive",
      })
    }
  }

return (
    <div className="space-y-4">
      <div>
        <Label>Folder Name</Label>
        <Input placeholder="Enter folder name..." value={name} onChange={(e) => setName(e.target.value)} />
      </div>
      <div>
        <Label>Description</Label>
        <Input
          placeholder="Enter description..."
          value={description}
          onChange={(e) => setDescription(e.target.value)}
        />
      </div>
      <div>
        <Label>Icon</Label>
        <Select value={icon} onValueChange={setIcon}>
          <SelectTrigger>
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="📁">📁 Folder</SelectItem>
            <SelectItem value="💼">💼 Business</SelectItem>
            <SelectItem value="📊">📊 Analytics</SelectItem>
            <SelectItem value="🔥">🔥 Hot</SelectItem>
            <SelectItem value="⭐">⭐ Important</SelectItem>
            <SelectItem value="🎯">🎯 Target</SelectItem>
          </SelectContent>
        </Select>
      </div>
      <Button onClick={handleSubmit} className="w-full">
        Create Smart Folder
      </Button>
    </div>
  )
}

function CreateContentSeriesForm({ onSuccess }: { onSuccess: () => void }) {
  const [name, setName] = useState("")
  const [description, setDescription] = useState("")
  const [tags, setTags] = useState("")

const handleSubmit = async () => {
    if (!name.trim()) return

try {
      await createContentSeries({
        name,
        description,
        contentIds: [],
        order: [],
        status: "planned",
        tags: tags
          .split(",")
          .map((tag) => tag.trim())
          .filter(Boolean),
      })

toast({
        title: "Content Series Created",
        description: `"${name}" has been created successfully`,
      })

onSuccess()
    } catch (error) {
      console.error("Error creating content series:", error)
      toast({
        title: "Creation Failed",
        description: "Could not create content series. Please try again.",
        variant: "destructive",
      })
    }
  }

return (
    <div className="space-y-4">
      <div>
        <Label>Series Name</Label>
        <Input placeholder="Enter series name..." value={name} onChange={(e) => setName(e.target.value)} />
      </div>
      <div>
        <Label>Description</Label>
        <Input
          placeholder="Enter description..."
          value={description}
          onChange={(e) => setDescription(e.target.value)}
        />
      </div>
      <div>
        <Label>Tags (comma-separated)</Label>
        <Input placeholder="AI, Technology, Finance..." value={tags} onChange={(e) => setTags(e.target.value)} />
      </div>
      <Button onClick={handleSubmit} className="w-full">
        Create Content Series
      </Button>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/content-library/smart-repository-panel.tsx" isMerged="true"
"use client"

interface SmartRepositoryPanelProps {
  onContentSelect: (contentId: string) => void
}

export function SmartRepositoryPanel({ onContentSelect }: SmartRepositoryPanelProps) {
  const [searchQuery, setSearchQuery] = useState("")
  const [recommendations, setRecommendations] = useState<any[]>([])
  const [trendingContent, setTrendingContent] = useState<ContentItem[]>([])
  const [recentContent, setRecentContent] = useState<ContentItem[]>([])
  const [isLoading, setIsLoading] = useState(false)

const handleSmartSearch = async () => {
    if (!searchQuery.trim()) return

setIsLoading(true)
    try {
      const results = await findSimilarContent(searchQuery, [], 10, 0.6)
      setRecommendations(results)

toast({
        title: "Smart Search Complete",
        description: `Found ${results.length} relevant content items`,
      })
    } catch (error) {
      console.error("Smart search failed:", error)
      toast({
        title: "Search Failed",
        description: "Could not complete smart search",
        variant: "destructive",
      })
    } finally {
      setIsLoading(false)
    }
  }

const loadTrendingContent = async () => {
    // Mock trending content - in real implementation, this would be based on engagement metrics
    const mockTrending: ContentItem[] = [
      {
        id: "trending-1",
        title: "AI Revolution in Financial Markets",
        description: "How artificial intelligence is transforming trading and investment strategies",
        type: "article",
        stage: "published",
        priority: "high",
        author: "AI Research Team",
        tags: ["AI", "Trading", "Technology"],
        created_at: "2024-01-15T10:00:00Z",
        updated_at: "2024-01-15T10:00:00Z",
      },
      {
        id: "trending-2",
        title: "Cryptocurrency Market Analysis Q1 2024",
        description: "Comprehensive analysis of crypto market trends and predictions",
        type: "report",
        stage: "published",
        priority: "high",
        author: "Crypto Team",
        tags: ["Cryptocurrency", "Market Analysis", "Q1 2024"],
        created_at: "2024-01-10T14:30:00Z",
        updated_at: "2024-01-10T14:30:00Z",
      },
    ]
    setTrendingContent(mockTrending)
  }

const loadRecentContent = async () => {
    // Mock recent content - in real implementation, this would fetch from Supabase
    const mockRecent: ContentItem[] = [
      {
        id: "recent-1",
        title: "Weekly Market Roundup",
        description: "Summary of this week's major market movements and news",
        type: "newsletter",
        stage: "draft",
        priority: "medium",
        author: "Market Team",
        tags: ["Weekly", "Market Summary"],
        created_at: "2024-01-20T09:00:00Z",
        updated_at: "2024-01-20T09:00:00Z",
      },
    ]
    setRecentContent(mockRecent)
  }

useEffect(() => {
    loadTrendingContent()
    loadRecentContent()
  }, [])

const ContentCard = ({ item, showSimilarity = false }: { item: any; showSimilarity?: boolean }) => (
    <Card className="cursor-pointer hover:shadow-md transition-shadow" onClick={() => onContentSelect(item.id)}>
      <CardContent className="p-4">
        <div className="flex justify-between items-start mb-2">
          <h4 className="font-medium text-sm line-clamp-2">{item.title}</h4>
          {showSimilarity && item.similarity && (
            <Badge variant="secondary" className="text-xs">
              {Math.round(item.similarity * 100)}% match
            </Badge>
          )}
        </div>
        <p className="text-xs text-gray-600 dark:text-gray-400 mb-2 line-clamp-2">{item.description}</p>
        <div className="flex justify-between items-center">
          <Badge variant="outline" className="text-xs">
            {item.type}
          </Badge>
          <span className="text-xs text-gray-500">{new Date(item.updated_at).toLocaleDateString()}</span>
        </div>
      </CardContent>
    </Card>
  )

return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <Star className="h-5 w-5" />
          Smart Content Repository
        </CardTitle>
      </CardHeader>
      <CardContent>
        <Tabs defaultValue="search" className="w-full">
          <TabsList className="grid w-full grid-cols-3">
            <TabsTrigger value="search">Smart Search</TabsTrigger>
            <TabsTrigger value="trending">Trending</TabsTrigger>
            <TabsTrigger value="recent">Recent</TabsTrigger>
          </TabsList>

<TabsContent value="search" className="space-y-4">
            <div className="flex gap-2">
              <Input
                placeholder="Describe what you're looking for..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                onKeyPress={(e) => e.key === "Enter" && handleSmartSearch()}
              />
              <Button onClick={handleSmartSearch} disabled={isLoading || !searchQuery.trim()}>
                {isLoading ? <RefreshCw className="h-4 w-4 animate-spin" /> : <Search className="h-4 w-4" />}
              </Button>
            </div>

{recommendations.length > 0 && (
              <div className="space-y-3">
                <h4 className="font-medium">AI-Powered Recommendations</h4>
                <div className="grid gap-3">
                  {recommendations.map((item) => (
                    <ContentCard key={item.id} item={item} showSimilarity />
                  ))}
                </div>
              </div>
            )}

{recommendations.length === 0 && searchQuery && !isLoading && (
              <div className="text-center py-8 text-gray-500">
                <Search className="h-12 w-12 mx-auto mb-2 opacity-50" />
                <p>No similar content found. Try different keywords.</p>
              </div>
            )}
          </TabsContent>

<TabsContent value="trending" className="space-y-4">
            <div className="flex items-center gap-2 mb-4">
              <TrendingUp className="h-5 w-5" />
              <h4 className="font-medium">Trending Content</h4>
            </div>

<div className="grid gap-3">
              {trendingContent.map((item) => (
                <ContentCard key={item.id} item={item} />
              ))}
            </div>

{trendingContent.length === 0 && (
              <div className="text-center py-8 text-gray-500">
                <TrendingUp className="h-12 w-12 mx-auto mb-2 opacity-50" />
                <p>No trending content available</p>
              </div>
            )}
          </TabsContent>

<TabsContent value="recent" className="space-y-4">
            <div className="flex items-center gap-2 mb-4">
              <Clock className="h-5 w-5" />
              <h4 className="font-medium">Recently Updated</h4>
            </div>

<div className="grid gap-3">
              {recentContent.map((item) => (
                <ContentCard key={item.id} item={item} />
              ))}
            </div>

{recentContent.length === 0 && (
              <div className="text-center py-8 text-gray-500">
                <Clock className="h-12 w-12 mx-auto mb-2 opacity-50" />
                <p>No recent content available</p>
              </div>
            )}
          </TabsContent>
        </Tabs>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/content-pipeline-manager.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { ContentLibraryTab } from "@/components/content-library-tab"
import { InvestmentIdeasTab } from "@/components/investment-ideas-tab"
import { NewsletterGenerator } from "@/components/newsletter/newsletter-generator"

export function ContentPipelineManager() {
  const [activeTab, setActiveTab] = useState("ideas")

return (
    <div className="container mx-auto py-6">
      <Card className="border-none shadow-none">
        <CardHeader className="px-0">
          <CardTitle className="text-2xl font-bold">Content Pipeline</CardTitle>
        </CardHeader>
        <CardContent className="px-0">
          <Tabs defaultValue={activeTab} onValueChange={setActiveTab} className="w-full">
            <TabsList className="grid w-full grid-cols-3">
              <TabsTrigger value="ideas">Investment Ideas</TabsTrigger>
              <TabsTrigger value="library">Content Library</TabsTrigger>
              <TabsTrigger value="newsletter">Newsletter Generator</TabsTrigger>
            </TabsList>
            <TabsContent value="ideas" className="mt-6">
              <InvestmentIdeasTab />
            </TabsContent>
            <TabsContent value="library" className="mt-6">
              <ContentLibraryTab />
            </TabsContent>
            <TabsContent value="newsletter" className="mt-6">
              <NewsletterGenerator />
            </TabsContent>
          </Tabs>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/database-manager/bulk-content-uploader.tsx" isMerged="true"
"use client"

import { useState, useCallback } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Textarea } from "@/components/ui/textarea"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Badge } from "@/components/ui/badge"
import { Progress } from "@/components/ui/progress"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { Upload, FileText, CheckCircle, AlertCircle, X } from "lucide-react"
import { insertTableRecords } from "@/services/database-schema-service"
import { toast } from "@/hooks/use-toast"
import { useDropzone } from "react-dropzone"

interface ContentItem {
  title: string
  description: string
  content: string
  type: string
  stage: string
  author: string
  tags: string[]
}

interface BulkContentUploaderProps {
  onUploadComplete?: (count: number) => void
}

export function BulkContentUploader({ onUploadComplete }: BulkContentUploaderProps) {
  const [uploadMode, setUploadMode] = useState<"manual" | "file" | "json">("manual")
  const [contentItems, setContentItems] = useState<ContentItem[]>([])
  const [uploading, setUploading] = useState(false)
  const [uploadProgress, setUploadProgress] = useState(0)
  const [uploadResults, setUploadResults] = useState<{ success: number; errors: string[] } | null>(null)

// Manual entry state
  const [manualContent, setManualContent] = useState({
    title: "",
    description: "",
    content: "",
    type: "article",
    stage: "draft",
    author: "User",
    tags: "",
  })

const onDrop = useCallback((acceptedFiles: File[]) => {
    acceptedFiles.forEach((file) => {
      const reader = new FileReader()

reader.onload = () => {
        try {
          const content = reader.result as string

if (file.type === "application/json") {
            // Parse JSON file
            const jsonData = JSON.parse(content)
            if (Array.isArray(jsonData)) {
              const items = jsonData.map((item) => ({
                title: item.title || "Untitled",
                description: item.description || "",
                content: item.content || "",
                type: item.type || "article",
                stage: item.stage || "draft",
                author: item.author || "User",
                tags: Array.isArray(item.tags) ? item.tags : [],
              }))
              setContentItems((prev) => [...prev, ...items])
            }
          } else {
            // Text file - create single content item
            const item: ContentItem = {
              title: file.name.replace(/\.[^/.]+$/, ""), // Remove extension
              description: `Uploaded from ${file.name}`,
              content: content,
              type: "article",
              stage: "draft",
              author: "User",
              tags: ["uploaded"],
            }
            setContentItems((prev) => [...prev, item])
          }
        } catch (error) {
          console.error("Error parsing file:", error)
          toast({
            title: "Error",
            description: `Failed to parse ${file.name}`,
            variant: "destructive",
          })
        }
      }

reader.readAsText(file)
    })
  }, [])

const { getRootProps, getInputProps, isDragActive } = useDropzone({
    onDrop,
    accept: {
      "text/plain": [".txt"],
      "text/markdown": [".md"],
      "application/json": [".json"],
      "text/csv": [".csv"],
    },
  })

const addManualContent = () => {
    if (!manualContent.title.trim()) {
      toast({
        title: "Error",
        description: "Title is required",
        variant: "destructive",
      })
      return
    }

const item: ContentItem = {
      ...manualContent,
      tags: manualContent.tags
        .split(",")
        .map((tag) => tag.trim())
        .filter(Boolean),
    }

setContentItems((prev) => [...prev, item])
    setManualContent({
      title: "",
      description: "",
      content: "",
      type: "article",
      stage: "draft",
      author: "User",
      tags: "",
    })
  }

const removeContentItem = (index: number) => {
    setContentItems((prev) => prev.filter((_, i) => i !== index))
  }

const uploadContent = async () => {
    if (contentItems.length === 0) {
      toast({
        title: "Error",
        description: "No content items to upload",
        variant: "destructive",
      })
      return
    }

try {
      setUploading(true)
      setUploadProgress(0)
      setUploadResults(null)

const batchSize = 10
      const batches = []
      for (let i = 0; i < contentItems.length; i += batchSize) {
        batches.push(contentItems.slice(i, i + batchSize))
      }

let successCount = 0
      const errors: string[] = []

for (let i = 0; i < batches.length; i++) {
        const batch = batches[i]

try {
          const records = batch.map((item) => ({
            ...item,
            id: crypto.randomUUID(),
            created_at: new Date().toISOString(),
            updated_at: new Date().toISOString(),
          }))

await insertTableRecords("content_items", records)
          successCount += batch.length
        } catch (error) {
          console.error(`Error uploading batch ${i + 1}:`, error)
          errors.push(`Batch ${i + 1}: ${error instanceof Error ? error.message : "Unknown error"}`)
        }

setUploadProgress(((i + 1) / batches.length) * 100)
      }

setUploadResults({ success: successCount, errors })

if (successCount > 0) {
        toast({
          title: "Upload Complete",
          description: `Successfully uploaded ${successCount} content items`,
        })
        onUploadComplete?.(successCount)
        setContentItems([])
      }
    } catch (error) {
      console.error("Error during upload:", error)
      toast({
        title: "Upload Failed",
        description: error instanceof Error ? error.message : "Unknown error occurred",
        variant: "destructive",
      })
    } finally {
      setUploading(false)
    }
  }

return (
    <div className="space-y-6">
      <Card>
        <CardHeader>
          <CardTitle>Bulk Content Upload</CardTitle>
          <CardDescription>Upload multiple content items to your database at once</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="flex space-x-2">
            <Button variant={uploadMode === "manual" ? "default" : "outline"} onClick={() => setUploadMode("manual")}>
              Manual Entry
            </Button>
            <Button variant={uploadMode === "file" ? "default" : "outline"} onClick={() => setUploadMode("file")}>
              File Upload
            </Button>
            <Button variant={uploadMode === "json" ? "default" : "outline"} onClick={() => setUploadMode("json")}>
              JSON Import
            </Button>
          </div>

{uploadMode === "manual" && (
            <div className="space-y-4 border rounded-lg p-4">
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <Label htmlFor="title">Title *</Label>
                  <Input
                    id="title"
                    value={manualContent.title}
                    onChange={(e) => setManualContent((prev) => ({ ...prev, title: e.target.value }))}
                    placeholder="Content title"
                  />
                </div>
                <div>
                  <Label htmlFor="author">Author</Label>
                  <Input
                    id="author"
                    value={manualContent.author}
                    onChange={(e) => setManualContent((prev) => ({ ...prev, author: e.target.value }))}
                    placeholder="Author name"
                  />
                </div>
              </div>

<div>
                <Label htmlFor="description">Description</Label>
                <Input
                  id="description"
                  value={manualContent.description}
                  onChange={(e) => setManualContent((prev) => ({ ...prev, description: e.target.value }))}
                  placeholder="Brief description"
                />
              </div>

<div className="grid grid-cols-3 gap-4">
                <div>
                  <Label htmlFor="type">Type</Label>
                  <Select
                    value={manualContent.type}
                    onValueChange={(value) => setManualContent((prev) => ({ ...prev, type: value }))}
                  >
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="article">Article</SelectItem>
                      <SelectItem value="newsletter">Newsletter</SelectItem>
                      <SelectItem value="report">Report</SelectItem>
                      <SelectItem value="idea">Idea</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div>
                  <Label htmlFor="stage">Stage</Label>
                  <Select
                    value={manualContent.stage}
                    onValueChange={(value) => setManualContent((prev) => ({ ...prev, stage: value }))}
                  >
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="idea">Idea</SelectItem>
                      <SelectItem value="draft">Draft</SelectItem>
                      <SelectItem value="review">Review</SelectItem>
                      <SelectItem value="published">Published</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div>
                  <Label htmlFor="tags">Tags (comma-separated)</Label>
                  <Input
                    id="tags"
                    value={manualContent.tags}
                    onChange={(e) => setManualContent((prev) => ({ ...prev, tags: e.target.value }))}
                    placeholder="tag1, tag2, tag3"
                  />
                </div>
              </div>

<div>
                <Label htmlFor="content">Content</Label>
                <Textarea
                  id="content"
                  value={manualContent.content}
                  onChange={(e) => setManualContent((prev) => ({ ...prev, content: e.target.value }))}
                  placeholder="Enter your content here..."
                  className="min-h-32"
                />
              </div>

<Button onClick={addManualContent}>Add to Queue</Button>
            </div>
          )}

{(uploadMode === "file" || uploadMode === "json") && (
            <div
              {...getRootProps()}
              className={`border-2 border-dashed rounded-lg p-8 text-center cursor-pointer transition-colors ${
                isDragActive ? "border-blue-400 bg-blue-50" : "border-gray-300 hover:border-gray-400"
              }`}
            >
              <input {...getInputProps()} />
              <Upload className="h-12 w-12 mx-auto mb-4 text-gray-400" />
              {isDragActive ? (
                <p>Drop the files here...</p>
              ) : (
                <div>
                  <p className="text-lg font-medium">Drop files here or click to browse</p>
                  <p className="text-sm text-gray-500 mt-2">Supports: .txt, .md, .json, .csv files</p>
                </div>
              )}
            </div>
          )}
        </CardContent>
      </Card>

{contentItems.length > 0 && (
        <Card>
          <CardHeader>
            <CardTitle>Upload Queue ({contentItems.length} items)</CardTitle>
            <CardDescription>Review and manage items before uploading to database</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="max-h-64 overflow-y-auto space-y-2">
              {contentItems.map((item, index) => (
                <div key={index} className="flex items-center justify-between p-3 border rounded-lg">
                  <div className="flex-1">
                    <div className="flex items-center space-x-2">
                      <FileText className="h-4 w-4 text-blue-500" />
                      <span className="font-medium">{item.title}</span>
                      <Badge variant="outline">{item.type}</Badge>
                      <Badge variant="secondary">{item.stage}</Badge>
                    </div>
                    <p className="text-sm text-gray-500 mt-1">{item.description}</p>
                    {item.tags.length > 0 && (
                      <div className="flex flex-wrap gap-1 mt-2">
                        {item.tags.map((tag, tagIndex) => (
                          <Badge key={tagIndex} variant="outline" className="text-xs">
                            {tag}
                          </Badge>
                        ))}
                      </div>
                    )}
                  </div>
                  <Button variant="ghost" size="sm" onClick={() => removeContentItem(index)}>
                    <X className="h-4 w-4" />
                  </Button>
                </div>
              ))}
            </div>

<div className="flex justify-between items-center">
              <Button variant="outline" onClick={() => setContentItems([])} disabled={uploading}>
                Clear Queue
              </Button>
              <Button onClick={uploadContent} disabled={uploading || contentItems.length === 0}>
                {uploading ? "Uploading..." : `Upload ${contentItems.length} Items`}
              </Button>
            </div>

{uploading && (
              <div className="space-y-2">
                <Progress value={uploadProgress} />
                <p className="text-sm text-gray-500 text-center">Uploading content... {Math.round(uploadProgress)}%</p>
              </div>
            )}

{uploadResults && (
              <Alert className={uploadResults.errors.length > 0 ? "border-yellow-200" : "border-green-200"}>
                <div className="flex items-center">
                  {uploadResults.errors.length > 0 ? (
                    <AlertCircle className="h-4 w-4" />
                  ) : (
                    <CheckCircle className="h-4 w-4" />
                  )}
                  <AlertDescription className="ml-2">
                    <strong>Upload Results:</strong> {uploadResults.success} items uploaded successfully
                    {uploadResults.errors.length > 0 && (
                      <div className="mt-2">
                        <p className="font-medium">Errors:</p>
                        <ul className="list-disc list-inside text-sm">
                          {uploadResults.errors.map((error, index) => (
                            <li key={index}>{error}</li>
                          ))}
                        </ul>
                      </div>
                    )}
                  </AlertDescription>
                </div>
              </Alert>
            )}
          </CardContent>
        </Card>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/database-manager/database-schema-viewer.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Database, TableIcon, BarChart3, Loader2, RefreshCw } from "lucide-react"
import { getDatabaseSchema, getTableData, type DatabaseSchema } from "@/services/database-schema-service"
import { toast } from "@/hooks/use-toast"

interface DatabaseSchemaViewerProps {
  onTableSelect?: (tableName: string) => void
}

export function DatabaseSchemaViewer({ onTableSelect }: DatabaseSchemaViewerProps) {
  const [schema, setSchema] = useState<DatabaseSchema | null>(null)
  const [loading, setLoading] = useState(true)
  const [selectedTable, setSelectedTable] = useState<string | null>(null)
  const [tableData, setTableData] = useState<any[]>([])
  const [loadingData, setLoadingData] = useState(false)

const loadSchema = async () => {
    try {
      setLoading(true)
      const schemaData = await getDatabaseSchema()
      setSchema(schemaData)
    } catch (error) {
      console.error("Error loading schema:", error)
      toast({
        title: "Error",
        description: "Failed to load database schema",
        variant: "destructive",
      })
    } finally {
      setLoading(false)
    }
  }

const loadTableData = async (tableName: string) => {
    try {
      setLoadingData(true)
      const result = await getTableData(tableName, 20)
      setTableData(result.data)
    } catch (error) {
      console.error("Error loading table data:", error)
      toast({
        title: "Error",
        description: `Failed to load data from ${tableName}`,
        variant: "destructive",
      })
    } finally {
      setLoadingData(false)
    }
  }

const handleTableSelect = (tableName: string) => {
    setSelectedTable(tableName)
    loadTableData(tableName)
    onTableSelect?.(tableName)
  }

useEffect(() => {
    loadSchema()
  }, [])

if (loading) {
    return (
      <Card>
        <CardContent className="flex items-center justify-center h-64">
          <Loader2 className="h-8 w-8 animate-spin" />
          <span className="ml-2">Loading database schema...</span>
        </CardContent>
      </Card>
    )
  }

if (!schema) {
    return (
      <Card>
        <CardContent className="flex items-center justify-center h-64">
          <div className="text-center">
            <Database className="h-12 w-12 mx-auto mb-4 text-gray-400" />
            <p className="text-gray-500">Failed to load database schema</p>
            <Button onClick={loadSchema} className="mt-2">
              <RefreshCw className="h-4 w-4 mr-2" />
              Retry
            </Button>
          </div>
        </CardContent>
      </Card>
    )
  }

return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <div>
          <h2 className="text-2xl font-bold">Database Schema</h2>
          <p className="text-gray-500">View and manage your Supabase database structure</p>
        </div>
        <Button onClick={loadSchema} variant="outline">
          <RefreshCw className="h-4 w-4 mr-2" />
          Refresh
        </Button>
      </div>

<Tabs defaultValue="overview" className="w-full">
        <TabsList>
          <TabsTrigger value="overview">Overview</TabsTrigger>
          <TabsTrigger value="tables">Tables</TabsTrigger>
          {selectedTable && <TabsTrigger value="data">Data: {selectedTable}</TabsTrigger>}
        </TabsList>

<TabsContent value="overview" className="space-y-4">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <Card>
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">Total Tables</CardTitle>
                <Database className="h-4 w-4 text-muted-foreground" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">{schema.tables.length}</div>
              </CardContent>
            </Card>

<Card>
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">Total Records</CardTitle>
                <BarChart3 className="h-4 w-4 text-muted-foreground" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">
                  {schema.tables.reduce((sum, table) => sum + table.row_count, 0).toLocaleString()}
                </div>
              </CardContent>
            </Card>

<Card>
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">Largest Table</CardTitle>
                <TableIcon className="h-4 w-4 text-muted-foreground" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">
                  {
                    schema.tables.reduce(
                      (max, table) => (table.row_count > max.row_count ? table : max),
                      schema.tables[0] || { table_name: "N/A", row_count: 0 },
                    ).table_name
                  }
                </div>
              </CardContent>
            </Card>
          </div>

<Card>
            <CardHeader>
              <CardTitle>Table Summary</CardTitle>
              <CardDescription>Overview of all tables in your database</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-2">
                {schema.tables.map((table) => (
                  <div
                    key={table.table_name}
                    className="flex items-center justify-between p-3 border rounded-lg hover:bg-gray-50 cursor-pointer"
                    onClick={() => handleTableSelect(table.table_name)}
                  >
                    <div className="flex items-center space-x-3">
                      <TableIcon className="h-5 w-5 text-blue-500" />
                      <div>
                        <p className="font-medium">{table.table_name}</p>
                        <p className="text-sm text-gray-500">{table.columns.length} columns</p>
                      </div>
                    </div>
                    <Badge variant="secondary">{table.row_count.toLocaleString()} rows</Badge>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="tables" className="space-y-4">
          <div className="grid gap-4">
            {schema.tables.map((table) => (
              <Card key={table.table_name}>
                <CardHeader>
                  <div className="flex justify-between items-center">
                    <div>
                      <CardTitle className="flex items-center space-x-2">
                        <TableIcon className="h-5 w-5" />
                        <span>{table.table_name}</span>
                      </CardTitle>
                      <CardDescription>
                        {table.columns.length} columns • {table.row_count.toLocaleString()} rows
                      </CardDescription>
                    </div>
                    <Button variant="outline" size="sm" onClick={() => handleTableSelect(table.table_name)}>
                      View Data
                    </Button>
                  </div>
                </CardHeader>
                <CardContent>
                  <ScrollArea className="h-48">
                    <Table>
                      <TableHeader>
                        <TableRow>
                          <TableHead>Column</TableHead>
                          <TableHead>Type</TableHead>
                          <TableHead>Nullable</TableHead>
                          <TableHead>Default</TableHead>
                        </TableRow>
                      </TableHeader>
                      <TableBody>
                        {table.columns.map((column) => (
                          <TableRow key={column.column_name}>
                            <TableCell className="font-medium">{column.column_name}</TableCell>
                            <TableCell>
                              <Badge variant="outline">{column.data_type}</Badge>
                            </TableCell>
                            <TableCell>{column.is_nullable === "YES" ? "✓" : "✗"}</TableCell>
                            <TableCell className="text-sm text-gray-500">{column.column_default || "None"}</TableCell>
                          </TableRow>
                        ))}
                      </TableBody>
                    </Table>
                  </ScrollArea>
                </CardContent>
              </Card>
            ))}
          </div>
        </TabsContent>

{selectedTable && (
          <TabsContent value="data" className="space-y-4">
            <Card>
              <CardHeader>
                <CardTitle>Data: {selectedTable}</CardTitle>
                <CardDescription>Showing recent records from {selectedTable}</CardDescription>
              </CardHeader>
              <CardContent>
                {loadingData ? (
                  <div className="flex items-center justify-center h-32">
                    <Loader2 className="h-6 w-6 animate-spin" />
                    <span className="ml-2">Loading data...</span>
                  </div>
                ) : tableData.length > 0 ? (
                  <ScrollArea className="h-96">
                    <Table>
                      <TableHeader>
                        <TableRow>
                          {Object.keys(tableData[0]).map((key) => (
                            <TableHead key={key}>{key}</TableHead>
                          ))}
                        </TableRow>
                      </TableHeader>
                      <TableBody>
                        {tableData.map((row, index) => (
                          <TableRow key={index}>
                            {Object.entries(row).map(([key, value]) => (
                              <TableCell key={key} className="max-w-xs truncate">
                                {typeof value === "object" && value !== null
                                  ? JSON.stringify(value)
                                  : String(value || "")}
                              </TableCell>
                            ))}
                          </TableRow>
                        ))}
                      </TableBody>
                    </Table>
                  </ScrollArea>
                ) : (
                  <div className="text-center py-8 text-gray-500">No data found in {selectedTable}</div>
                )}
              </CardContent>
            </Card>
          </TabsContent>
        )}
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/dupont-analysis-card.tsx" isMerged="true"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import type { RoeAnalysis } from "@/services/fmp-service"
import { Separator } from "@/components/ui/separator"

interface DupontAnalysisCardProps {
  roeAnalysis: RoeAnalysis
}

export function DupontAnalysisCard({ roeAnalysis }: DupontAnalysisCardProps) {
  const { dupontAnalysis, currentRoe } = roeAnalysis
  const { netProfitMargin, assetTurnover, equityMultiplier } = dupontAnalysis

// Calculate the components' contribution to ROE
  const calculatedRoe = (netProfitMargin * assetTurnover * equityMultiplier * 100).toFixed(2)

return (
    <Card className="bg-slate-900 border-slate-800 text-white">
      <CardHeader className="pb-2">
        <CardTitle className="text-xl">DuPont Analysis</CardTitle>
        <CardDescription className="text-gray-400">Breaking down ROE into its component parts</CardDescription>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="p-3 rounded-md bg-slate-800">
          <p className="text-sm text-gray-300">
            The DuPont analysis breaks down ROE into three components: Net Profit Margin, Asset Turnover, and Equity
            Multiplier. This helps identify which aspects of the business are driving returns.
          </p>
        </div>

<div className="grid grid-cols-3 gap-4">
          <div className="p-3 rounded-md bg-slate-800">
            <div className="text-sm text-gray-400">Net Profit Margin</div>
            <div className="text-xl font-bold">{(netProfitMargin * 100).toFixed(2)}%</div>
            <div className="text-xs text-gray-400 mt-1">Net Income ÷ Revenue</div>
          </div>

<div className="p-3 rounded-md bg-slate-800">
            <div className="text-sm text-gray-400">Asset Turnover</div>
            <div className="text-xl font-bold">{assetTurnover.toFixed(2)}x</div>
            <div className="text-xs text-gray-400 mt-1">Revenue ÷ Total Assets</div>
          </div>

<div className="p-3 rounded-md bg-slate-800">
            <div className="text-sm text-gray-400">Equity Multiplier</div>
            <div className="text-xl font-bold">{equityMultiplier.toFixed(2)}x</div>
            <div className="text-xs text-gray-400 mt-1">Total Assets ÷ Equity</div>
          </div>
        </div>

<div className="flex justify-between items-center">
          <div>
            <div className="text-sm text-gray-400">Calculated ROE</div>
            <div className="text-lg">
              {(netProfitMargin * 100).toFixed(2)}% × {assetTurnover.toFixed(2)}x × {equityMultiplier.toFixed(2)}x ={" "}
              {calculatedRoe}%
            </div>
          </div>
          <div>
            <div className="text-sm text-gray-400">Actual ROE</div>
            <div className="text-lg font-bold">{currentRoe.toFixed(2)}%</div>
          </div>
        </div>

<div className="p-3 rounded-md bg-slate-800">
          <div className="font-medium mb-2">What This Means</div>
          <p className="text-sm text-gray-300">
            {netProfitMargin * 100 > 10
              ? "Strong profit margins indicate efficient cost management and pricing power. "
              : "Lower profit margins suggest potential issues with cost control or pricing power. "}

{assetTurnover > 1
              ? "Good asset turnover shows the company efficiently uses its assets to generate sales. "
              : "Lower asset turnover indicates potential inefficiency in using assets to generate revenue. "}

{equityMultiplier > 2.5
              ? "Higher equity multiplier indicates the company is using more debt to finance assets, which can increase ROE but also financial risk."
              : "Lower equity multiplier suggests a more conservative financial structure with less reliance on debt."}
          </p>
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/error-boundary.tsx" isMerged="true"
"use client"

import type React from "react"

import { useEffect, useState } from "react"
import { Button } from "@/components/ui/button"
import { AlertCircle, RefreshCw } from "lucide-react"

interface ErrorBoundaryProps {
  children: React.ReactNode
  fallback?: React.ReactNode
}

export function ErrorBoundary({ children, fallback }: ErrorBoundaryProps) {
  const [hasError, setHasError] = useState(false)
  const [error, setError] = useState<Error | null>(null)

useEffect(() => {
    const errorHandler = (error: ErrorEvent) => {
      console.error("Error caught by error boundary:", error)
      setError(error.error)
      setHasError(true)
    }

window.addEventListener("error", errorHandler)
    return () => window.removeEventListener("error", errorHandler)
  }, [])

if (hasError) {
    if (fallback) return <>{fallback}</>

return (
      <div className="flex flex-col items-center justify-center p-6 rounded-lg border border-red-200 bg-red-50 dark:bg-red-900/10 dark:border-red-800/30 text-center space-y-4">
        <AlertCircle className="h-10 w-10 text-red-500" />
        <div>
          <h3 className="text-lg font-medium text-red-800 dark:text-red-300">Something went wrong</h3>
          <p className="text-sm text-red-600 dark:text-red-400 mt-1">
            {error?.message || "An unexpected error occurred"}
          </p>
        </div>
        <Button
          variant="outline"
          className="border-red-300 dark:border-red-700 text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20"
          onClick={() => window.location.reload()}
        >
          <RefreshCw className="mr-2 h-4 w-4" />
          Reload page
        </Button>
      </div>
    )
  }

return <>{children}</>
}
[V0_FILE]typescriptreact:file="components/google-analytics.tsx" isMerged="true"
"use client"

import { useEffect } from "react"
import { usePathname, useSearchParams } from "next/navigation"
import { pageview, GA_MEASUREMENT_ID } from "@/lib/google-analytics"

export function GoogleAnalytics() {
  const pathname = usePathname()
  const searchParams = useSearchParams()

useEffect(() => {
    // Wait for gtag to be available
    const checkGtagAndTrack = () => {
      if (typeof window !== "undefined" && typeof window.gtag === "function" && pathname) {
        const url = pathname + (searchParams?.toString() ? `?${searchParams.toString()}` : "")
        pageview(url)
      } else if (GA_MEASUREMENT_ID) {
        // Retry after a short delay if gtag isn't ready yet
        setTimeout(checkGtagAndTrack, 100)
      }
    }

checkGtagAndTrack()
  }, [pathname, searchParams])

return null
}
[V0_FILE]typescriptreact:file="components/idea-to-content-converter.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { useToast } from "@/components/ui/use-toast"
import { FileText, Loader2 } from "lucide-react"
import type { InvestmentIdea } from "@/types/investment-ideas"
import type { ContentStage, ContentType } from "@/types/content-pipeline"
import { convertIdeaToContentItem } from "@/services/content-pipeline-service"

interface IdeaToContentConverterProps {
  idea: InvestmentIdea
  isOpen: boolean
  onClose: () => void
  onSuccess: () => void
}

export function IdeaToContentConverter({ idea, isOpen, onClose, onSuccess }: IdeaToContentConverterProps) {
  const [contentType, setContentType] = useState<ContentType>("article")
  const [contentStage, setContentStage] = useState<ContentStage>("draft")
  const [title, setTitle] = useState(idea.title)
  const [description, setDescription] = useState(idea.description)
  const [isConverting, setIsConverting] = useState(false)
  const { toast } = useToast()

const handleConvert = async () => {
    setIsConverting(true)
    try {
      // Create a modified version of the idea with updated title/description
      const modifiedIdea: InvestmentIdea = {
        ...idea,
        title,
        description,
      }

// Convert the idea to a content item
      await convertIdeaToContentItem(modifiedIdea, contentStage)

toast({
        title: "Success",
        description: `Investment idea converted to ${contentType} in ${contentStage} stage`,
      })
      onSuccess()
      onClose()
    } catch (error) {
      console.error("Error converting idea to content:", error)
      toast({
        title: "Error",
        description: "Failed to convert investment idea to content",
        variant: "destructive",
      })
    } finally {
      setIsConverting(false)
    }
  }

return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="sm:max-w-[500px] bg-slate-900 border-slate-800 text-white">
        <DialogHeader>
          <DialogTitle>Convert Investment Idea to Content</DialogTitle>
          <DialogDescription className="text-gray-400">
            Create a new content item based on this investment idea.
          </DialogDescription>
        </DialogHeader>

<div className="space-y-4 py-4">
          <div className="space-y-2">
            <Label htmlFor="content-type">Content Type</Label>
            <Select value={contentType} onValueChange={(value) => setContentType(value as ContentType)}>
              <SelectTrigger id="content-type" className="bg-slate-800 border-slate-700 text-white">
                <SelectValue placeholder="Select content type" />
              </SelectTrigger>
              <SelectContent className="bg-slate-800 border-slate-700 text-white">
                <SelectItem value="article">Article</SelectItem>
                <SelectItem value="newsletter">Newsletter</SelectItem>
                <SelectItem value="report">Report</SelectItem>
                <SelectItem value="idea">Idea</SelectItem>
              </SelectContent>
            </Select>
          </div>

<div className="space-y-2">
            <Label htmlFor="content-stage">Initial Stage</Label>
            <Select value={contentStage} onValueChange={(value) => setContentStage(value as ContentStage)}>
              <SelectTrigger id="content-stage" className="bg-slate-800 border-slate-700 text-white">
                <SelectValue placeholder="Select initial stage" />
              </SelectTrigger>
              <SelectContent className="bg-slate-800 border-slate-700 text-white">
                <SelectItem value="idea">Idea</SelectItem>
                <SelectItem value="draft">Draft</SelectItem>
                <SelectItem value="review">Review</SelectItem>
              </SelectContent>
            </Select>
          </div>

<div className="space-y-2">
            <Label htmlFor="title">Title</Label>
            <Input
              id="title"
              value={title}
              onChange={(e) => setTitle(e.target.value)}
              className="bg-slate-800 border-slate-700 text-white"
            />
          </div>

<div className="space-y-2">
            <Label htmlFor="description">Description</Label>
            <Textarea
              id="description"
              value={description}
              onChange={(e) => setDescription(e.target.value)}
              rows={4}
              className="bg-slate-800 border-slate-700 text-white"
            />
          </div>
        </div>

<DialogFooter>
          <Button variant="outline" onClick={onClose} className="bg-slate-800 border-slate-700 text-white">
            Cancel
          </Button>
          <Button onClick={handleConvert} disabled={isConverting} className="bg-blue-600 hover:bg-blue-700">
            {isConverting ? (
              <>
                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                Converting...
              </>
            ) : (
              <>
                <FileText className="mr-2 h-4 w-4" />
                Create Content
              </>
            )}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescriptreact:file="components/investment-idea-card.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import type { InvestmentIdea } from "@/types/investment-ideas"
import { Badge } from "@/components/ui/badge"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Sparkles, MoreHorizontal, FileText, BookOpen, Send } from "lucide-react"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { IdeaToContentConverter } from "./idea-to-content-converter"

interface InvestmentIdeaCardProps {
  idea: InvestmentIdea
  onSelect: (idea: InvestmentIdea) => void
  onEnhance: (id: string) => Promise<void>
}

export function InvestmentIdeaCard({ idea, onSelect, onEnhance }: InvestmentIdeaCardProps) {
  const [isEnhancing, setIsEnhancing] = useState(false)
  const [isConvertDialogOpen, setIsConvertDialogOpen] = useState(false)

const handleEnhance = async (e: React.MouseEvent) => {
    e.stopPropagation()
    setIsEnhancing(true)
    try {
      await onEnhance(idea.id)
    } finally {
      setIsEnhancing(false)
    }
  }

const handleCardClick = () => {
    onSelect(idea)
  }

const handleActionClick = (e: React.MouseEvent) => {
    e.stopPropagation() // Prevent card click when clicking on the action button
  }

return (
    <>
      <Card
        className="cursor-pointer hover:shadow-md transition-shadow bg-slate-900 text-white border-slate-700"
        onClick={handleCardClick}
      >
        <CardHeader className="pb-2 flex flex-col sm:flex-row justify-between items-start">
          <div>
            <CardTitle className="text-base md:text-lg font-semibold line-clamp-2">{idea.title}</CardTitle>
          </div>
          <div className="flex flex-row items-center mt-2 sm:mt-0 sm:flex-col sm:items-end">
            {idea.isEnhanced && (
              <div className="bg-purple-900 text-purple-100 text-xs px-2 py-1 rounded-full flex items-center mr-2 sm:mr-0 sm:mb-1">
                <Sparkles className="h-3 w-3 mr-1" />
                AI Enhanced
              </div>
            )}
            <div className="bg-blue-900 text-blue-100 text-xs px-2 py-1 rounded-full">Score: {idea.score}</div>
          </div>
        </CardHeader>
        <CardContent>
          <p className="text-sm text-slate-300 mb-3 line-clamp-3">{idea.description}</p>

<div className="flex flex-wrap gap-1 mb-3">
            {idea.tickers.map((ticker) => (
              <Badge key={ticker} variant="outline" className="bg-slate-800 text-white border-slate-600">
                {ticker}
              </Badge>
            ))}
          </div>

<div className="flex flex-wrap gap-1 mb-3">
            {idea.categories.map((category) => (
              <span key={category.name} className={`text-xs px-2 py-1 rounded-full ${category.color}`}>
                {category.name}
              </span>
            ))}
          </div>

<div className="flex justify-between items-center">
            {!idea.isEnhanced && (
              <Button
                size="sm"
                variant="outline"
                className="bg-purple-900 hover:bg-purple-800 text-white border-purple-700"
                onClick={handleEnhance}
                disabled={isEnhancing}
              >
                {isEnhancing ? "Enhancing..." : "Enhance with Gemini AI"}
              </Button>
            )}
            {idea.isEnhanced && (
              <DropdownMenu>
                <DropdownMenuTrigger asChild onClick={handleActionClick}>
                  <Button
                    size="sm"
                    variant="outline"
                    className="ml-auto bg-slate-800 border-slate-700 text-white hover:bg-slate-700"
                  >
                    <MoreHorizontal className="h-4 w-4 mr-1" />
                    Actions
                  </Button>
                </DropdownMenuTrigger>
                <DropdownMenuContent className="bg-slate-800 border-slate-700 text-white">
                  <DropdownMenuItem
                    className="cursor-pointer hover:bg-slate-700"
                    onClick={(e) => {
                      e.stopPropagation()
                      setIsConvertDialogOpen(true)
                    }}
                  >
                    <FileText className="h-4 w-4 mr-2" />
                    Convert to Content
                  </DropdownMenuItem>
                  <DropdownMenuItem className="cursor-pointer hover:bg-slate-700">
                    <BookOpen className="h-4 w-4 mr-2" />
                    Add to Newsletter
                  </DropdownMenuItem>
                  <DropdownMenuItem className="cursor-pointer hover:bg-slate-700">
                    <Send className="h-4 w-4 mr-2" />
                    Share Idea
                  </DropdownMenuItem>
                </DropdownMenuContent>
              </DropdownMenu>
            )}
          </div>
        </CardContent>
      </Card>

<IdeaToContentConverter
        idea={idea}
        isOpen={isConvertDialogOpen}
        onClose={() => setIsConvertDialogOpen(false)}
        onSuccess={() => {}}
      />
    </>
  )
}
[V0_FILE]typescriptreact:file="components/investment-idea-detail-dialog.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Dialog, DialogContent } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import {
  Sparkles,
  X,
  FileText,
  BookOpen,
  TrendingUp,
  AlertTriangle,
  Calendar,
  DollarSign,
  Target,
  Clock,
  ChevronUp,
  ChevronDown,
  BarChart2,
  Activity,
  Briefcase,
  Award,
} from "lucide-react"

interface InvestmentIdeaDetailDialogProps {
  idea: any
  isOpen: boolean
  onClose: () => void
}

export function InvestmentIdeaDetailDialog({ idea, isOpen, onClose }: InvestmentIdeaDetailDialogProps) {
  const [activeTab, setActiveTab] = useState("overview")
  const [isSaving, setIsSaving] = useState(false)
  const [isConverting, setIsConverting] = useState(false)

if (!idea) return null

const handleSaveToNewsletter = async () => {
    setIsSaving(true)
    // Simulate API call
    await new Promise((resolve) => setTimeout(resolve, 1500))
    setIsSaving(false)
    // In a real app, you would save to the newsletter here
    onClose()
  }

const handleConvertToContent = async () => {
    setIsConverting(true)
    // Simulate API call
    await new Promise((resolve) => setTimeout(resolve, 1500))
    setIsConverting(false)
    // In a real app, you would convert to content here
    onClose()
  }

// Generate mock detailed data based on the idea if not already present
  const detailedIdea = {
    ...idea,
    overview:
      idea.overview ||
      `This investment opportunity focuses on ${idea.categories.join(", ")} with a particular emphasis on ${idea.tickers.join(", ")}. The accelerating adoption across industries is creating substantial growth potential for companies well-positioned in this space.`,
    strategy: idea.strategy || "Growth-oriented investment with a focus on market leaders and innovators",
    timeHorizon: idea.timeHorizon || "Long-term (3-5 years)",
    riskLevel: idea.riskLevel || "Moderate to High",
    potentialCatalysts: idea.potentialCatalysts || [
      `Increased enterprise adoption of ${idea.categories[0]} solutions`,
      "Favorable regulatory environment",
      "Technological advancements creating new market opportunities",
      "Strategic partnerships and acquisitions",
    ],
    analysis:
      idea.analysis ||
      `The ${idea.categories.join(" and ")} sectors are experiencing rapid growth, driven by digital transformation initiatives across industries. ${idea.tickers.join(", ")} are well-positioned to capitalize on this trend due to their strong market positions, innovative product offerings, and robust financial profiles.`,
    financialAnalysis:
      idea.financialAnalysis ||
      `${idea.tickers.join(", ")} demonstrate strong financial fundamentals with healthy balance sheets and growth trajectories. Revenue growth is expected to continue at 15-20% annually for the next 3-5 years, with expanding profit margins as these companies benefit from economies of scale.`,
    risks:
      idea.risks ||
      `Key risks include intensifying competition, potential regulatory challenges, and technological disruption. ${idea.tickers.join(", ")} may face margin pressure as new entrants attempt to gain market share. Additionally, rapid technological change could require significant ongoing R&D investment.`,
    trends:
      idea.trends ||
      `The ${idea.categories.join(" and ")} markets are expected to grow at a CAGR of 18-22% over the next five years. Key trends include consolidation among major players, increasing focus on security and compliance, and the integration of advanced AI capabilities into existing solutions.`,
    valuation: idea.valuation || {
      currentMultiples: "Forward P/E: 28-35x, EV/EBITDA: 18-22x",
      peerComparison: "Trading at a 15-20% premium to broader market, in line with sector peers",
      targetPrice: "12-month upside potential of 15-25% based on DCF analysis",
    },
    competitiveLandscape: idea.competitiveLandscape || [
      { name: "Market Leaders", companies: idea.tickers.slice(0, 2) },
      { name: "Strong Challengers", companies: ["TEAM", "CRM", "NOW"] },
      { name: "Emerging Players", companies: ["NET", "DDOG", "ZS"] },
    ],
    createdAt: idea.createdAt || new Date().toISOString(),
    updatedAt: idea.updatedAt || new Date().toISOString(),
  }

return (
    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
      <DialogContent className="max-w-4xl p-0 bg-transparent border-none">
        <Card className="bg-gray-900 text-white border-gray-800">
          <CardHeader className="flex flex-row items-start justify-between space-y-0 border-b border-gray-800 pb-4">
            <div className="space-y-2">
              <CardTitle className="text-xl font-bold">{detailedIdea.title}</CardTitle>
              <div className="flex flex-wrap gap-2">
                {detailedIdea.tickers.map((ticker) => (
                  <Badge key={ticker} variant="outline" className="border-gray-700 text-gray-300">
                    {ticker}
                  </Badge>
                ))}
              </div>
              <div className="flex flex-wrap gap-2">
                {detailedIdea.categories.map((category) => {
                  let bgColor = "bg-blue-900 text-blue-200"
                  if (category === "AI & Machine Learning") bgColor = "bg-purple-900 text-purple-200"
                  if (category === "Cybersecurity") bgColor = "bg-red-900 text-red-200"
                  if (category === "Software") bgColor = "bg-green-900 text-green-200"
                  if (category === "Hardware") bgColor = "bg-blue-900 text-blue-200"
                  if (category === "Semiconductors") bgColor = "bg-yellow-900 text-yellow-200"

return (
                    <Badge key={category} className={bgColor}>
                      {category}
                    </Badge>
                  )
                })}
              </div>
              <div className="flex items-center space-x-2 mt-2">
                {detailedIdea.enhanced && (
                  <Badge className="bg-purple-900 text-purple-200">
                    <Sparkles className="h-3 w-3 mr-1" />
                    AI Enhanced
                  </Badge>
                )}
                <Badge className="bg-green-900 text-green-200">Score: {detailedIdea.score}</Badge>
              </div>
            </div>
            <Button variant="ghost" size="icon" onClick={onClose} className="text-gray-400 hover:text-white">
              <X className="h-4 w-4" />
            </Button>
          </CardHeader>

{/* Stock Price and Key Metrics */}
          {detailedIdea.financialMetrics && (
            <div className="px-6 py-4 border-b border-gray-800">
              <div className="flex flex-col md:flex-row md:justify-between md:items-center gap-4">
                <div className="flex items-center">
                  <div className="mr-4">
                    <div className="text-sm text-gray-400">Current Price</div>
                    <div className="text-2xl font-bold">${detailedIdea.financialMetrics.price}</div>
                  </div>
                  {typeof detailedIdea.financialMetrics.changePercent === "number" && (
                    <div
                      className={`flex items-center ${
                        detailedIdea.financialMetrics.changePercent >= 0 ? "text-green-400" : "text-red-400"
                      }`}
                    >
                      {detailedIdea.financialMetrics.changePercent >= 0 ? (
                        <ChevronUp className="h-5 w-5 mr-1" />
                      ) : (
                        <ChevronDown className="h-5 w-5 mr-1" />
                      )}
                      <span className="text-lg font-semibold">
                        {detailedIdea.financialMetrics.changePercent >= 0 ? "+" : ""}
                        {detailedIdea.financialMetrics.changePercent.toFixed(2)}%
                      </span>
                    </div>
                  )}
                </div>

<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                  <div>
                    <div className="text-xs text-gray-400">Market Cap</div>
                    <div className="text-sm font-semibold">{detailedIdea.financialMetrics.marketCap}</div>
                  </div>
                  <div>
                    <div className="text-xs text-gray-400">P/E Ratio</div>
                    <div className="text-sm font-semibold">{detailedIdea.financialMetrics.peRatio}</div>
                  </div>
                  <div>
                    <div className="text-xs text-gray-400">EPS</div>
                    <div className="text-sm font-semibold">{detailedIdea.financialMetrics.eps}</div>
                  </div>
                  <div>
                    <div className="text-xs text-gray-400">Beta</div>
                    <div className="text-sm font-semibold">{detailedIdea.financialMetrics.beta}</div>
                  </div>
                </div>
              </div>
            </div>
          )}

<CardContent className="pt-6">
            <Tabs defaultValue="overview" value={activeTab} onValueChange={setActiveTab} className="w-full">
              <TabsList className="bg-gray-800 border-gray-700 mb-6">
                <TabsTrigger
                  value="overview"
                  className="data-[state=active]:bg-gray-700 data-[state=active]:text-white"
                >
                  Overview
                </TabsTrigger>
                <TabsTrigger
                  value="financials"
                  className="data-[state=active]:bg-gray-700 data-[state=active]:text-white"
                >
                  Financials
                </TabsTrigger>
                <TabsTrigger
                  value="analysis"
                  className="data-[state=active]:bg-gray-700 data-[state=active]:text-white"
                >
                  Analysis
                </TabsTrigger>
                <TabsTrigger value="risks" className="data-[state=active]:bg-gray-700 data-[state=active]:text-white">
                  Risks & Trends
                </TabsTrigger>
              </TabsList>

<TabsContent value="overview" className="space-y-6">
                <div>
                  <h3 className="text-lg font-semibold mb-2">Description</h3>
                  <p className="text-gray-300">{detailedIdea.description}</p>
                </div>

<div>
                  <h3 className="text-lg font-semibold mb-2">Overview</h3>
                  <p className="text-gray-300">{detailedIdea.overview}</p>
                </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                  <div className="bg-gray-800 p-4 rounded-lg">
                    <div className="flex items-center mb-2">
                      <Target className="h-4 w-4 mr-2 text-blue-400" />
                      <h3 className="text-md font-semibold">Strategy</h3>
                    </div>
                    <p className="text-gray-300">{detailedIdea.strategy}</p>
                  </div>
                  <div className="bg-gray-800 p-4 rounded-lg">
                    <div className="flex items-center mb-2">
                      <Clock className="h-4 w-4 mr-2 text-green-400" />
                      <h3 className="text-md font-semibold">Time Horizon</h3>
                    </div>
                    <p className="text-gray-300">{detailedIdea.timeHorizon}</p>
                  </div>
                  <div className="bg-gray-800 p-4 rounded-lg">
                    <div className="flex items-center mb-2">
                      <AlertTriangle className="h-4 w-4 mr-2 text-yellow-400" />
                      <h3 className="text-md font-semibold">Risk Level</h3>
                    </div>
                    <p className="text-gray-300">{detailedIdea.riskLevel}</p>
                  </div>
                </div>

<div>
                  <h3 className="text-lg font-semibold mb-2">Potential Catalysts</h3>
                  <ul className="list-disc pl-5 space-y-1 text-gray-300">
                    {detailedIdea.potentialCatalysts.map((catalyst, index) => (
                      <li key={index}>{catalyst}</li>
                    ))}
                  </ul>
                </div>
              </TabsContent>

<TabsContent value="financials" className="space-y-6">
                {detailedIdea.financialMetrics ? (
                  <>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                      <div className="bg-gray-800 rounded-lg p-4">
                        <h3 className="text-lg font-semibold mb-4 flex items-center">
                          <DollarSign className="h-5 w-5 mr-2 text-green-400" />
                          Valuation Metrics
                        </h3>
                        <div className="space-y-3">
                          <div className="flex justify-between items-center">
                            <span className="text-gray-400">Market Cap</span>
                            <span className="font-semibold">{detailedIdea.financialMetrics.marketCap}</span>
                          </div>
                          <div className="flex justify-between items-center">
                            <span className="text-gray-400">P/E Ratio</span>
                            <span className="font-semibold">{detailedIdea.financialMetrics.peRatio}</span>
                          </div>
                          <div className="flex justify-between items-center">
                            <span className="text-gray-400">Price to Book</span>
                            <span className="font-semibold">{detailedIdea.financialMetrics.priceToBook}</span>
                          </div>
                          <div className="flex justify-between items-center">
                            <span className="text-gray-400">Price to Sales</span>
                            <span className="font-semibold">{detailedIdea.financialMetrics.priceToSales}</span>
                          </div>
                          <div className="flex justify-between items-center">
                            <span className="text-gray-400">EPS</span>
                            <span className="font-semibold">{detailedIdea.financialMetrics.eps}</span>
                          </div>
                          <div className="flex justify-between items-center">
                            <span className="text-gray-400">Dividend Yield</span>
                            <span className="font-semibold">{detailedIdea.financialMetrics.dividendYield}</span>
                          </div>
                        </div>
                      </div>

<div className="bg-gray-800 rounded-lg p-4">
                        <h3 className="text-lg font-semibold mb-4 flex items-center">
                          <BarChart2 className="h-5 w-5 mr-2 text-blue-400" />
                          Performance Metrics
                        </h3>
                        <div className="space-y-3">
                          <div className="flex justify-between items-center">
                            <span className="text-gray-400">Return on Equity</span>
                            <span className="font-semibold">{detailedIdea.financialMetrics.returnOnEquity}</span>
                          </div>
                          <div className="flex justify-between items-center">
                            <span className="text-gray-400">Return on Assets</span>
                            <span className="font-semibold">{detailedIdea.financialMetrics.returnOnAssets}</span>
                          </div>
                          <div className="flex justify-between items-center">
                            <span className="text-gray-400">Profit Margin</span>
                            <span className="font-semibold">{detailedIdea.financialMetrics.profitMargin}</span>
                          </div>
                          <div className="flex justify-between items-center">
                            <span className="text-gray-400">Debt to Equity</span>
                            <span className="font-semibold">{detailedIdea.financialMetrics.debtToEquity}</span>
                          </div>
                          <div className="flex justify-between items-center">
                            <span className="text-gray-400">Revenue Growth</span>
                            <span className="font-semibold">{detailedIdea.financialMetrics.revenueGrowth}</span>
                          </div>
                          <div className="flex justify-between items-center">
                            <span className="text-gray-400">EPS Growth</span>
                            <span className="font-semibold">{detailedIdea.financialMetrics.epsGrowth}</span>
                          </div>
                        </div>
                      </div>
                    </div>

<div className="bg-gray-800 rounded-lg p-4">
                      <h3 className="text-lg font-semibold mb-4 flex items-center">
                        <Activity className="h-5 w-5 mr-2 text-purple-400" />
                        Trading Information
                      </h3>
                      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                        <div>
                          <div className="text-gray-400 text-sm">Current Price</div>
                          <div className="font-semibold">${detailedIdea.financialMetrics.price}</div>
                        </div>
                        <div>
                          <div className="text-gray-400 text-sm">Change</div>
                          <div
                            className={`font-semibold ${
                              detailedIdea.financialMetrics.changePercent >= 0 ? "text-green-400" : "text-red-400"
                            }`}
                          >
                            {detailedIdea.financialMetrics.changePercent >= 0 ? "+" : ""}
                            {typeof detailedIdea.financialMetrics.changePercent === "number"
                              ? detailedIdea.financialMetrics.changePercent.toFixed(2)
                              : detailedIdea.financialMetrics.changePercent}
                            %
                          </div>
                        </div>
                        <div>
                          <div className="text-gray-400 text-sm">Volume</div>
                          <div className="font-semibold">{detailedIdea.financialMetrics.volume}</div>
                        </div>
                        <div>
                          <div className="text-gray-400 text-sm">Avg Volume</div>
                          <div className="font-semibold">{detailedIdea.financialMetrics.avgVolume}</div>
                        </div>
                        <div>
                          <div className="text-gray-400 text-sm">52-Week High</div>
                          <div className="font-semibold">${detailedIdea.financialMetrics.yearHigh}</div>
                        </div>
                        <div>
                          <div className="text-gray-400 text-sm">52-Week Low</div>
                          <div className="font-semibold">${detailedIdea.financialMetrics.yearLow}</div>
                        </div>
                        <div>
                          <div className="text-gray-400 text-sm">Beta</div>
                          <div className="font-semibold">{detailedIdea.financialMetrics.beta}</div>
                        </div>
                      </div>
                    </div>
                  </>
                ) : (
                  <div className="text-center py-8 text-gray-400">
                    No detailed financial metrics available for this investment idea.
                  </div>
                )}
              </TabsContent>

<TabsContent value="analysis" className="space-y-6">
                <div>
                  <h3 className="text-lg font-semibold mb-2">Investment Analysis</h3>
                  <p className="text-gray-300">{detailedIdea.analysis}</p>
                </div>

<div>
                  <h3 className="text-lg font-semibold mb-2">Financial Analysis</h3>
                  <p className="text-gray-300">{detailedIdea.financialAnalysis}</p>
                </div>

<div>
                  <h3 className="text-lg font-semibold mb-2">Competitive Landscape</h3>
                  <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                    {detailedIdea.competitiveLandscape.map((group, index) => (
                      <div key={index} className="bg-gray-800 p-4 rounded-lg">
                        <h4 className="font-semibold mb-2">{group.name}</h4>
                        <div className="flex flex-wrap gap-2">
                          {group.companies.map((company) => (
                            <Badge key={company} variant="outline" className="border-gray-700 text-gray-300">
                              {company}
                            </Badge>
                          ))}
                        </div>
                      </div>
                    ))}
                  </div>
                </div>

<div className="bg-gray-800 p-4 rounded-lg">
                  <h3 className="text-lg font-semibold mb-2 flex items-center">
                    <Briefcase className="h-5 w-5 mr-2 text-blue-400" />
                    Valuation Assessment
                  </h3>
                  <div className="space-y-4">
                    <div>
                      <h4 className="text-sm font-medium text-gray-400">Current Multiples</h4>
                      <p className="text-gray-300">{detailedIdea.valuation.currentMultiples}</p>
                    </div>
                    <div>
                      <h4 className="text-sm font-medium text-gray-400">Peer Comparison</h4>
                      <p className="text-gray-300">{detailedIdea.valuation.peerComparison}</p>
                    </div>
                    <div>
                      <h4 className="text-sm font-medium text-gray-400">Target Price</h4>
                      <p className="text-gray-300">{detailedIdea.valuation.targetPrice}</p>
                    </div>
                  </div>
                </div>
              </TabsContent>

<TabsContent value="risks" className="space-y-6">
                <div>
                  <div className="flex items-center mb-2">
                    <AlertTriangle className="h-5 w-5 mr-2 text-yellow-400" />
                    <h3 className="text-lg font-semibold">Risks</h3>
                  </div>
                  <p className="text-gray-300">{detailedIdea.risks}</p>
                </div>

<div>
                  <div className="flex items-center mb-2">
                    <TrendingUp className="h-5 w-5 mr-2 text-blue-400" />
                    <h3 className="text-lg font-semibold">Market Trends</h3>
                  </div>
                  <p className="text-gray-300">{detailedIdea.trends}</p>
                </div>

<div className="bg-gray-800 p-4 rounded-lg">
                  <div className="flex items-center mb-2">
                    <Award className="h-5 w-5 mr-2 text-green-400" />
                    <h3 className="text-lg font-semibold">Investment Thesis</h3>
                  </div>
                  <p className="text-gray-300">
                    Based on our analysis of {detailedIdea.tickers.join(", ")} and the broader{" "}
                    {detailedIdea.categories.join(", ")} sectors, we believe these companies represent compelling
                    investment opportunities with significant upside potential over the {detailedIdea.timeHorizon}{" "}
                    timeframe. Their strong market positions, innovative product offerings, and robust financial
                    profiles position them well to capitalize on the secular growth trends in their respective markets.
                  </p>
                </div>
              </TabsContent>
            </Tabs>
          </CardContent>

<CardFooter className="flex justify-between border-t border-gray-800 pt-4">
            <div className="flex items-center text-sm text-gray-400">
              <Calendar className="h-4 w-4 mr-1" />
              <span>Created: {new Date(detailedIdea.createdAt).toLocaleDateString()}</span>
            </div>
            <div className="flex gap-2">
              <Button
                variant="outline"
                onClick={handleConvertToContent}
                disabled={isConverting}
                className="bg-gray-800 border-gray-700 text-white hover:bg-gray-700"
              >
                <FileText className="mr-2 h-4 w-4" />
                {isConverting ? "Converting..." : "Convert to Content"}
              </Button>
              <Button onClick={handleSaveToNewsletter} disabled={isSaving} className="bg-blue-600 hover:bg-blue-700">
                <BookOpen className="mr-2 h-4 w-4" />
                {isSaving ? "Saving..." : "Save to Newsletter"}
              </Button>
            </div>
          </CardFooter>
        </Card>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescriptreact:file="components/investment-idea-detail.tsx" isMerged="true"
"use client"

import { useState } from "react"
import type { InvestmentIdea } from "@/types/investment-ideas"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { X, FileText } from "lucide-react"
import { IdeaToContentConverter } from "./idea-to-content-converter"

interface InvestmentIdeaDetailProps {
  idea: InvestmentIdea
  onClose: () => void
  onSave: (idea: InvestmentIdea) => Promise<void>
}

export function InvestmentIdeaDetail({ idea, onClose, onSave }: InvestmentIdeaDetailProps) {
  const [isSaving, setIsSaving] = useState(false)
  const [isConvertDialogOpen, setIsConvertDialogOpen] = useState(false)

const handleSave = async () => {
    setIsSaving(true)
    try {
      await onSave(idea)
    } finally {
      setIsSaving(false)
    }
  }

return (
    <>
      <Card className="w-full max-w-4xl mx-auto bg-slate-900 border-slate-700 text-white">
        <CardHeader className="flex flex-row items-start justify-between space-y-0">
          <div>
            <CardTitle className="text-xl font-bold">{idea.title}</CardTitle>
            <div className="flex flex-wrap gap-2 mt-2">
              {idea.tickers.map((ticker) => (
                <Badge key={ticker} variant="outline" className="bg-slate-800 text-white border-slate-600">
                  {ticker}
                </Badge>
              ))}
            </div>
            <div className="flex flex-wrap gap-2 mt-2">
              {idea.categories.map((category) => (
                <span key={category.name} className={`text-xs px-2 py-1 rounded-full ${category.color}`}>
                  {category.name}
                </span>
              ))}
            </div>
          </div>
          <Button variant="ghost" size="icon" onClick={onClose} className="text-gray-400 hover:text-white">
            <X className="h-4 w-4" />
          </Button>
        </CardHeader>
        <CardContent>
          <Tabs defaultValue="overview" className="w-full">
            <TabsList className="bg-slate-800 border-slate-700 mb-4">
              <TabsTrigger value="overview" className="data-[state=active]:bg-slate-700 data-[state=active]:text-white">
                Overview
              </TabsTrigger>
              <TabsTrigger value="analysis" className="data-[state=active]:bg-slate-700 data-[state=active]:text-white">
                Analysis
              </TabsTrigger>
              <TabsTrigger value="risks" className="data-[state=active]:bg-slate-700 data-[state=active]:text-white">
                Risks & Trends
              </TabsTrigger>
            </TabsList>

<TabsContent value="overview" className="space-y-4">
              <div>
                <h3 className="text-lg font-semibold mb-2">Description</h3>
                <p className="text-gray-300">{idea.description}</p>
              </div>

{idea.overview && (
                <div>
                  <h3 className="text-lg font-semibold mb-2">Overview</h3>
                  <p className="text-gray-300">{idea.overview}</p>
                </div>
              )}

{idea.strategy && (
                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                  <div>
                    <h3 className="text-md font-semibold mb-2">Strategy</h3>
                    <p className="text-gray-300">{idea.strategy}</p>
                  </div>
                  <div>
                    <h3 className="text-md font-semibold mb-2">Time Horizon</h3>
                    <p className="text-gray-300">{idea.timeHorizon}</p>
                  </div>
                  <div>
                    <h3 className="text-md font-semibold mb-2">Risk Level</h3>
                    <p className="text-gray-300">{idea.riskLevel}</p>
                  </div>
                </div>
              )}

{idea.potentialCatalysts && idea.potentialCatalysts.length > 0 && (
                <div>
                  <h3 className="text-lg font-semibold mb-2">Potential Catalysts</h3>
                  <ul className="list-disc pl-5 space-y-1 text-gray-300">
                    {idea.potentialCatalysts.map((catalyst, index) => (
                      <li key={index}>{catalyst}</li>
                    ))}
                  </ul>
                </div>
              )}
            </TabsContent>

<TabsContent value="analysis" className="space-y-4">
              {idea.analysis ? (
                <div>
                  <h3 className="text-lg font-semibold mb-2">Investment Analysis</h3>
                  <p className="text-gray-300">{idea.analysis}</p>
                </div>
              ) : (
                <div className="space-y-4">
                  <div className="bg-slate-800 p-4 rounded-md">
                    <h3 className="text-lg font-semibold mb-2">Preliminary Analysis</h3>
                    <p className="text-gray-300">
                      Based on the available information for {idea.tickers.join(", ")}, this investment idea focuses on
                      the
                      {idea.categories.map((c) => ` ${c.name}`)} sector{idea.categories.length > 1 ? "s" : ""}. Current
                      market conditions suggest{" "}
                      {idea.score > 85 ? "strong" : idea.score > 75 ? "moderate" : "potential"}
                      opportunities in this space.
                    </p>
                  </div>
                  <div className="bg-slate-800/50 p-4 rounded-md border border-slate-700">
                    <p className="text-amber-400 flex items-center">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="16"
                        height="16"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="mr-2"
                      >
                        <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"></path>
                        <path d="M12 8v4"></path>
                        <path d="M12 16h.01"></path>
                      </svg>
                      Enhance this idea for a comprehensive investment analysis
                    </p>
                  </div>
                </div>
              )}

{idea.financialAnalysis ? (
                <div>
                  <h3 className="text-lg font-semibold mb-2">Financial Analysis</h3>
                  <p className="text-gray-300">{idea.financialAnalysis}</p>
                </div>
              ) : (
                <div className="bg-slate-800/50 p-4 rounded-md">
                  <h3 className="text-lg font-semibold mb-2">Financial Indicators</h3>
                  <p className="text-gray-400">
                    Key financial metrics for {idea.tickers.join(", ")} will be analyzed when you enhance this idea,
                    including growth rates, profitability, valuation multiples, and balance sheet strength.
                  </p>
                </div>
              )}
            </TabsContent>

<TabsContent value="risks" className="space-y-4">
              {idea.risks ? (
                <div>
                  <h3 className="text-lg font-semibold mb-2">Risks</h3>
                  <p className="text-gray-300">{idea.risks}</p>
                </div>
              ) : (
                <div className="bg-slate-800 p-4 rounded-md">
                  <h3 className="text-lg font-semibold mb-2">Potential Risks</h3>
                  <p className="text-gray-300">
                    Investments in the {idea.categories.map((c) => c.name).join(", ")} sector
                    {idea.categories.length > 1 ? "s" : ""}
                    typically face risks related to market competition, technological disruption, regulatory changes,
                    and macroeconomic factors. Companies like {idea.tickers.join(", ")} may be particularly sensitive to
                    {idea.categories.some(
                      (c) => c.name.includes("Tech") || c.name.includes("Software") || c.name.includes("AI"),
                    )
                      ? " rapid technological changes and innovation cycles."
                      : idea.categories.some((c) => c.name.includes("Energy") || c.name.includes("Utilities"))
                        ? " regulatory policies and commodity price fluctuations."
                        : " industry-specific challenges and broader market conditions."}
                  </p>
                </div>
              )}

{idea.trends ? (
                <div>
                  <h3 className="text-lg font-semibold mb-2">Market Trends</h3>
                  <p className="text-gray-300">{idea.trends}</p>
                </div>
              ) : (
                <div className="bg-slate-800 p-4 rounded-md mt-4">
                  <h3 className="text-lg font-semibold mb-2">Market Trends</h3>
                  <p className="text-gray-300">
                    The {idea.categories.map((c) => c.name).join(", ")} sector
                    {idea.categories.length > 1 ? "s are" : " is"}
                    experiencing {idea.score > 85 ? "significant" : "notable"} developments that could impact
                    {idea.tickers.join(", ")}. Key trends likely include
                    {idea.categories.some((c) => c.name.includes("AI"))
                      ? " advancements in artificial intelligence,"
                      : ""}
                    {idea.categories.some((c) => c.name.includes("Cloud")) ? " cloud infrastructure expansion," : ""}
                    {idea.categories.some((c) => c.name.includes("Cyber")) ? " evolving cybersecurity threats," : ""}
                    {idea.categories.some((c) => c.name.includes("Semi"))
                      ? " semiconductor supply chain developments,"
                      : ""}
                    {" and changing consumer/enterprise adoption patterns."}
                  </p>
                </div>
              )}

{!idea.risks && !idea.trends && (
                <div className="bg-slate-800/50 p-4 rounded-md border border-slate-700 mt-4">
                  <p className="text-amber-400 flex items-center">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="16"
                      height="16"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="mr-2"
                    >
                      <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"></path>
                      <path d="M12 8v4"></path>
                      <path d="M12 16h.01"></path>
                    </svg>
                    Enhance this idea for a detailed risk assessment and trend analysis
                  </p>
                </div>
              )}
            </TabsContent>
          </Tabs>
        </CardContent>
        <CardFooter className="flex justify-between border-t border-slate-700 pt-4">
          <div className="flex items-center text-sm text-gray-400">
            <span>
              Created: {new Date(idea.createdAt).toLocaleDateString()} • Score: {idea.score}
            </span>
          </div>
          <div className="flex gap-2">
            <Button
              variant="outline"
              onClick={() => setIsConvertDialogOpen(true)}
              className="bg-slate-800 border-slate-700 text-white hover:bg-slate-700"
            >
              <FileText className="mr-2 h-4 w-4" />
              Convert to Content
            </Button>
            <Button onClick={handleSave} disabled={isSaving} className="bg-blue-600 hover:bg-blue-700">
              {isSaving ? "Saving..." : "Save to Newsletter"}
            </Button>
          </div>
        </CardFooter>
      </Card>

<IdeaToContentConverter
        idea={idea}
        isOpen={isConvertDialogOpen}
        onClose={() => setIsConvertDialogOpen(false)}
        onSuccess={onClose}
      />
    </>
  )
}
[V0_FILE]typescriptreact:file="components/investment-idea-generator-enhanced.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Button } from "@/components/ui/button"
import { Switch } from "@/components/ui/switch"
import { Slider } from "@/components/ui/slider"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Sparkles, Search, Loader2, AlertCircle } from "lucide-react"
import { RealTimeMarketData } from "./real-time-market-data"
import { StockDataCard } from "./stock-data-card"
import { getMarketOverview, getStockQuote } from "@/services/market-data-service"

interface InvestmentIdeaGeneratorEnhancedProps {
  onGenerate: (formData: any, marketData: any) => Promise<void>
  isGenerating: boolean
}

export function InvestmentIdeaGeneratorEnhanced({ onGenerate, isGenerating }: InvestmentIdeaGeneratorEnhancedProps) {
  const [ticker, setTicker] = useState("")
  const [sector, setSector] = useState("all")
  const [strategy, setStrategy] = useState("balanced")
  const [timeHorizon, setTimeHorizon] = useState("medium")
  const [riskTolerance, setRiskTolerance] = useState([50])
  const [useAI, setUseAI] = useState(true)
  const [isValidatingTicker, setIsValidatingTicker] = useState(false)
  const [tickerError, setTickerError] = useState<string | null>(null)
  const [marketData, setMarketData] = useState<any>(null)
  const [isLoadingMarketData, setIsLoadingMarketData] = useState(true)

// Fetch market data on component mount
  useEffect(() => {
    const fetchMarketData = async () => {
      setIsLoadingMarketData(true)
      try {
        const overview = await getMarketOverview()
        setMarketData(overview)
      } catch (error) {
        console.error("Error fetching market data:", error)
      } finally {
        setIsLoadingMarketData(false)
      }
    }

fetchMarketData()
  }, [])

// Validate ticker when it changes
  useEffect(() => {
    if (!ticker) {
      setTickerError(null)
      return
    }

const validateTicker = async () => {
      if (ticker.length < 1) {
        setTickerError(null)
        return
      }

setIsValidatingTicker(true)
      setTickerError(null)

try {
        // Attempt to get a quote for the ticker
        await getStockQuote(ticker)
        setTickerError(null)
      } catch (error) {
        setTickerError(`Invalid ticker: ${ticker}`)
      } finally {
        setIsValidatingTicker(false)
      }
    }

// Debounce the validation
    const timeoutId = setTimeout(validateTicker, 500)
    return () => clearTimeout(timeoutId)
  }, [ticker])

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()

if (isValidatingTicker) {
      return
    }

if (tickerError) {
      return
    }

const formData = {
      ticker,
      sector,
      strategy,
      timeHorizon,
      riskTolerance: riskTolerance[0],
      useAI,
    }

await onGenerate(formData, marketData)
  }

return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
      <div className="md:col-span-2 space-y-4">
        <Card className="bg-[#1a2235] border-[#2a3245] text-white">
          <CardHeader>
            <CardTitle className="text-xl">Generate Investment Ideas</CardTitle>
          </CardHeader>
          <CardContent>
            <form onSubmit={handleSubmit} className="space-y-4">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <Label htmlFor="ticker" className="text-slate-300">
                    Stock Ticker
                  </Label>
                  <div className="relative">
                    <Input
                      id="ticker"
                      placeholder="Enter ticker (e.g., AAPL)"
                      value={ticker}
                      onChange={(e) => setTicker(e.target.value.toUpperCase())}
                      className="bg-slate-800 border-slate-700 text-white"
                    />
                    {isValidatingTicker && (
                      <div className="absolute right-2 top-1/2 -translate-y-1/2">
                        <Loader2 className="h-4 w-4 animate-spin text-slate-400" />
                      </div>
                    )}
                  </div>
                  {tickerError && (
                    <div className="text-xs text-red-400 mt-1 flex items-center">
                      <AlertCircle className="h-3 w-3 mr-1" />
                      {tickerError}
                    </div>
                  )}
                  <p className="text-xs text-slate-400 mt-1">Enter a specific ticker to focus your idea</p>
                </div>

<div>
                  <Label htmlFor="sector" className="text-slate-300">
                    Sector
                  </Label>
                  <Select value={sector} onValueChange={setSector}>
                    <SelectTrigger id="sector" className="bg-slate-800 border-slate-700 text-white">
                      <SelectValue placeholder="Select sector" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="all">All Sectors</SelectItem>
                      <SelectItem value="Technology">Technology</SelectItem>
                      <SelectItem value="Healthcare">Healthcare</SelectItem>
                      <SelectItem value="Financial">Financial</SelectItem>
                      <SelectItem value="Consumer">Consumer</SelectItem>
                      <SelectItem value="Energy">Energy</SelectItem>
                      <SelectItem value="Industrial">Industrial</SelectItem>
                      <SelectItem value="Utilities">Utilities</SelectItem>
                      <SelectItem value="Materials">Materials</SelectItem>
                      <SelectItem value="Real Estate">Real Estate</SelectItem>
                      <SelectItem value="Communication">Communication</SelectItem>
                    </SelectContent>
                  </Select>
                  <p className="text-xs text-slate-400 mt-1">Filter by industry sector</p>
                </div>
              </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <Label htmlFor="strategy" className="text-slate-300">
                    Investment Strategy
                  </Label>
                  <Select value={strategy} onValueChange={setStrategy}>
                    <SelectTrigger id="strategy" className="bg-slate-800 border-slate-700 text-white">
                      <SelectValue placeholder="Select strategy" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="growth">Growth</SelectItem>
                      <SelectItem value="value">Value</SelectItem>
                      <SelectItem value="income">Income</SelectItem>
                      <SelectItem value="balanced">Balanced</SelectItem>
                      <SelectItem value="momentum">Momentum</SelectItem>
                      <SelectItem value="contrarian">Contrarian</SelectItem>
                    </SelectContent>
                  </Select>
                  <p className="text-xs text-slate-400 mt-1">Select your preferred investment approach</p>
                </div>

<div>
                  <Label htmlFor="timeHorizon" className="text-slate-300">
                    Time Horizon
                  </Label>
                  <Select value={timeHorizon} onValueChange={setTimeHorizon}>
                    <SelectTrigger id="timeHorizon" className="bg-slate-800 border-slate-700 text-white">
                      <SelectValue placeholder="Select time horizon" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="short">Short-term (0-1 year)</SelectItem>
                      <SelectItem value="medium">Medium-term (1-3 years)</SelectItem>
                      <SelectItem value="long">Long-term (3+ years)</SelectItem>
                    </SelectContent>
                  </Select>
                  <p className="text-xs text-slate-400 mt-1">How long you plan to hold the investment</p>
                </div>
              </div>

<div>
                <Label className="text-slate-300">Risk Tolerance</Label>
                <Slider value={riskTolerance} onValueChange={setRiskTolerance} max={100} step={1} className="py-4" />
                <div className="flex justify-between text-xs text-slate-400">
                  <span>Conservative</span>
                  <span>Moderate</span>
                  <span>Aggressive</span>
                </div>
              </div>

<div className="flex items-center space-x-2">
                <Switch id="useAI" checked={useAI} onCheckedChange={setUseAI} />
                <Label htmlFor="useAI" className="flex items-center">
                  <Sparkles className="h-4 w-4 mr-1 text-purple-400" />
                  Enhance with Gemini AI
                </Label>
              </div>

<Button
                type="submit"
                className="w-full bg-blue-600 hover:bg-blue-700"
                disabled={isGenerating || isValidatingTicker || !!tickerError}
              >
                {isGenerating ? (
                  <>
                    <Loader2 className="h-4 w-4 mr-2 animate-spin" />
                    Generating Ideas...
                  </>
                ) : (
                  <>
                    <Search className="h-4 w-4 mr-2" />
                    Generate Investment Ideas
                  </>
                )}
              </Button>
            </form>
          </CardContent>
        </Card>

{ticker && !tickerError && <StockDataCard symbol={ticker} />}
      </div>

<div className="md:col-span-1">
        <RealTimeMarketData />
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/investment-idea-generator.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import type React from "react"
import type { InvestmentIdeaFormData } from "@/types/investment-ideas"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Label } from "@/components/ui/label"
import { Button } from "@/components/ui/button"
import { Switch } from "@/components/ui/switch"
import { Sparkles, Search, Check, ChevronsUpDown, AlertCircle } from "lucide-react"
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { cn } from "@/lib/utils"
import { Alert, AlertDescription } from "@/components/ui/alert"

interface InvestmentIdeaGeneratorProps {
  onGenerate: (formData: InvestmentIdeaFormData) => Promise<void>
  isGenerating: boolean
}

interface StockOption {
  symbol: string
  name: string
}

const MARKET_SECTORS = [
  { id: "technology", name: "Technology" },
  { id: "healthcare", name: "Healthcare" },
  { id: "financials", name: "Financials" },
  { id: "consumer-discretionary", name: "Consumer Discretionary" },
  { id: "consumer-staples", name: "Consumer Staples" },
  { id: "industrials", name: "Industrials" },
  { id: "energy", name: "Energy" },
  { id: "utilities", name: "Utilities" },
  { id: "real-estate", name: "Real Estate" },
  { id: "materials", name: "Materials" },
  { id: "communication-services", name: "Communication Services" },
  { id: "ai-machine-learning", name: "AI & Machine Learning" },
  { id: "semiconductors", name: "Semiconductors" },
  { id: "cloud-computing", name: "Cloud Computing" },
  { id: "cybersecurity", name: "Cybersecurity" },
  { id: "fintech", name: "Fintech" },
  { id: "clean-energy", name: "Clean Energy" },
  { id: "e-commerce", name: "E-commerce" },
  { id: "biotechnology", name: "Biotechnology" },
  { id: "automotive", name: "Automotive" },
]

const INVESTMENT_THEMES = [
  { id: "growth", name: "Growth" },
  { id: "value", name: "Value" },
  { id: "dividend", name: "Dividend" },
  { id: "income", name: "Income" },
  { id: "momentum", name: "Momentum" },
  { id: "quality", name: "Quality" },
  { id: "low-volatility", name: "Low Volatility" },
  { id: "high-yield", name: "High Yield" },
  { id: "esg", name: "ESG" },
  { id: "thematic", name: "Thematic" },
  { id: "contrarian", name: "Contrarian" },
  { id: "defensive", name: "Defensive" },
  { id: "cyclical", name: "Cyclical" },
  { id: "small-cap", name: "Small Cap" },
  { id: "mid-cap", name: "Mid Cap" },
  { id: "large-cap", name: "Large Cap" },
  { id: "international", name: "International" },
  { id: "emerging-markets", name: "Emerging Markets" },
  { id: "passive", name: "Passive" },
  { id: "active", name: "Active" },
]

export function InvestmentIdeaGenerator({ onGenerate, isGenerating }: InvestmentIdeaGeneratorProps) {
  const [formData, setFormData] = useState<InvestmentIdeaFormData>({
    tickers: "",
    sectors: "",
    themes: "",
    useAI: true,
  })
  const [stockOptions, setStockOptions] = useState<StockOption[]>([])
  const [isLoadingStocks, setIsLoadingStocks] = useState(false)
  const [selectedStocks, setSelectedStocks] = useState<{ symbol: string; name: string }[]>([])
  const [selectedSectors, setSelectedSectors] = useState<string[]>([])
  const [selectedThemes, setSelectedThemes] = useState<string[]>([])
  const [useAI, setUseAI] = useState(true)
  const [validationError, setValidationError] = useState<string | null>(null)

useEffect(() => {
    // Use a static list of common stocks instead of fetching from the API
    setStockOptions([
      { symbol: "AAPL", name: "Apple Inc." },
      { symbol: "MSFT", name: "Microsoft Corporation" },
      { symbol: "GOOGL", name: "Alphabet Inc." },
      { symbol: "AMZN", name: "Amazon.com Inc." },
      { symbol: "META", name: "Meta Platforms Inc." },
      { symbol: "TSLA", name: "Tesla Inc." },
      { symbol: "NVDA", name: "NVIDIA Corporation" },
      { symbol: "JPM", name: "JPMorgan Chase & Co." },
      { symbol: "V", name: "Visa Inc." },
      { symbol: "JNJ", name: "Johnson & Johnson" },
      { symbol: "WMT", name: "Walmart Inc." },
      { symbol: "PG", name: "Procter & Gamble Co." },
      { symbol: "MA", name: "Mastercard Inc." },
      { symbol: "HD", name: "Home Depot Inc." },
      { symbol: "DIS", name: "Walt Disney Co." },
      { symbol: "NFLX", name: "Netflix Inc." },
      { symbol: "INTC", name: "Intel Corporation" },
      { symbol: "CSCO", name: "Cisco Systems Inc." },
      { symbol: "VZ", name: "Verizon Communications Inc." },
      { symbol: "KO", name: "Coca-Cola Co." },
      { symbol: "PEP", name: "PepsiCo Inc." },
      { symbol: "ADBE", name: "Adobe Inc." },
      { symbol: "PYPL", name: "PayPal Holdings Inc." },
      { symbol: "CRM", name: "Salesforce Inc." },
      { symbol: "CMCSA", name: "Comcast Corporation" },
      { symbol: "COST", name: "Costco Wholesale Corporation" },
      { symbol: "ABT", name: "Abbott Laboratories" },
      { symbol: "TMO", name: "Thermo Fisher Scientific Inc." },
      { symbol: "ACN", name: "Accenture plc" },
      { symbol: "AVGO", name: "Broadcom Inc." },
      { symbol: "MRK", name: "Merck & Co. Inc." },
      { symbol: "PFE", name: "Pfizer Inc." },
      { symbol: "NKE", name: "Nike Inc." },
      { symbol: "UNH", name: "UnitedHealth Group Inc." },
      { symbol: "T", name: "AT&T Inc." },
      { symbol: "BAC", name: "Bank of America Corp." },
      { symbol: "XOM", name: "Exxon Mobil Corporation" },
      { symbol: "CVX", name: "Chevron Corporation" },
      { symbol: "WFC", name: "Wells Fargo & Co." },
      { symbol: "QCOM", name: "Qualcomm Inc." },
      { symbol: "AMD", name: "Advanced Micro Devices Inc." },
      { symbol: "TXN", name: "Texas Instruments Inc." },
      { symbol: "SBUX", name: "Starbucks Corporation" },
      { symbol: "GS", name: "Goldman Sachs Group Inc." },
      { symbol: "IBM", name: "International Business Machines Corp." },
      { symbol: "GOOG", name: "Alphabet Inc. (Class C)" },
      { symbol: "AMGN", name: "Amgen Inc." },
      { symbol: "MMM", name: "3M Co." },
      { symbol: "GE", name: "General Electric Co." },
      { symbol: "F", name: "Ford Motor Co." },
    ])
  }, [])

// Clear validation error when selections change
  useEffect(() => {
    if (validationError && (selectedStocks.length > 0 || selectedSectors.length > 0 || selectedThemes.length > 0)) {
      setValidationError(null)
    }
  }, [selectedStocks, selectedSectors, selectedThemes, validationError])

const handleSwitchChange = (checked: boolean) => {
    setUseAI(checked)
  }

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()

// Validate that at least one selection has been made
    if (selectedStocks.length === 0 && selectedSectors.length === 0 && selectedThemes.length === 0) {
      setValidationError("Please select at least one ticker, sector, or theme")
      return
    }

const formData: InvestmentIdeaFormData = {
      tickers: selectedStocks.map((stock) => stock.symbol).join(", "),
      sectors: selectedSectors.join(", "),
      themes: selectedThemes.join(", "),
      useAI: useAI,
    }
    onGenerate(formData)
  }

return (
    <Card className="bg-slate-900 text-white border-slate-700">
      <CardHeader>
        <CardTitle className="text-xl">Generate Investment Ideas</CardTitle>
      </CardHeader>
      <CardContent>
        <form onSubmit={handleSubmit} className="space-y-4">
          {validationError && (
            <Alert variant="destructive" className="bg-red-900/30 border-red-800 text-red-200">
              <AlertCircle className="h-4 w-4" />
              <AlertDescription>{validationError}</AlertDescription>
            </Alert>
          )}

<div>
            <Label htmlFor="tickers" className="text-slate-300">
              Stock Tickers
            </Label>
            <div className="space-y-2">
              <Popover>
                <PopoverTrigger asChild>
                  <Button
                    variant="outline"
                    role="combobox"
                    className="w-full justify-between bg-slate-800 border-slate-700 text-white hover:bg-slate-700"
                  >
                    {selectedStocks.length > 0 ? `${selectedStocks.length} stocks selected` : "Select stocks..."}
                    <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                  </Button>
                </PopoverTrigger>
                <PopoverContent className="w-full p-0 bg-slate-800 border-slate-700" align="start" sideOffset={4}>
                  <Command className="bg-slate-800 w-full">
                    <CommandInput placeholder="Search for stocks..." className="text-white" />
                    <CommandList className="max-h-[300px]">
                      <CommandEmpty className="text-slate-400">No stocks found.</CommandEmpty>
                      <CommandGroup className="max-h-60 overflow-y-auto">
                        {stockOptions.map((stock) => (
                          <CommandItem
                            key={stock.symbol}
                            value={stock.symbol}
                            onSelect={(value) => {
                              const stockToSelect = stockOptions.find((s) => s.symbol === value)
                              if (!stockToSelect) return

const stockExists = selectedStocks.some((s) => s.symbol === value)

let newStocks
                              if (stockExists) {
                                newStocks = selectedStocks.filter((s) => s.symbol !== value)
                              } else {
                                newStocks = [...selectedStocks, stockToSelect]
                              }

setSelectedStocks(newStocks)
                            }}
                            className="text-white hover:bg-slate-700"
                          >
                            <Check
                              className={cn(
                                "mr-2 h-4 w-4",
                                selectedStocks.some((s) => s.symbol === stock.symbol) ? "opacity-100" : "opacity-0",
                              )}
                            />
                            <span className="font-medium">{stock.symbol}</span>
                            <span className="text-slate-400 ml-2">{stock.name}</span>
                          </CommandItem>
                        ))}
                      </CommandGroup>
                    </CommandList>
                  </Command>
                </PopoverContent>
              </Popover>
              {selectedStocks.length > 0 && (
                <div className="flex flex-wrap gap-1">
                  {selectedStocks.map((stock) => (
                    <div
                      key={stock.symbol}
                      className="bg-blue-900/30 text-blue-300 px-2 py-1 rounded-md text-xs flex items-center"
                    >
                      {stock.symbol}
                      <button
                        type="button"
                        className="ml-1 text-blue-300 hover:text-blue-100"
                        onClick={() => {
                          const newStocks = selectedStocks.filter((s) => s.symbol !== stock.symbol)
                          setSelectedStocks(newStocks)
                        }}
                      >
                        ×
                      </button>
                    </div>
                  ))}
                </div>
              )}
              <p className="text-xs text-slate-400">Select specific tickers to focus your ideas</p>
            </div>
          </div>

<div>
            <Label htmlFor="sectors" className="text-slate-300">
              Sectors/Categories
            </Label>
            <div className="space-y-2">
              <Popover>
                <PopoverTrigger asChild>
                  <Button
                    variant="outline"
                    role="combobox"
                    className="w-full justify-between bg-slate-800 border-slate-700 text-white hover:bg-slate-700"
                  >
                    {selectedSectors.length > 0 ? `${selectedSectors.length} sectors selected` : "Select sectors..."}
                    <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                  </Button>
                </PopoverTrigger>
                <PopoverContent className="w-full p-0 bg-slate-800 border-slate-700" align="start" sideOffset={4}>
                  <Command className="bg-slate-800 w-full">
                    <CommandInput placeholder="Search sectors..." className="text-white" />
                    <CommandList className="max-h-[300px]">
                      <CommandEmpty className="text-slate-400">No sectors found.</CommandEmpty>
                      <CommandGroup className="max-h-60 overflow-y-auto">
                        {MARKET_SECTORS.map((sector) => (
                          <CommandItem
                            key={sector.id}
                            value={sector.name}
                            onSelect={(value) => {
                              const sectorExists = selectedSectors.includes(value)

let newSectors
                              if (sectorExists) {
                                newSectors = selectedSectors.filter((s) => s !== value)
                              } else {
                                newSectors = [...selectedSectors, value]
                              }

setSelectedSectors(newSectors)
                            }}
                            className="text-white hover:bg-slate-700"
                          >
                            <Check
                              className={cn(
                                "mr-2 h-4 w-4",
                                selectedSectors.includes(sector.name) ? "opacity-100" : "opacity-0",
                              )}
                            />
                            <span>{sector.name}</span>
                          </CommandItem>
                        ))}
                      </CommandGroup>
                    </CommandList>
                  </Command>
                </PopoverContent>
              </Popover>
              {selectedSectors.length > 0 && (
                <div className="flex flex-wrap gap-1">
                  {selectedSectors.map((sector) => (
                    <div
                      key={sector}
                      className="bg-purple-900/30 text-purple-300 px-2 py-1 rounded-md text-xs flex items-center"
                    >
                      {sector}
                      <button
                        type="button"
                        className="ml-1 text-purple-300 hover:text-purple-100"
                        onClick={() => {
                          const newSectors = selectedSectors.filter((s) => s !== sector)
                          setSelectedSectors(newSectors)
                        }}
                      >
                        ×
                      </button>
                    </div>
                  ))}
                </div>
              )}
              <p className="text-xs text-slate-400">Filter by industry sectors or categories</p>
            </div>
          </div>

<div>
            <Label htmlFor="themes" className="text-slate-300">
              Investment Themes
            </Label>
            <div className="space-y-2">
              <Popover>
                <PopoverTrigger asChild>
                  <Button
                    variant="outline"
                    role="combobox"
                    className="w-full justify-between bg-slate-800 border-slate-700 text-white hover:bg-slate-700"
                  >
                    {selectedThemes.length > 0 ? `${selectedThemes.length} themes selected` : "Select themes..."}
                    <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                  </Button>
                </PopoverTrigger>
                <PopoverContent className="w-full p-0 bg-slate-800 border-slate-700" align="start" sideOffset={4}>
                  <Command className="bg-slate-800 w-full">
                    <CommandInput placeholder="Search themes..." className="text-white" />
                    <CommandList className="max-h-[300px]">
                      <CommandEmpty className="text-slate-400">No themes found.</CommandEmpty>
                      <CommandGroup className="max-h-60 overflow-y-auto">
                        {INVESTMENT_THEMES.map((theme) => (
                          <CommandItem
                            key={theme.id}
                            value={theme.name}
                            onSelect={(value) => {
                              const themeExists = selectedThemes.includes(value)

let newThemes
                              if (themeExists) {
                                newThemes = selectedThemes.filter((t) => t !== value)
                              } else {
                                newThemes = [...selectedThemes, value]
                              }

setSelectedThemes(newThemes)
                            }}
                            className="text-white hover:bg-slate-700"
                          >
                            <Check
                              className={cn(
                                "mr-2 h-4 w-4",
                                selectedThemes.includes(theme.name) ? "opacity-100" : "opacity-0",
                              )}
                            />
                            <span>{theme.name}</span>
                          </CommandItem>
                        ))}
                      </CommandGroup>
                    </CommandList>
                  </Command>
                </PopoverContent>
              </Popover>
              {selectedThemes.length > 0 && (
                <div className="flex flex-wrap gap-1">
                  {selectedThemes.map((theme) => (
                    <div
                      key={theme}
                      className="bg-green-900/30 text-green-300 px-2 py-1 rounded-md text-xs flex items-center"
                    >
                      {theme}
                      <button
                        type="button"
                        className="ml-1 text-green-300 hover:text-green-100"
                        onClick={() => {
                          const newThemes = selectedThemes.filter((t) => t !== theme)
                          setSelectedThemes(newThemes)
                        }}
                      >
                        ×
                      </button>
                    </div>
                  ))}
                </div>
              )}
              <p className="text-xs text-slate-400">Specify investment themes or strategies</p>
            </div>
          </div>

<div className="flex items-center space-x-2">
            <Switch id="useAI" checked={useAI} onCheckedChange={handleSwitchChange} />
            <Label htmlFor="useAI" className="flex items-center">
              <Sparkles className="h-4 w-4 mr-1 text-purple-400" />
              Enhance with Gemini AI
            </Label>
          </div>

<Button type="submit" className="w-full bg-blue-600 hover:bg-blue-700" disabled={isGenerating}>
            <Search className="h-4 w-4 mr-2" />
            {isGenerating ? "Generating Ideas..." : "Generate Investment Ideas"}
          </Button>
        </form>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/investment-primer/company-valuation-model.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardHeader, CardTitle, CardDescription, CardFooter } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Slider } from "@/components/ui/slider"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import {
  LineChart,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  ResponsiveContainer,
  BarChart,
  Bar,
} from "recharts"
import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart"
import { Download, Calculator, RefreshCw, Info, ArrowUp, ArrowDown, Minus, Copy } from "lucide-react"
import { Tooltip as UITooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
import { Badge } from "@/components/ui/badge"
import type { CompanyComparison } from "@/types/investment-primer"
import {
  getCompanyProfile,
  getFinancialRatios,
  getIncomeStatement,
  getCashFlowStatements,
} from "@/services/fmp-service"

interface CompanyValuationModelProps {
  company: CompanyComparison
  peerCompanies: CompanyComparison[]
}

// Define scenario type
type Scenario = "bull" | "base" | "bear"

// Define scenario settings interface
interface ScenarioSettings {
  growthRate1: number
  growthRate2: number
  growthRate3: number
  terminalGrowthRate: number
  discountRate: number
  targetMultiple: number
  description: string
}

// Define valuation results interface
interface ValuationResults {
  dcfValue: number
  dcfUpside: number
  multipleBasedValue: number
  multipleUpside: number
  averageValue: number
  averageUpside: number
}

export function CompanyValuationModel({ company, peerCompanies }: CompanyValuationModelProps) {
  const [activeTab, setActiveTab] = useState("dcf")
  const [isLoading, setIsLoading] = useState(true)
  const [financialData, setFinancialData] = useState<any>(null)
  const [stockPrice, setStockPrice] = useState<number>(0)
  const [sharesOutstanding, setSharesOutstanding] = useState<number>(0)

// Current scenario
  const [currentScenario, setCurrentScenario] = useState<Scenario>("base")

// Free cash flow (common across scenarios)
  const [fcf, setFcf] = useState<number>(0)

// Selected multiple (common across scenarios)
  const [selectedMultiple, setSelectedMultiple] = useState<string>("pe")
  const [multipleValue, setMultipleValue] = useState<number>(0)
  const [peerMultiple, setPeerMultiple] = useState<number>(0)

// Scenario settings
  const [scenarios, setScenarios] = useState<Record<Scenario, ScenarioSettings>>({
    bull: {
      growthRate1: 25,
      growthRate2: 18,
      growthRate3: 10,
      terminalGrowthRate: 4,
      discountRate: 9,
      targetMultiple: 0, // Will be set based on peer multiple
      description: "Optimistic outlook with strong growth and favorable market conditions",
    },
    base: {
      growthRate1: 15,
      growthRate2: 10,
      growthRate3: 5,
      terminalGrowthRate: 3,
      discountRate: 10,
      targetMultiple: 0, // Will be set based on peer multiple
      description: "Most likely scenario based on current trends and market expectations",
    },
    bear: {
      growthRate1: 8,
      growthRate2: 5,
      growthRate3: 2,
      terminalGrowthRate: 2,
      discountRate: 12,
      targetMultiple: 0, // Will be set based on peer multiple
      description: "Conservative outlook with slower growth and challenging market conditions",
    },
  })

// Valuation results for each scenario
  const [valuationResults, setValuationResults] = useState<Record<Scenario, ValuationResults>>({
    bull: { dcfValue: 0, dcfUpside: 0, multipleBasedValue: 0, multipleUpside: 0, averageValue: 0, averageUpside: 0 },
    base: { dcfValue: 0, dcfUpside: 0, multipleBasedValue: 0, multipleUpside: 0, averageValue: 0, averageUpside: 0 },
    bear: { dcfValue: 0, dcfUpside: 0, multipleBasedValue: 0, multipleUpside: 0, averageValue: 0, averageUpside: 0 },
  })

// Sensitivity analysis
  const [sensitivityData, setSensitivityData] = useState<any[]>([])

// Load financial data
  useEffect(() => {
    async function loadFinancialData() {
      try {
        setIsLoading(true)

// Fetch company financial data
        const [profile, incomeStatements, cashFlows, ratios] = await Promise.all([
          getCompanyProfile(company.ticker),
          getIncomeStatement(company.ticker, "annual", "5"),
          getCashFlowStatements(company.ticker, "annual", "5"),
          getFinancialRatios(company.ticker, "annual", "5"),
        ])

if (profile && incomeStatements && cashFlows && ratios) {
          // Set stock price and shares outstanding
          setStockPrice(profile.price || 0)
          setSharesOutstanding(profile.mktCap / profile.price || 0)

// Calculate free cash flow (use latest year)
          const latestFcf = cashFlows[0]?.freeCashFlow || 0
          setFcf(latestFcf / 1000000) // Convert to millions

// Set financial data
          setFinancialData({
            profile,
            incomeStatements,
            cashFlows,
            ratios,
            metrics: {
              revenue: incomeStatements[0]?.revenue || 0,
              netIncome: incomeStatements[0]?.netIncome || 0,
              eps: incomeStatements[0]?.eps || 0,
              fcf: latestFcf,
              ebitda: incomeStatements[0]?.ebitda || 0,
              pe: profile.price / (incomeStatements[0]?.eps || 1),
              evToEbitda:
                (profile.mktCap + (profile.totalDebt || 0) - (profile.cashAndCashEquivalents || 0)) /
                (incomeStatements[0]?.ebitda || 1),
              evToRevenue:
                (profile.mktCap + (profile.totalDebt || 0) - (profile.cashAndCashEquivalents || 0)) /
                (incomeStatements[0]?.revenue || 1),
              evToFcf:
                (profile.mktCap + (profile.totalDebt || 0) - (profile.cashAndCashEquivalents || 0)) / (latestFcf || 1),
              priceToSales: profile.mktCap / (incomeStatements[0]?.revenue || 1),
              priceToBook: profile.price / (profile.bookValuePerShare || 1),
            },
          })

// Calculate peer multiples
          calculatePeerMultiples(peerCompanies, company.category)
        }
      } catch (error) {
        console.error("Error loading financial data:", error)
      } finally {
        setIsLoading(false)
      }
    }

loadFinancialData()
  }, [company, peerCompanies])

// Update target multiples for all scenarios when peer multiple changes
  useEffect(() => {
    if (peerMultiple > 0) {
      setScenarios((prev) => ({
        ...prev,
        bull: { ...prev.bull, targetMultiple: peerMultiple * 1.2 },
        base: { ...prev.base, targetMultiple: peerMultiple * 0.9 },
        bear: { ...prev.bear, targetMultiple: peerMultiple * 0.7 },
      }))
    }
  }, [peerMultiple])

// Calculate valuations for all scenarios whenever inputs change
  useEffect(() => {
    if (fcf > 0 && financialData) {
      // Calculate DCF and multiple-based valuations for each scenario
      const newValuationResults = { ...valuationResults }

Object.keys(scenarios).forEach((scenario) => {
        const scenarioKey = scenario as Scenario
        const settings = scenarios[scenarioKey]

// Calculate DCF valuation
        const dcfResult = calculateDcfValuation(
          fcf,
          settings.growthRate1,
          settings.growthRate2,
          settings.growthRate3,
          settings.terminalGrowthRate,
          settings.discountRate,
        )

// Calculate multiple-based valuation
        const multipleResult = calculateMultipleBasedValuation(selectedMultiple, settings.targetMultiple)

// Calculate average
        const averageValue = (dcfResult.value + multipleResult.value) / 2
        const averageUpside = (dcfResult.upside + multipleResult.upside) / 2

newValuationResults[scenarioKey] = {
          dcfValue: dcfResult.value,
          dcfUpside: dcfResult.upside,
          multipleBasedValue: multipleResult.value,
          multipleUpside: multipleResult.upside,
          averageValue,
          averageUpside,
        }
      })

setValuationResults(newValuationResults)

// Generate sensitivity data for current scenario
      generateSensitivityData()
    }
  }, [fcf, scenarios, selectedMultiple, stockPrice, financialData])

// Calculate peer multiples
  const calculatePeerMultiples = (peers: CompanyComparison[], category: string) => {
    // Filter peers by category
    const categoryPeers = peers.filter((peer) => peer.category === category && peer.ticker !== company.ticker)

if (categoryPeers.length === 0) return

// Calculate average multiples from peer companies
    // In a real implementation, this would use actual financial data from the API
    // For this example, we'll use realistic mock data
    const peerMultiples = {
      pe: 25,
      evToEbitda: 15,
      evToRevenue: 5,
      priceToSales: 6,
      priceToBook: 3,
    }

// Set peer multiple based on selected multiple
    setPeerMultiple(peerMultiples[selectedMultiple as keyof typeof peerMultiples] || 0)
  }

// Calculate DCF valuation
  const calculateDcfValuation = (
    cashFlow: number,
    growthRate1: number,
    growthRate2: number,
    growthRate3: number,
    terminalGrowthRate: number,
    discountRate: number,
  ) => {
    // Project cash flows for 10 years
    const projectedCashFlows = []
    let currentFcf = cashFlow

// Years 1-3: High growth
    for (let i = 1; i <= 3; i++) {
      currentFcf = currentFcf * (1 + growthRate1 / 100)
      projectedCashFlows.push(currentFcf)
    }

// Years 4-6: Medium growth
    for (let i = 4; i <= 6; i++) {
      currentFcf = currentFcf * (1 + growthRate2 / 100)
      projectedCashFlows.push(currentFcf)
    }

// Years 7-10: Low growth
    for (let i = 7; i <= 10; i++) {
      currentFcf = currentFcf * (1 + growthRate3 / 100)
      projectedCashFlows.push(currentFcf)
    }

// Calculate terminal value
    const terminalValue =
      (projectedCashFlows[9] * (1 + terminalGrowthRate / 100)) / (discountRate / 100 - terminalGrowthRate / 100)

// Discount cash flows
    let presentValue = 0
    projectedCashFlows.forEach((cf, index) => {
      presentValue += cf / Math.pow(1 + discountRate / 100, index + 1)
    })

// Discount terminal value
    const presentTerminalValue = terminalValue / Math.pow(1 + discountRate / 100, 10)

// Total enterprise value
    const enterpriseValue = presentValue + presentTerminalValue

// Adjust for cash and debt (using estimates)
    const netDebt = financialData?.profile?.totalDebt - financialData?.profile?.cashAndCashEquivalents || 0
    const equityValue = enterpriseValue - netDebt

// Calculate per share value
    const perShareValue = equityValue / sharesOutstanding

// Calculate upside
    const upside = (perShareValue / stockPrice - 1) * 100

return { value: perShareValue, upside }
  }

// Calculate multiple-based valuation
  const calculateMultipleBasedValuation = (multiple: string, targetMultiple: number) => {
    let value = 0

// Calculate value based on selected multiple
    switch (multiple) {
      case "pe":
        value = targetMultiple * (financialData?.metrics?.eps || 0)
        break
      case "evToEbitda":
        value =
          (targetMultiple * (financialData?.metrics?.ebitda || 0) -
            (financialData?.profile?.totalDebt || 0) +
            (financialData?.profile?.cashAndCashEquivalents || 0)) /
          sharesOutstanding
        break
      case "evToRevenue":
        value =
          (targetMultiple * (financialData?.metrics?.revenue || 0) -
            (financialData?.profile?.totalDebt || 0) +
            (financialData?.profile?.cashAndCashEquivalents || 0)) /
          sharesOutstanding
        break
      case "priceToSales":
        value = (targetMultiple * (financialData?.metrics?.revenue || 0)) / sharesOutstanding
        break
      case "priceToBook":
        value = targetMultiple * (financialData?.profile?.bookValuePerShare || 0)
        break
    }

// Calculate upside
    const upside = (value / stockPrice - 1) * 100

return { value, upside }
  }

// Generate sensitivity data for chart
  const generateSensitivityData = () => {
    const settings = scenarios[currentScenario]
    const data = []

// Generate sensitivity data for different discount rates and growth rates
    for (let dr = settings.discountRate - 2; dr <= settings.discountRate + 2; dr += 1) {
      if (dr <= 0) continue

const row = { name: `${dr}%` }

for (let tg = settings.terminalGrowthRate - 1; tg <= settings.terminalGrowthRate + 1; tg += 0.5) {
        if (tg < 0 || tg >= dr) continue

// Calculate DCF with these parameters
        const terminalValue =
          (fcf * Math.pow(1 + settings.growthRate3 / 100, 4) * (1 + tg / 100)) / (dr / 100 - tg / 100)
        const presentTerminalValue = terminalValue / Math.pow(1 + dr / 100, 10)

// Simplified calculation for sensitivity analysis
        const enterpriseValue = presentTerminalValue * 1.3 // Assuming terminal value is ~70% of total value
        const equityValue =
          enterpriseValue - (financialData?.profile?.totalDebt - financialData?.profile?.cashAndCashEquivalents || 0)
        const perShareValue = equityValue / sharesOutstanding

row[`g${tg}`] = perShareValue
      }

data.push(row)
    }

setSensitivityData(data)
  }

// Update scenario settings
  const updateScenarioSetting = (scenario: Scenario, field: keyof ScenarioSettings, value: number) => {
    setScenarios((prev) => ({
      ...prev,
      [scenario]: {
        ...prev[scenario],
        [field]: value,
      },
    }))
  }

// Format currency
  const formatCurrency = (value: number) => {
    return new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }).format(value)
  }

// Format percentage
  const formatPercentage = (value: number) => {
    return `${value.toFixed(1)}%`
  }

// Get valuation assessment
  const getValuationAssessment = (upside: number) => {
    if (upside > 20) return "Significantly Undervalued"
    if (upside > 10) return "Moderately Undervalued"
    if (upside > 0) return "Slightly Undervalued"
    if (upside > -10) return "Fairly Valued"
    return "Overvalued"
  }

// Get assessment color
  const getAssessmentColor = (upside: number) => {
    if (upside > 20) return "text-green-600"
    if (upside > 10) return "text-green-500"
    if (upside > 0) return "text-green-400"
    if (upside > -10) return "text-amber-500"
    return "text-red-500"
  }

// Get scenario badge color
  const getScenarioBadgeColor = (scenario: Scenario) => {
    switch (scenario) {
      case "bull":
        return "bg-green-100 text-green-800 hover:bg-green-200"
      case "base":
        return "bg-blue-100 text-blue-800 hover:bg-blue-200"
      case "bear":
        return "bg-red-100 text-red-800 hover:bg-red-200"
    }
  }

// Get scenario icon
  const getScenarioIcon = (scenario: Scenario) => {
    switch (scenario) {
      case "bull":
        return <ArrowUp className="h-3 w-3" />
      case "base":
        return <Minus className="h-3 w-3" />
      case "bear":
        return <ArrowDown className="h-3 w-3" />
    }
  }

// Export valuation model to CSV
  const exportToCSV = () => {
    // Create headers
    const headers = [
      "Company",
      "Ticker",
      "Current Price",
      "Scenario",
      "DCF Value",
      "DCF Upside",
      "Multiple-Based Value",
      "Multiple-Based Upside",
      "Average Value",
      "Average Upside",
      "FCF ($M)",
      "Growth Rate (1-3Y)",
      "Growth Rate (4-6Y)",
      "Growth Rate (7-10Y)",
      "Terminal Growth Rate",
      "Discount Rate",
      "Selected Multiple",
      "Target Multiple",
      "Peer Average Multiple",
    ]

// Create data rows for each scenario
    const rows = Object.entries(scenarios).map(([scenario, settings]) => {
      const results = valuationResults[scenario as Scenario]

return [
        company.name,
        company.ticker,
        stockPrice,
        scenario,
        results.dcfValue.toFixed(2),
        results.dcfUpside.toFixed(2),
        results.multipleBasedValue.toFixed(2),
        results.multipleUpside.toFixed(2),
        results.averageValue.toFixed(2),
        results.averageUpside.toFixed(2),
        fcf.toFixed(2),
        settings.growthRate1,
        settings.growthRate2,
        settings.growthRate3,
        settings.terminalGrowthRate,
        settings.discountRate,
        selectedMultiple,
        settings.targetMultiple.toFixed(2),
        peerMultiple.toFixed(2),
      ].join(",")
    })

// Create CSV content
    const csvContent = headers.join(",") + "\n" + rows.join("\n")

// Create download link
    const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" })
    const url = URL.createObjectURL(blob)
    const link = document.createElement("a")
    link.setAttribute("href", url)
    link.setAttribute("download", `${company.ticker}_valuation_scenarios.csv`)
    link.style.visibility = "hidden"
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
  }

// Get multiple name for display
  const getMultipleName = (multiple: string) => {
    switch (multiple) {
      case "pe":
        return "P/E Ratio"
      case "evToEbitda":
        return "EV/EBITDA"
      case "evToRevenue":
        return "EV/Revenue"
      case "priceToSales":
        return "Price/Sales"
      case "priceToBook":
        return "Price/Book"
      default:
        return multiple
    }
  }

// Get current multiple value
  const getCurrentMultipleValue = () => {
    if (!financialData) return 0

switch (selectedMultiple) {
      case "pe":
        return financialData.metrics.pe
      case "evToEbitda":
        return financialData.metrics.evToEbitda
      case "evToRevenue":
        return financialData.metrics.evToRevenue
      case "priceToSales":
        return financialData.metrics.priceToSales
      case "priceToBook":
        return financialData.metrics.priceToBook
      default:
        return 0
    }
  }

// Get appropriate multiple range based on selected multiple
  const getMultipleRange = () => {
    switch (selectedMultiple) {
      case "pe":
        return [5, 50]
      case "evToEbitda":
        return [5, 30]
      case "evToRevenue":
        return [1, 20]
      case "priceToSales":
        return [1, 20]
      case "priceToBook":
        return [1, 10]
      default:
        return [1, 30]
    }
  }

// Copy scenario settings to clipboard
  const copyScenarioSettings = () => {
    const settings = scenarios[currentScenario]
    const text =
      `${company.ticker} ${currentScenario.toUpperCase()} CASE SCENARIO\n\n` +
      `Growth Rate (1-3Y): ${settings.growthRate1}%\n` +
      `Growth Rate (4-6Y): ${settings.growthRate2}%\n` +
      `Growth Rate (7-10Y): ${settings.growthRate3}%\n` +
      `Terminal Growth Rate: ${settings.terminalGrowthRate}%\n` +
      `Discount Rate: ${settings.discountRate}%\n` +
      `Target ${getMultipleName(selectedMultiple)}: ${settings.targetMultiple.toFixed(2)}x\n\n` +
      `DCF Value: ${formatCurrency(valuationResults[currentScenario].dcfValue)}\n` +
      `Multiple-Based Value: ${formatCurrency(valuationResults[currentScenario].multipleBasedValue)}\n` +
      `Average Value: ${formatCurrency(valuationResults[currentScenario].averageValue)}\n` +
      `Upside Potential: ${formatPercentage(valuationResults[currentScenario].averageUpside)}\n` +
      `Assessment: ${getValuationAssessment(valuationResults[currentScenario].averageUpside)}`

navigator.clipboard
      .writeText(text)
      .then(() => {
        alert("Scenario settings copied to clipboard!")
      })
      .catch((err) => {
        console.error("Failed to copy text: ", err)
      })
  }

return (
    <Card className="w-full">
      <CardHeader>
        <CardTitle className="flex items-center justify-between">
          <span>
            Valuation Model: {company.name} ({company.ticker})
          </span>
          <Button variant="outline" size="sm" onClick={exportToCSV} className="gap-2">
            <Download className="h-4 w-4" />
            Export Model
          </Button>
        </CardTitle>
        <CardDescription>
          Estimate intrinsic value using DCF and multiple-based valuation methods with scenario analysis
        </CardDescription>
      </CardHeader>
      <CardContent>
        {isLoading ? (
          <div className="flex items-center justify-center h-[400px]">
            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
          </div>
        ) : (
          <>
            {/* Scenario Selection */}
            <div className="mb-6">
              <Label className="mb-2 block">Scenario Analysis</Label>
              <div className="flex flex-wrap gap-2">
                {(Object.keys(scenarios) as Scenario[]).map((scenario) => (
                  <Badge
                    key={scenario}
                    variant="outline"
                    className={`cursor-pointer flex items-center gap-1 capitalize ${
                      currentScenario === scenario ? getScenarioBadgeColor(scenario) : ""
                    }`}
                    onClick={() => setCurrentScenario(scenario)}
                  >
                    {getScenarioIcon(scenario)}
                    {scenario} Case
                  </Badge>
                ))}
              </div>
              <p className="text-sm text-muted-foreground mt-2">{scenarios[currentScenario].description}</p>
            </div>

<Tabs value={activeTab} onValueChange={setActiveTab}>
              <TabsList className="grid grid-cols-4 mb-6">
                <TabsTrigger value="dcf">DCF Valuation</TabsTrigger>
                <TabsTrigger value="multiple">Multiple-Based</TabsTrigger>
                <TabsTrigger value="summary">Valuation Summary</TabsTrigger>
                <TabsTrigger value="scenarios">Scenario Comparison</TabsTrigger>
              </TabsList>

<TabsContent value="dcf" className="space-y-6">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <div className="space-y-4">
                    <div>
                      <Label htmlFor="fcf">Free Cash Flow ($ millions)</Label>
                      <div className="flex items-center gap-2">
                        <Input
                          id="fcf"
                          type="number"
                          value={fcf}
                          onChange={(e) => setFcf(Number.parseFloat(e.target.value) || 0)}
                        />
                        <TooltipProvider>
                          <UITooltip>
                            <TooltipTrigger asChild>
                              <Button variant="ghost" size="icon" className="h-8 w-8">
                                <Info className="h-4 w-4" />
                              </Button>
                            </TooltipTrigger>
                            <TooltipContent>
                              <p>Latest annual free cash flow</p>
                            </TooltipContent>
                          </UITooltip>
                        </TooltipProvider>
                      </div>
                    </div>

<div>
                      <div className="flex items-center justify-between">
                        <Label htmlFor="growth-rate-1">Growth Rate (Years 1-3)</Label>
                        <span className="text-sm">{scenarios[currentScenario].growthRate1}%</span>
                      </div>
                      <Slider
                        id="growth-rate-1"
                        min={0}
                        max={50}
                        step={0.5}
                        value={[scenarios[currentScenario].growthRate1]}
                        onValueChange={(value) => updateScenarioSetting(currentScenario, "growthRate1", value[0])}
                      />
                    </div>

<div>
                      <div className="flex items-center justify-between">
                        <Label htmlFor="growth-rate-2">Growth Rate (Years 4-6)</Label>
                        <span className="text-sm">{scenarios[currentScenario].growthRate2}%</span>
                      </div>
                      <Slider
                        id="growth-rate-2"
                        min={0}
                        max={30}
                        step={0.5}
                        value={[scenarios[currentScenario].growthRate2]}
                        onValueChange={(value) => updateScenarioSetting(currentScenario, "growthRate2", value[0])}
                      />
                    </div>

<div>
                      <div className="flex items-center justify-between">
                        <Label htmlFor="growth-rate-3">Growth Rate (Years 7-10)</Label>
                        <span className="text-sm">{scenarios[currentScenario].growthRate3}%</span>
                      </div>
                      <Slider
                        id="growth-rate-3"
                        min={0}
                        max={20}
                        step={0.5}
                        value={[scenarios[currentScenario].growthRate3]}
                        onValueChange={(value) => updateScenarioSetting(currentScenario, "growthRate3", value[0])}
                      />
                    </div>

<div>
                      <div className="flex items-center justify-between">
                        <Label htmlFor="terminal-growth">Terminal Growth Rate</Label>
                        <span className="text-sm">{scenarios[currentScenario].terminalGrowthRate}%</span>
                      </div>
                      <Slider
                        id="terminal-growth"
                        min={1}
                        max={5}
                        step={0.1}
                        value={[scenarios[currentScenario].terminalGrowthRate]}
                        onValueChange={(value) =>
                          updateScenarioSetting(currentScenario, "terminalGrowthRate", value[0])
                        }
                      />
                    </div>

<div>
                      <div className="flex items-center justify-between">
                        <Label htmlFor="discount-rate">Discount Rate (WACC)</Label>
                        <span className="text-sm">{scenarios[currentScenario].discountRate}%</span>
                      </div>
                      <Slider
                        id="discount-rate"
                        min={5}
                        max={20}
                        step={0.5}
                        value={[scenarios[currentScenario].discountRate]}
                        onValueChange={(value) => updateScenarioSetting(currentScenario, "discountRate", value[0])}
                      />
                    </div>
                  </div>

<div className="space-y-4">
                    <Card className="bg-muted/30">
                      <CardHeader className="pb-2">
                        <CardTitle className="text-lg flex items-center justify-between">
                          <span>DCF Valuation Results</span>
                          <Badge className={getScenarioBadgeColor(currentScenario)}>
                            {getScenarioIcon(currentScenario)} {currentScenario} Case
                          </Badge>
                        </CardTitle>
                      </CardHeader>
                      <CardContent>
                        <div className="space-y-4">
                          <div className="grid grid-cols-2 gap-4">
                            <div>
                              <p className="text-sm text-muted-foreground">Current Price</p>
                              <p className="text-2xl font-bold">{formatCurrency(stockPrice)}</p>
                            </div>
                            <div>
                              <p className="text-sm text-muted-foreground">DCF Value</p>
                              <p className="text-2xl font-bold">
                                {formatCurrency(valuationResults[currentScenario].dcfValue)}
                              </p>
                            </div>
                          </div>

<div>
                            <p className="text-sm text-muted-foreground">Upside Potential</p>
                            <p
                              className={`text-2xl font-bold ${getAssessmentColor(valuationResults[currentScenario].dcfUpside)}`}
                            >
                              {formatPercentage(valuationResults[currentScenario].dcfUpside)}
                            </p>
                          </div>

<div className="pt-2">
                            <p className="text-sm font-medium">Valuation Assessment</p>
                            <p className={`text-sm ${getAssessmentColor(valuationResults[currentScenario].dcfUpside)}`}>
                              {getValuationAssessment(valuationResults[currentScenario].dcfUpside)}
                            </p>
                          </div>
                        </div>
                      </CardContent>
                    </Card>

<div>
                      <h4 className="text-sm font-medium mb-2">Sensitivity Analysis (DCF Value)</h4>
                      <div className="h-[200px]">
                        <ChartContainer
                          config={{
                            [`g${scenarios[currentScenario].terminalGrowthRate - 1}`]: {
                              label: `TGR ${scenarios[currentScenario].terminalGrowthRate - 1}%`,
                              color: "hsl(var(--chart-1))",
                            },
                            [`g${scenarios[currentScenario].terminalGrowthRate - 0.5}`]: {
                              label: `TGR ${scenarios[currentScenario].terminalGrowthRate - 0.5}%`,
                              color: "hsl(var(--chart-2))",
                            },
                            [`g${scenarios[currentScenario].terminalGrowthRate}`]: {
                              label: `TGR ${scenarios[currentScenario].terminalGrowthRate}%`,
                              color: "hsl(var(--chart-3))",
                            },
                            [`g${scenarios[currentScenario].terminalGrowthRate + 0.5}`]: {
                              label: `TGR ${scenarios[currentScenario].terminalGrowthRate + 0.5}%`,
                              color: "hsl(var(--chart-4))",
                            },
                            [`g${scenarios[currentScenario].terminalGrowthRate + 1}`]: {
                              label: `TGR ${scenarios[currentScenario].terminalGrowthRate + 1}%`,
                              color: "hsl(var(--chart-5))",
                            },
                          }}
                        >
                          <ResponsiveContainer width="100%" height="100%">
                            <LineChart data={sensitivityData}>
                              <CartesianGrid strokeDasharray="3 3" />
                              <XAxis
                                dataKey="name"
                                label={{ value: "Discount Rate", position: "insideBottom", offset: -5 }}
                              />
                              <YAxis label={{ value: "Share Price ($)", angle: -90, position: "insideLeft" }} />
                              <ChartTooltip content={<ChartTooltipContent />} />
                              <Legend />
                              <Line
                                type="monotone"
                                dataKey={`g${scenarios[currentScenario].terminalGrowthRate - 1}`}
                                stroke="var(--color-g${scenarios[currentScenario].terminalGrowthRate - 1})"
                              />
                              <Line
                                type="monotone"
                                dataKey={`g${scenarios[currentScenario].terminalGrowthRate - 0.5}`}
                                stroke="var(--color-g${scenarios[currentScenario].terminalGrowthRate - 0.5})"
                              />
                              <Line
                                type="monotone"
                                dataKey={`g${scenarios[currentScenario].terminalGrowthRate}`}
                                stroke="var(--color-g${scenarios[currentScenario].terminalGrowthRate})"
                                strokeWidth={2}
                              />
                              <Line
                                type="monotone"
                                dataKey={`g${scenarios[currentScenario].terminalGrowthRate + 0.5}`}
                                stroke="var(--color-g${scenarios[currentScenario].terminalGrowthRate + 0.5})"
                              />
                              <Line
                                type="monotone"
                                dataKey={`g${scenarios[currentScenario].terminalGrowthRate + 1}`}
                                stroke="var(--color-g${scenarios[currentScenario].terminalGrowthRate + 1})"
                              />
                            </LineChart>
                          </ResponsiveContainer>
                        </ChartContainer>
                      </div>
                    </div>
                  </div>
                </div>
              </TabsContent>

<TabsContent value="multiple" className="space-y-6">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <div className="space-y-4">
                    <div>
                      <Label htmlFor="multiple-select">Valuation Multiple</Label>
                      <select
                        id="multiple-select"
                        className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
                        value={selectedMultiple}
                        onChange={(e) => {
                          setSelectedMultiple(e.target.value)
                          setMultipleValue(getCurrentMultipleValue())
                          calculatePeerMultiples(peerCompanies, company.category)
                        }}
                      >
                        <option value="pe">P/E Ratio</option>
                        <option value="evToEbitda">EV/EBITDA</option>
                        <option value="evToRevenue">EV/Revenue</option>
                        <option value="priceToSales">Price/Sales</option>
                        <option value="priceToBook">Price/Book</option>
                      </select>
                    </div>

<div className="grid grid-cols-2 gap-4">
                      <div>
                        <Label htmlFor="current-multiple">Current {getMultipleName(selectedMultiple)}</Label>
                        <Input
                          id="current-multiple"
                          type="number"
                          value={getCurrentMultipleValue().toFixed(2)}
                          readOnly
                        />
                      </div>
                      <div>
                        <Label htmlFor="peer-multiple">Peer Average {getMultipleName(selectedMultiple)}</Label>
                        <Input id="peer-multiple" type="number" value={peerMultiple.toFixed(2)} readOnly />
                      </div>
                    </div>

<div>
                      <div className="flex items-center justify-between">
                        <Label htmlFor="target-multiple">Target {getMultipleName(selectedMultiple)}</Label>
                        <span className="text-sm">{scenarios[currentScenario].targetMultiple.toFixed(2)}x</span>
                      </div>
                      <Slider
                        id="target-multiple"
                        min={getMultipleRange()[0]}
                        max={getMultipleRange()[1]}
                        step={0.1}
                        value={[scenarios[currentScenario].targetMultiple]}
                        onValueChange={(value) => updateScenarioSetting(currentScenario, "targetMultiple", value[0])}
                      />
                    </div>

<div className="pt-4">
                      <h4 className="text-sm font-medium mb-2">Multiple Comparison</h4>
                      <div className="h-[200px]">
                        <ResponsiveContainer width="100%" height="100%">
                          <LineChart
                            data={[
                              { name: "Current", value: getCurrentMultipleValue() },
                              { name: "Target", value: scenarios[currentScenario].targetMultiple },
                              { name: "Peer Avg", value: peerMultiple },
                            ]}
                          >
                            <CartesianGrid strokeDasharray="3 3" />
                            <XAxis dataKey="name" />
                            <YAxis domain={getMultipleRange()} />
                            <Tooltip
                              formatter={(value) => [`${value.toFixed(2)}x`, getMultipleName(selectedMultiple)]}
                            />
                            <Legend />
                            <Line type="monotone" dataKey="value" stroke="#8884d8" />
                          </LineChart>
                        </ResponsiveContainer>
                      </div>
                    </div>
                  </div>

<div className="space-y-4">
                    <Card className="bg-muted/30">
                      <CardHeader className="pb-2">
                        <CardTitle className="text-lg flex items-center justify-between">
                          <span>Multiple-Based Valuation Results</span>
                          <Badge className={getScenarioBadgeColor(currentScenario)}>
                            {getScenarioIcon(currentScenario)} {currentScenario} Case
                          </Badge>
                        </CardTitle>
                      </CardHeader>
                      <CardContent>
                        <div className="space-y-4">
                          <div className="grid grid-cols-2 gap-4">
                            <div>
                              <p className="text-sm text-muted-foreground">Current Price</p>
                              <p className="text-2xl font-bold">{formatCurrency(stockPrice)}</p>
                            </div>
                            <div>
                              <p className="text-sm text-muted-foreground">Target Price</p>
                              <p className="text-2xl font-bold">
                                {formatCurrency(valuationResults[currentScenario].multipleBasedValue)}
                              </p>
                            </div>
                          </div>

<div>
                            <p className="text-sm text-muted-foreground">Upside Potential</p>
                            <p
                              className={`text-2xl font-bold ${getAssessmentColor(valuationResults[currentScenario].multipleUpside)}`}
                            >
                              {formatPercentage(valuationResults[currentScenario].multipleUpside)}
                            </p>
                          </div>

<div className="pt-2">
                            <p className="text-sm font-medium">Valuation Assessment</p>
                            <p
                              className={`text-sm ${getAssessmentColor(valuationResults[currentScenario].multipleUpside)}`}
                            >
                              {getValuationAssessment(valuationResults[currentScenario].multipleUpside)}
                            </p>
                          </div>
                        </div>
                      </CardContent>
                    </Card>

<div>
                      <h4 className="text-sm font-medium mb-2">Valuation Basis</h4>
                      <Table>
                        <TableHeader>
                          <TableRow>
                            <TableHead>Metric</TableHead>
                            <TableHead className="text-right">Value</TableHead>
                          </TableRow>
                        </TableHeader>
                        <TableBody>
                          {selectedMultiple === "pe" && (
                            <TableRow>
                              <TableCell>EPS (TTM)</TableCell>
                              <TableCell className="text-right">
                                {formatCurrency(financialData?.metrics?.eps || 0)}
                              </TableCell>
                            </TableRow>
                          )}
                          {selectedMultiple === "evToEbitda" && (
                            <TableRow>
                              <TableCell>EBITDA (TTM)</TableCell>
                              <TableCell className="text-right">
                                {formatCurrency((financialData?.metrics?.ebitda || 0) / 1000000)}M
                              </TableCell>
                            </TableRow>
                          )}
                          {selectedMultiple === "evToRevenue" && (
                            <TableRow>
                              <TableCell>Revenue (TTM)</TableCell>
                              <TableCell className="text-right">
                                {formatCurrency((financialData?.metrics?.revenue || 0) / 1000000)}M
                              </TableCell>
                            </TableRow>
                          )}
                          {selectedMultiple === "priceToSales" && (
                            <TableRow>
                              <TableCell>Sales per Share (TTM)</TableCell>
                              <TableCell className="text-right">
                                {formatCurrency((financialData?.metrics?.revenue || 0) / sharesOutstanding)}
                              </TableCell>
                            </TableRow>
                          )}
                          {selectedMultiple === "priceToBook" && (
                            <TableRow>
                              <TableCell>Book Value per Share</TableCell>
                              <TableCell className="text-right">
                                {formatCurrency(financialData?.profile?.bookValuePerShare || 0)}
                              </TableCell>
                            </TableRow>
                          )}
                          <TableRow>
                            <TableCell>Target Multiple</TableCell>
                            <TableCell className="text-right">
                              {scenarios[currentScenario].targetMultiple.toFixed(2)}x
                            </TableCell>
                          </TableRow>
                          <TableRow>
                            <TableCell>Peer Average Multiple</TableCell>
                            <TableCell className="text-right">{peerMultiple.toFixed(2)}x</TableCell>
                          </TableRow>
                        </TableBody>
                      </Table>
                    </div>
                  </div>
                </div>
              </TabsContent>

<TabsContent value="summary" className="space-y-6">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <Card className="bg-muted/30">
                    <CardHeader className="pb-2">
                      <CardTitle className="text-lg flex items-center justify-between">
                        <span>Valuation Summary</span>
                        <Badge className={getScenarioBadgeColor(currentScenario)}>
                          {getScenarioIcon(currentScenario)} {currentScenario} Case
                        </Badge>
                      </CardTitle>
                    </CardHeader>
                    <CardContent>
                      <div className="space-y-4">
                        <div className="grid grid-cols-2 gap-4">
                          <div>
                            <p className="text-sm text-muted-foreground">Current Price</p>
                            <p className="text-2xl font-bold">{formatCurrency(stockPrice)}</p>
                          </div>
                          <div>
                            <p className="text-sm text-muted-foreground">Average Target Price</p>
                            <p className="text-2xl font-bold">
                              {formatCurrency(valuationResults[currentScenario].averageValue)}
                            </p>
                          </div>
                        </div>

<div>
                          <p className="text-sm text-muted-foreground">Average Upside Potential</p>
                          <p
                            className={`text-2xl font-bold ${getAssessmentColor(valuationResults[currentScenario].averageUpside)}`}
                          >
                            {formatPercentage(valuationResults[currentScenario].averageUpside)}
                          </p>
                        </div>

<div className="pt-2">
                          <p className="text-sm font-medium">Overall Assessment</p>
                          <p
                            className={`text-sm ${getAssessmentColor(valuationResults[currentScenario].averageUpside)}`}
                          >
                            {getValuationAssessment(valuationResults[currentScenario].averageUpside)}
                          </p>
                        </div>
                      </div>
                    </CardContent>
                  </Card>

<div>
                    <h4 className="text-sm font-medium mb-2">Valuation Comparison</h4>
                    <div className="h-[200px]">
                      <ResponsiveContainer width="100%" height="100%">
                        <LineChart
                          data={[
                            { name: "Current", value: stockPrice },
                            { name: "DCF", value: valuationResults[currentScenario].dcfValue },
                            { name: "Multiple", value: valuationResults[currentScenario].multipleBasedValue },
                            { name: "Average", value: valuationResults[currentScenario].averageValue },
                          ]}
                        >
                          <CartesianGrid strokeDasharray="3 3" />
                          <XAxis dataKey="name" />
                          <YAxis
                            domain={[
                              0,
                              Math.max(
                                stockPrice,
                                valuationResults[currentScenario].dcfValue,
                                valuationResults[currentScenario].multipleBasedValue,
                              ) * 1.2,
                            ]}
                          />
                          <Tooltip formatter={(value) => [formatCurrency(value), "Price"]} />
                          <Legend />
                          <Line type="monotone" dataKey="value" stroke="#8884d8" />
                        </LineChart>
                      </ResponsiveContainer>
                    </div>
                  </div>
                </div>

<Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>Valuation Method</TableHead>
                      <TableHead className="text-right">Target Price</TableHead>
                      <TableHead className="text-right">Upside</TableHead>
                      <TableHead>Assessment</TableHead>
                      <TableHead>Key Assumptions</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    <TableRow>
                      <TableCell>DCF Valuation</TableCell>
                      <TableCell className="text-right">
                        {formatCurrency(valuationResults[currentScenario].dcfValue)}
                      </TableCell>
                      <TableCell
                        className={`text-right ${getAssessmentColor(valuationResults[currentScenario].dcfUpside)}`}
                      >
                        {formatPercentage(valuationResults[currentScenario].dcfUpside)}
                      </TableCell>
                      <TableCell>{getValuationAssessment(valuationResults[currentScenario].dcfUpside)}</TableCell>
                      <TableCell>
                        <span className="text-xs">
                          FCF: ${fcf}M, Growth: {scenarios[currentScenario].growthRate1}%/
                          {scenarios[currentScenario].growthRate2}%/{scenarios[currentScenario].growthRate3}%, TGR:{" "}
                          {scenarios[currentScenario].terminalGrowthRate}%, WACC:{" "}
                          {scenarios[currentScenario].discountRate}%
                        </span>
                      </TableCell>
                    </TableRow>
                    <TableRow>
                      <TableCell>{getMultipleName(selectedMultiple)}</TableCell>
                      <TableCell className="text-right">
                        {formatCurrency(valuationResults[currentScenario].multipleBasedValue)}
                      </TableCell>
                      <TableCell
                        className={`text-right ${getAssessmentColor(valuationResults[currentScenario].multipleUpside)}`}
                      >
                        {formatPercentage(valuationResults[currentScenario].multipleUpside)}
                      </TableCell>
                      <TableCell>{getValuationAssessment(valuationResults[currentScenario].multipleUpside)}</TableCell>
                      <TableCell>
                        <span className="text-xs">
                          Current: {getCurrentMultipleValue().toFixed(2)}x, Target:{" "}
                          {scenarios[currentScenario].targetMultiple.toFixed(2)}x, Peer Avg: {peerMultiple.toFixed(2)}x
                        </span>
                      </TableCell>
                    </TableRow>
                    <TableRow className="bg-muted/30 font-medium">
                      <TableCell>Average</TableCell>
                      <TableCell className="text-right">
                        {formatCurrency(valuationResults[currentScenario].averageValue)}
                      </TableCell>
                      <TableCell
                        className={`text-right ${getAssessmentColor(valuationResults[currentScenario].averageUpside)}`}
                      >
                        {formatPercentage(valuationResults[currentScenario].averageUpside)}
                      </TableCell>
                      <TableCell>{getValuationAssessment(valuationResults[currentScenario].averageUpside)}</TableCell>
                      <TableCell>Combined DCF and Multiple-based methods</TableCell>
                    </TableRow>
                  </TableBody>
                </Table>
              </TabsContent>

<TabsContent value="scenarios" className="space-y-6">
                <div className="grid grid-cols-1 gap-6">
                  <Card>
                    <CardHeader className="pb-2">
                      <CardTitle className="text-lg">Scenario Comparison</CardTitle>
                      <CardDescription>
                        Compare valuation results across bull, base, and bear case scenarios
                      </CardDescription>
                    </CardHeader>
                    <CardContent>
                      <div className="space-y-6">
                        <div className="h-[300px]">
                          <ResponsiveContainer width="100%" height="100%">
                            <BarChart
                              data={[
                                {
                                  name: "Bull Case",
                                  dcf: valuationResults.bull.dcfValue,
                                  multiple: valuationResults.bull.multipleBasedValue,
                                  average: valuationResults.bull.averageValue,
                                  currentPrice: stockPrice,
                                },
                                {
                                  name: "Base Case",
                                  dcf: valuationResults.base.dcfValue,
                                  multiple: valuationResults.base.multipleBasedValue,
                                  average: valuationResults.base.averageValue,
                                  currentPrice: stockPrice,
                                },
                                {
                                  name: "Bear Case",
                                  dcf: valuationResults.bear.dcfValue,
                                  multiple: valuationResults.bear.multipleBasedValue,
                                  average: valuationResults.bear.averageValue,
                                  currentPrice: stockPrice,
                                },
                              ]}
                              margin={{ top: 20, right: 30, left: 20, bottom: 5 }}
                            >
                              <CartesianGrid strokeDasharray="3 3" />
                              <XAxis dataKey="name" />
                              <YAxis label={{ value: "Share Price ($)", angle: -90, position: "insideLeft" }} />
                              <Tooltip formatter={(value) => [formatCurrency(value), ""]} />
                              <Legend />
                              <Bar dataKey="dcf" name="DCF Value" fill="#8884d8" />
                              <Bar dataKey="multiple" name="Multiple-Based Value" fill="#82ca9d" />
                              <Bar dataKey="average" name="Average Value" fill="#ffc658" />
                              <Bar dataKey="currentPrice" name="Current Price" fill="#ff8042" />
                            </BarChart>
                          </ResponsiveContainer>
                        </div>

<Table>
                          <TableHeader>
                            <TableRow>
                              <TableHead>Scenario</TableHead>
                              <TableHead>DCF Value</TableHead>
                              <TableHead>Multiple Value</TableHead>
                              <TableHead>Average Value</TableHead>
                              <TableHead>Upside</TableHead>
                              <TableHead>Assessment</TableHead>
                            </TableRow>
                          </TableHeader>
                          <TableBody>
                            <TableRow>
                              <TableCell>
                                <div className="flex items-center gap-1">
                                  <ArrowUp className="h-4 w-4 text-green-600" />
                                  <span className="font-medium">Bull Case</span>
                                </div>
                              </TableCell>
                              <TableCell>{formatCurrency(valuationResults.bull.dcfValue)}</TableCell>
                              <TableCell>{formatCurrency(valuationResults.bull.multipleBasedValue)}</TableCell>
                              <TableCell className="font-medium">
                                {formatCurrency(valuationResults.bull.averageValue)}
                              </TableCell>
                              <TableCell className={getAssessmentColor(valuationResults.bull.averageUpside)}>
                                {formatPercentage(valuationResults.bull.averageUpside)}
                              </TableCell>
                              <TableCell>{getValuationAssessment(valuationResults.bull.averageUpside)}</TableCell>
                            </TableRow>
                            <TableRow>
                              <TableCell>
                                <div className="flex items-center gap-1">
                                  <Minus className="h-4 w-4 text-blue-600" />
                                  <span className="font-medium">Base Case</span>
                                </div>
                              </TableCell>
                              <TableCell>{formatCurrency(valuationResults.base.dcfValue)}</TableCell>
                              <TableCell>{formatCurrency(valuationResults.base.multipleBasedValue)}</TableCell>
                              <TableCell className="font-medium">
                                {formatCurrency(valuationResults.base.averageValue)}
                              </TableCell>
                              <TableCell className={getAssessmentColor(valuationResults.base.averageUpside)}>
                                {formatPercentage(valuationResults.base.averageUpside)}
                              </TableCell>
                              <TableCell>{getValuationAssessment(valuationResults.base.averageUpside)}</TableCell>
                            </TableRow>
                            <TableRow>
                              <TableCell>
                                <div className="flex items-center gap-1">
                                  <ArrowDown className="h-4 w-4 text-red-600" />
                                  <span className="font-medium">Bear Case</span>
                                </div>
                              </TableCell>
                              <TableCell>{formatCurrency(valuationResults.bear.dcfValue)}</TableCell>
                              <TableCell>{formatCurrency(valuationResults.bear.multipleBasedValue)}</TableCell>
                              <TableCell className="font-medium">
                                {formatCurrency(valuationResults.bear.averageValue)}
                              </TableCell>
                              <TableCell className={getAssessmentColor(valuationResults.bear.averageUpside)}>
                                {formatPercentage(valuationResults.bear.averageUpside)}
                              </TableCell>
                              <TableCell>{getValuationAssessment(valuationResults.bear.averageUpside)}</TableCell>
                            </TableRow>
                          </TableBody>
                        </Table>

<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                          <Card className="bg-green-50">
                            <CardHeader className="pb-2">
                              <CardTitle className="text-sm flex items-center gap-1">
                                <ArrowUp className="h-4 w-4 text-green-600" />
                                Bull Case Assumptions
                              </CardTitle>
                            </CardHeader>
                            <CardContent className="text-xs space-y-1">
                              <p>
                                Growth (1-3Y): <span className="font-medium">{scenarios.bull.growthRate1}%</span>
                              </p>
                              <p>
                                Growth (4-6Y): <span className="font-medium">{scenarios.bull.growthRate2}%</span>
                              </p>
                              <p>
                                Growth (7-10Y): <span className="font-medium">{scenarios.bull.growthRate3}%</span>
                              </p>
                              <p>
                                Terminal Growth:{" "}
                                <span className="font-medium">{scenarios.bull.terminalGrowthRate}%</span>
                              </p>
                              <p>
                                Discount Rate: <span className="font-medium">{scenarios.bull.discountRate}%</span>
                              </p>
                              <p>
                                Target Multiple:{" "}
                                <span className="font-medium">{scenarios.bull.targetMultiple.toFixed(2)}x</span>
                              </p>
                            </CardContent>
                          </Card>

<Card className="bg-blue-50">
                            <CardHeader className="pb-2">
                              <CardTitle className="text-sm flex items-center gap-1">
                                <Minus className="h-4 w-4 text-blue-600" />
                                Base Case Assumptions
                              </CardTitle>
                            </CardHeader>
                            <CardContent className="text-xs space-y-1">
                              <p>
                                Growth (1-3Y): <span className="font-medium">{scenarios.base.growthRate1}%</span>
                              </p>
                              <p>
                                Growth (4-6Y): <span className="font-medium">{scenarios.base.growthRate2}%</span>
                              </p>
                              <p>
                                Growth (7-10Y): <span className="font-medium">{scenarios.base.growthRate3}%</span>
                              </p>
                              <p>
                                Terminal Growth:{" "}
                                <span className="font-medium">{scenarios.base.terminalGrowthRate}%</span>
                              </p>
                              <p>
                                Discount Rate: <span className="font-medium">{scenarios.base.discountRate}%</span>
                              </p>
                              <p>
                                Target Multiple:{" "}
                                <span className="font-medium">{scenarios.base.targetMultiple.toFixed(2)}x</span>
                              </p>
                            </CardContent>
                          </Card>

<Card className="bg-red-50">
                            <CardHeader className="pb-2">
                              <CardTitle className="text-sm flex items-center gap-1">
                                <ArrowDown className="h-4 w-4 text-red-600" />
                                Bear Case Assumptions
                              </CardTitle>
                            </CardHeader>
                            <CardContent className="text-xs space-y-1">
                              <p>
                                Growth (1-3Y): <span className="font-medium">{scenarios.bear.growthRate1}%</span>
                              </p>
                              <p>
                                Growth (4-6Y): <span className="font-medium">{scenarios.bear.growthRate2}%</span>
                              </p>
                              <p>
                                Growth (7-10Y): <span className="font-medium">{scenarios.bear.growthRate3}%</span>
                              </p>
                              <p>
                                Terminal Growth:{" "}
                                <span className="font-medium">{scenarios.bear.terminalGrowthRate}%</span>
                              </p>
                              <p>
                                Discount Rate: <span className="font-medium">{scenarios.bear.discountRate}%</span>
                              </p>
                              <p>
                                Target Multiple:{" "}
                                <span className="font-medium">{scenarios.bear.targetMultiple.toFixed(2)}x</span>
                              </p>
                            </CardContent>
                          </Card>
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                </div>
              </TabsContent>
            </Tabs>
          </>
        )}
      </CardContent>
      <CardFooter className="flex justify-between">
        <Button variant="outline" size="sm" className="gap-2" onClick={() => window.location.reload()}>
          <RefreshCw className="h-4 w-4" />
          Reset Model
        </Button>
        <div className="flex gap-2">
          <Button variant="outline" size="sm" className="gap-2" onClick={copyScenarioSettings}>
            <Copy className="h-4 w-4" />
            Copy {currentScenario} Case
          </Button>
          <Button size="sm" className="gap-2">
            <Calculator className="h-4 w-4" />
            Save Valuation
          </Button>
        </div>
      </CardFooter>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/investment-primer/create-template-dialog.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"

// Reusing the types from template-editor.tsx
import type { PrimerTemplate } from "./template-editor"

interface CreateTemplateDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  onCreateTemplate: (template: Omit<PrimerTemplate, "id" | "sections" | "createdAt" | "updatedAt">) => void
}

export function CreateTemplateDialog({ open, onOpenChange, onCreateTemplate }: CreateTemplateDialogProps) {
  const [name, setName] = useState("")
  const [description, setDescription] = useState("")
  const [industry, setIndustry] = useState("financial-software")

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()

onCreateTemplate({
      name,
      description,
      industry,
    })

// Reset form
    setName("")
    setDescription("")
    setIndustry("financial-software")
    onOpenChange(false)
  }

return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-[500px]">
        <form onSubmit={handleSubmit}>
          <DialogHeader>
            <DialogTitle>Create New Template</DialogTitle>
            <DialogDescription>Create a new primer template for your industry research.</DialogDescription>
          </DialogHeader>

<div className="space-y-4 py-4">
            <div className="space-y-2">
              <Label htmlFor="name">Template Name</Label>
              <Input
                id="name"
                value={name}
                onChange={(e) => setName(e.target.value)}
                placeholder="e.g., Financial Software Industry Primer"
                required
              />
            </div>

<div className="space-y-2">
              <Label htmlFor="description">Description</Label>
              <Textarea
                id="description"
                value={description}
                onChange={(e) => setDescription(e.target.value)}
                placeholder="Describe the purpose and scope of this template"
                rows={3}
              />
            </div>

<div className="space-y-2">
              <Label htmlFor="industry">Industry</Label>
              <Select value={industry} onValueChange={setIndustry}>
                <SelectTrigger>
                  <SelectValue placeholder="Select industry" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="financial-software">Financial Software</SelectItem>
                  <SelectItem value="healthcare">Healthcare</SelectItem>
                  <SelectItem value="retail">Retail</SelectItem>
                  <SelectItem value="manufacturing">Manufacturing</SelectItem>
                  <SelectItem value="technology">Technology</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>

<DialogFooter>
            <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
              Cancel
            </Button>
            <Button type="submit">Create Template</Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescriptreact:file="components/investment-primer/financial-services-overview.tsx" isMerged="true"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, PieChart, Pie, Cell } from "recharts"
import type { CompanyComparison } from "@/types/investment-primer"

interface FinancialServicesOverviewProps {
  companies: CompanyComparison[]
}

export function FinancialServicesOverview({ companies }: FinancialServicesOverviewProps) {
  if (!companies.length) {
    return <div>No company data available</div>
  }

// Group companies by category
  const categoryCounts = companies.reduce(
    (acc, company) => {
      acc[company.category] = (acc[company.category] || 0) + 1
      return acc
    },
    {} as Record<string, number>,
  )

const pieData = Object.entries(categoryCounts).map(([name, value]) => ({ name, value }))
  const COLORS = ["#0088FE", "#00C49F", "#FFBB28", "#FF8042", "#8884D8"]

// Calculate market cap by category
  const marketCapByCategory = companies.reduce(
    (acc, company) => {
      const marketCap = Number(company.metrics.marketCap) || 0
      acc[company.category] = (acc[company.category] || 0) + marketCap
      return acc
    },
    {} as Record<string, number>,
  )

const marketCapData = Object.entries(marketCapByCategory).map(([name, value]) => ({
    name,
    value: value / 1e9, // Convert to billions
  }))

// Calculate average metrics by category
  const metricsByCategory: Record<string, Record<string, number[]>> = {}

companies.forEach((company) => {
    if (!metricsByCategory[company.category]) {
      metricsByCategory[company.category] = {}
    }

Object.entries(company.metrics).forEach(([metric, value]) => {
      if (typeof value === "number") {
        if (!metricsByCategory[company.category][metric]) {
          metricsByCategory[company.category][metric] = []
        }
        metricsByCategory[company.category][metric].push(value)
      }
    })
  })

const avgMetricsByCategory: Record<string, Record<string, number>> = {}

Object.entries(metricsByCategory).forEach(([category, metrics]) => {
    avgMetricsByCategory[category] = {}
    Object.entries(metrics).forEach(([metric, values]) => {
      avgMetricsByCategory[category][metric] = values.reduce((sum, val) => sum + val, 0) / values.length
    })
  })

const growthData = Object.entries(avgMetricsByCategory).map(([name, metrics]) => ({
    name,
    value: metrics.revenueGrowth || 0,
  }))

const marginData = Object.entries(avgMetricsByCategory).map(([name, metrics]) => ({
    name,
    grossMargin: metrics.grossMargin || 0,
    operatingMargin: metrics.operatingMargin || 0,
    netMargin: metrics.netMargin || 0,
  }))

return (
    <div className="space-y-6">
      <Card>
        <CardHeader>
          <CardTitle>Financial Services Software Industry Overview</CardTitle>
          <CardDescription>
            Analysis of key metrics across different segments of the financial services software industry
          </CardDescription>
        </CardHeader>
        <CardContent>
          <Tabs defaultValue="overview">
            <TabsList className="mb-4">
              <TabsTrigger value="overview">Industry Overview</TabsTrigger>
              <TabsTrigger value="growth">Growth Metrics</TabsTrigger>
              <TabsTrigger value="profitability">Profitability</TabsTrigger>
            </TabsList>

<TabsContent value="overview" className="space-y-6">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                  <h3 className="text-lg font-medium mb-3">Companies by Category</h3>
                  <div className="h-[300px]">
                    <ResponsiveContainer width="100%" height="100%">
                      <PieChart>
                        <Pie
                          data={pieData}
                          cx="50%"
                          cy="50%"
                          labelLine={true}
                          label={({ name, percent }) => `${name}: ${(percent * 100).toFixed(0)}%`}
                          outerRadius={100}
                          fill="#8884d8"
                          dataKey="value"
                        >
                          {pieData.map((entry, index) => (
                            <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                          ))}
                        </Pie>
                        <Tooltip formatter={(value) => [`${value} companies`, "Count"]} />
                      </PieChart>
                    </ResponsiveContainer>
                  </div>
                </div>

<div>
                  <h3 className="text-lg font-medium mb-3">Market Cap by Category ($ Billions)</h3>
                  <div className="h-[300px]">
                    <ResponsiveContainer width="100%" height="100%">
                      <BarChart data={marketCapData}>
                        <CartesianGrid strokeDasharray="3 3" />
                        <XAxis dataKey="name" />
                        <YAxis />
                        <Tooltip formatter={(value) => [`$${value.toFixed(1)}B`, "Market Cap"]} />
                        <Bar dataKey="value" fill="#8884d8" />
                      </BarChart>
                    </ResponsiveContainer>
                  </div>
                </div>
              </div>

<div className="mt-6">
                <h3 className="text-lg font-medium mb-3">Industry Segment Analysis</h3>
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                  {Object.entries(avgMetricsByCategory).map(([category, metrics]) => (
                    <Card key={category}>
                      <CardHeader className="pb-2">
                        <CardTitle className="text-base">{category}</CardTitle>
                        <CardDescription>{categoryCounts[category]} companies</CardDescription>
                      </CardHeader>
                      <CardContent>
                        <dl className="space-y-2">
                          <div className="flex justify-between">
                            <dt className="text-sm text-muted-foreground">Avg. Revenue Growth</dt>
                            <dd className="text-sm font-medium">{metrics.revenueGrowth?.toFixed(1)}%</dd>
                          </div>
                          <div className="flex justify-between">
                            <dt className="text-sm text-muted-foreground">Avg. Gross Margin</dt>
                            <dd className="text-sm font-medium">{metrics.grossMargin?.toFixed(1)}%</dd>
                          </div>
                          <div className="flex justify-between">
                            <dt className="text-sm text-muted-foreground">Avg. EV/Revenue</dt>
                            <dd className="text-sm font-medium">{metrics.evToRevenue?.toFixed(1)}x</dd>
                          </div>
                          <div className="flex justify-between">
                            <dt className="text-sm text-muted-foreground">Avg. Rule of 40</dt>
                            <dd className="text-sm font-medium">{metrics.ruleOf40?.toFixed(1)}</dd>
                          </div>
                        </dl>
                      </CardContent>
                    </Card>
                  ))}
                </div>
              </div>
            </TabsContent>

<TabsContent value="growth">
              <div className="space-y-6">
                <div>
                  <h3 className="text-lg font-medium mb-3">Average Revenue Growth by Category</h3>
                  <div className="h-[400px]">
                    <ResponsiveContainer width="100%" height="100%">
                      <BarChart data={growthData}>
                        <CartesianGrid strokeDasharray="3 3" />
                        <XAxis dataKey="name" />
                        <YAxis />
                        <Tooltip formatter={(value) => [`${value.toFixed(1)}%`, "Revenue Growth"]} />
                        <Bar dataKey="value" fill="#4f46e5" />
                      </BarChart>
                    </ResponsiveContainer>
                  </div>
                </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <Card>
                    <CardHeader>
                      <CardTitle className="text-base">Fastest Growing Companies</CardTitle>
                      <CardDescription>Top 5 companies by revenue growth</CardDescription>
                    </CardHeader>
                    <CardContent>
                      <ul className="space-y-2">
                        {companies
                          .sort((a, b) => (b.metrics.revenueGrowth || 0) - (a.metrics.revenueGrowth || 0))
                          .slice(0, 5)
                          .map((company) => (
                            <li key={company.id} className="flex justify-between items-center">
                              <span>
                                {company.name} ({company.ticker})
                              </span>
                              <span className="font-medium text-green-600">{company.metrics.revenueGrowth}%</span>
                            </li>
                          ))}
                      </ul>
                    </CardContent>
                  </Card>

<Card>
                    <CardHeader>
                      <CardTitle className="text-base">Rule of 40 Leaders</CardTitle>
                      <CardDescription>Top 5 companies by Rule of 40 score</CardDescription>
                    </CardHeader>
                    <CardContent>
                      <ul className="space-y-2">
                        {companies
                          .sort((a, b) => (b.metrics.ruleOf40 || 0) - (a.metrics.ruleOf40 || 0))
                          .slice(0, 5)
                          .map((company) => (
                            <li key={company.id} className="flex justify-between items-center">
                              <span>
                                {company.name} ({company.ticker})
                              </span>
                              <span className="font-medium">{company.metrics.ruleOf40?.toFixed(1)}</span>
                            </li>
                          ))}
                      </ul>
                    </CardContent>
                  </Card>
                </div>
              </div>
            </TabsContent>

<TabsContent value="profitability">
              <div className="space-y-6">
                <div>
                  <h3 className="text-lg font-medium mb-3">Margin Comparison by Category</h3>
                  <div className="h-[400px]">
                    <ResponsiveContainer width="100%" height="100%">
                      <BarChart data={marginData}>
                        <CartesianGrid strokeDasharray="3 3" />
                        <XAxis dataKey="name" />
                        <YAxis />
                        <Tooltip formatter={(value) => [`${value.toFixed(1)}%`, ""]} />
                        <Bar dataKey="grossMargin" name="Gross Margin" fill="#4f46e5" />
                        <Bar dataKey="operatingMargin" name="Operating Margin" fill="#10b981" />
                        <Bar dataKey="netMargin" name="Net Margin" fill="#f59e0b" />
                      </BarChart>
                    </ResponsiveContainer>
                  </div>
                </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <Card>
                    <CardHeader>
                      <CardTitle className="text-base">Highest Gross Margin Companies</CardTitle>
                      <CardDescription>Top 5 companies by gross margin</CardDescription>
                    </CardHeader>
                    <CardContent>
                      <ul className="space-y-2">
                        {companies
                          .sort((a, b) => (b.metrics.grossMargin || 0) - (a.metrics.grossMargin || 0))
                          .slice(0, 5)
                          .map((company) => (
                            <li key={company.id} className="flex justify-between items-center">
                              <span>
                                {company.name} ({company.ticker})
                              </span>
                              <span className="font-medium">{company.metrics.grossMargin}%</span>
                            </li>
                          ))}
                      </ul>
                    </CardContent>
                  </Card>

<Card>
                    <CardHeader>
                      <CardTitle className="text-base">Highest Operating Margin Companies</CardTitle>
                      <CardDescription>Top 5 companies by operating margin</CardDescription>
                    </CardHeader>
                    <CardContent>
                      <ul className="space-y-2">
                        {companies
                          .sort((a, b) => (b.metrics.operatingMargin || 0) - (a.metrics.operatingMargin || 0))
                          .slice(0, 5)
                          .map((company) => (
                            <li key={company.id} className="flex justify-between items-center">
                              <span>
                                {company.name} ({company.ticker})
                              </span>
                              <span className="font-medium">{company.metrics.operatingMargin}%</span>
                            </li>
                          ))}
                      </ul>
                    </CardContent>
                  </Card>
                </div>
              </div>
            </TabsContent>
          </Tabs>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/investment-primer/industry-analysis.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { ScrollArea } from "@/components/ui/scroll-area"
import { CompanyListCard } from "../company-analysis/company-list-card"
import type { CompanyComparison } from "@/types/investment-primer"

interface IndustryAnalysisProps {
  companies: CompanyComparison[]
}

export function IndustryAnalysis({ companies }: IndustryAnalysisProps) {
  const [activeTab, setActiveTab] = useState("brokerage")

// Filter companies by category
  const brokerageCompanies = companies.filter((company) => company.category === "Brokerage")
  const exchangeCompanies = companies.filter((company) => company.category === "Exchange")
  const dataCompanies = companies.filter((company) => company.category === "Financial Data")
  const operationsCompanies = companies.filter((company) => company.category === "Operations")

return (
    <div className="space-y-6">
      <div className="flex flex-col space-y-2">
        <h2 className="text-2xl font-bold tracking-tight">Industry Analysis</h2>
        <p className="text-muted-foreground">In-depth analysis of key sectors within the financial software industry</p>
      </div>

<Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-4">
        <TabsList className="grid grid-cols-2 md:grid-cols-4 gap-2">
          <TabsTrigger value="brokerage">Brokerage</TabsTrigger>
          <TabsTrigger value="exchange">Exchange</TabsTrigger>
          <TabsTrigger value="data">Financial Data</TabsTrigger>
          <TabsTrigger value="operations">Operations</TabsTrigger>
        </TabsList>

{/* Brokerage Sector Analysis */}
        <TabsContent value="brokerage" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>Brokerage Sector Analysis</CardTitle>
              <CardDescription>Competitive landscape, regulatory environment, and key growth drivers</CardDescription>
            </CardHeader>
            <CardContent>
              <ScrollArea className="h-[500px] pr-4">
                <div className="space-y-6">
                  <section>
                    <h3 className="text-lg font-semibold mb-2">Competitive Landscape</h3>
                    <p className="mb-4">
                      The brokerage sector has undergone significant transformation in recent years, with traditional
                      commission-based models giving way to commission-free trading platforms. This shift has been led
                      by disruptors like Robinhood, forcing established players such as Charles Schwab and Interactive
                      Brokers to adapt their business models.
                    </p>
                    <p className="mb-4">Key competitive factors include:</p>
                    <ul className="list-disc pl-6 space-y-2">
                      <li>
                        <span className="font-medium">Fee structures:</span> The race to zero commissions has shifted
                        revenue models toward payment for order flow, margin lending, and premium subscriptions.
                      </li>
                      <li>
                        <span className="font-medium">User experience:</span> Mobile-first platforms with intuitive
                        interfaces have become essential, with Robinhood setting new standards for simplicity.
                      </li>
                      <li>
                        <span className="font-medium">Product breadth:</span> Established players like Interactive
                        Brokers maintain an edge through comprehensive offerings including international markets,
                        advanced order types, and institutional-grade tools.
                      </li>
                      <li>
                        <span className="font-medium">Customer acquisition:</span> High CAC has led to aggressive
                        marketing strategies, including referral programs and promotional offers.
                      </li>
                    </ul>
                  </section>

<section>
                    <h3 className="text-lg font-semibold mb-2">Regulatory Environment</h3>
                    <p className="mb-4">
                      Brokerages operate in a highly regulated environment, with oversight from multiple agencies:
                    </p>
                    <ul className="list-disc pl-6 space-y-2">
                      <li>
                        <span className="font-medium">SEC oversight:</span> Focuses on market integrity, disclosure
                        requirements, and investor protection.
                      </li>
                      <li>
                        <span className="font-medium">FINRA compliance:</span> Self-regulatory organization that
                        enforces rules governing broker-dealers.
                      </li>
                      <li>
                        <span className="font-medium">Payment for order flow scrutiny:</span> Increasing regulatory
                        attention on PFOF practices, with potential for new restrictions.
                      </li>
                      <li>
                        <span className="font-medium">Gamification concerns:</span> Regulators are examining how trading
                        platforms use game-like features to encourage trading activity.
                      </li>
                    </ul>
                    <p className="mt-4">
                      The regulatory landscape continues to evolve, with particular focus on newer business models like
                      Robinhood's. The 2021 GameStop trading restrictions brought unprecedented scrutiny to market
                      structure and broker practices.
                    </p>
                  </section>

<section>
                    <h3 className="text-lg font-semibold mb-2">Key Growth Drivers</h3>
                    <p className="mb-4">Several factors are driving growth in the brokerage sector:</p>
                    <ul className="list-disc pl-6 space-y-2">
                      <li>
                        <span className="font-medium">Retail investor participation:</span> Increasing democratization
                        of investing, with younger demographics entering markets earlier.
                      </li>
                      <li>
                        <span className="font-medium">Digital asset expansion:</span> Integration of cryptocurrency
                        trading creating new revenue streams and attracting new customer segments.
                      </li>
                      <li>
                        <span className="font-medium">Financial education:</span> Content-driven engagement strategies
                        building customer loyalty and increasing platform usage.
                      </li>
                      <li>
                        <span className="font-medium">International expansion:</span> Growth opportunities in emerging
                        markets with rising middle classes and increasing investment participation.
                      </li>
                      <li>
                        <span className="font-medium">Value-added services:</span> Cash management, advisory services,
                        and premium features driving higher ARPU from existing customers.
                      </li>
                    </ul>
                  </section>

<section>
                    <h3 className="text-lg font-semibold mb-2">Company Highlights</h3>
                    <CompanyListCard
                      companies={brokerageCompanies}
                      title="Brokerage Companies"
                      description="Click on a company to view detailed analysis"
                    />
                  </section>
                </div>
              </ScrollArea>
            </CardContent>
          </Card>
        </TabsContent>

{/* Exchange Sector Analysis */}
        <TabsContent value="exchange" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>Exchange Sector Analysis</CardTitle>
              <CardDescription>Market trends, technology innovations, and revenue models</CardDescription>
            </CardHeader>
            <CardContent>
              <ScrollArea className="h-[500px] pr-4">
                <div className="space-y-6">
                  <section>
                    <h3 className="text-lg font-semibold mb-2">Market Trends</h3>
                    <p className="mb-4">
                      The exchange sector has evolved significantly with technological advancements and changing market
                      structures:
                    </p>
                    <ul className="list-disc pl-6 space-y-2">
                      <li>
                        <span className="font-medium">Market fragmentation:</span> Proliferation of trading venues has
                        increased competition while creating opportunities for connectivity and data services.
                      </li>
                      <li>
                        <span className="font-medium">Asset class expansion:</span> Traditional exchanges are
                        diversifying beyond equities into derivatives, fixed income, and digital assets.
                      </li>
                      <li>
                        <span className="font-medium">Crypto integration:</span> Established exchanges are either
                        building or acquiring cryptocurrency capabilities, while crypto-native exchanges like Coinbase
                        are gaining institutional legitimacy.
                      </li>
                      <li>
                        <span className="font-medium">ESG focus:</span> Growing demand for sustainable investment
                        products is driving new index creation and specialized market segments.
                      </li>
                    </ul>
                  </section>

<section>
                    <h3 className="text-lg font-semibold mb-2">Technology Innovations</h3>
                    <p className="mb-4">Exchanges are at the forefront of financial technology innovation:</p>
                    <ul className="list-disc pl-6 space-y-2">
                      <li>
                        <span className="font-medium">Low-latency infrastructure:</span> Continuous investment in
                        reducing execution times, with microsecond-level performance becoming standard.
                      </li>
                      <li>
                        <span className="font-medium">Cloud migration:</span> Increasing adoption of cloud technologies
                        for non-critical functions, with careful approaches to core matching engines.
                      </li>
                      <li>
                        <span className="font-medium">Blockchain integration:</span> Exploration of DLT for clearing,
                        settlement, and asset tokenization beyond just cryptocurrency trading.
                      </li>
                      <li>
                        <span className="font-medium">AI and machine learning:</span> Implementation for market
                        surveillance, fraud detection, and predictive analytics.
                      </li>
                      <li>
                        <span className="font-medium">API ecosystems:</span> Development of comprehensive API offerings
                        enabling third-party innovation and integration.
                      </li>
                    </ul>
                  </section>

<section>
                    <h3 className="text-lg font-semibold mb-2">Revenue Models</h3>
                    <p className="mb-4">Exchange business models have evolved beyond traditional transaction fees:</p>
                    <ul className="list-disc pl-6 space-y-2">
                      <li>
                        <span className="font-medium">Market data services:</span> High-margin data products have become
                        a critical revenue stream, often exceeding transaction revenues.
                      </li>
                      <li>
                        <span className="font-medium">SaaS offerings:</span> Technology licensing and
                        software-as-a-service for market participants and other exchanges.
                      </li>
                      <li>
                        <span className="font-medium">Listing fees:</span> Traditional revenue source from IPOs and
                        ongoing listing maintenance, evolving with new direct listing and SPAC models.
                      </li>
                      <li>
                        <span className="font-medium">Clearing and settlement:</span> Post-trade services providing
                        steady revenue streams with high barriers to entry.
                      </li>
                      <li>
                        <span className="font-medium">Crypto-specific models:</span> Staking rewards, token economics,
                        and custody services creating new revenue opportunities.
                      </li>
                    </ul>
                  </section>

<section>
                    <h3 className="text-lg font-semibold mb-2">Company Highlights</h3>
                    <CompanyListCard
                      companies={exchangeCompanies}
                      title="Exchange Companies"
                      description="Click on a company to view detailed analysis"
                    />
                  </section>
                </div>
              </ScrollArea>
            </CardContent>
          </Card>
        </TabsContent>

{/* Financial Data Sector Analysis */}
        <TabsContent value="data" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>Financial Data Sector Analysis</CardTitle>
              <CardDescription>Moats, recurring revenue models, and growth opportunities</CardDescription>
            </CardHeader>
            <CardContent>
              <ScrollArea className="h-[500px] pr-4">
                <div className="space-y-6">
                  <section>
                    <h3 className="text-lg font-semibold mb-2">Competitive Moats</h3>
                    <p className="mb-4">Financial data providers benefit from several strong competitive advantages:</p>
                    <ul className="list-disc pl-6 space-y-2">
                      <li>
                        <span className="font-medium">Proprietary methodologies:</span> Unique calculation methods and
                        intellectual property create high barriers to entry, particularly for ratings agencies like
                        Moody's and S&P Global.
                      </li>
                      <li>
                        <span className="font-medium">Network effects:</span> Widespread industry adoption creates
                        standards that are difficult to displace (e.g., MSCI indices, S&P ratings).
                      </li>
                      <li>
                        <span className="font-medium">Regulatory recognition:</span> Official designation as Nationally
                        Recognized Statistical Rating Organizations (NRSROs) provides Moody's and S&P with regulatory
                        moats.
                      </li>
                      <li>
                        <span className="font-medium">Switching costs:</span> Deep integration into client workflows and
                        systems creates high switching costs and customer stickiness.
                      </li>
                      <li>
                        <span className="font-medium">Historical data advantages:</span> Decades of accumulated data
                        provide unique analytical capabilities that new entrants cannot easily replicate.
                      </li>
                    </ul>
                  </section>

<section>
                    <h3 className="text-lg font-semibold mb-2">Recurring Revenue Models</h3>
                    <p className="mb-4">The sector is characterized by highly predictable revenue streams:</p>
                    <ul className="list-disc pl-6 space-y-2">
                      <li>
                        <span className="font-medium">Subscription-based access:</span> Multi-year contracts with high
                        renewal rates provide revenue visibility and stability.
                      </li>
                      <li>
                        <span className="font-medium">Enterprise-wide licensing:</span> Seat-based and enterprise-wide
                        agreements with built-in escalators ensure growing revenue per customer.
                      </li>
                      <li>
                        <span className="font-medium">Index licensing:</span> Fees based on assets under management
                        (AUM) for index-linked products create scalable revenue that grows with market appreciation.
                      </li>
                      <li>
                        <span className="font-medium">Rating agency models:</span> Combination of issuer-paid fees for
                        new issuances and ongoing surveillance creates both transaction and recurring revenue.
                      </li>
                      <li>
                        <span className="font-medium">Data redistribution:</span> Licensing arrangements with
                        third-party platforms extend reach and create additional revenue layers.
                      </li>
                    </ul>
                  </section>

<section>
                    <h3 className="text-lg font-semibold mb-2">Growth Opportunities</h3>
                    <p className="mb-4">Several trends are driving growth in the financial data sector:</p>
                    <ul className="list-disc pl-6 space-y-2">
                      <li>
                        <span className="font-medium">ESG data expansion:</span> Rapidly growing demand for
                        environmental, social, and governance data, ratings, and analytics.
                      </li>
                      <li>
                        <span className="font-medium">Private markets coverage:</span> Extension of data and analytics
                        capabilities to private equity, venture capital, and private debt markets.
                      </li>
                      <li>
                        <span className="font-medium">Alternative data integration:</span> Incorporation of
                        non-traditional data sources including satellite imagery, social media sentiment, and IoT data.
                      </li>
                      <li>
                        <span className="font-medium">AI-enhanced analytics:</span> Machine learning applications
                        creating new predictive capabilities and efficiency improvements.
                      </li>
                      <li>
                        <span className="font-medium">Regulatory technology:</span> Growing compliance requirements
                        driving demand for specialized data and software solutions.
                      </li>
                    </ul>
                  </section>

<section>
                    <h3 className="text-lg font-semibold mb-2">Company Highlights</h3>
                    <CompanyListCard
                      companies={dataCompanies}
                      title="Financial Data Companies"
                      description="Click on a company to view detailed analysis"
                    />
                  </section>
                </div>
              </ScrollArea>
            </CardContent>
          </Card>
        </TabsContent>

{/* Operations Sector Analysis */}
        <TabsContent value="operations" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>Operations Sector Analysis</CardTitle>
              <CardDescription>
                Cloud-based solutions, integration capabilities, and market consolidation
              </CardDescription>
            </CardHeader>
            <CardContent>
              <ScrollArea className="h-[500px] pr-4">
                <div className="space-y-6">
                  <section>
                    <h3 className="text-lg font-semibold mb-2">Cloud-Based Solutions</h3>
                    <p className="mb-4">
                      The financial operations software sector is undergoing a significant cloud transformation:
                    </p>
                    <ul className="list-disc pl-6 space-y-2">
                      <li>
                        <span className="font-medium">SaaS transition:</span> Legacy on-premise solutions are being
                        replaced by cloud-native platforms, improving scalability and reducing implementation timelines.
                      </li>
                      <li>
                        <span className="font-medium">Multi-tenant architecture:</span> Modern platforms leverage
                        multi-tenant designs to improve efficiency and enable faster feature deployment.
                      </li>
                      <li>
                        <span className="font-medium">Security enhancements:</span> Advanced security capabilities
                        addressing historical concerns about cloud adoption in financial services.
                      </li>
                      <li>
                        <span className="font-medium">Consumption-based pricing:</span> Shift from perpetual licensing
                        to subscription models with usage-based components.
                      </li>
                      <li>
                        <span className="font-medium">Continuous updates:</span> Elimination of costly upgrade cycles
                        through regular, automatic updates and feature releases.
                      </li>
                    </ul>
                  </section>

<section>
                    <h3 className="text-lg font-semibold mb-2">Integration Capabilities</h3>
                    <p className="mb-4">
                      Integration has become a critical differentiator in financial operations software:
                    </p>
                    <ul className="list-disc pl-6 space-y-2">
                      <li>
                        <span className="font-medium">API-first design:</span> Modern platforms are built with
                        comprehensive API capabilities enabling customization and extension.
                      </li>
                      <li>
                        <span className="font-medium">Pre-built connectors:</span> Extensive libraries of pre-built
                        integrations with common financial systems reducing implementation time.
                      </li>
                      <li>
                        <span className="font-medium">Workflow automation:</span> Cross-system workflow capabilities
                        enabling straight-through processing across multiple applications.
                      </li>
                      <li>
                        <span className="font-medium">Data unification:</span> Solutions that create unified data layers
                        across disparate systems providing single sources of truth.
                      </li>
                      <li>
                        <span className="font-medium">Low-code/no-code tools:</span> Visual integration builders
                        enabling business users to create connections without developer resources.
                      </li>
                    </ul>
                  </section>

<section>
                    <h3 className="text-lg font-semibold mb-2">Market Consolidation</h3>
                    <p className="mb-4">The financial operations software market has seen significant consolidation:</p>
                    <ul className="list-disc pl-6 space-y-2">
                      <li>
                        <span className="font-medium">Platform expansion:</span> Major players like SS&C Technologies
                        have pursued aggressive acquisition strategies to build comprehensive platforms.
                      </li>
                      <li>
                        <span className="font-medium">Private equity activity:</span> Significant PE investment driving
                        consolidation and take-private transactions of public companies.
                      </li>
                      <li>
                        <span className="font-medium">Vertical specialization:</span> Acquisitions targeting specific
                        industry verticals to deepen expertise in areas like wealth management, insurance, and
                        alternatives.
                      </li>
                      <li>
                        <span className="font-medium">Geographic expansion:</span> Cross-border M&A enabling global
                        footprints and multi-jurisdiction capabilities.
                      </li>
                      <li>
                        <span className="font-medium">Technology acquisition:</span> Established players acquiring
                        innovative startups to accelerate cloud and AI capabilities.
                      </li>
                    </ul>
                  </section>

<section>
                    <h3 className="text-lg font-semibold mb-2">Company Highlights</h3>
                    <CompanyListCard
                      companies={operationsCompanies}
                      title="Operations Companies"
                      description="Click on a company to view detailed analysis"
                    />
                  </section>
                </div>
              </ScrollArea>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/investment-primer/playbook/multi-select.tsx" isMerged="true"
"use client"

import * as React from "react"
import { X, Check, ChevronsUpDown } from "lucide-react"

import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { Badge } from "@/components/ui/badge"

interface MultiSelectProps {
  options: { label: string; value: string }[]
  selected: string[]
  onSelect: (values: string[]) => void
  placeholder?: string
  className?: string
}

export default function MultiSelect({ options, selected, onSelect, placeholder, className }: MultiSelectProps) {
  const [open, setOpen] = React.useState(false)

const handleSelect = (value: string) => {
    const newSelected = selected.includes(value) ? selected.filter((item) => item !== value) : [...selected, value]
    onSelect(newSelected)
  }

const selectedLabels = selected.map((value) => options.find((option) => option.value === value)?.label)

return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger asChild>
        <Button
          variant="outline"
          role="combobox"
          aria-expanded={open}
          className={cn("w-full justify-between h-auto min-h-[38px] flex-wrap", className)}
        >
          <div className="flex flex-wrap gap-1">
            {selected.length === 0 ? (
              <span className="text-gray-500 dark:text-gray-400">{placeholder || "Select items..."}</span>
            ) : (
              selectedLabels.map((label, index) => (
                <Badge key={index} variant="secondary" className="flex items-center gap-1">
                  {label}
                  <X
                    className="h-3 w-3 cursor-pointer"
                    onClick={(e) => {
                      e.stopPropagation()
                      handleSelect(selected[index])
                    }}
                  />
                </Badge>
              ))
            )}
          </div>
          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-[var(--radix-popover-trigger-width)] p-0 dark:bg-gray-800 dark:border-gray-700">
        <Command className="dark:bg-gray-800">
          <CommandInput placeholder="Search tags..." className="dark:placeholder-gray-400" />
          <CommandList>
            <CommandEmpty>No tags found.</CommandEmpty>
            <CommandGroup>
              {options.map((option) => (
                <CommandItem
                  key={option.value}
                  value={option.label}
                  onSelect={() => handleSelect(option.value)}
                  className="dark:hover:bg-gray-700 dark:focus:bg-gray-700 dark:text-gray-50"
                >
                  <Check
                    className={cn("mr-2 h-4 w-4", selected.includes(option.value) ? "opacity-100" : "opacity-0")}
                  />
                  {option.label}
                </CommandItem>
              ))}
            </CommandGroup>
          </CommandList>
        </Command>
      </PopoverContent>
    </Popover>
  )
}
[V0_FILE]typescriptreact:file="components/investment-primer/playbook/playbook-content-suggester.tsx" isMerged="true"
"use client"

import { useState, useTransition } from "react"
import { Card, CardHeader, CardTitle, CardContent, CardDescription } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Loader2, Sparkles, PlusCircle } from "lucide-react"
import { suggestNewPlaybookTopics } from "@/app/actions/ai-actions"
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
import { Badge } from "@/components/ui/badge"
import { Textarea } from "@/components/ui/textarea"
import { Label } from "@/components/ui/label"

interface PlaybookContentSuggesterProps {
  onUseSuggestion: (suggestion: {
    title: string
    summary: string
    module: string
    topic_tags: string[]
    methodology_tags: string[]
    asset_class_tags: string[]
    difficulty_level: string
  }) => void
}

export default function PlaybookContentSuggester({ onUseSuggestion }: PlaybookContentSuggesterProps) {
  const [suggestions, setSuggestions] = useState<any[] | null>(null)
  const [error, setError] = useState<string | null>(null)
  const [isPending, startTransition] = useTransition()
  const [customPrompt, setCustomPrompt] = useState("")

const handleGenerateSuggestions = () => {
    setError(null)
    setSuggestions(null)
    startTransition(async () => {
      const { suggestions: newSuggestions, error: fetchError } = await suggestNewPlaybookTopics(customPrompt)
      if (fetchError) {
        setError(fetchError)
      } else {
        setSuggestions(newSuggestions)
      }
    })
  }

return (
    <Card className="w-full">
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <Sparkles className="h-5 w-5 text-purple-500" /> New Content Ideas
        </CardTitle>
        <CardDescription>Generate new playbook entry suggestions based on your existing content.</CardDescription>
      </CardHeader>
      <CardContent className="space-y-4">
        <div>
          <Label htmlFor="custom-prompt" className="sr-only">
            Custom Prompt for AI
          </Label>
          <Textarea
            id="custom-prompt"
            placeholder="e.g., 'Focus on advanced quantitative strategies' or 'Suggest topics related to emerging markets.'"
            value={customPrompt}
            onChange={(e) => setCustomPrompt(e.target.value)}
            className="min-h-[80px]"
          />
          <p className="text-sm text-muted-foreground mt-1">Add specific instructions to guide Gemini's suggestions.</p>
        </div>
        <Button onClick={handleGenerateSuggestions} disabled={isPending} className="w-full">
          {isPending ? (
            <>
              <Loader2 className="mr-2 h-4 w-4 animate-spin" /> Generating...
            </>
          ) : (
            <>
              <Sparkles className="mr-2 h-4 w-4" /> Generate New Ideas
            </>
          )}
        </Button>

{error && (
          <Alert variant="destructive">
            <AlertTitle>Error</AlertTitle>
            <AlertDescription>{error}</AlertDescription>
          </Alert>
        )}

{suggestions && suggestions.length > 0 && (
          <div className="space-y-4">
            <h3 className="text-lg font-semibold">Suggested Entries:</h3>
            {suggestions.map((suggestion, index) => (
              <Card key={index} className="p-4 border">
                <h4 className="font-semibold text-md">{suggestion.title}</h4>
                <p className="text-sm text-muted-foreground mt-1">{suggestion.summary}</p>
                <div className="mt-2 text-sm">
                  <p>
                    <span className="font-medium">Module:</span> {suggestion.module}
                  </p>
                  <p>
                    <span className="font-medium">Difficulty:</span> {suggestion.difficulty_level}
                  </p>
                  <div className="flex flex-wrap gap-1 mt-2">
                    {suggestion.topic_tags?.map((tag: string) => (
                      <Badge key={tag} variant="secondary">
                        {tag}
                      </Badge>
                    ))}
                    {suggestion.methodology_tags?.map((tag: string) => (
                      <Badge key={tag} variant="outline">
                        {tag}
                      </Badge>
                    ))}
                    {suggestion.asset_class_tags?.map((tag: string) => (
                      <Badge key={tag} className="bg-blue-100 text-blue-800 hover:bg-blue-100/80">
                        {tag}
                      </Badge>
                    ))}
                  </div>
                </div>
                <Button variant="outline" size="sm" className="mt-4 w-full" onClick={() => onUseSuggestion(suggestion)}>
                  <PlusCircle className="mr-2 h-4 w-4" /> Use Suggestion
                </Button>
              </Card>
            ))}
          </div>
        )}

{suggestions && suggestions.length === 0 && !isPending && (
          <Alert>
            <AlertTitle>No Suggestions</AlertTitle>
            <AlertDescription>
              Gemini could not generate new suggestions based on your current entries and prompt. Try a different prompt
              or add more content to your playbook.
            </AlertDescription>
          </Alert>
        )}
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/investment-primer/playbook/playbook-entry-detail.tsx" isMerged="true"
"use client"

import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
import { PlaybookContentReferences } from "@/components/playbook-content-references"
// Removed: import { generateKeyTakeaways } from "@/app/actions/ai-actions"
// Removed: import { toast } from "@/hooks/use-toast"
import type { PlaybookEntry, PlaybookTag } from "@/types/investment-playbook"

interface PlaybookEntryDetailProps {
  isOpen: boolean
  onOpenChange: (open: boolean) => void
  entry: PlaybookEntry
  allTags: PlaybookTag[]
}

export default function PlaybookEntryDetail({ isOpen, onOpenChange, entry, allTags }: PlaybookEntryDetailProps) {
  // Removed: const [keyTakeaways, setKeyTakeaways] = useState<string | null>(null)
  // Removed: const [isGeneratingTakeaways, setIsGeneratingTakeaways] = useState(false)

if (!entry) return null

const getTagNames = (tagIds: string[], type: string) => {
    // Ensure tagIds is always an array before mapping
    return (tagIds || []).map((id) => allTags.find((tag) => tag.id === id && tag.type === type)?.name).filter(Boolean)
  }

const topicTagNames = getTagNames(entry.topic_tags || [], "topic")
  const methodologyTagNames = getTagNames(entry.methodology_tags || [], "methodology")
  const assetClassTagNames = getTagNames(entry.asset_class_tags || [], "asset_class")

// Removed: handleGenerateTakeaways function

return (
    <Dialog open={isOpen} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-[800px] h-[90vh] flex flex-col dark:bg-gray-800 dark:border-gray-700">
        <DialogHeader>
          <DialogTitle className="text-2xl font-bold text-gray-900 dark:text-gray-50">{entry.title}</DialogTitle>
          <DialogDescription className="text-gray-500 dark:text-gray-400">
            Module: {entry.module}
            {entry.difficulty_level && ` | Difficulty: ${entry.difficulty_level}`}
          </DialogDescription>
        </DialogHeader>
        <ScrollArea className="flex-1 pr-4 -mr-4">
          <div className="py-4">
            {entry.summary && (
              <div className="mb-6">
                <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-50 mb-2">Summary</h3>
                <p className="text-gray-700 dark:text-gray-300">{entry.summary}</p>
              </div>
            )}

<div className="mb-6">
              <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-50 mb-2">Tags</h3>
              <div className="flex flex-wrap gap-2">
                {topicTagNames.length > 0 && (
                  <div className="flex flex-wrap gap-2 items-center">
                    <span className="font-medium text-gray-600 dark:text-gray-400">Topic:</span>
                    {topicTagNames.map((name, index) => (
                      <span
                        key={index}
                        className="bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 px-2 py-1 rounded-full text-xs"
                      >
                        {name}
                      </span>
                    ))}
                  </div>
                )}
                {methodologyTagNames.length > 0 && (
                  <div className="flex flex-wrap gap-2 items-center">
                    <span className="font-medium text-gray-600 dark:text-gray-400">Methodology:</span>
                    {methodologyTagNames.map((name, index) => (
                      <span
                        key={index}
                        className="bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200 px-2 py-1 rounded-full text-xs"
                      >
                        {name}
                      </span>
                    ))}
                  </div>
                )}
                {assetClassTagNames.length > 0 && (
                  <div className="flex flex-wrap gap-2 items-center">
                    <span className="font-medium text-gray-600 dark:text-gray-400">Asset Class:</span>
                    {assetClassTagNames.map((name, index) => (
                      <span
                        key={index}
                        className="bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 px-2 py-1 rounded-full text-xs"
                      >
                        {name}
                      </span>
                    ))}
                  </div>
                )}
              </div>
            </div>

{/* Key Takeaways Section - Now displays from entry.key_takeaways */}
            {entry.key_takeaways && (
              <div className="mb-6">
                <Accordion type="single" collapsible className="w-full" defaultValue="key-takeaways">
                  <AccordionItem value="key-takeaways">
                    <AccordionTrigger className="text-lg font-semibold text-gray-900 dark:text-gray-50">
                      Key Takeaways & Action Steps
                    </AccordionTrigger>
                    <AccordionContent>
                      <div
                        className="prose dark:prose-invert max-w-none text-gray-700 dark:text-gray-300"
                        dangerouslySetInnerHTML={{ __html: entry.key_takeaways }}
                      />
                    </AccordionContent>
                  </AccordionItem>
                </Accordion>
              </div>
            )}

<div>
              <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-50 mb-2">Content</h3>
              <div
                className="prose dark:prose-invert max-w-none text-gray-700 dark:text-gray-300"
                dangerouslySetInnerHTML={{ __html: entry.content }}
              />
            </div>
            {/* Add this after the main content section */}
            <div className="mt-6">
              <PlaybookContentReferences
                playbookEntry={entry}
                onContentClick={(contentId) => {
                  // Handle content item click - could open in new tab or navigate
                  console.log("Content clicked:", contentId)
                  // You could add navigation logic here
                }}
              />
            </div>
          </div>
        </ScrollArea>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescriptreact:file="components/investment-primer/playbook/playbook-filter-dialog.tsx" isMerged="true"
"use client"

import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Label } from "@/components/ui/label"
import { Checkbox } from "@/components/ui/checkbox"
import { ScrollArea } from "@/components/ui/scroll-area"
import type { PlaybookTag, PlaybookModule, DifficultyLevel } from "@/types/investment-playbook"

interface PlaybookFilterDialogProps {
  isOpen: boolean
  onOpenChange: (open: boolean) => void
  selectedModules: PlaybookModule[]
  setSelectedModules: (modules: PlaybookModule[]) => void
  selectedTopicTags: string[]
  setSelectedTopicTags: (tags: string[]) => void
  selectedMethodologyTags: string[]
  setSelectedMethodologyTags: (tags: string[]) => void
  selectedAssetClassTags: string[]
  setSelectedAssetClassTags: (tags: string[]) => void
  selectedDifficultyLevels: DifficultyLevel[]
  setSelectedDifficultyLevels: (levels: DifficultyLevel[]) => void
  allTags: PlaybookTag[]
}

const modules: PlaybookModule[] = ["Writing Investment Ideas", "Valuing Investment Ideas", "Managing Investment Ideas"]
const difficultyLevels: DifficultyLevel[] = ["Beginner", "Intermediate", "Advanced"]

export default function PlaybookFilterDialog({
  isOpen,
  onOpenChange,
  selectedModules,
  setSelectedModules,
  selectedTopicTags,
  setSelectedTopicTags,
  selectedMethodologyTags,
  setSelectedMethodologyTags,
  selectedAssetClassTags,
  setSelectedAssetClassTags,
  selectedDifficultyLevels,
  setSelectedDifficultyLevels,
  allTags,
}: PlaybookFilterDialogProps) {
  const handleModuleChange = (module: PlaybookModule, checked: boolean) => {
    if (checked) {
      setSelectedModules([...selectedModules, module])
    } else {
      setSelectedModules(selectedModules.filter((m) => m !== module))
    }
  }

const handleTagChange = (
    tagId: string,
    checked: boolean,
    setter: (tags: string[]) => void,
    currentTags: string[],
  ) => {
    if (checked) {
      setter([...currentTags, tagId])
    } else {
      setter(currentTags.filter((id) => id !== tagId))
    }
  }

const handleDifficultyChange = (level: DifficultyLevel, checked: boolean) => {
    if (checked) {
      setSelectedDifficultyLevels([...selectedDifficultyLevels, level])
    } else {
      setSelectedDifficultyLevels(selectedDifficultyLevels.filter((d) => d !== level))
    }
  }

const topicTags = allTags.filter((tag) => tag.type === "topic")
  const methodologyTags = allTags.filter((tag) => tag.type === "methodology")
  const assetClassTags = allTags.filter((tag) => tag.type === "asset_class")

return (
    <Dialog open={isOpen} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-[500px] dark:bg-gray-800 dark:border-gray-700">
        <DialogHeader>
          <DialogTitle className="text-2xl font-bold text-gray-900 dark:text-gray-50">
            Filter Playbook Entries
          </DialogTitle>
        </DialogHeader>
        <ScrollArea className="max-h-[70vh] pr-4 -mr-4">
          <div className="grid gap-6 py-4">
            <div>
              <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-50 mb-3">Modules</h3>
              <div className="grid gap-2">
                {modules.map((module) => (
                  <div key={module} className="flex items-center space-x-2">
                    <Checkbox
                      id={`module-${module}`}
                      checked={selectedModules.includes(module)}
                      onCheckedChange={(checked: boolean) => handleModuleChange(module, checked)}
                      className="dark:border-gray-600 dark:data-[state=checked]:bg-blue-600 dark:data-[state=checked]:text-white"
                    />
                    <Label htmlFor={`module-${module}`} className="text-gray-700 dark:text-gray-300">
                      {module}
                    </Label>
                  </div>
                ))}
              </div>
            </div>

{topicTags.length > 0 && (
              <div>
                <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-50 mb-3">Topic Tags</h3>
                <div className="grid gap-2">
                  {topicTags.map((tag) => (
                    <div key={tag.id} className="flex items-center space-x-2">
                      <Checkbox
                        id={`topic-tag-${tag.id}`}
                        checked={selectedTopicTags.includes(tag.id)}
                        onCheckedChange={(checked: boolean) =>
                          handleTagChange(tag.id, checked, setSelectedTopicTags, selectedTopicTags)
                        }
                        className="dark:border-gray-600 dark:data-[state=checked]:bg-blue-600 dark:data-[state=checked]:text-white"
                      />
                      <Label htmlFor={`topic-tag-${tag.id}`} className="text-gray-700 dark:text-gray-300">
                        {tag.name}
                      </Label>
                    </div>
                  ))}
                </div>
              </div>
            )}

{methodologyTags.length > 0 && (
              <div>
                <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-50 mb-3">Methodology Tags</h3>
                <div className="grid gap-2">
                  {methodologyTags.map((tag) => (
                    <div key={tag.id} className="flex items-center space-x-2">
                      <Checkbox
                        id={`methodology-tag-${tag.id}`}
                        checked={selectedMethodologyTags.includes(tag.id)}
                        onCheckedChange={(checked: boolean) =>
                          handleTagChange(tag.id, checked, setSelectedMethodologyTags, selectedMethodologyTags)
                        }
                        className="dark:border-gray-600 dark:data-[state=checked]:bg-blue-600 dark:data-[state=checked]:text-white"
                      />
                      <Label htmlFor={`methodology-tag-${tag.id}`} className="text-gray-700 dark:text-gray-300">
                        {tag.name}
                      </Label>
                    </div>
                  ))}
                </div>
              </div>
            )}

{assetClassTags.length > 0 && (
              <div>
                <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-50 mb-3">Asset Class Tags</h3>
                <div className="grid gap-2">
                  {assetClassTags.map((tag) => (
                    <div key={tag.id} className="flex items-center space-x-2">
                      <Checkbox
                        id={`asset-class-tag-${tag.id}`}
                        checked={selectedAssetClassTags.includes(tag.id)}
                        onCheckedChange={(checked: boolean) =>
                          handleTagChange(tag.id, checked, setSelectedAssetClassTags, selectedAssetClassTags)
                        }
                        className="dark:border-gray-600 dark:data-[state=checked]:bg-blue-600 dark:data-[state=checked]:text-white"
                      />
                      <Label htmlFor={`asset-class-tag-${tag.id}`} className="text-gray-700 dark:text-gray-300">
                        {tag.name}
                      </Label>
                    </div>
                  ))}
                </div>
              </div>
            )}

<div>
              <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-50 mb-3">Difficulty Level</h3>
              <div className="grid gap-2">
                {difficultyLevels.map((level) => (
                  <div key={level} className="flex items-center space-x-2">
                    <Checkbox
                      id={`difficulty-${level}`}
                      checked={selectedDifficultyLevels.includes(level)}
                      onCheckedChange={(checked: boolean) => handleDifficultyChange(level, checked)}
                      className="dark:border-gray-600 dark:data-[state=checked]:bg-blue-600 dark:data-[state=checked]:text-white"
                    />
                    <Label htmlFor={`difficulty-${level}`} className="text-gray-700 dark:text-gray-300">
                      {level}
                    </Label>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </ScrollArea>
        <DialogFooter className="dark:border-t dark:border-gray-700 pt-4">
          <Button
            variant="outline"
            onClick={() => onOpenChange(false)}
            className="dark:border-gray-700 dark:text-gray-50 dark:hover:bg-gray-700"
          >
            Apply Filters
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescriptreact:file="components/investment-primer/playbook/rich-text-editor.tsx" isMerged="true"
"use client"

import { useRef, useState, useCallback } from "react"
import { Button } from "@/components/ui/button"
import { Bold, Italic, List, ListOrdered, Link, Sparkles, Loader2, CheckCircle2, MessageSquareText } from "lucide-react" // Added CheckCircle2 and MessageSquareText for new icons
import { generateContentWithGemini } from "@/app/actions/ai-actions"
import { useToast } from "@/hooks/use-toast"

interface RichTextEditorProps {
  value: string
  onChange: (value: string) => void
}

export default function RichTextEditor({ value, onChange }: RichTextEditorProps) {
  const textareaRef = useRef<HTMLTextAreaElement>(null)
  const [isGenerating, setIsGenerating] = useState(false)
  const { toast } = useToast()

const insertText = (before: string, after = "") => {
    const textarea = textareaRef.current
    if (!textarea) return

const start = textarea.selectionStart
    const end = textarea.selectionEnd
    const selectedText = value.substring(start, end)
    const newText = value.substring(0, start) + before + selectedText + after + value.substring(end)

onChange(newText)

// Restore cursor position
    setTimeout(() => {
      textarea.focus()
      textarea.setSelectionRange(start + before.length, end + before.length)
    }, 0)
  }

const formatBold = () => insertText("**", "**")
  const formatItalic = () => insertText("*", "*")
  const formatBulletList = () => insertText("\n- ", "")
  const formatNumberedList = () => insertText("\n1. ", "")
  const formatLink = () => insertText("[", "](url)")

const handleAIAction = useCallback(
    async (action: "simplify" | "expand" | "summarize" | "grammar_correction" | "tone_adjustment") => {
      const textarea = textareaRef.current
      if (!textarea) return

const selectedText = value.substring(textarea.selectionStart, textarea.selectionEnd).trim()

if (!selectedText) {
        toast({
          title: "No Text Selected",
          description: `Please select some text to ${action.replace(/_/g, " ")}.`,
          variant: "default",
        })
        return
      }

setIsGenerating(true)
      try {
        let prompt = ""
        let successMessage = ""
        switch (action) {
          case "simplify":
            prompt = `Simplify the following text for a beginner audience, retaining all key information:\n\n"${selectedText}"`
            successMessage = "Text successfully simplified."
            break
          case "expand":
            prompt = `Expand on the following text, providing more detail and examples:\n\n"${selectedText}"`
            successMessage = "Text successfully expanded."
            break
          case "summarize":
            prompt = `Summarize the following text concisely, capturing the main points:\n\n"${selectedText}"`
            successMessage = "Text successfully summarized."
            break
          case "grammar_correction":
            prompt = `Correct the grammar, spelling, and punctuation of the following text:\n\n"${selectedText}"`
            successMessage = "Grammar and spelling corrected."
            break
          case "tone_adjustment":
            // For simplicity, we'll default to a professional tone.
            // In a more advanced version, a dropdown could allow tone selection.
            prompt = `Rewrite the following text in a professional tone:\n\n"${selectedText}"`
            successMessage = "Tone adjusted to professional."
            break
        }

const { content: generatedContent, error } = await generateContentWithGemini(prompt)

if (error) {
          toast({
            title: "AI Action Failed",
            description: `Error: ${error}`,
            variant: "destructive",
          })
        } else if (generatedContent) {
          const newText =
            value.substring(0, textarea.selectionStart) + generatedContent + value.substring(textarea.selectionEnd)
          onChange(newText)
          toast({
            title: "Content Refined",
            description: successMessage,
          })
        } else {
          toast({
            title: "No Content Generated",
            description: "AI did not return any content. Please try again.",
            variant: "warning",
          })
        }
      } catch (error) {
        console.error(`Error during AI ${action} action:`, error)
        toast({
          title: "AI Action Failed",
          description: `An unexpected error occurred: ${error instanceof Error ? error.message : String(error)}`,
          variant: "destructive",
        })
      } finally {
        setIsGenerating(false)
      }
    },
    [value, onChange, toast],
  )

return (
    <div className="w-full border rounded-md dark:border-gray-600">
      {/* Toolbar */}
      <div className="flex gap-1 p-2 border-b dark:border-gray-600 bg-gray-50 dark:bg-gray-800">
        <Button type="button" variant="ghost" size="sm" onClick={formatBold} className="h-8 w-8 p-0">
          <Bold className="h-4 w-4" />
        </Button>
        <Button type="button" variant="ghost" size="sm" onClick={formatItalic} className="h-8 w-8 p-0">
          <Italic className="h-4 w-4" />
        </Button>
        <Button type="button" variant="ghost" size="sm" onClick={formatBulletList} className="h-8 w-8 p-0">
          <List className="h-4 w-4" />
        </Button>
        <Button type="button" variant="ghost" size="sm" onClick={formatNumberedList} className="h-8 w-8 p-0">
          <ListOrdered className="h-4 w-4" />
        </Button>
        <Button type="button" variant="ghost" size="sm" onClick={formatLink} className="h-8 w-8 p-0">
          <Link className="h-4 w-4" />
        </Button>
        <div className="ml-auto flex gap-1">
          <Button
            type="button"
            variant="ghost"
            size="sm"
            onClick={() => handleAIAction("simplify")}
            disabled={isGenerating}
            className="h-8 px-2 text-xs"
          >
            {isGenerating ? <Loader2 className="h-4 w-4 animate-spin" /> : <Sparkles className="h-4 w-4 mr-1" />}
            Simplify
          </Button>
          <Button
            type="button"
            variant="ghost"
            size="sm"
            onClick={() => handleAIAction("expand")}
            disabled={isGenerating}
            className="h-8 px-2 text-xs"
          >
            {isGenerating ? <Loader2 className="h-4 w-4 animate-spin" /> : <Sparkles className="h-4 w-4 mr-1" />}
            Expand
          </Button>
          <Button
            type="button"
            variant="ghost"
            size="sm"
            onClick={() => handleAIAction("summarize")}
            disabled={isGenerating}
            className="h-8 px-2 text-xs"
          >
            {isGenerating ? <Loader2 className="h-4 w-4 animate-spin" /> : <Sparkles className="h-4 w-4 mr-1" />}
            Summarize
          </Button>
          <Button
            type="button"
            variant="ghost"
            size="sm"
            onClick={() => handleAIAction("grammar_correction")}
            disabled={isGenerating}
            className="h-8 px-2 text-xs"
          >
            {isGenerating ? <Loader2 className="h-4 w-4 animate-spin" /> : <CheckCircle2 className="h-4 w-4 mr-1" />}
            Grammar
          </Button>
          <Button
            type="button"
            variant="ghost"
            size="sm"
            onClick={() => handleAIAction("tone_adjustment")}
            disabled={isGenerating}
            className="h-8 px-2 text-xs"
          >
            {isGenerating ? (
              <Loader2 className="h-4 w-4 animate-spin" />
            ) : (
              <MessageSquareText className="h-4 w-4 mr-1" />
            )}
            Tone
          </Button>
        </div>
      </div>

{/* Text Area */}
      <textarea
        ref={textareaRef}
        value={value}
        onChange={(e) => onChange(e.target.value)}
        className="w-full h-[250px] p-3 resize-none border-0 focus:outline-none focus:ring-0 dark:bg-gray-700 dark:text-gray-50"
        placeholder="Enter your content here... Use the toolbar buttons to format text with markdown."
      />

{/* Help Text */}
      <div className="p-2 text-xs text-gray-500 dark:text-gray-400 border-t dark:border-gray-600 bg-gray-50 dark:bg-gray-800">
        Tip: Use **bold**, *italic*, - bullet lists, 1. numbered lists, [link text](url)
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/investment-primer/primer-company-comparison.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Download, ExternalLink, Info, Calculator } from "lucide-react"
import type { CompanyComparison } from "@/types/investment-primer"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
import { CompanyValuationModel } from "./company-valuation-model"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"

interface PrimerCompanyComparisonProps {
  companies: CompanyComparison[]
}

export function PrimerCompanyComparison({ companies }: PrimerCompanyComparisonProps) {
  const router = useRouter()
  const [selectedCompany, setSelectedCompany] = useState<string | null>(null)
  const [showIndustryMetrics, setShowIndustryMetrics] = useState(true)
  const [valuationCompany, setValuationCompany] = useState<CompanyComparison | null>(null)
  const [valuationDialogOpen, setValuationDialogOpen] = useState(false)

const navigateToCompanyAnalysis = (ticker: string) => {
    router.push(`/company-analysis/${ticker}`)
  }

const openValuationModel = (company: CompanyComparison) => {
    setValuationCompany(company)
    setValuationDialogOpen(true)
  }

// Function to export data to CSV
  const exportToCSV = () => {
    // Create headers
    let headers = [
      "Ticker",
      "Company",
      "Category",
      "Revenue Growth",
      "Gross Margin",
      "Operating Margin",
      "Net Margin",
      "Rule of 40",
      "EV/Revenue",
    ]

// Add industry-specific headers if showing industry metrics
    if (showIndustryMetrics) {
      headers = [
        ...headers,
        "AUM ($B)",
        "Client Accounts (M)",
        "DARTs (K)",
        "Trading Volume (M)",
        "Market Share (%)",
        "Revenue Per Contract",
        "Recurring Revenue (%)",
        "Revenue Per Client",
      ]
    }

// Create CSV content
    let csvContent = headers.join(",") + "\n"

// Add data rows
    companies.forEach((company) => {
      let row = [
        company.ticker,
        `"${company.name}"`, // Quote company name to handle commas
        company.category,
        company.metrics.revenueGrowth?.toFixed(1) || "N/A",
        company.metrics.grossMargin?.toFixed(1) || "N/A",
        company.metrics.operatingMargin?.toFixed(1) || "N/A",
        company.metrics.netMargin?.toFixed(1) || "N/A",
        company.metrics.ruleOf40?.toFixed(1) || "N/A",
        company.metrics.evToRevenue?.toFixed(2) || "N/A",
      ]

// Add industry-specific metrics if showing
      if (showIndustryMetrics) {
        row = [
          ...row,
          company.metrics.aum?.toString() || "N/A",
          company.metrics.clientAccounts?.toString() || "N/A",
          company.metrics.darts?.toString() || "N/A",
          company.metrics.tradingVolume?.toString() || "N/A",
          company.metrics.marketShare?.toString() || "N/A",
          company.metrics.revenuePerContract?.toString() || "N/A",
          company.metrics.recurringRevenue?.toString() || "N/A",
          company.metrics.revenuePerClient?.toString() || "N/A",
        ]
      }

csvContent += row.join(",") + "\n"
    })

// Create download link
    const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" })
    const url = URL.createObjectURL(blob)
    const link = document.createElement("a")
    link.setAttribute("href", url)
    link.setAttribute("download", "fintech_companies.csv")
    link.style.visibility = "hidden"
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
  }

// Group companies by category
  const companiesByCategory: Record<string, CompanyComparison[]> = {}
  companies.forEach((company) => {
    if (!companiesByCategory[company.category]) {
      companiesByCategory[company.category] = []
    }
    companiesByCategory[company.category].push(company)
  })

// Get all categories
  const categories = Object.keys(companiesByCategory).sort()

return (
    <div className="space-y-4">
      <div className="flex justify-between items-center">
        <div className="flex items-center gap-2">
          <Button variant="outline" size="sm" onClick={() => setShowIndustryMetrics(!showIndustryMetrics)}>
            {showIndustryMetrics ? "Hide Industry Metrics" : "Show Industry Metrics"}
          </Button>
          <TooltipProvider>
            <Tooltip>
              <TooltipTrigger asChild>
                <Button variant="ghost" size="icon" className="h-8 w-8">
                  <Info className="h-4 w-4" />
                </Button>
              </TooltipTrigger>
              <TooltipContent>
                <p className="max-w-xs">
                  Industry metrics include AUM, Trading Volume, Market Share, and other metrics specific to each fintech
                  category.
                </p>
              </TooltipContent>
            </Tooltip>
          </TooltipProvider>
        </div>
        <Button variant="outline" size="sm" onClick={exportToCSV} className="gap-2">
          <Download className="h-4 w-4" />
          Export to CSV
        </Button>
      </div>

<Card>
        <CardContent className="p-0 overflow-auto">
          <TooltipProvider>
            <Table>
              <TableHeader className="bg-muted/50 sticky top-0">
                <TableRow>
                  <TableHead className="w-[100px]">Ticker</TableHead>
                  <TableHead>Company</TableHead>
                  <TableHead className="w-[150px]">Category</TableHead>
                  <TableHead className="text-right">
                    <div className="flex items-center justify-end gap-1">
                      Revenue Growth
                      <Tooltip>
                        <TooltipTrigger>
                          <Info className="h-3.5 w-3.5 text-muted-foreground" />
                        </TooltipTrigger>
                        <TooltipContent>
                          <p className="max-w-xs">Year-over-year revenue growth rate</p>
                        </TooltipContent>
                      </Tooltip>
                    </div>
                  </TableHead>
                  <TableHead className="text-right">
                    <div className="flex items-center justify-end gap-1">
                      Gross Margin
                      <Tooltip>
                        <TooltipTrigger>
                          <Info className="h-3.5 w-3.5 text-muted-foreground" />
                        </TooltipTrigger>
                        <TooltipContent>
                          <p className="max-w-xs">Gross profit divided by revenue</p>
                        </TooltipContent>
                      </Tooltip>
                    </div>
                  </TableHead>
                  <TableHead className="text-right">
                    <div className="flex items-center justify-end gap-1">
                      Operating Margin
                      <Tooltip>
                        <TooltipTrigger>
                          <Info className="h-3.5 w-3.5 text-muted-foreground" />
                        </TooltipTrigger>
                        <TooltipContent>
                          <p className="max-w-xs">Operating income divided by revenue</p>
                        </TooltipContent>
                      </Tooltip>
                    </div>
                  </TableHead>
                  <TableHead className="text-right">
                    <div className="flex items-center justify-end gap-1">
                      Rule of 40
                      <Tooltip>
                        <TooltipTrigger>
                          <Info className="h-3.5 w-3.5 text-muted-foreground" />
                        </TooltipTrigger>
                        <TooltipContent>
                          <p className="max-w-xs">Sum of revenue growth rate and profit margin</p>
                        </TooltipContent>
                      </Tooltip>
                    </div>
                  </TableHead>
                  <TableHead className="text-right">
                    <div className="flex items-center justify-end gap-1">
                      EV/Revenue
                      <Tooltip>
                        <TooltipTrigger>
                          <Info className="h-3.5 w-3.5 text-muted-foreground" />
                        </TooltipTrigger>
                        <TooltipContent>
                          <p className="max-w-xs">Enterprise value divided by revenue</p>
                        </TooltipContent>
                      </Tooltip>
                    </div>
                  </TableHead>

{/* Industry-specific metrics - conditionally rendered */}
                  {showIndustryMetrics && (
                    <>
                      <TableHead className="text-right">
                        <TooltipProvider>
                          <Tooltip>
                            <TooltipTrigger className="cursor-help">AUM ($B)</TooltipTrigger>
                            <TooltipContent>
                              <p>Assets Under Management in billions of dollars</p>
                            </TooltipContent>
                          </Tooltip>
                        </TooltipProvider>
                      </TableHead>

<TableHead className="text-right">
                        <TooltipProvider>
                          <Tooltip>
                            <TooltipTrigger className="cursor-help">Trading Vol (M)</TooltipTrigger>
                            <TooltipContent>
                              <p>Daily trading volume in millions</p>
                            </TooltipContent>
                          </Tooltip>
                        </TooltipProvider>
                      </TableHead>

<TableHead className="text-right">
                        <TooltipProvider>
                          <Tooltip>
                            <TooltipTrigger className="cursor-help">Market Share</TooltipTrigger>
                            <TooltipContent>
                              <p>Percentage of market share in their segment</p>
                            </TooltipContent>
                          </Tooltip>
                        </TooltipProvider>
                      </TableHead>

<TableHead className="text-right">
                        <TooltipProvider>
                          <Tooltip>
                            <TooltipTrigger className="cursor-help">Rev. Per Client</TooltipTrigger>
                            <TooltipContent>
                              <p>Average annual revenue per client</p>
                            </TooltipContent>
                          </Tooltip>
                        </TooltipProvider>
                      </TableHead>
                    </>
                  )}

<TableHead className="w-[80px]"></TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {categories.map((category) => (
                  <>
                    <TableRow key={category} className="bg-muted/20">
                      <TableCell colSpan={showIndustryMetrics ? 13 : 9} className="font-medium py-2">
                        {category}
                      </TableCell>
                    </TableRow>

{companiesByCategory[category].map((company) => (
                      <TableRow
                        key={company.id}
                        className={selectedCompany === company.ticker ? "bg-muted/30" : ""}
                        onClick={() => setSelectedCompany(company.ticker === selectedCompany ? null : company.ticker)}
                      >
                        <TableCell className="font-medium">{company.ticker}</TableCell>
                        <TableCell>{company.name}</TableCell>
                        <TableCell>
                          <Badge variant="outline" className="font-normal">
                            {company.category}
                          </Badge>
                        </TableCell>
                        <TableCell className="text-right">
                          <span
                            className={`${(company.metrics.revenueGrowth || 0) > 15 ? "text-green-600 font-medium" : ""}`}
                          >
                            {company.metrics.revenueGrowth?.toFixed(1)}%
                          </span>
                        </TableCell>
                        <TableCell className="text-right">{company.metrics.grossMargin?.toFixed(1)}%</TableCell>
                        <TableCell className="text-right">{company.metrics.operatingMargin?.toFixed(1)}%</TableCell>
                        <TableCell className="text-right">
                          <span
                            className={`${(company.metrics.ruleOf40 || 0) > 40 ? "text-green-600 font-medium" : ""}`}
                          >
                            {company.metrics.ruleOf40?.toFixed(1)}
                          </span>
                        </TableCell>
                        <TableCell className="text-right">{company.metrics.evToRevenue?.toFixed(2)}x</TableCell>

{/* Industry-specific metrics - conditionally rendered */}
                        {showIndustryMetrics && (
                          <>
                            <TableCell className="text-right">
                              {company.metrics.aum !== undefined ? `$${company.metrics.aum.toLocaleString()}B` : "-"}
                            </TableCell>

<TableCell className="text-right">
                              {company.metrics.tradingVolume !== undefined
                                ? `${company.metrics.tradingVolume.toLocaleString()}M`
                                : "-"}
                            </TableCell>

<TableCell className="text-right">
                              {company.metrics.marketShare !== undefined
                                ? `${company.metrics.marketShare.toFixed(1)}%`
                                : "-"}
                            </TableCell>

<TableCell className="text-right">
                              {company.metrics.revenuePerClient !== undefined
                                ? `$${company.metrics.revenuePerClient.toLocaleString()}`
                                : "-"}
                            </TableCell>
                          </>
                        )}

<TableCell>
                          <div className="flex justify-end gap-1">
                            <Button
                              variant="ghost"
                              size="icon"
                              onClick={(e) => {
                                e.stopPropagation()
                                openValuationModel(company)
                              }}
                            >
                              <Calculator className="h-4 w-4" />
                            </Button>
                            <Button
                              variant="ghost"
                              size="icon"
                              onClick={(e) => {
                                e.stopPropagation()
                                window.open(`https://finance.yahoo.com/quote/${company.ticker}`, "_blank")
                              }}
                            >
                              <ExternalLink className="h-4 w-4" />
                            </Button>
                            <Button
                              variant="ghost"
                              size="icon"
                              onClick={(e) => {
                                e.stopPropagation()
                                navigateToCompanyAnalysis(company.ticker)
                              }}
                            >
                              <Info className="h-4 w-4" />
                            </Button>
                          </div>
                        </TableCell>
                      </TableRow>
                    ))}
                  </>
                ))}
              </TableBody>
            </Table>
          </TooltipProvider>
        </CardContent>
      </Card>

{/* Valuation Model Dialog */}
      <Dialog open={valuationDialogOpen} onOpenChange={setValuationDialogOpen}>
        <DialogContent className="max-w-5xl max-h-[90vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle>Valuation Model</DialogTitle>
          </DialogHeader>
          {valuationCompany && <CompanyValuationModel company={valuationCompany} peerCompanies={companies} />}
        </DialogContent>
      </Dialog>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/investment-primer/primer-content-tracking-log.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Label } from "@/components/ui/label"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { History, Plus, Save } from "lucide-react"
import { useToast } from "@/hooks/use-toast"
import type { PrimerSection } from "@/types/investment-primer"

interface PrimerContentTrackingLogProps {
  section: PrimerSection
}

interface ContentUpdate {
  id: string
  date: string
  author: string
  message: string
  changes: string
}

export function PrimerContentTrackingLog({ section }: PrimerContentTrackingLogProps) {
  const [updates, setUpdates] = useState<ContentUpdate[]>([])
  const [activeTab, setActiveTab] = useState<"history" | "add">("history")
  const [newUpdate, setNewUpdate] = useState({
    message: "",
    changes: "",
  })

const { toast } = useToast()

// Load mock data for demonstration
  useEffect(() => {
    // In a real implementation, this would load from localStorage or a database
    const mockUpdates: ContentUpdate[] = [
      {
        id: "1",
        date: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toISOString(),
        author: "Sarah Johnson",
        message: "Initial draft of Financial Software Industry Primer",
        changes: "Created the initial structure and content outline for the Financial Software Industry Primer.",
      },
      {
        id: "2",
        date: new Date(Date.now() - 5 * 24 * 60 * 60 * 1000).toISOString(),
        author: "Michael Chen",
        message: "Added market size and growth projections",
        changes:
          "Updated section 2.3 with latest market size data and 5-year growth projections based on Gartner research.",
      },
      {
        id: "3",
        date: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000).toISOString(),
        author: "Alex Rodriguez",
        message: "Revised competitive landscape analysis",
        changes:
          "Completely rewrote the competitive landscape section to include emerging fintech players and updated market share data.",
      },
    ]

setUpdates(mockUpdates)
  }, [section.id])

const handleAddUpdate = () => {
    if (!newUpdate.message.trim()) {
      toast({
        title: "Error",
        description: "Please enter an update message",
        variant: "destructive",
      })
      return
    }

const update: ContentUpdate = {
      id: Date.now().toString(),
      date: new Date().toISOString(),
      author: "Current User", // In a real app, get from auth context
      message: newUpdate.message,
      changes: newUpdate.changes,
    }

setUpdates([update, ...updates])
    setNewUpdate({ message: "", changes: "" })

toast({
      title: "Update Added",
      description: "Your content update has been logged successfully",
    })

setActiveTab("history")
  }

return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <div>
          <h3 className="text-lg font-medium">Content Update Tracking</h3>
          <p className="text-sm text-muted-foreground">Financial Software Industry Primer</p>
        </div>
        <Button variant="outline" size="sm" onClick={() => setActiveTab("add")}>
          <Plus className="h-4 w-4 mr-1" />
          Log Update
        </Button>
      </div>

<Tabs value={activeTab} onValueChange={setActiveTab as (value: string) => void}>
        <TabsList className="mb-4">
          <TabsTrigger value="history">
            <History className="h-4 w-4 mr-1" />
            Update History
          </TabsTrigger>
          <TabsTrigger value="add">
            <Plus className="h-4 w-4 mr-1" />
            Add Update
          </TabsTrigger>
        </TabsList>

<TabsContent value="history">
          <Card>
            <CardContent className="p-4">
              <ScrollArea className="h-[400px]">
                <div className="space-y-4">
                  {updates.length > 0 ? (
                    updates.map((update) => (
                      <div key={update.id} className="border-b pb-4 last:border-0">
                        <div className="flex items-start justify-between">
                          <div>
                            <div className="font-medium">{update.message}</div>
                            <div className="text-sm text-muted-foreground">
                              {update.author} • {new Date(update.date).toLocaleString()}
                            </div>
                            {update.changes && (
                              <div className="mt-2 text-sm bg-muted p-3 rounded-md">{update.changes}</div>
                            )}
                          </div>
                          <Badge variant="outline" className="text-xs">
                            Update
                          </Badge>
                        </div>
                      </div>
                    ))
                  ) : (
                    <div className="text-center py-8 text-muted-foreground">No updates logged yet</div>
                  )}
                </div>
              </ScrollArea>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="add">
          <Card>
            <CardHeader>
              <CardTitle>Log Content Update</CardTitle>
              <CardDescription>Record changes made to the Financial Software Industry Primer</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="update-message">Update Summary</Label>
                <Input
                  id="update-message"
                  value={newUpdate.message}
                  onChange={(e) => setNewUpdate({ ...newUpdate, message: e.target.value })}
                  placeholder="Added new section on payment processing technologies"
                />
              </div>

<div className="space-y-2">
                <Label htmlFor="update-changes">Detailed Changes</Label>
                <Textarea
                  id="update-changes"
                  value={newUpdate.changes}
                  onChange={(e) => setNewUpdate({ ...newUpdate, changes: e.target.value })}
                  placeholder="Describe the specific changes you made to the primer content..."
                  rows={4}
                />
              </div>

<Button className="w-full" onClick={handleAddUpdate} disabled={!newUpdate.message.trim()}>
                <Save className="h-4 w-4 mr-1" />
                Save Update Log
              </Button>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/investment-primer/primer-creation-wizard.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Label } from "@/components/ui/label"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Separator } from "@/components/ui/separator"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Badge } from "@/components/ui/badge"
import { Loader2, ArrowRight, ArrowLeft, Check, FileText, BookOpen } from "lucide-react"
import { useToast } from "@/hooks/use-toast"
import { getAllIndustries, getIndustryTemplates, createPrimer } from "@/app/actions/primer-template-actions"
import type { Industry, PrimerTemplate, Primer } from "@/types/investment-primer"

interface PrimerCreationWizardProps {
  onComplete: (primer: Primer) => void
  onCancel: () => void
}

export function PrimerCreationWizard({ onComplete, onCancel }: PrimerCreationWizardProps) {
  const [step, setStep] = useState(1)
  const [industries, setIndustries] = useState<Industry[]>([])
  const [templates, setTemplates] = useState<PrimerTemplate[]>([])
  const [selectedIndustry, setSelectedIndustry] = useState<Industry | null>(null)
  const [selectedTemplate, setSelectedTemplate] = useState<PrimerTemplate | null>(null)
  const [primerName, setPrimerName] = useState("")
  const [primerDescription, setPrimerDescription] = useState("")
  const [isLoading, setIsLoading] = useState(true)
  const [isCreating, setIsCreating] = useState(false)

const { toast } = useToast()

// Fetch industries
  useEffect(() => {
    const fetchIndustries = async () => {
      setIsLoading(true)
      try {
        const industriesData = await getAllIndustries()
        setIndustries(industriesData)
      } catch (error) {
        console.error("Error fetching industries:", error)
        toast({
          title: "Error",
          description: "Failed to fetch industries",
          variant: "destructive",
        })
      } finally {
        setIsLoading(false)
      }
    }

fetchIndustries()
  }, [toast])

// Fetch templates when industry is selected
  useEffect(() => {
    const fetchTemplates = async () => {
      if (!selectedIndustry) {
        setTemplates([])
        return
      }

setIsLoading(true)
      try {
        const templatesData = await getIndustryTemplates(selectedIndustry.id)
        setTemplates(templatesData)
      } catch (error) {
        console.error("Error fetching templates:", error)
        toast({
          title: "Error",
          description: "Failed to fetch templates for the selected industry",
          variant: "destructive",
        })
      } finally {
        setIsLoading(false)
      }
    }

fetchTemplates()
  }, [selectedIndustry, toast])

const handleIndustrySelect = (industryId: string) => {
    const industry = industries.find((i) => i.id === industryId)
    setSelectedIndustry(industry || null)
    setSelectedTemplate(null)
  }

const handleTemplateSelect = (template: PrimerTemplate) => {
    setSelectedTemplate(template)
  }

const handleNext = () => {
    if (step === 1 && !selectedIndustry) {
      toast({
        title: "Industry Required",
        description: "Please select an industry to continue",
        variant: "destructive",
      })
      return
    }

if (step === 2 && !selectedTemplate) {
      toast({
        title: "Template Required",
        description: "Please select a template to continue",
        variant: "destructive",
      })
      return
    }

if (step === 3 && (!primerName.trim() || !primerDescription.trim())) {
      toast({
        title: "Information Required",
        description: "Please provide a name and description for your primer",
        variant: "destructive",
      })
      return
    }

if (step < 4) {
      setStep(step + 1)
    }
  }

const handleBack = () => {
    if (step > 1) {
      setStep(step - 1)
    }
  }

const handleCreate = async () => {
    if (!selectedIndustry || !selectedTemplate || !primerName.trim() || !primerDescription.trim()) {
      toast({
        title: "Information Required",
        description: "Please complete all required fields",
        variant: "destructive",
      })
      return
    }

setIsCreating(true)
    try {
      const result = await createPrimer(
        primerName,
        primerDescription,
        selectedIndustry.id,
        selectedTemplate.id,
        "Current User", // In a real app, this would be the current user's ID
      )

if (result.success && result.primer) {
        toast({
          title: "Primer Created",
          description: "Your new investment primer has been created successfully",
        })
        onComplete(result.primer)
      } else {
        toast({
          title: "Error",
          description: result.error || "Failed to create primer",
          variant: "destructive",
        })
      }
    } catch (error) {
      console.error("Error creating primer:", error)
      toast({
        title: "Error",
        description: "Failed to create primer",
        variant: "destructive",
      })
    } finally {
      setIsCreating(false)
    }
  }

return (
    <Card className="w-full max-w-4xl mx-auto">
      <CardHeader>
        <CardTitle>Create New Investment Primer</CardTitle>
        <CardDescription>
          Create a comprehensive investment primer for a specific industry using our template system
        </CardDescription>
      </CardHeader>
      <CardContent>
        <div className="mb-6">
          <div className="flex justify-between mb-2">
            {[1, 2, 3, 4].map((stepNumber) => (
              <div
                key={stepNumber}
                className={`flex flex-col items-center ${
                  stepNumber < step ? "text-primary" : stepNumber === step ? "text-primary" : "text-muted-foreground"
                }`}
              >
                <div
                  className={`w-8 h-8 rounded-full flex items-center justify-center mb-1 ${
                    stepNumber < step
                      ? "bg-primary text-primary-foreground"
                      : stepNumber === step
                        ? "border-2 border-primary"
                        : "border-2 border-muted"
                  }`}
                >
                  {stepNumber < step ? <Check className="h-4 w-4" /> : stepNumber}
                </div>
                <span className="text-xs">
                  {stepNumber === 1
                    ? "Industry"
                    : stepNumber === 2
                      ? "Template"
                      : stepNumber === 3
                        ? "Details"
                        : "Review"}
                </span>
              </div>
            ))}
          </div>
          <div className="relative mt-1">
            <div className="absolute top-0 left-0 right-0 h-1 bg-muted rounded-full">
              <div
                className="h-1 bg-primary rounded-full transition-all"
                style={{ width: `${((step - 1) / 3) * 100}%` }}
              ></div>
            </div>
          </div>
        </div>

{/* Step 1: Select Industry */}
        {step === 1 && (
          <div className="space-y-4">
            <h3 className="text-lg font-medium">Select an Industry</h3>
            <p className="text-muted-foreground">
              Choose the industry for which you want to create an investment primer
            </p>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
              {isLoading ? (
                <div className="col-span-2 flex justify-center py-8">
                  <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
                </div>
              ) : (
                industries.map((industry) => (
                  <div
                    key={industry.id}
                    className={`p-4 border rounded-lg cursor-pointer transition-colors ${
                      selectedIndustry?.id === industry.id
                        ? "border-primary bg-primary/5"
                        : "border-border hover:border-primary/50"
                    }`}
                    onClick={() => handleIndustrySelect(industry.id)}
                  >
                    <div className="flex items-start justify-between">
                      <div>
                        <h4 className="font-medium">{industry.name}</h4>
                        <p className="text-sm text-muted-foreground mt-1">{industry.description}</p>
                      </div>
                      <RadioGroup value={selectedIndustry?.id || ""} className="mt-1">
                        <RadioGroupItem value={industry.id} id={industry.id} className="mt-1" />
                      </RadioGroup>
                    </div>
                  </div>
                ))
              )}
            </div>
          </div>
        )}

{/* Step 2: Select Template */}
        {step === 2 && (
          <div className="space-y-4">
            <h3 className="text-lg font-medium">Select a Template</h3>
            <p className="text-muted-foreground">
              Choose a template to use as the foundation for your investment primer
            </p>

<div className="mt-4">
              {isLoading ? (
                <div className="flex justify-center py-8">
                  <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
                </div>
              ) : templates.length === 0 ? (
                <div className="text-center py-8 border rounded-lg">
                  <FileText className="h-12 w-12 mx-auto text-muted-foreground" />
                  <h4 className="mt-4 font-medium">No Templates Available</h4>
                  <p className="text-sm text-muted-foreground mt-1">
                    There are no templates available for the selected industry
                  </p>
                </div>
              ) : (
                <ScrollArea className="h-[400px] pr-4">
                  <div className="space-y-4">
                    {templates.map((template) => (
                      <div
                        key={template.id}
                        className={`p-4 border rounded-lg cursor-pointer transition-colors ${
                          selectedTemplate?.id === template.id
                            ? "border-primary bg-primary/5"
                            : "border-border hover:border-primary/50"
                        }`}
                        onClick={() => handleTemplateSelect(template)}
                      >
                        <div className="flex items-start justify-between">
                          <div>
                            <div className="flex items-center gap-2">
                              <h4 className="font-medium">{template.name}</h4>
                              {template.isDefault && (
                                <Badge variant="secondary" className="text-xs">
                                  Default
                                </Badge>
                              )}
                            </div>
                            <p className="text-sm text-muted-foreground mt-1">{template.description}</p>
                            <div className="mt-2">
                              <Badge variant="outline" className="text-xs">
                                {template.sections.length} Sections
                              </Badge>
                              <Badge variant="outline" className="text-xs ml-2">
                                {template.interactiveElements.length} Interactive Elements
                              </Badge>
                            </div>
                          </div>
                          <RadioGroup value={selectedTemplate?.id || ""} className="mt-1">
                            <RadioGroupItem value={template.id} id={template.id} className="mt-1" />
                          </RadioGroup>
                        </div>
                      </div>
                    ))}
                  </div>
                </ScrollArea>
              )}
            </div>
          </div>
        )}

{/* Step 3: Enter Details */}
        {step === 3 && (
          <div className="space-y-4">
            <h3 className="text-lg font-medium">Enter Primer Details</h3>
            <p className="text-muted-foreground">Provide information about your investment primer</p>

<div className="space-y-4 mt-4">
              <div className="space-y-2">
                <Label htmlFor="primer-name">Primer Name</Label>
                <Input
                  id="primer-name"
                  placeholder="e.g., Financial Software Industry Investment Primer"
                  value={primerName}
                  onChange={(e) => setPrimerName(e.target.value)}
                />
              </div>

<div className="space-y-2">
                <Label htmlFor="primer-description">Description</Label>
                <Textarea
                  id="primer-description"
                  placeholder="Provide a brief description of this investment primer"
                  rows={4}
                  value={primerDescription}
                  onChange={(e) => setPrimerDescription(e.target.value)}
                />
              </div>

<div className="space-y-2">
                <Label>GitHub Integration</Label>
                <Select defaultValue="yes">
                  <SelectTrigger>
                    <SelectValue placeholder="Enable GitHub integration?" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="yes">Yes, enable GitHub integration</SelectItem>
                    <SelectItem value="no">No, store locally only</SelectItem>
                  </SelectContent>
                </Select>
                <p className="text-xs text-muted-foreground">
                  GitHub integration allows version tracking and collaborative editing of primer content
                </p>
              </div>
            </div>
          </div>
        )}

{/* Step 4: Review */}
        {step === 4 && (
          <div className="space-y-4">
            <h3 className="text-lg font-medium">Review and Create</h3>
            <p className="text-muted-foreground">Review your selections before creating the investment primer</p>

<div className="space-y-4 mt-4 border rounded-lg p-4">
              <div>
                <h4 className="text-sm font-medium text-muted-foreground">Industry</h4>
                <p className="font-medium">{selectedIndustry?.name}</p>
              </div>

<div>
                <h4 className="text-sm font-medium text-muted-foreground">Template</h4>
                <p className="font-medium">{selectedTemplate?.name}</p>
                <p className="text-sm text-muted-foreground mt-1">{selectedTemplate?.description}</p>
              </div>

<div>
                <h4 className="text-sm font-medium text-muted-foreground">Primer Details</h4>
                <p className="font-medium">{primerName}</p>
                <p className="text-sm text-muted-foreground mt-1">{primerDescription}</p>
              </div>

<div>
                <h4 className="text-sm font-medium text-muted-foreground">Content</h4>
                <div className="mt-2 space-y-2">
                  <div className="flex items-center">
                    <Check className="h-4 w-4 text-green-500 mr-2" />
                    <span>{selectedTemplate?.sections.length} sections will be created</span>
                  </div>
                  <div className="flex items-center">
                    <Check className="h-4 w-4 text-green-500 mr-2" />
                    <span>{selectedTemplate?.interactiveElements.length} interactive elements will be added</span>
                  </div>
                  <div className="flex items-center">
                    <Check className="h-4 w-4 text-green-500 mr-2" />
                    <span>{selectedTemplate?.metrics.length} industry metrics will be tracked</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        )}
      </CardContent>
      <CardFooter className="flex justify-between">
        {step > 1 ? (
          <Button variant="outline" onClick={handleBack} disabled={isCreating}>
            <ArrowLeft className="h-4 w-4 mr-2" />
            Back
          </Button>
        ) : (
          <Button variant="outline" onClick={onCancel} disabled={isCreating}>
            Cancel
          </Button>
        )}

{step < 4 ? (
          <Button onClick={handleNext} disabled={isLoading}>
            Next
            <ArrowRight className="h-4 w-4 ml-2" />
          </Button>
        ) : (
          <Button onClick={handleCreate} disabled={isCreating}>
            {isCreating ? (
              <>
                <Loader2 className="h-4 w-4 mr-2 animate-spin" />
                Creating...
              </>
            ) : (
              <>
                <BookOpen className="h-4 w-4 mr-2" />
                Create Primer
              </>
            )}
          </Button>
        )}
      </CardFooter>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/investment-primer/primer-dashboard-improved.tsx" isMerged="true"
"use client"

import { InvestmentPrimerCard } from "./investment-primer-card"

const investmentPrimers = [
  {
    id: 1,
    title: "Understanding Stocks",
    description: "A beginner's guide to the stock market.",
    imageUrl: "/images/stock-market.jpg",
    link: "/investment-primer/stocks",
  },
  {
    id: 2,
    title: "Bonds Explained",
    description: "Learn about the basics of bonds and fixed income.",
    imageUrl: "/images/bonds.jpg",
    link: "/investment-primer/bonds",
  },
  {
    id: 3,
    title: "Mutual Funds & ETFs",
    description: "An overview of diversified investment options.",
    imageUrl: "/images/mutual-funds.jpg",
    link: "/investment-primer/mutual-funds",
  },
  {
    id: 4,
    title: "Real Estate Investing",
    description: "Exploring the world of real-estate investments.",
    imageUrl: "/images/real-estate.jpg",
    link: "/investment-primer/real-estate",
  },
]

export function PrimerDashboard() {
  return (
    <div className="space-y-6">
      <header>
        <h2 className="text-2xl font-bold tracking-tight">Industry Primers</h2>
        <p className="text-muted-foreground">Explore the fundamentals of investing with our curated guides.</p>
      </header>

<div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
        {investmentPrimers.map((primer) => (
          <InvestmentPrimerCard
            key={primer.id}
            title={primer.title}
            description={primer.description}
            imageUrl={primer.imageUrl}
            link={primer.link}
          />
        ))}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/investment-primer/primer-dashboard.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Sparkles, Search, FileText } from "lucide-react"
import { useToast } from "@/hooks/use-toast"
import { getAllIndustries, getAllPrimers, getPrimer } from "@/app/actions/primer-template-actions"
import {
  getAllPrimerSections,
  getPrimerSection,
  getSectionSubsections,
  getSectionInteractiveElements,
} from "@/app/actions/primer-actions"
import type {
  Industry,
  Primer,
  PrimerSection,
  PrimerSubsection,
  PrimerInteractiveElement,
  IndustryMetric,
  CompanyComparison,
} from "@/types/investment-primer"
import { PrimerSectionViewer } from "@/components/investment-primer/primer-section-viewer"
import { PrimerSectionEditor } from "@/components/investment-primer/primer-section-editor"
import { useMobileCheck } from "@/hooks/use-mobile-check"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { PrimerMetricsViewer } from "./primer-metrics-viewer"
import { PrimerCompanyComparison } from "./primer-company-comparison"
import { FinancialServicesOverview } from "./financial-services-overview"
import { getFinancialSoftwareMetrics, getFinancialSoftwareCompanies } from "@/app/actions/primer-actions"
import { IndustryAnalysis } from "./industry-analysis"

export function PrimerDashboard() {
  const router = useRouter()
  const isMobile = useMobileCheck()
  const [industries, setIndustries] = useState<Industry[]>([])
  const [primers, setPrimers] = useState<Primer[]>([])
  const [filteredPrimers, setFilteredPrimers] = useState<Primer[]>([])
  const [selectedPrimer, setSelectedPrimer] = useState<Primer | null>(null)
  const [selectedIndustry, setSelectedIndustry] = useState<string | null>(null)
  const [sections, setSections] = useState<PrimerSection[]>([])
  const [selectedSection, setSelectedSection] = useState<PrimerSection | null>(null)
  const [subsections, setSubsections] = useState<PrimerSubsection[]>([])
  const [interactiveElements, setInteractiveElements] = useState<PrimerInteractiveElement[]>([])
  const [isLoading, setIsLoading] = useState(true)
  const [activeTab, setActiveTab] = useState("content")
  const [searchQuery, setSearchQuery] = useState("")
  const [isEditing, setIsEditing] = useState(false)
  const [metrics, setMetrics] = useState<IndustryMetric[]>([])
  const [companies, setCompanies] = useState<CompanyComparison[]>([])
  const [loadingFinancialData, setLoadingFinancialData] = useState(true)

const { toast } = useToast()

// Fetch industries and primers
  useEffect(() => {
    const fetchData = async () => {
      setIsLoading(true)
      try {
        const industriesData = await getAllIndustries()
        setIndustries(industriesData)

const primersData = await getAllPrimers()
        setPrimers(primersData)
        setFilteredPrimers(primersData)

// Select the first primer by default
        if (primersData.length > 0 && !selectedPrimer) {
          setSelectedPrimer(primersData[0])
        }
      } catch (error) {
        console.error("Error fetching data:", error)
        toast({
          title: "Error",
          description: "Failed to fetch primers",
          variant: "destructive",
        })
      } finally {
        setIsLoading(false)
      }
    }

fetchData()
  }, [toast, selectedPrimer])

// Fetch primer sections when a primer is selected
  useEffect(() => {
    const fetchPrimerSections = async () => {
      if (!selectedPrimer) return

setIsLoading(true)
      try {
        const sectionsData = await getAllPrimerSections()
        setSections(sectionsData)

// Select the first section by default if no section is selected
        if (sectionsData.length > 0 && !selectedSection) {
          setSelectedSection(sectionsData[0])
        }
      } catch (error) {
        console.error("Error fetching primer sections:", error)
        toast({
          title: "Error",
          description: "Failed to fetch primer sections",
          variant: "destructive",
        })
      } finally {
        setIsLoading(false)
      }
    }

fetchPrimerSections()
  }, [selectedPrimer, toast])

// Fetch subsections and interactive elements when a section is selected
  useEffect(() => {
    const fetchSectionDetails = async () => {
      if (!selectedSection) return

try {
        const subsectionsData = await getSectionSubsections(selectedSection.id)
        setSubsections(subsectionsData)

const interactiveData = await getSectionInteractiveElements(selectedSection.id)
        setInteractiveElements(interactiveData)
      } catch (error) {
        console.error("Error fetching section details:", error)
        toast({
          title: "Error",
          description: "Failed to fetch section details",
          variant: "destructive",
        })
      }
    }

fetchSectionDetails()
  }, [selectedSection, toast])

// Filter primers based on selected industry and search query
  useEffect(() => {
    let filtered = primers

// Filter by industry
    if (selectedIndustry) {
      filtered = filtered.filter((primer) => primer.industryId === selectedIndustry)
    }

// Filter by search query
    if (searchQuery.trim()) {
      const query = searchQuery.toLowerCase()
      filtered = filtered.filter(
        (primer) => primer.title.toLowerCase().includes(query) || primer.description.toLowerCase().includes(query),
      )
    }

setFilteredPrimers(filtered)
  }, [primers, selectedIndustry, searchQuery])

// Auto-select the financial software primer and first section on mount
  useEffect(() => {
    const autoSelectInitialContent = async () => {
      setIsLoading(true)
      try {
        const primersData = await getAllPrimers()
        // Find the financial software primer
        const financialSoftwarePrimer = primersData.find(
          (primer) =>
            primer.industryId === "financial-software" || primer.title.toLowerCase().includes("financial software"),
        )

let selectedPrimerData = null
        if (financialSoftwarePrimer) {
          selectedPrimerData = financialSoftwarePrimer
          setSelectedPrimer(financialSoftwarePrimer)
        } else if (primersData.length > 0) {
          // Fallback to the first primer if financial software primer not found
          selectedPrimerData = primersData[0]
          setSelectedPrimer(primersData[0])
        }

// If we have a selected primer, also get and select the first section
        if (selectedPrimerData) {
          const sectionsData = await getAllPrimerSections()
          if (sectionsData.length > 0) {
            setSelectedSection(sectionsData[0])
            setSections(sectionsData)
          }
        }
      } catch (error) {
        console.error("Error auto-selecting content:", error)
      } finally {
        setIsLoading(false)
      }
    }

if (!selectedPrimer) {
      autoSelectInitialContent()
    }
  }, [])

useEffect(() => {
    async function loadData() {
      try {
        const [metricsData, companiesData] = await Promise.all([
          getFinancialSoftwareMetrics(),
          getFinancialSoftwareCompanies(),
        ])

setMetrics(metricsData)
        setCompanies(companiesData)
      } catch (error) {
        console.error("Error loading primer data:", error)
      } finally {
        setLoadingFinancialData(false)
      }
    }

loadData()
  }, [])

const handleIndustrySelect = (industryId: string | null) => {
    setSelectedIndustry(industryId)
    setSelectedPrimer(null)
    setSelectedSection(null)
  }

const handlePrimerSelect = (primer: Primer) => {
    setSelectedPrimer(primer)
    setSelectedSection(null)
    setIsEditing(false)
  }

const handleSectionSelect = (section: PrimerSection) => {
    setSelectedSection(section)
    setIsEditing(false)
    setActiveTab("content")
  }

const handleEditToggle = () => {
    setIsEditing(!isEditing)
    setActiveTab("content")
  }

const handleRefresh = async () => {
    setIsLoading(true)
    try {
      const primersData = await getAllPrimers()
      setPrimers(primersData)
      setFilteredPrimers(primersData)

if (selectedPrimer) {
        const refreshedPrimer = await getPrimer(selectedPrimer.id)
        if (refreshedPrimer) {
          setSelectedPrimer(refreshedPrimer)
        }
      }

if (selectedSection) {
        const refreshedSection = await getPrimerSection(selectedSection.id)
        if (refreshedSection) {
          setSelectedSection(refreshedSection)
        }
      }

toast({
        title: "Refreshed",
        description: "Primer content has been refreshed",
      })
    } catch (error) {
      console.error("Error refreshing data:", error)
      toast({
        title: "Error",
        description: "Failed to refresh primer data",
        variant: "destructive",
      })
    } finally {
      setIsLoading(false)
    }
  }

const handleCreatePrimer = () => {
    router.push("/investment-primer/create")
  }

const handleManageTemplates = () => {
    router.push("/investment-primer/templates")
  }

const handleCreateSection = () => {
    // Create a new section in the current primer
    if (!selectedPrimer) return

toast({
      title: "Creating new section",
      description: "This functionality will create a new section in the Financial Software Industry Primer.",
    })

// Here you would typically open a dialog or form to create a new section
    // For now, we'll just show a toast notification
  }

const navigateToAIContentGenerator = () => {
    router.push("/investment-primer/ai-content")
  }

const navigateToResearchAssistant = () => {
    router.push("/investment-primer/ai-content?tab=research")
  }

return (
    <div className="flex flex-col h-full max-w-[1600px] mx-auto">
      <div className="flex-1 p-3 md:p-6 lg:p-8">
        {/* Main Content */}
        <Card className="h-full shadow-sm overflow-hidden border-0 md:border">
          {isLoading && (
            <div className="absolute inset-0 bg-background/80 flex items-center justify-center z-10">
              <div className="flex flex-col items-center">
                <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
                <p className="mt-4 text-sm text-muted-foreground">Loading primer content...</p>
              </div>
            </div>
          )}

<CardHeader className="pb-2">
            <div className="flex justify-between items-center">
              <div>
                <CardTitle>{selectedPrimer?.title || "Financial Software Industry Primer"}</CardTitle>
                <CardDescription>
                  {selectedPrimer?.description ||
                    "Comprehensive analysis of the financial software industry, including key metrics, trends, and company comparisons."}
                </CardDescription>
              </div>
              <DropdownMenu>
                <DropdownMenuTrigger asChild>
                  <Button variant="outline" className="gap-2">
                    <Sparkles className="h-4 w-4" />
                    AI Tools
                  </Button>
                </DropdownMenuTrigger>
                <DropdownMenuContent align="end">
                  <DropdownMenuItem onClick={navigateToAIContentGenerator}>
                    <FileText className="h-4 w-4 mr-2" />
                    Content Generator
                  </DropdownMenuItem>
                  <DropdownMenuItem onClick={navigateToResearchAssistant}>
                    <Search className="h-4 w-4 mr-2" />
                    Research Assistant
                  </DropdownMenuItem>
                </DropdownMenuContent>
              </DropdownMenu>
            </div>
          </CardHeader>

<CardContent className="p-4">
            {loadingFinancialData ? (
              <div className="flex items-center justify-center h-[400px]">
                <div className="text-center">
                  <div className="w-8 h-8 border-4 border-primary border-t-transparent rounded-full animate-spin mx-auto"></div>
                  <p className="mt-4 text-lg font-medium">Loading financial data...</p>
                </div>
              </div>
            ) : (
              <div className="flex flex-col space-y-6">
                {/* Section selector */}
                {sections.length > 0 && selectedPrimer && (
                  <div className="w-full">
                    <select
                      className="w-full p-2 border rounded-md"
                      value={selectedSection?.id || ""}
                      onChange={(e) => {
                        const section = sections.find((s) => s.id === e.target.value)
                        if (section) handleSectionSelect(section)
                      }}
                    >
                      <option value="" disabled>
                        Select a section
                      </option>
                      {sections.map((section) => (
                        <option key={section.id} value={section.id}>
                          {section.title}
                        </option>
                      ))}
                    </select>
                  </div>
                )}

{/* Selected section content or industry overview */}
                {selectedSection && selectedPrimer ? (
                  <div className="flex-1">
                    <div className="flex justify-between items-center mb-6">
                      <h3 className="text-lg font-medium">{selectedSection.title}</h3>
                      <Button variant={isEditing ? "default" : "outline"} size="sm" onClick={handleEditToggle}>
                        {isEditing ? "Save" : "Edit"}
                      </Button>
                    </div>

<Tabs value={activeTab} onValueChange={setActiveTab} defaultValue="content">
                      <TabsList>
                        <TabsTrigger value="content">Content</TabsTrigger>
                        <TabsTrigger value="analysis">Industry Analysis</TabsTrigger>
                        <TabsTrigger value="metrics">Metrics</TabsTrigger>
                        <TabsTrigger value="companies">Companies</TabsTrigger>
                      </TabsList>
                      <TabsContent value="content">
                        {isEditing ? (
                          <PrimerSectionEditor
                            section={selectedSection}
                            subsections={subsections}
                            onSave={(updatedSection) => {
                              setSelectedSection(updatedSection)
                              setIsEditing(false)
                            }}
                          />
                        ) : (
                          <PrimerSectionViewer section={selectedSection} subsections={subsections} />
                        )}
                      </TabsContent>
                      <TabsContent value="analysis">
                        <IndustryAnalysis companies={companies} />
                      </TabsContent>
                      <TabsContent value="metrics">
                        <PrimerMetricsViewer metrics={metrics} />
                      </TabsContent>
                      <TabsContent value="companies">
                        <PrimerCompanyComparison companies={companies} />
                      </TabsContent>
                    </Tabs>
                  </div>
                ) : (
                  <div className="space-y-8">
                    <Tabs defaultValue="overview" className="space-y-4">
                      <TabsList>
                        <TabsTrigger value="overview">Industry Overview</TabsTrigger>
                        <TabsTrigger value="analysis">Industry Analysis</TabsTrigger>
                        <TabsTrigger value="metrics">Key Metrics</TabsTrigger>
                        <TabsTrigger value="companies">Company Comparison</TabsTrigger>
                      </TabsList>

{!selectedPrimer && (
                      <div className="flex gap-2 justify-center mt-8">
                        <Button onClick={handleCreatePrimer}>Create Primer</Button>
                        <Button variant="outline" onClick={handleManageTemplates}>
                          Manage Templates
                        </Button>
                      </div>
                    )}
                  </div>
                )}
              </div>
            )}
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/investment-primer/primer-github-integration.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { History, RefreshCw, FileText } from "lucide-react"
import { useToast } from "@/hooks/use-toast"
import type { PrimerSection } from "@/types/investment-primer"
import { getGitHubPrimerContent, getGitHubPrimerHistory } from "@/app/actions/primer-actions"

interface PrimerGitHubIntegrationProps {
  section: PrimerSection
}

export function PrimerGitHubIntegration({ section }: PrimerGitHubIntegrationProps) {
  const [content, setContent] = useState("")
  const [history, setHistory] = useState<{ date: string; author: string; message: string; sha: string }[]>([])
  const [isLoading, setIsLoading] = useState(true)
  const [activeTab, setActiveTab] = useState("content")
  const { toast } = useToast()

useEffect(() => {
    const fetchContent = async () => {
      setIsLoading(true)
      try {
        const result = await getGitHubPrimerContent(section.githubPath!)
        setContent(result.content)
      } catch (error) {
        console.error("Error fetching content from GitHub:", error)
        toast({
          title: "Error",
          description: "Failed to fetch content from GitHub",
          variant: "destructive",
        })
      } finally {
        setIsLoading(false)
      }
    }

const fetchHistory = async () => {
      try {
        const result = await getGitHubPrimerHistory(section.githubPath!)
        setHistory(result.history)
      } catch (error) {
        console.error("Error fetching history from GitHub:", error)
        toast({
          title: "Error",
          description: "Failed to fetch history from GitHub",
          variant: "destructive",
        })
      }
    }

if (section.githubPath) {
      fetchContent()
      fetchHistory()
    }
  }, [section.githubPath, toast])

return (
    <div className="space-y-4">
      <Tabs value={activeTab} onValueChange={setActiveTab}>
        <TabsList className="mb-4">
          <TabsTrigger value="content">
            <FileText className="h-4 w-4 mr-1" />
            Content
          </TabsTrigger>
          <TabsTrigger value="history">
            <History className="h-4 w-4 mr-1" />
            History
          </TabsTrigger>
        </TabsList>

<TabsContent value="content">
          <Card>
            <CardHeader>
              <CardTitle>Primer Content</CardTitle>
              <CardDescription>Content from GitHub</CardDescription>
            </CardHeader>
            <CardContent>
              {isLoading ? (
                <div className="flex justify-center items-center h-40">
                  <RefreshCw className="h-8 w-8 animate-spin text-muted-foreground" />
                </div>
              ) : (
                <ScrollArea className="h-[400px]">
                  <pre className="whitespace-pre-wrap overflow-auto text-sm font-mono">{content}</pre>
                </ScrollArea>
              )}
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="history">
          <Card>
            <CardHeader>
              <CardTitle>Update History</CardTitle>
              <CardDescription>View the update history of this section</CardDescription>
            </CardHeader>
            <CardContent>
              <ScrollArea className="h-[400px]">
                <div className="space-y-4">
                  {history.length > 0 ? (
                    history.map((item) => (
                      <div key={item.sha} className="border-b pb-4 last:border-0">
                        <div className="flex items-start justify-between">
                          <div>
                            <div className="font-medium">{item.message}</div>
                            <div className="text-sm text-muted-foreground">
                              {item.author} • {new Date(item.date).toLocaleString()}
                            </div>
                          </div>
                          <Badge variant="outline" className="text-xs">
                            {item.sha.substring(0, 7)}
                          </Badge>
                        </div>
                      </div>
                    ))
                  ) : (
                    <div className="text-center py-8 text-muted-foreground">No updates found</div>
                  )}
                </div>
              </ScrollArea>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/investment-primer/primer-interactive-viewer.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Calculator, BarChart2, Clock } from "lucide-react"
import type { PrimerInteractiveElement } from "@/types/investment-primer"

interface PrimerInteractiveViewerProps {
  elements: PrimerInteractiveElement[]
  sectionId: string
}

export function PrimerInteractiveViewer({ elements, sectionId }: PrimerInteractiveViewerProps) {
  const [calculatorInputs, setCalculatorInputs] = useState<Record<string, number>>({})
  const [calculatorResult, setCalculatorResult] = useState<number | null>(null)

if (elements.length === 0) {
    return (
      <div className="flex items-center justify-center h-[400px]">
        <div className="text-center">
          <Calculator className="h-12 w-12 mx-auto text-muted-foreground" />
          <h3 className="mt-4 text-lg font-medium">No Interactive Elements</h3>
          <p className="text-muted-foreground">This section doesn't have any interactive elements yet</p>
        </div>
      </div>
    )
  }

const handleCalculatorInputChange = (name: string, value: string) => {
    setCalculatorInputs({
      ...calculatorInputs,
      [name]: Number.parseFloat(value) || 0,
    })
  }

const calculateValuation = () => {
    const { revenue, growthRate, grossMargin, nrr } = calculatorInputs

// Simple SaaS valuation formula (for demonstration)
    // This is a simplified model - real valuations are more complex
    const baseMultiple = 5
    const growthFactor = growthRate / 20 // Normalize growth impact
    const marginFactor = (grossMargin - 50) / 10 // Normalize margin impact
    const nrrFactor = (nrr - 100) / 5 // Normalize NRR impact

const multiple = baseMultiple + growthFactor + marginFactor + nrrFactor
    setCalculatorResult(multiple)
  }

const renderInteractiveElement = (element: PrimerInteractiveElement) => {
    switch (element.type) {
      case "calculator":
        return (
          <Card key={element.id}>
            <CardHeader>
              <CardTitle>{element.title}</CardTitle>
              <CardDescription>{element.description}</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                {element.config.inputs.map((input: any) => (
                  <div key={input.name} className="space-y-2">
                    <Label htmlFor={input.name}>{input.label}</Label>
                    <Input
                      id={input.name}
                      type="number"
                      defaultValue={input.default}
                      onChange={(e) => handleCalculatorInputChange(input.name, e.target.value)}
                    />
                  </div>
                ))}

<Button onClick={calculateValuation} className="w-full">
                  Calculate Valuation
                </Button>

{calculatorResult !== null && (
                  <div className="mt-4 p-4 bg-muted rounded-md">
                    <div className="text-sm font-medium text-muted-foreground">{element.config.outputLabel}</div>
                    <div className="text-3xl font-bold">{calculatorResult.toFixed(1)}x</div>
                    <div className="text-sm text-muted-foreground mt-2">
                      Based on your inputs, this company would likely trade at {calculatorResult.toFixed(1)}x revenue.
                    </div>
                  </div>
                )}
              </div>
            </CardContent>
          </Card>
        )

case "visualization":
        return (
          <Card key={element.id}>
            <CardHeader>
              <CardTitle>{element.title}</CardTitle>
              <CardDescription>{element.description}</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="h-[400px] flex items-center justify-center bg-muted rounded-md">
                <div className="text-center">
                  <BarChart2 className="h-12 w-12 mx-auto text-muted-foreground" />
                  <p className="mt-2 text-sm text-muted-foreground">Interactive visualization would render here</p>
                </div>
              </div>
            </CardContent>
          </Card>
        )

case "comparison":
        return (
          <Card key={element.id}>
            <CardHeader>
              <CardTitle>{element.title}</CardTitle>
              <CardDescription>{element.description}</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="overflow-x-auto">
                <table className="w-full border-collapse">
                  <thead>
                    <tr>
                      <th className="text-left p-2 border-b">Company</th>
                      {element.config.metrics.map((metric: string) => (
                        <th key={metric} className="text-left p-2 border-b">
                          {metric}
                        </th>
                      ))}
                    </tr>
                  </thead>
                  <tbody>
                    {element.config.companies.map((ticker: string) => (
                      <tr key={ticker}>
                        <td className="p-2 border-b font-medium">{ticker}</td>
                        {element.config.metrics.map((metric: string) => (
                          <td key={`${ticker}-${metric}`} className="p-2 border-b">
                            {/* Mock data - in a real app, this would be fetched */}
                            {metric === "Revenue Growth"
                              ? `${(Math.random() * 30).toFixed(1)}%`
                              : metric === "Gross Margin"
                                ? `${(Math.random() * 30 + 50).toFixed(1)}%`
                                : metric === "EBITDA Margin"
                                  ? `${(Math.random() * 20 + 20).toFixed(1)}%`
                                  : metric === "R&D %"
                                    ? `${(Math.random() * 15 + 5).toFixed(1)}%`
                                    : metric === "NRR"
                                      ? `${(Math.random() * 20 + 100).toFixed(1)}%`
                                      : metric === "Rule of 40"
                                        ? `${(Math.random() * 50 + 20).toFixed(1)}`
                                        : "N/A"}
                          </td>
                        ))}
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </CardContent>
          </Card>
        )

case "quiz":
        return (
          <Card key={element.id}>
            <CardHeader>
              <CardTitle>{element.title}</CardTitle>
              <CardDescription>{element.description}</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-6">
                {element.config.questions.map((q: any, index: number) => (
                  <div key={index} className="space-y-3">
                    <h3 className="font-medium">
                      {index + 1}. {q.question}
                    </h3>
                    <div className="space-y-2">
                      {q.options.map((option: string, optIndex: number) => (
                        <div key={optIndex} className="flex items-center space-x-2">
                          <input
                            type="radio"
                            id={`q${index}-opt${optIndex}`}
                            name={`question-${index}`}
                            className="h-4 w-4"
                          />
                          <label htmlFor={`q${index}-opt${optIndex}`}>{option}</label>
                        </div>
                      ))}
                    </div>
                  </div>
                ))}
                <Button className="w-full">Check Answers</Button>
              </div>
            </CardContent>
          </Card>
        )

case "timeline":
        return (
          <Card key={element.id}>
            <CardHeader>
              <CardTitle>{element.title}</CardTitle>
              <CardDescription>{element.description}</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="relative">
                <div className="absolute left-4 top-0 bottom-0 w-0.5 bg-muted-foreground/20" />
                <div className="space-y-8 relative">
                  {element.config.events.map((event: any, index: number) => (
                    <div key={index} className="flex gap-4">
                      <div className="flex-none">
                        <div className="h-8 w-8 rounded-full bg-primary flex items-center justify-center text-primary-foreground">
                          <Clock className="h-4 w-4" />
                        </div>
                      </div>
                      <div className="flex-1 pt-1">
                        <div className="font-medium">
                          {event.year}: {event.title}
                        </div>
                        <div className="text-sm text-muted-foreground">{event.description}</div>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </CardContent>
          </Card>
        )

default:
        return null
    }
  }

return <div className="space-y-6">{elements.map(renderInteractiveElement)}</div>
}
[V0_FILE]typescriptreact:file="components/investment-primer/primer-metrics-viewer.tsx" isMerged="true"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { ArrowUpRight, ArrowDownRight, TrendingUp } from "lucide-react"
import type { IndustryMetric } from "@/types/investment-primer"

interface PrimerMetricsViewerProps {
  metrics: IndustryMetric[]
}

export function PrimerMetricsViewer({ metrics }: PrimerMetricsViewerProps) {
  if (metrics.length === 0) {
    return (
      <div className="flex items-center justify-center h-[400px]">
        <div className="text-center">
          <TrendingUp className="h-12 w-12 mx-auto text-muted-foreground" />
          <h3 className="mt-4 text-lg font-medium">No Metrics Available</h3>
          <p className="text-muted-foreground">Industry metrics data is not available</p>
        </div>
      </div>
    )
  }

// Calculate trend for each metric
  const getMetricTrend = (metric: IndustryMetric) => {
    if (metric.historicalValues.length < 2) return 0

const sortedValues = [...metric.historicalValues].sort(
      (a, b) => new Date(a.date).getTime() - new Date(b.date).getTime(),
    )

const previousValue = sortedValues[sortedValues.length - 2].value
    const currentValue = metric.currentValue

return ((currentValue - previousValue) / previousValue) * 100
  }

return (
    <div className="space-y-6">
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        {metrics.map((metric) => {
          const trend = getMetricTrend(metric)
          const isPositive = trend >= 0

return (
            <Card key={metric.id}>
              <CardHeader className="pb-2">
                <CardTitle className="text-lg">{metric.name}</CardTitle>
                <CardDescription>{metric.description}</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="flex items-end justify-between">
                  <div className="text-3xl font-bold">
                    {metric.currentValue}
                    {metric.unit}
                  </div>
                  <div className="flex items-center">
                    <Badge
                      className={`flex items-center gap-1 ${
                        isPositive ? "bg-green-100 text-green-800" : "bg-red-100 text-red-800"
                      }`}
                    >
                      {isPositive ? <ArrowUpRight className="h-3 w-3" /> : <ArrowDownRight className="h-3 w-3" />}
                      {Math.abs(trend).toFixed(1)}%
                    </Badge>
                  </div>
                </div>

<div className="mt-4 h-32 relative">
                  {/* Simple chart visualization */}
                  <div className="absolute inset-0 flex items-end">
                    {metric.historicalValues.map((dataPoint, index) => {
                      const maxValue = Math.max(...metric.historicalValues.map((d) => d.value))
                      const height = (dataPoint.value / maxValue) * 100

return (
                        <div
                          key={index}
                          className="flex-1 mx-0.5 bg-primary/20 rounded-t"
                          style={{ height: `${height}%` }}
                          title={`${new Date(dataPoint.date).getFullYear()}: ${dataPoint.value}${metric.unit}`}
                        />
                      )
                    })}
                  </div>
                </div>

<div className="mt-2 text-xs text-muted-foreground">
                  Source: {metric.source} • Last updated: {new Date(metric.lastUpdated).toLocaleDateString()}
                </div>
              </CardContent>
            </Card>
          )
        })}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/investment-primer/primer-section-editor.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Card, CardContent } from "@/components/ui/card"
import { Label } from "@/components/ui/label"
import { Wand2, Save, GitCommit } from "lucide-react"
import { useToast } from "@/hooks/use-toast"
import { updateSection, generateAIPrimerContent } from "@/app/actions/primer-actions"
import type { PrimerSection, PrimerSubsection } from "@/types/investment-primer"

interface PrimerSectionEditorProps {
  section: PrimerSection
  subsections: PrimerSubsection[]
  onSave: (section: PrimerSection) => void
}

export function PrimerSectionEditor({ section, subsections, onSave }: PrimerSectionEditorProps) {
  const [editedSection, setEditedSection] = useState<PrimerSection>({ ...section })
  const [editedSubsections, setEditedSubsections] = useState<PrimerSubsection[]>([...subsections])
  const [activeTab, setActiveTab] = useState<string>("main")
  const [isGenerating, setIsGenerating] = useState(false)
  const [isSaving, setIsSaving] = useState(false)
  const [aiPrompt, setAiPrompt] = useState("")

const { toast } = useToast()

const handleSectionChange = (field: keyof PrimerSection, value: string) => {
    setEditedSection({
      ...editedSection,
      [field]: value,
    })
  }

const handleSubsectionChange = (id: string, field: keyof PrimerSubsection, value: string) => {
    setEditedSubsections(
      editedSubsections.map((subsection) => (subsection.id === id ? { ...subsection, [field]: value } : subsection)),
    )
  }

const handleGenerateContent = async () => {
    if (!aiPrompt.trim()) {
      toast({
        title: "Error",
        description: "Please enter a prompt for content generation",
        variant: "destructive",
      })
      return
    }

setIsGenerating(true)
    try {
      const result = await generateAIPrimerContent(aiPrompt, editedSection.title)

if (result.error) {
        toast({
          title: "Error",
          description: result.error,
          variant: "destructive",
        })
        return
      }

// Update the content based on which tab is active
      if (activeTab === "main") {
        handleSectionChange("content", result.content)
      } else {
        const subsectionId = activeTab
        handleSubsectionChange(subsectionId, "content", result.content)
      }

toast({
        title: "Content Generated",
        description: "AI-generated content has been added to the editor",
      })
    } catch (error) {
      console.error("Error generating content:", error)
      toast({
        title: "Error",
        description: "Failed to generate content",
        variant: "destructive",
      })
    } finally {
      setIsGenerating(false)
      setAiPrompt("")
    }
  }

const handleSave = async (commitToGitHub = false) => {
    setIsSaving(true)
    try {
      // Update the section
      const result = await updateSection(section.id, editedSection, commitToGitHub)

if (!result.success || !result.section) {
        toast({
          title: "Error",
          description: result.error || "Failed to save section",
          variant: "destructive",
        })
        return
      }

// TODO: Add logic to update subsections

toast({
        title: "Saved",
        description: commitToGitHub ? "Changes saved and committed to GitHub" : "Changes saved successfully",
      })

onSave(result.section)
    } catch (error) {
      console.error("Error saving section:", error)
      toast({
        title: "Error",
        description: "Failed to save changes",
        variant: "destructive",
      })
    } finally {
      setIsSaving(false)
    }
  }

return (
    <div className="space-y-4">
      <div className="space-y-2">
        <Label htmlFor="title">Section Title</Label>
        <Input id="title" value={editedSection.title} onChange={(e) => handleSectionChange("title", e.target.value)} />
      </div>

{/* Tabs for main content and subsections */}
      <Tabs defaultValue="main" value={activeTab} onValueChange={setActiveTab}>
        <TabsList className="mb-4">
          <TabsTrigger value="main">Main Content</TabsTrigger>
          {editedSubsections.map((subsection) => (
            <TabsTrigger key={subsection.id} value={subsection.id}>
              {subsection.title}
            </TabsTrigger>
          ))}
        </TabsList>

<TabsContent value="main">
          <Card>
            <CardContent className="p-4 space-y-4">
              <Textarea
                value={editedSection.content}
                onChange={(e) => handleSectionChange("content", e.target.value)}
                className="min-h-[400px] font-mono"
                placeholder="Enter section content in Markdown format..."
              />
            </CardContent>
          </Card>

<div className="mt-4 space-y-2">
            <Label htmlFor="ai-prompt">AI Content Generation</Label>
            <div className="flex gap-2">
              <Input
                id="ai-prompt"
                value={aiPrompt}
                onChange={(e) => setAiPrompt(e.target.value)}
                placeholder="Enter a prompt for AI content generation..."
                disabled={isGenerating}
              />
              <Button onClick={handleGenerateContent} disabled={isGenerating || !aiPrompt.trim()}>
                {isGenerating ? (
                  <>Generating...</>
                ) : (
                  <>
                    <Wand2 className="h-4 w-4 mr-1" />
                    Generate
                  </>
                )}
              </Button>
            </div>
          </div>
        </TabsContent>

{editedSubsections.map((subsection) => (
          <TabsContent key={subsection.id} value={subsection.id}>
            <Card>
              <CardContent className="p-4 space-y-4">
                <div className="space-y-2">
                  <Label htmlFor={`subsection-title-${subsection.id}`}>Subsection Title</Label>
                  <Input
                    id={`subsection-title-${subsection.id}`}
                    value={subsection.title}
                    onChange={(e) => handleSubsectionChange(subsection.id, "title", e.target.value)}
                  />
                </div>
                <Textarea
                  value={subsection.content}
                  onChange={(e) => handleSubsectionChange(subsection.id, "content", e.target.value)}
                  className="min-h-[400px] font-mono"
                  placeholder="Enter subsection content in Markdown format..."
                />
              </CardContent>
            </Card>

<div className="mt-4 space-y-2">
              <Label htmlFor={`ai-prompt-${subsection.id}`}>AI Content Generation</Label>
              <div className="flex gap-2">
                <Input
                  id={`ai-prompt-${subsection.id}`}
                  value={aiPrompt}
                  onChange={(e) => setAiPrompt(e.target.value)}
                  placeholder="Enter a prompt for AI content generation..."
                  disabled={isGenerating}
                />
                <Button onClick={handleGenerateContent} disabled={isGenerating || !aiPrompt.trim()}>
                  {isGenerating ? (
                    <>Generating...</>
                  ) : (
                    <>
                      <Wand2 className="h-4 w-4 mr-1" />
                      Generate
                    </>
                  )}
                </Button>
              </div>
            </div>
          </TabsContent>
        ))}
      </Tabs>

<div className="flex justify-end gap-2 mt-4">
        <Button variant="outline" onClick={() => onSave(section)}>
          Cancel
        </Button>
        <Button variant="outline" onClick={() => handleSave(true)} disabled={isSaving}>
          <GitCommit className="h-4 w-4 mr-1" />
          Save & Commit
        </Button>
        <Button onClick={() => handleSave(false)} disabled={isSaving}>
          <Save className="h-4 w-4 mr-1" />
          Save
        </Button>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/investment-primer/primer-section-viewer.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect, useRef } from "react"
import { Card, CardContent } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Search, ArrowUp, ArrowDown, X } from "lucide-react"
import type { PrimerSection, PrimerSubsection } from "@/types/investment-primer"

interface PrimerSectionViewerProps {
  section: PrimerSection
  subsections: PrimerSubsection[]
}

interface SearchResult {
  tabId: string
  matches: {
    index: number
    text: string
    context: string
  }[]
}

export function PrimerSectionViewer({ section, subsections }: PrimerSectionViewerProps) {
  const [activeTab, setActiveTab] = useState<string>("main")
  const [searchQuery, setSearchQuery] = useState<string>("")
  const [isSearching, setIsSearching] = useState<boolean>(false)
  const [searchResults, setSearchResults] = useState<SearchResult[]>([])
  const [totalMatches, setTotalMatches] = useState<number>(0)
  const [currentMatchIndex, setCurrentMatchIndex] = useState<number>(0)
  const contentRefs = useRef<{ [key: string]: HTMLDivElement | null }>({})

// Handle search
  useEffect(() => {
    if (!searchQuery.trim()) {
      setSearchResults([])
      setTotalMatches(0)
      setCurrentMatchIndex(0)
      return
    }

const results: SearchResult[] = []
    let matchCount = 0

// Search in main section
    const mainMatches = findMatches(section.content, searchQuery)
    if (mainMatches.length > 0) {
      results.push({
        tabId: "main",
        matches: mainMatches,
      })
      matchCount += mainMatches.length
    }

// Search in subsections
    subsections.forEach((subsection) => {
      const subMatches = findMatches(subsection.content, searchQuery)
      if (subMatches.length > 0) {
        results.push({
          tabId: subsection.id,
          matches: subMatches,
        })
        matchCount += subMatches.length
      }
    })

setSearchResults(results)
    setTotalMatches(matchCount)
    setCurrentMatchIndex(matchCount > 0 ? 1 : 0)

// If we have results, switch to the tab with the first result
    if (results.length > 0) {
      setActiveTab(results[0].tabId)
    }
  }, [searchQuery, section, subsections])

// Apply highlighting to content
  useEffect(() => {
    if (!searchQuery.trim() || searchResults.length === 0) {
      return
    }

// Find the current result tab and scroll to the match
    const currentResultTab = findCurrentResultTab()
    if (currentResultTab) {
      const contentElement = contentRefs.current[currentResultTab.tabId]
      if (contentElement) {
        const highlightElements = contentElement.querySelectorAll(".search-highlight")
        const currentHighlight = highlightElements[getCurrentMatchIndexInTab()]

if (currentHighlight) {
          currentHighlight.scrollIntoView({
            behavior: "smooth",
            block: "center",
          })

// Add special styling to current match
          highlightElements.forEach((el) => el.classList.remove("current-match"))
          currentHighlight.classList.add("current-match")
        }
      }
    }
  }, [currentMatchIndex, searchResults, activeTab])

const findMatches = (content: string, query: string) => {
    const matches = []
    const plainText = stripHtml(content).toLowerCase()
    const searchTerm = query.toLowerCase()
    let index = plainText.indexOf(searchTerm)

while (index !== -1) {
      // Get some context around the match
      const contextStart = Math.max(0, index - 40)
      const contextEnd = Math.min(plainText.length, index + searchTerm.length + 40)
      const context = plainText.substring(contextStart, contextEnd)

matches.push({
        index,
        text: plainText.substr(index, searchTerm.length),
        context: "..." + context + "...",
      })

index = plainText.indexOf(searchTerm, index + 1)
    }

return matches
  }

const stripHtml = (html: string) => {
    const doc = new DOMParser().parseFromString(html, "text/html")
    return doc.body.textContent || ""
  }

const highlightSearchMatches = (content: string) => {
    if (!searchQuery.trim()) return formatMarkdown(content)

const formattedContent = formatMarkdown(content)
    const regex = new RegExp(`(${escapeRegExp(searchQuery)})`, "gi")
    return formattedContent.replace(regex, '<span class="search-highlight bg-yellow-200 dark:bg-yellow-800">$1</span>')
  }

const escapeRegExp = (string: string) => {
    return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")
  }

const handleSearchInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setSearchQuery(e.target.value)
  }

const handleClearSearch = () => {
    setSearchQuery("")
    setIsSearching(false)
  }

const handleNextMatch = () => {
    if (totalMatches === 0) return

setCurrentMatchIndex((prev) => {
      if (prev >= totalMatches) return 1
      return prev + 1
    })
  }

const handlePreviousMatch = () => {
    if (totalMatches === 0) return

setCurrentMatchIndex((prev) => {
      if (prev <= 1) return totalMatches
      return prev - 1
    })
  }

const findCurrentResultTab = () => {
    if (searchResults.length === 0) return null

let matchCounter = 0
    for (const result of searchResults) {
      matchCounter += result.matches.length
      if (currentMatchIndex <= matchCounter) {
        return result
      }
    }

return searchResults[0]
  }

const getCurrentMatchIndexInTab = () => {
    if (searchResults.length === 0) return 0

let matchCounter = 0
    for (const result of searchResults) {
      const prevMatchCounter = matchCounter
      matchCounter += result.matches.length

if (currentMatchIndex <= matchCounter) {
        return currentMatchIndex - prevMatchCounter - 1
      }
    }

return 0
  }

const toggleSearch = () => {
    setIsSearching(!isSearching)
    if (!isSearching) {
      // Focus the search input when opening
      setTimeout(() => {
        const searchInput = document.getElementById("section-search-input")
        if (searchInput) searchInput.focus()
      }, 100)
    }
  }

return (
    <div className="space-y-4">
      {/* Search bar */}
      <div className="flex items-center gap-2">
        <Button
          variant="outline"
          size="sm"
          onClick={toggleSearch}
          className={isSearching ? "bg-primary text-primary-foreground" : ""}
        >
          <Search className="h-4 w-4 mr-1" />
          Search
        </Button>

{isSearching && (
          <>
            <div className="relative flex-1">
              <Input
                id="section-search-input"
                placeholder="Search in section content..."
                value={searchQuery}
                onChange={handleSearchInputChange}
                className="pl-8"
              />
              <Search className="absolute left-2.5 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
              {searchQuery && (
                <button
                  onClick={handleClearSearch}
                  className="absolute right-2.5 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground hover:text-foreground"
                >
                  <X className="h-4 w-4" />
                </button>
              )}
            </div>

{totalMatches > 0 && (
              <>
                <div className="text-sm text-muted-foreground">
                  {currentMatchIndex} of {totalMatches}
                </div>
                <Button variant="outline" size="icon" onClick={handlePreviousMatch}>
                  <ArrowUp className="h-4 w-4" />
                </Button>
                <Button variant="outline" size="icon" onClick={handleNextMatch}>
                  <ArrowDown className="h-4 w-4" />
                </Button>
              </>
            )}
          </>
        )}
      </div>

{/* Search results summary */}
      {isSearching && searchQuery && (
        <div className="text-sm">
          {totalMatches > 0 ? (
            <div className="flex items-center gap-2">
              <Badge variant="secondary">{totalMatches} matches found</Badge>
              {searchResults.map((result) => (
                <Badge
                  key={result.tabId}
                  variant="outline"
                  className="cursor-pointer"
                  onClick={() => setActiveTab(result.tabId)}
                >
                  {result.tabId === "main"
                    ? "Main Content"
                    : subsections.find((s) => s.id === result.tabId)?.title || result.tabId}
                  : {result.matches.length}
                </Badge>
              ))}
            </div>
          ) : searchQuery.length > 0 ? (
            <Badge variant="outline">No matches found</Badge>
          ) : null}
        </div>
      )}

{/* Tabs for main content and subsections */}
      {subsections.length > 0 ? (
        <Tabs defaultValue="main" value={activeTab} onValueChange={setActiveTab}>
          <TabsList className="mb-4">
            <TabsTrigger value="main">Main Content</TabsTrigger>
            {subsections.map((subsection) => (
              <TabsTrigger key={subsection.id} value={subsection.id}>
                {subsection.title}
              </TabsTrigger>
            ))}
          </TabsList>

<TabsContent value="main">
            <Card>
              <CardContent className="p-4">
                <ScrollArea className="h-[calc(100vh-400px)]">
                  <div ref={(el) => (contentRefs.current["main"] = el)} className="prose max-w-none dark:prose-invert">
                    <div
                      dangerouslySetInnerHTML={{
                        __html: searchQuery ? highlightSearchMatches(section.content) : formatMarkdown(section.content),
                      }}
                    />
                  </div>
                </ScrollArea>
              </CardContent>
            </Card>
          </TabsContent>

{subsections.map((subsection) => (
            <TabsContent key={subsection.id} value={subsection.id}>
              <Card>
                <CardContent className="p-4">
                  <ScrollArea className="h-[calc(100vh-400px)]">
                    <div
                      ref={(el) => (contentRefs.current[subsection.id] = el)}
                      className="prose max-w-none dark:prose-invert"
                    >
                      <div
                        dangerouslySetInnerHTML={{
                          __html: searchQuery
                            ? highlightSearchMatches(subsection.content)
                            : formatMarkdown(subsection.content),
                        }}
                      />
                    </div>
                  </ScrollArea>
                </CardContent>
              </Card>
            </TabsContent>
          ))}
        </Tabs>
      ) : (
        <Card>
          <CardContent className="p-4">
            <ScrollArea className="h-[calc(100vh-400px)]">
              <div ref={(el) => (contentRefs.current["main"] = el)} className="prose max-w-none dark:prose-invert">
                <div
                  dangerouslySetInnerHTML={{
                    __html: searchQuery ? highlightSearchMatches(section.content) : formatMarkdown(section.content),
                  }}
                />
              </div>
            </ScrollArea>
          </CardContent>
        </Card>
      )}

{/* Add custom styles for search highlighting */}
      <style jsx global>{`
        .search-highlight {
          background-color: rgba(255, 255, 0, 0.3);
          padding: 0 2px;
          border-radius: 2px;
        }
        .search-highlight.current-match {
          background-color: rgba(255, 165, 0, 0.5);
          font-weight: bold;
          outline: 2px solid orange;
        }
        .dark .search-highlight {
          background-color: rgba(255, 255, 0, 0.2);
        }
        .dark .search-highlight.current-match {
          background-color: rgba(255, 165, 0, 0.3);
        }
      `}</style>
    </div>
  )
}

// Simple markdown formatter (in a real app, use a proper markdown library)
function formatMarkdown(markdown: string): string {
  // This is a very basic implementation - in a real app, use a proper markdown library
  let formatted = markdown
    // Headers
    .replace(/^### (.*$)/gim, "<h3>$1</h3>")
    .replace(/^## (.*$)/gim, "<h2>$1</h2>")
    .replace(/^# (.*$)/gim, "<h1>$1</h1>")
    // Bold
    .replace(/\*\*(.*)\*\*/gim, "<strong>$1</strong>")
    // Italic
    .replace(/\*(.*)\*/gim, "<em>$1</em>")
    // Lists
    .replace(/^- (.*$)/gim, "<ul><li>$1</li></ul>")
    // Line breaks
    .replace(/\n/gim, "<br>")

// Fix consecutive list items
  formatted = formatted.replace(/<\/ul>\s*<ul>/g, "")

return formatted
}
[V0_FILE]typescriptreact:file="components/investment-primer/published-content-viewer.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Separator } from "@/components/ui/separator"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Search, Calendar, Tag, ExternalLink, Eye, Share2 } from "lucide-react"
import { useToast } from "@/hooks/use-toast"
import { formatContentToHtml } from "@/lib/content-formatting"
import { supabase } from "@/services/supabase-service"
import { generateSlug } from "@/lib/utils" // Import generateSlug

interface PublishedContentItem {
  id: string
  title: string
  content: string
  type: string
  tags: string[]
  publishedAt: string
  author: string
  readTime: number
  slug: string
}

export function PublishedContentViewer() {
  const [contentItems, setContentItems] = useState<PublishedContentItem[]>([])
  const [filteredItems, setFilteredItems] = useState<PublishedContentItem[]>([])
  const [selectedItem, setSelectedItem] = useState<PublishedContentItem | null>(null)
  const [searchQuery, setSearchQuery] = useState("")
  const [selectedType, setSelectedType] = useState<string>("all")
  const [isLoading, setIsLoading] = useState(true)
  const { toast } = useToast()

// Fetch real content from Supabase
  useEffect(() => {
    const fetchPublishedContent = async () => {
      try {
        setIsLoading(true)

// Fetch published content items from Supabase
        const { data, error } = await supabase
          .from("content_items")
          .select("*")
          .eq("stage", "published")
          .order("updated_at", { ascending: false })

if (error) {
          console.error("Error fetching published content:", error)
          toast({
            title: "Error",
            description: "Failed to load published content",
            variant: "destructive",
          })
          return
        }

// Transform Supabase data to match our interface
        const transformedContent: PublishedContentItem[] = (data || []).map((item) => ({
          id: item.id,
          title: item.title,
          content: item.content || "",
          type: item.type,
          tags: item.tags || [],
          publishedAt: item.updated_at || item.created_at,
          author: item.author || "Investment Research Team",
          readTime: calculateReadTime(item.content || ""),
          slug: generateSlug(item.title),
        }))

setContentItems(transformedContent)
        setFilteredItems(transformedContent)
      } catch (error) {
        console.error("Error in fetchPublishedContent:", error)
        toast({
          title: "Error",
          description: "Failed to load published content",
          variant: "destructive",
        })
      } finally {
        setIsLoading(false)
      }
    }

fetchPublishedContent()
  }, [toast])

// Helper function to calculate read time based on content length
  const calculateReadTime = (content: string): number => {
    const wordsPerMinute = 200
    const wordCount = content.split(/\s+/).length
    return Math.max(1, Math.ceil(wordCount / wordsPerMinute))
  }

// Function to refresh content data
  const refreshContent = async () => {
    setIsLoading(true)
    try {
      const { data, error } = await supabase
        .from("content_items")
        .select("*")
        .eq("stage", "published")
        .order("updated_at", { ascending: false })

if (error) throw error

const transformedContent: PublishedContentItem[] = (data || []).map((item) => ({
        id: item.id,
        title: item.title,
        content: item.content || "",
        type: item.type,
        tags: item.tags || [],
        publishedAt: item.updated_at || item.created_at,
        author: item.author || "Investment Research Team",
        readTime: calculateReadTime(item.content || ""),
        slug: generateSlug(item.title),
      }))

setContentItems(transformedContent)
      setFilteredItems(transformedContent)

toast({
        title: "Content refreshed",
        description: "Published content has been updated",
      })
    } catch (error) {
      console.error("Error refreshing content:", error)
      toast({
        title: "Error",
        description: "Failed to refresh content",
        variant: "destructive",
      })
    } finally {
      setIsLoading(false)
    }
  }

// Filter content based on search and type
  useEffect(() => {
    let filtered = contentItems

if (searchQuery.trim()) {
      const query = searchQuery.toLowerCase()
      filtered = filtered.filter(
        (item) =>
          item.title.toLowerCase().includes(query) ||
          item.content.toLowerCase().includes(query) ||
          item.tags.some((tag) => tag.toLowerCase().includes(query)),
      )
    }

if (selectedType !== "all") {
      filtered = filtered.filter((item) => item.type === selectedType)
    }

setFilteredItems(filtered)
  }, [contentItems, searchQuery, selectedType])

const handleItemSelect = (item: PublishedContentItem) => {
    // Instead of setting selectedItem, navigate to the public page
    window.location.href = `/published/${item.slug}`
  }

const handleBackToList = () => {
    setSelectedItem(null)
  }

const handleShare = (item: PublishedContentItem) => {
    const url = `${window.location.origin}/published/${item.slug}`
    navigator.clipboard.writeText(url)
    toast({
      title: "Link copied",
      description: "The content link has been copied to your clipboard",
    })
  }

const getUniqueTypes = () => {
    const types = Array.from(new Set(contentItems.map((item) => item.type)))
    return types
  }

if (isLoading) {
    return (
      <div className="flex items-center justify-center h-64">
        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
      </div>
    )
  }

if (selectedItem) {
    return (
      <div className="max-w-4xl mx-auto">
        {/* Header */}
        <div className="flex items-center justify-between mb-6">
          <Button variant="outline" onClick={handleBackToList}>
            ← Back to Content Library
          </Button>
          <div className="flex items-center gap-2">
            <Button variant="outline" size="sm" onClick={() => handleShare(selectedItem)}>
              <Share2 className="h-4 w-4 mr-2" />
              Share
            </Button>
            <Button
              variant="outline"
              size="sm"
              onClick={() => window.open(`/published/${selectedItem.slug}`, "_blank", "noopener noreferrer")}
            >
              <ExternalLink className="h-4 w-4 mr-2" />
              View Live
            </Button>
          </div>
        </div>

{/* Content Display */}
        <article className="prose prose-lg max-w-none">
          {/* Article Header */}
          <header className="not-prose mb-8">
            <div className="flex items-center gap-2 mb-4">
              <Badge variant="secondary">{selectedItem.type}</Badge>
              <span className="text-sm text-muted-foreground">•</span>
              <span className="text-sm text-muted-foreground">{selectedItem.readTime} min read</span>
              <span className="text-sm text-muted-foreground">•</span>
              <span className="text-sm text-muted-foreground">
                {new Date(selectedItem.publishedAt).toLocaleDateString("en-US", {
                  year: "numeric",
                  month: "long",
                  day: "numeric",
                })}
              </span>
            </div>
            <h1 className="text-3xl font-bold tracking-tight mb-4">{selectedItem.title}</h1>
            <div className="flex items-center gap-4 text-sm text-muted-foreground mb-6">
              <span>By {selectedItem.author}</span>
            </div>
            <div className="flex flex-wrap gap-2 mb-6">
              {selectedItem.tags.map((tag) => (
                <Badge key={tag} variant="outline" className="text-xs">
                  <Tag className="h-3 w-3 mr-1" />
                  {tag}
                </Badge>
              ))}
            </div>
            <Separator />
          </header>

{/* Article Content */}
          <div
            className="prose-headings:font-semibold prose-headings:tracking-tight prose-h1:text-2xl prose-h2:text-xl prose-h3:text-lg prose-p:leading-relaxed prose-li:leading-relaxed"
            dangerouslySetInnerHTML={{
              __html: formatContentToHtml(selectedItem.content),
            }}
          />
        </article>

{/* Footer */}
        <footer className="mt-12 pt-8 border-t">
          <div className="flex items-center justify-between">
            <div className="text-sm text-muted-foreground">
              Published on {new Date(selectedItem.publishedAt).toLocaleDateString()}
            </div>
            <Button variant="outline" size="sm" onClick={() => handleShare(selectedItem)}>
              <Share2 className="h-4 w-4 mr-2" />
              Share this content
            </Button>
          </div>
        </footer>
      </div>
    )
  }

return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
        <div>
          <h2 className="text-xl font-semibold">Published Content Preview</h2>
          <p className="text-muted-foreground">
            Preview how your investment content appears to readers on the public site
          </p>
        </div>
        <div className="flex items-center gap-2">
          <Button variant="outline" size="sm" onClick={refreshContent} disabled={isLoading}>
            {isLoading ? "Loading..." : "Refresh"}
          </Button>
          <Badge variant="secondary" className="gap-1">
            <Eye className="h-3 w-3" />
            Live Data
          </Badge>
        </div>
      </div>

{/* Filters */}
      <div className="flex flex-col md:flex-row gap-4">
        <div className="relative flex-1">
          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
          <Input
            placeholder="Search content..."
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            className="pl-10"
          />
        </div>
        <Select value={selectedType} onValueChange={setSelectedType}>
          <SelectTrigger className="w-[200px]">
            <SelectValue placeholder="Filter by type" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="all">All Types</SelectItem>
            {getUniqueTypes().map((type) => (
              <SelectItem key={type} value={type}>
                {type}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      </div>

{/* Content Grid */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {filteredItems.map((item) => (
          <Card key={item.id} className="cursor-pointer hover:shadow-md transition-shadow">
            <CardHeader className="pb-3">
              <div className="flex items-center justify-between mb-2">
                <Badge variant="secondary" className="text-xs">
                  {item.type}
                </Badge>
                <span className="text-xs text-muted-foreground">{item.readTime} min read</span>
              </div>
              <CardTitle className="text-lg leading-tight line-clamp-2">{item.title}</CardTitle>
            </CardHeader>
            <CardContent className="pt-0">
              <div className="space-y-3">
                <p className="text-sm text-muted-foreground line-clamp-3">{item.content.substring(0, 150)}...</p>

<div className="flex flex-wrap gap-1">
                  {item.tags.slice(0, 3).map((tag) => (
                    <Badge key={tag} variant="outline" className="text-xs">
                      {tag}
                    </Badge>
                  ))}
                  {item.tags.length > 3 && (
                    <Badge variant="outline" className="text-xs">
                      +{item.tags.length - 3}
                    </Badge>
                  )}
                </div>

<div className="flex items-center justify-between pt-2">
                  <div className="flex items-center gap-1 text-xs text-muted-foreground">
                    <Calendar className="h-3 w-3" />
                    {new Date(item.publishedAt).toLocaleDateString()}
                  </div>
                  <Button size="sm" onClick={() => handleItemSelect(item)} className="h-8">
                    Read More
                  </Button>
                </div>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>

{filteredItems.length === 0 && !isLoading && (
        <div className="text-center py-12">
          <p className="text-muted-foreground">
            {contentItems.length === 0
              ? "No published content found. Publish some content from the Content Pipeline to see it here."
              : "No content found matching your criteria."}
          </p>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/investment-primer/template-creator.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Label } from "@/components/ui/label"
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Badge } from "@/components/ui/badge"
import { X, Plus, Loader2 } from "lucide-react"
import { toast } from "@/hooks/use-toast"
import { createContentItem } from "@/services/supabase-service"
import type { ContentType, ContentPriority } from "@/types/content-pipeline"

interface TemplateCreatorProps {
  onTemplateCreated: () => void
  onCancel: () => void
}

export function TemplateCreator({ onTemplateCreated, onCancel }: TemplateCreatorProps) {
  const [title, setTitle] = useState("")
  const [description, setDescription] = useState("")
  const [type, setType] = useState<ContentType>("article")
  const [content, setContent] = useState("")
  const [tags, setTags] = useState<string[]>([])
  const [newTag, setNewTag] = useState("")
  const [isLoading, setIsLoading] = useState(false)

const handleAddTag = () => {
    if (newTag.trim() && !tags.includes(newTag.trim().toLowerCase())) {
      setTags([...tags, newTag.trim().toLowerCase()])
      setNewTag("")
    }
  }

const handleRemoveTag = (tagToRemove: string) => {
    setTags(tags.filter((tag) => tag !== tagToRemove))
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsLoading(true)

if (!title || !description || !type) {
      toast({
        title: "Missing Information",
        description: "Please fill in all required fields (Title, Description, Type).",
        variant: "destructive",
      })
      setIsLoading(false)
      return
    }

try {
      const templateTags = [...new Set([...tags, "template"])] // Ensure 'template' tag is always present
      const newTemplate = {
        title,
        description,
        type,
        stage: "draft", // Templates are always in draft stage
        priority: "medium" as ContentPriority, // Default priority for templates
        author: "System/User", // Can be dynamic based on logged-in user
        tags: templateTags,
        content,
      }

await createContentItem(newTemplate)
      toast({
        title: "Success",
        description: "New template created successfully!",
      })
      onTemplateCreated()
    } catch (error) {
      console.error("Error creating template:", error)
      toast({
        title: "Error",
        description: "Failed to create template. Please try again.",
        variant: "destructive",
      })
    } finally {
      setIsLoading(false)
    }
  }

return (
    <Card className="w-full max-w-2xl mx-auto">
      <CardHeader>
        <CardTitle>Create New Template</CardTitle>
        <CardDescription>Define a reusable template for your investment content.</CardDescription>
      </CardHeader>
      <CardContent>
        <form onSubmit={handleSubmit} className="space-y-4">
          <div className="space-y-2">
            <Label htmlFor="title">Template Title</Label>
            <Input
              id="title"
              value={title}
              onChange={(e) => setTitle(e.target.value)}
              placeholder="e.g., Quarterly Earnings Report Template"
              required
            />
          </div>
          <div className="space-y-2">
            <Label htmlFor="description">Description</Label>
            <Textarea
              id="description"
              value={description}
              onChange={(e) => setDescription(e.target.value)}
              placeholder="A brief description of what this template is for."
              rows={3}
              required
            />
          </div>
          <div className="space-y-2">
            <Label htmlFor="type">Content Type</Label>
            <Select value={type} onValueChange={(value: ContentType) => setType(value)}>
              <SelectTrigger id="type">
                <SelectValue placeholder="Select content type" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="article">Article</SelectItem>
                <SelectItem value="newsletter">Newsletter</SelectItem>
                <SelectItem value="report">Report</SelectItem>
                <SelectItem value="idea">Investment Idea</SelectItem>
              </SelectContent>
            </Select>
          </div>
          <div className="space-y-2">
            <Label htmlFor="content">Boilerplate Content (Optional)</Label>
            <Textarea
              id="content"
              value={content}
              onChange={(e) => setContent(e.target.value)}
              placeholder="Add any default text, markdown structure, or placeholders for this template."
              rows={8}
            />
            <p className="text-sm text-gray-500">This content will be pre-filled when using this template.</p>
          </div>
          <div className="space-y-2">
            <Label htmlFor="tags">Tags</Label>
            <div className="flex space-x-2">
              <Input
                id="newTag"
                value={newTag}
                onChange={(e) => setNewTag(e.target.value)}
                onKeyDown={(e) => {
                  if (e.key === "Enter") {
                    e.preventDefault()
                    handleAddTag()
                  }
                }}
                placeholder="Add a tag (e.g., 'valuation', 'macro')"
              />
              <Button type="button" onClick={handleAddTag} variant="outline" className="bg-black text-white">
                <Plus className="h-4 w-4" />
              </Button>
            </div>
            <div className="flex flex-wrap gap-2 mt-2">
              {tags.map((tag, index) => (
                <Badge key={index} className="bg-blue-100 text-blue-800 flex items-center gap-1">
                  {tag}
                  <Button
                    type="button"
                    variant="ghost"
                    size="sm"
                    className="h-4 w-4 p-0 text-blue-800 hover:bg-blue-200"
                    onClick={() => handleRemoveTag(tag)}
                  >
                    <X className="h-3 w-3" />
                  </Button>
                </Badge>
              ))}
            </div>
          </div>
          <div className="flex justify-end gap-2 pt-4">
            <Button
              type="button"
              variant="outline"
              onClick={onCancel}
              disabled={isLoading}
              className="bg-black text-white"
            >
              Cancel
            </Button>
            <Button type="submit" disabled={isLoading} className="bg-blue-600 hover:bg-blue-700">
              {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
              Create Template
            </Button>
          </div>
        </form>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/investment-primer/template-editor.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { PlusCircle, Trash2 } from "lucide-react"

export interface TemplateSection {
  id: string
  title: string
  description: string
  type: "text" | "metrics" | "comparison" | "interactive"
  order: number
}

export interface PrimerTemplate {
  id: string
  name: string
  description: string
  industry: string
  sections: TemplateSection[]
  createdAt: string
  updatedAt: string
}

interface TemplateEditorProps {
  template: PrimerTemplate
  onSave: (template: PrimerTemplate) => void
  onCancel: () => void
}

export function TemplateEditor({ template, onSave, onCancel }: TemplateEditorProps) {
  const [editedTemplate, setEditedTemplate] = useState<PrimerTemplate>({ ...template })

const handleInputChange = (field: keyof PrimerTemplate, value: string) => {
    setEditedTemplate((prev) => ({ ...prev, [field]: value }))
  }

const handleSectionChange = (sectionId: string, field: keyof TemplateSection, value: any) => {
    setEditedTemplate((prev) => ({
      ...prev,
      sections: prev.sections.map((section) => (section.id === sectionId ? { ...section, [field]: value } : section)),
    }))
  }

const addSection = () => {
    const newSection: TemplateSection = {
      id: `section-${Date.now()}`,
      title: "New Section",
      description: "Description for the new section",
      type: "text",
      order: editedTemplate.sections.length,
    }

setEditedTemplate((prev) => ({
      ...prev,
      sections: [...prev.sections, newSection],
    }))
  }

const removeSection = (sectionId: string) => {
    setEditedTemplate((prev) => ({
      ...prev,
      sections: prev.sections.filter((section) => section.id !== sectionId),
    }))
  }

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    onSave(editedTemplate)
  }

return (
    <form onSubmit={handleSubmit} className="space-y-6">
      <Card>
        <CardHeader>
          <CardTitle>Template Details</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="space-y-2">
            <Label htmlFor="name">Template Name</Label>
            <Input
              id="name"
              value={editedTemplate.name}
              onChange={(e) => handleInputChange("name", e.target.value)}
              required
            />
          </div>

<div className="space-y-2">
            <Label htmlFor="description">Description</Label>
            <Textarea
              id="description"
              value={editedTemplate.description}
              onChange={(e) => handleInputChange("description", e.target.value)}
              rows={3}
            />
          </div>

<div className="space-y-2">
            <Label htmlFor="industry">Industry</Label>
            <Select value={editedTemplate.industry} onValueChange={(value) => handleInputChange("industry", value)}>
              <SelectTrigger>
                <SelectValue placeholder="Select industry" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="financial-software">Financial Software</SelectItem>
                <SelectItem value="healthcare">Healthcare</SelectItem>
                <SelectItem value="retail">Retail</SelectItem>
                <SelectItem value="manufacturing">Manufacturing</SelectItem>
                <SelectItem value="technology">Technology</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </CardContent>
      </Card>

<Card>
        <CardHeader className="flex flex-row items-center justify-between">
          <CardTitle>Template Sections</CardTitle>
          <Button type="button" variant="outline" size="sm" onClick={addSection}>
            <PlusCircle className="mr-2 h-4 w-4" />
            Add Section
          </Button>
        </CardHeader>
        <CardContent className="space-y-6">
          {editedTemplate.sections.map((section) => (
            <Card key={section.id} className="border border-gray-200">
              <CardHeader className="flex flex-row items-center justify-between p-4">
                <div className="space-y-1">
                  <Input
                    value={section.title}
                    onChange={(e) => handleSectionChange(section.id, "title", e.target.value)}
                    className="font-semibold"
                    placeholder="Section Title"
                  />
                </div>
                <Button type="button" variant="ghost" size="sm" onClick={() => removeSection(section.id)}>
                  <Trash2 className="h-4 w-4 text-red-500" />
                </Button>
              </CardHeader>
              <CardContent className="p-4 pt-0 space-y-4">
                <div className="space-y-2">
                  <Label>Description</Label>
                  <Textarea
                    value={section.description}
                    onChange={(e) => handleSectionChange(section.id, "description", e.target.value)}
                    rows={2}
                  />
                </div>
                <div className="space-y-2">
                  <Label>Section Type</Label>
                  <Select
                    value={section.type}
                    onValueChange={(value) => handleSectionChange(section.id, "type", value)}
                  >
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="text">Text</SelectItem>
                      <SelectItem value="metrics">Metrics</SelectItem>
                      <SelectItem value="comparison">Comparison</SelectItem>
                      <SelectItem value="interactive">Interactive</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </CardContent>
            </Card>
          ))}

{editedTemplate.sections.length === 0 && (
            <div className="text-center p-6 border border-dashed rounded-lg">
              <p className="text-gray-500">No sections added yet. Click "Add Section" to create your first section.</p>
            </div>
          )}
        </CardContent>
      </Card>

<CardFooter className="flex justify-end space-x-4 px-0">
        <Button type="button" variant="outline" onClick={onCancel}>
          Cancel
        </Button>
        <Button type="submit">Save Template</Button>
      </CardFooter>
    </form>
  )
}
[V0_FILE]typescriptreact:file="components/investment-primer/template-management.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { ScrollArea } from "@/components/ui/scroll-area"
import { BookOpen, Copy, Edit, FileText, Plus, RefreshCw, Search, Trash2, Layers, Settings } from "lucide-react"
import { useToast } from "@/hooks/use-toast"
import {
  getAllIndustries,
  getAllPrimerTemplates,
  getPrimerTemplate,
  clonePrimerTemplate,
  deleteTemplate,
} from "@/app/actions/primer-template-actions"
import type { Industry, PrimerTemplate } from "@/types/investment-primer"
import { TemplateEditor } from "@/components/investment-primer/template-editor"
import { TemplateViewer } from "@/components/investment-primer/template-viewer"
import { CreateTemplateDialog } from "@/components/investment-primer/create-template-dialog"

export function TemplateManagement() {
  const [industries, setIndustries] = useState<Industry[]>([])
  const [templates, setTemplates] = useState<PrimerTemplate[]>([])
  const [filteredTemplates, setFilteredTemplates] = useState<PrimerTemplate[]>([])
  const [selectedTemplate, setSelectedTemplate] = useState<PrimerTemplate | null>(null)
  const [selectedIndustry, setSelectedIndustry] = useState<string | null>(null)
  const [searchQuery, setSearchQuery] = useState("")
  const [isLoading, setIsLoading] = useState(true)
  const [isEditing, setIsEditing] = useState(false)
  const [showCreateDialog, setShowCreateDialog] = useState(false)
  const [activeTab, setActiveTab] = useState("templates")

const { toast } = useToast()

// Fetch industries and templates
  useEffect(() => {
    const fetchData = async () => {
      setIsLoading(true)
      try {
        const industriesData = await getAllIndustries()
        setIndustries(industriesData)

const templatesData = await getAllPrimerTemplates()
        setTemplates(templatesData)
        setFilteredTemplates(templatesData)
      } catch (error) {
        console.error("Error fetching data:", error)
        toast({
          title: "Error",
          description: "Failed to fetch industries and templates",
          variant: "destructive",
        })
      } finally {
        setIsLoading(false)
      }
    }

fetchData()
  }, [toast])

// Filter templates based on selected industry and search query
  useEffect(() => {
    let filtered = templates

// Filter by industry
    if (selectedIndustry) {
      filtered = filtered.filter(
        (template) => template.industryId === selectedIndustry || template.industryId === undefined,
      )
    }

// Filter by search query
    if (searchQuery.trim()) {
      const query = searchQuery.toLowerCase()
      filtered = filtered.filter(
        (template) => template.name.toLowerCase().includes(query) || template.description.toLowerCase().includes(query),
      )
    }

setFilteredTemplates(filtered)
  }, [templates, selectedIndustry, searchQuery])

const handleIndustrySelect = async (industryId: string | null) => {
    setSelectedIndustry(industryId)
    setSelectedTemplate(null)
  }

const handleTemplateSelect = async (template: PrimerTemplate) => {
    setSelectedTemplate(template)
    setIsEditing(false)
  }

const handleEditToggle = () => {
    setIsEditing(!isEditing)
  }

const handleRefresh = async () => {
    setIsLoading(true)
    try {
      const templatesData = await getAllPrimerTemplates()
      setTemplates(templatesData)

if (selectedTemplate) {
        const refreshedTemplate = await getPrimerTemplate(selectedTemplate.id)
        if (refreshedTemplate) {
          setSelectedTemplate(refreshedTemplate)
        }
      }

toast({
        title: "Refreshed",
        description: "Templates have been refreshed",
      })
    } catch (error) {
      console.error("Error refreshing data:", error)
      toast({
        title: "Error",
        description: "Failed to refresh templates",
        variant: "destructive",
      })
    } finally {
      setIsLoading(false)
    }
  }

const handleCloneTemplate = async () => {
    if (!selectedTemplate) return

try {
      const result = await clonePrimerTemplate(
        selectedTemplate.id,
        `${selectedTemplate.name} (Copy)`,
        selectedTemplate.description,
        selectedTemplate.industryId,
      )

if (result.success && result.template) {
        setTemplates([...templates, result.template])
        setSelectedTemplate(result.template)
        toast({
          title: "Template Cloned",
          description: "Template has been cloned successfully",
        })
      } else {
        toast({
          title: "Error",
          description: result.error || "Failed to clone template",
          variant: "destructive",
        })
      }
    } catch (error) {
      console.error("Error cloning template:", error)
      toast({
        title: "Error",
        description: "Failed to clone template",
        variant: "destructive",
      })
    }
  }

const handleDeleteTemplate = async () => {
    if (!selectedTemplate) return
    if (selectedTemplate.isDefault) {
      toast({
        title: "Cannot Delete",
        description: "Default templates cannot be deleted",
        variant: "destructive",
      })
      return
    }

try {
      const result = await deleteTemplate(selectedTemplate.id)

if (result.success) {
        setTemplates(templates.filter((t) => t.id !== selectedTemplate.id))
        setSelectedTemplate(null)
        toast({
          title: "Template Deleted",
          description: "Template has been deleted successfully",
        })
      } else {
        toast({
          title: "Error",
          description: result.error || "Failed to delete template",
          variant: "destructive",
        })
      }
    } catch (error) {
      console.error("Error deleting template:", error)
      toast({
        title: "Error",
        description: "Failed to delete template",
        variant: "destructive",
      })
    }
  }

const handleCreateTemplate = (newTemplate: PrimerTemplate) => {
    setTemplates([...templates, newTemplate])
    setSelectedTemplate(newTemplate)
    setShowCreateDialog(false)
    toast({
      title: "Template Created",
      description: "New template has been created successfully",
    })
  }

return (
    <div className="flex flex-col h-full">
      <div className="flex justify-between items-center mb-4">
        <div>
          <h1 className="text-2xl font-bold">Investment Primer Templates</h1>
          <p className="text-muted-foreground">Manage templates for creating industry-specific investment primers</p>
        </div>
        <div className="flex items-center gap-2">
          <Button variant="outline" size="sm" onClick={handleRefresh} disabled={isLoading}>
            <RefreshCw className="h-4 w-4 mr-2" />
            Refresh
          </Button>
          <Button size="sm" onClick={() => setShowCreateDialog(true)}>
            <Plus className="h-4 w-4 mr-2" />
            New Template
          </Button>
        </div>
      </div>

<Tabs value={activeTab} onValueChange={setActiveTab} className="flex-1">
        <TabsList>
          <TabsTrigger value="templates">
            <FileText className="h-4 w-4 mr-1" />
            Templates
          </TabsTrigger>
          <TabsTrigger value="industries">
            <Layers className="h-4 w-4 mr-1" />
            Industries
          </TabsTrigger>
          <TabsTrigger value="settings">
            <Settings className="h-4 w-4 mr-1" />
            Settings
          </TabsTrigger>
        </TabsList>

<TabsContent value="templates" className="flex-1 mt-0">
          <div className="grid grid-cols-1 md:grid-cols-4 gap-4 h-full">
            {/* Sidebar */}
            <Card className="md:col-span-1 h-full">
              <CardHeader className="pb-2">
                <div className="flex justify-between items-center">
                  <CardTitle>Templates</CardTitle>
                </div>
                <div className="space-y-2">
                  <div className="relative">
                    <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
                    <Input
                      placeholder="Search templates..."
                      className="pl-8"
                      value={searchQuery}
                      onChange={(e) => setSearchQuery(e.target.value)}
                    />
                  </div>
                  <div className="flex flex-wrap gap-1">
                    <Badge
                      variant={selectedIndustry === null ? "default" : "outline"}
                      className="cursor-pointer"
                      onClick={() => handleIndustrySelect(null)}
                    >
                      All
                    </Badge>
                    {industries.map((industry) => (
                      <Badge
                        key={industry.id}
                        variant={selectedIndustry === industry.id ? "default" : "outline"}
                        className="cursor-pointer"
                        onClick={() => handleIndustrySelect(industry.id)}
                      >
                        {industry.name}
                      </Badge>
                    ))}
                  </div>
                </div>
              </CardHeader>
              <CardContent className="p-0">
                <ScrollArea className="h-[calc(100vh-350px)]">
                  <div className="p-2">
                    {filteredTemplates.map((template) => (
                      <div
                        key={template.id}
                        className={`p-2 rounded-md cursor-pointer mb-1 ${
                          selectedTemplate?.id === template.id ? "bg-primary text-primary-foreground" : "hover:bg-muted"
                        }`}
                        onClick={() => handleTemplateSelect(template)}
                      >
                        <div className="flex justify-between items-start">
                          <div className="font-medium">{template.name}</div>
                          {template.isDefault && (
                            <Badge variant="secondary" className="text-xs">
                              Default
                            </Badge>
                          )}
                        </div>
                        <div className="text-xs truncate">{template.description}</div>
                        {template.industryId && (
                          <div className="mt-1">
                            <Badge variant="outline" className="text-xs">
                              {industries.find((i) => i.id === template.industryId)?.name || template.industryId}
                            </Badge>
                          </div>
                        )}
                      </div>
                    ))}
                  </div>
                </ScrollArea>
              </CardContent>
            </Card>

{/* Main Content */}
            <Card className="md:col-span-3 h-full">
              {selectedTemplate ? (
                <>
                  <CardHeader className="pb-2">
                    <div className="flex justify-between items-center">
                      <div>
                        <CardTitle>{selectedTemplate.name}</CardTitle>
                        <CardDescription>
                          Version: {selectedTemplate.version} • Last updated:{" "}
                          {new Date(selectedTemplate.updatedAt).toLocaleDateString()}
                        </CardDescription>
                      </div>
                      <div className="flex items-center gap-2">
                        <Button variant="outline" size="sm" onClick={handleCloneTemplate} disabled={isLoading}>
                          <Copy className="h-4 w-4 mr-1" />
                          Clone
                        </Button>
                        <Button
                          variant={isEditing ? "default" : "outline"}
                          size="sm"
                          onClick={handleEditToggle}
                          disabled={isLoading || selectedTemplate.isDefault}
                        >
                          <Edit className="h-4 w-4 mr-1" />
                          {isEditing ? "Save" : "Edit"}
                        </Button>
                        <Button
                          variant="outline"
                          size="sm"
                          onClick={handleDeleteTemplate}
                          disabled={isLoading || selectedTemplate.isDefault}
                          className="text-destructive hover:text-destructive"
                        >
                          <Trash2 className="h-4 w-4 mr-1" />
                          Delete
                        </Button>
                      </div>
                    </div>
                  </CardHeader>
                  <CardContent>
                    {isEditing ? (
                      <TemplateEditor
                        template={selectedTemplate}
                        onSave={(updatedTemplate) => {
                          setSelectedTemplate(updatedTemplate)
                          setTemplates(templates.map((t) => (t.id === updatedTemplate.id ? updatedTemplate : t)))
                          setIsEditing(false)
                        }}
                      />
                    ) : (
                      <TemplateViewer template={selectedTemplate} />
                    )}
                  </CardContent>
                </>
              ) : (
                <CardContent className="flex items-center justify-center h-full">
                  <div className="text-center">
                    <BookOpen className="h-12 w-12 mx-auto text-muted-foreground" />
                    <h3 className="mt-4 text-lg font-medium">No Template Selected</h3>
                    <p className="text-muted-foreground">Select a template from the sidebar or create a new one</p>
                    <Button className="mt-4" onClick={() => setShowCreateDialog(true)}>
                      <Plus className="h-4 w-4 mr-2" />
                      Create Template
                    </Button>
                  </div>
                </CardContent>
              )}
            </Card>
          </div>
        </TabsContent>

<TabsContent value="industries" className="mt-0">
          <Card>
            <CardHeader>
              <CardTitle>Industry Management</CardTitle>
              <CardDescription>Manage industries for investment primers</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                {industries.map((industry) => (
                  <Card key={industry.id}>
                    <CardHeader className="pb-2">
                      <CardTitle className="text-lg">{industry.name}</CardTitle>
                    </CardHeader>
                    <CardContent>
                      <p className="text-sm text-muted-foreground">{industry.description}</p>
                      <div className="flex justify-between mt-4">
                        <Badge variant="outline">{industry.id}</Badge>
                        <Button variant="outline" size="sm">
                          <Edit className="h-4 w-4 mr-1" />
                          Edit
                        </Button>
                      </div>
                    </CardContent>
                  </Card>
                ))}
                <Card className="flex flex-col items-center justify-center p-6 border-dashed">
                  <Plus className="h-8 w-8 text-muted-foreground mb-2" />
                  <p className="text-muted-foreground mb-4">Add New Industry</p>
                  <Button>Create Industry</Button>
                </Card>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="settings" className="mt-0">
          <Card>
            <CardHeader>
              <CardTitle>Template System Settings</CardTitle>
              <CardDescription>Configure global settings for the primer template system</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div>
                  <h3 className="text-lg font-medium mb-2">GitHub Integration</h3>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <label className="text-sm font-medium">Default Repository</label>
                      <Input placeholder="organization/repository" defaultValue="investment-primers" />
                    </div>
                    <div className="space-y-2">
                      <label className="text-sm font-medium">Default Branch</label>
                      <Input placeholder="main" defaultValue="main" />
                    </div>
                  </div>
                </div>

<div>
                  <h3 className="text-lg font-medium mb-2">AI Content Generation</h3>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <label className="text-sm font-medium">Default Model</label>
                      <Input placeholder="Model name" defaultValue="gemini-pro" />
                    </div>
                    <div className="space-y-2">
                      <label className="text-sm font-medium">Temperature</label>
                      <Input type="number" min="0" max="1" step="0.1" defaultValue="0.7" />
                    </div>
                  </div>
                </div>

<div className="flex justify-end">
                  <Button>Save Settings</Button>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>

{showCreateDialog && (
        <CreateTemplateDialog
          industries={industries}
          onClose={() => setShowCreateDialog(false)}
          onCreateTemplate={handleCreateTemplate}
        />
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/investment-primer/template-viewer.tsx" isMerged="true"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Edit, Copy, Trash2, FileText, BarChart, LineChart, PieChart } from "lucide-react"

// Reusing the types from template-editor.tsx
import type { PrimerTemplate } from "./template-editor"

interface TemplateViewerProps {
  template: PrimerTemplate
  onEdit: () => void
  onClone: () => void
  onDelete: () => void
  onCreatePrimer: () => void
}

export function TemplateViewer({ template, onEdit, onClone, onDelete, onCreatePrimer }: TemplateViewerProps) {
  const getSectionIcon = (type: string) => {
    switch (type) {
      case "text":
        return <FileText className="h-4 w-4 mr-2" />
      case "metrics":
        return <BarChart className="h-4 w-4 mr-2" />
      case "comparison":
        return <LineChart className="h-4 w-4 mr-2" />
      case "interactive":
        return <PieChart className="h-4 w-4 mr-2" />
      default:
        return <FileText className="h-4 w-4 mr-2" />
    }
  }

const formatDate = (dateString: string) => {
    return new Date(dateString).toLocaleDateString("en-US", {
      year: "numeric",
      month: "short",
      day: "numeric",
    })
  }

return (
    <div className="space-y-6">
      <Card>
        <CardHeader>
          <div className="flex justify-between items-start">
            <div>
              <CardTitle className="text-2xl">{template.name}</CardTitle>
              <CardDescription className="mt-2">{template.description}</CardDescription>
            </div>
            <Badge variant="outline" className="text-sm">
              {template.industry.replace("-", " ").replace(/\b\w/g, (l) => l.toUpperCase())}
            </Badge>
          </div>
          <div className="flex justify-between items-center mt-4">
            <div className="text-sm text-gray-500">Last updated: {formatDate(template.updatedAt)}</div>
            <div className="flex space-x-2">
              <Button variant="outline" size="sm" onClick={onEdit}>
                <Edit className="h-4 w-4 mr-2" />
                Edit
              </Button>
              <Button variant="outline" size="sm" onClick={onClone}>
                <Copy className="h-4 w-4 mr-2" />
                Clone
              </Button>
              <Button variant="outline" size="sm" className="text-red-500" onClick={onDelete}>
                <Trash2 className="h-4 w-4 mr-2" />
                Delete
              </Button>
            </div>
          </div>
        </CardHeader>
        <CardContent>
          <Button className="w-full" onClick={onCreatePrimer}>
            Create Primer from Template
          </Button>
        </CardContent>
      </Card>

<Card>
        <CardHeader>
          <CardTitle>Template Structure</CardTitle>
          <CardDescription>This template contains {template.sections.length} sections</CardDescription>
        </CardHeader>
        <CardContent>
          <ScrollArea className="h-[400px] pr-4">
            <div className="space-y-4">
              {template.sections.map((section, index) => (
                <Card key={section.id} className="border border-gray-200">
                  <CardHeader className="p-4">
                    <div className="flex items-center">
                      <Badge variant="outline" className="mr-2">
                        {index + 1}
                      </Badge>
                      <CardTitle className="text-lg">{section.title}</CardTitle>
                    </div>
                  </CardHeader>
                  <CardContent className="p-4 pt-0">
                    <div className="text-sm text-gray-600 mb-2">{section.description}</div>
                    <Badge variant="secondary" className="flex items-center w-fit">
                      {getSectionIcon(section.type)}
                      {section.type.charAt(0).toUpperCase() + section.type.slice(1)}
                    </Badge>
                  </CardContent>
                </Card>
              ))}
            </div>
          </ScrollArea>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/investment-scorecard-skeleton.tsx" isMerged="true"
import { Skeleton } from "@/components/ui/skeleton"
import { Card, CardContent, CardHeader } from "@/components/ui/card"

export function InvestmentScoreCardSkeleton() {
  return (
    <div className="space-y-6">
      {/* Header Section */}
      <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
        <div className="space-y-2">
          <Skeleton className="h-8 w-64" />
          <Skeleton className="h-4 w-96" />
        </div>
        <div className="flex items-center gap-2">
          <Skeleton className="h-10 w-32" />
          <Skeleton className="h-10 w-10" />
        </div>
      </div>

{/* Company Profile */}
      <Card>
        <CardHeader>
          <Skeleton className="h-6 w-48" />
        </CardHeader>
        <CardContent>
          <div className="grid md:grid-cols-2 gap-6">
            <div className="space-y-4">
              <div className="flex items-center gap-4">
                <Skeleton className="h-16 w-16 rounded-md" />
                <div className="space-y-2">
                  <Skeleton className="h-6 w-48" />
                  <Skeleton className="h-4 w-32" />
                </div>
              </div>
              <Skeleton className="h-20 w-full" />
            </div>
            <div className="grid grid-cols-2 gap-4">
              {[...Array(6)].map((_, i) => (
                <div key={i} className="space-y-1">
                  <Skeleton className="h-4 w-24" />
                  <Skeleton className="h-6 w-32" />
                </div>
              ))}
            </div>
          </div>
        </CardContent>
      </Card>

{/* ROE Grade Card */}
      <Card>
        <CardHeader>
          <Skeleton className="h-6 w-48" />
        </CardHeader>
        <CardContent>
          <div className="grid md:grid-cols-3 gap-6">
            <div className="space-y-4">
              <Skeleton className="h-32 w-32 rounded-full mx-auto" />
              <div className="text-center space-y-2">
                <Skeleton className="h-6 w-24 mx-auto" />
                <Skeleton className="h-4 w-48 mx-auto" />
              </div>
            </div>
            <div className="md:col-span-2 space-y-4">
              <Skeleton className="h-6 w-48" />
              <Skeleton className="h-4 w-full" />
              <Skeleton className="h-4 w-full" />
              <Skeleton className="h-4 w-3/4" />

<div className="pt-4 space-y-2">
                <Skeleton className="h-6 w-48" />
                <div className="grid grid-cols-2 gap-4">
                  {[...Array(4)].map((_, i) => (
                    <div key={i} className="space-y-1">
                      <Skeleton className="h-4 w-24" />
                      <Skeleton className="h-6 w-32" />
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </CardContent>
      </Card>

{/* DuPont Analysis Card */}
      <Card>
        <CardHeader>
          <Skeleton className="h-6 w-48" />
        </CardHeader>
        <CardContent>
          <div className="space-y-6">
            <div className="grid grid-cols-3 gap-4">
              {[...Array(3)].map((_, i) => (
                <div key={i} className="space-y-2">
                  <Skeleton className="h-6 w-32" />
                  <Skeleton className="h-12 w-full" />
                  <Skeleton className="h-4 w-3/4" />
                </div>
              ))}
            </div>
            <Skeleton className="h-64 w-full" />
          </div>
        </CardContent>
      </Card>

{/* ROE History Chart */}
      <Card>
        <CardHeader>
          <Skeleton className="h-6 w-48" />
        </CardHeader>
        <CardContent>
          <Skeleton className="h-80 w-full" />
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/market-snapshot-table.tsx" isMerged="true"
"use client"

import { useEffect, useState } from "react"

interface MarketIndex {
  name: string
  price: string
  change: string
}

export function MarketSnapshotTable() {
  const [indices, setIndices] = useState<MarketIndex[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

useEffect(() => {
    const fetchMarketData = async () => {
      try {
        // Use static data for now
        const staticData: MarketIndex[] = [
          { name: "NASDAQ 100", price: "21248.67", change: "+5.92%" },
          { name: "S&P 500", price: "5897.28", change: "+0.91%" },
          { name: "Dow Jones Industrial Average", price: "42214.12", change: "-0.46%" },
          { name: "NASDAQ Composite", price: "19047.10", change: "+1.81%" },
          { name: "CBOE Volatility Index", price: "17.85", change: "-2.94%" },
        ]

setIndices(staticData)
        setLoading(false)
      } catch (err) {
        console.error("Error fetching market data:", err)
        setError("Failed to load market data")
        setLoading(false)
      }
    }

fetchMarketData()
  }, [])

if (loading) {
    return (
      <div className="animate-pulse">
        <div className="h-8 bg-gray-200 rounded mb-4"></div>
        <div className="space-y-2">
          {[...Array(5)].map((_, i) => (
            <div key={i} className="h-10 bg-gray-100 rounded"></div>
          ))}
        </div>
      </div>
    )
  }

if (error) {
    return <div className="text-red-500">Error: {error}</div>
  }

return (
    <div className="overflow-hidden rounded-lg border border-gray-200 mb-6">
      <table className="min-w-full divide-y divide-gray-200">
        <thead className="bg-gray-50">
          <tr>
            <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
              Index
            </th>
            <th scope="col" className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
              Price
            </th>
            <th scope="col" className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
              Change
            </th>
          </tr>
        </thead>
        <tbody className="bg-white divide-y divide-gray-200">
          {indices.map((index, i) => (
            <tr key={index.name} className={i % 2 === 0 ? "bg-white" : "bg-gray-50"}>
              <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{index.name}</td>
              <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 text-right">{index.price}</td>
              <td
                className={`px-6 py-4 whitespace-nowrap text-sm font-semibold text-right ${
                  index.change.startsWith("+") ? "text-green-600" : "text-red-600"
                }`}
              >
                {index.change}
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/news-sentiment-chart.tsx" isMerged="true"
"use client"

import { useEffect, useRef } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"

interface SentimentData {
  positive: number
  negative: number
  neutral: number
  date: string
}

interface NewsSentimentChartProps {
  data: SentimentData[]
  title?: string
  description?: string
}

export function NewsSentimentChart({
  data,
  title = "News Sentiment Trend",
  description = "Sentiment analysis over time",
}: NewsSentimentChartProps) {
  const canvasRef = useRef<HTMLCanvasElement>(null)

useEffect(() => {
    if (!canvasRef.current || data.length === 0) return

const ctx = canvasRef.current.getContext("2d")
    if (!ctx) return

// Set canvas dimensions
    const canvas = canvasRef.current
    canvas.width = canvas.offsetWidth
    canvas.height = canvas.offsetHeight

// Clear canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height)

// Chart dimensions
    const padding = 40
    const chartWidth = canvas.width - padding * 2
    const chartHeight = canvas.height - padding * 2
    const barWidth = chartWidth / data.length
    const maxValue = Math.max(...data.map((d) => d.positive + d.negative + d.neutral))

// Draw axes
    ctx.beginPath()
    ctx.strokeStyle = "#e2e8f0"
    ctx.moveTo(padding, padding)
    ctx.lineTo(padding, canvas.height - padding)
    ctx.lineTo(canvas.width - padding, canvas.height - padding)
    ctx.stroke()

// Draw bars
    data.forEach((item, index) => {
      const x = padding + index * barWidth
      const totalHeight = ((item.positive + item.negative + item.neutral) / maxValue) * chartHeight

// Positive sentiment (green)
      const positiveHeight = (item.positive / maxValue) * chartHeight
      ctx.fillStyle = "#10b981"
      ctx.fillRect(x + barWidth * 0.1, canvas.height - padding - positiveHeight, barWidth * 0.8, positiveHeight)

// Negative sentiment (red)
      const negativeHeight = (item.negative / maxValue) * chartHeight
      ctx.fillStyle = "#ef4444"
      ctx.fillRect(
        x + barWidth * 0.1,
        canvas.height - padding - positiveHeight - negativeHeight,
        barWidth * 0.8,
        negativeHeight,
      )

// Neutral sentiment (gray)
      const neutralHeight = (item.neutral / maxValue) * chartHeight
      ctx.fillStyle = "#94a3b8"
      ctx.fillRect(
        x + barWidth * 0.1,
        canvas.height - padding - positiveHeight - negativeHeight - neutralHeight,
        barWidth * 0.8,
        neutralHeight,
      )

// Date labels
      if (index % Math.ceil(data.length / 5) === 0) {
        ctx.fillStyle = "#64748b"
        ctx.font = "10px sans-serif"
        ctx.textAlign = "center"
        ctx.fillText(
          new Date(item.date).toLocaleDateString("en-US", { month: "short", day: "numeric" }),
          x + barWidth / 2,
          canvas.height - padding + 15,
        )
      }
    })

// Draw legend
    const legendY = padding / 2

// Positive
    ctx.fillStyle = "#10b981"
    ctx.fillRect(padding, legendY, 15, 10)
    ctx.fillStyle = "#64748b"
    ctx.font = "12px sans-serif"
    ctx.textAlign = "left"
    ctx.fillText("Positive", padding + 20, legendY + 9)

// Negative
    ctx.fillStyle = "#ef4444"
    ctx.fillRect(padding + 100, legendY, 15, 10)
    ctx.fillStyle = "#64748b"
    ctx.fillText("Negative", padding + 120, legendY + 9)

// Neutral
    ctx.fillStyle = "#94a3b8"
    ctx.fillRect(padding + 200, legendY, 15, 10)
    ctx.fillStyle = "#64748b"
    ctx.fillText("Neutral", padding + 220, legendY + 9)
  }, [data])

return (
    <Card>
      <CardHeader>
        <CardTitle>{title}</CardTitle>
        <CardDescription>{description}</CardDescription>
      </CardHeader>
      <CardContent>
        <div className="w-full h-[300px] relative">
          <canvas ref={canvasRef} className="w-full h-full"></canvas>
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/newsletter-automation-scheduler.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Switch } from "@/components/ui/switch"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Badge } from "@/components/ui/badge"
import { Separator } from "@/components/ui/separator"
import { Calendar, Clock, Edit, Plus, Trash2, Zap, AlertCircle, CheckCircle2, CalendarIcon } from "lucide-react"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { Calendar as CalendarComponent } from "@/components/ui/calendar"
import { format } from "date-fns"
import { cn } from "@/lib/utils"
import { Checkbox } from "@/components/ui/checkbox"
import { toast } from "@/hooks/use-toast"
import type { ScheduledNewsletter } from "@/services/newsletter-scheduler-service"
import {
  createScheduledNewsletter,
  getAllScheduledNewsletters,
  toggleScheduledNewsletterStatus,
  deleteScheduledNewsletter,
} from "@/services/newsletter-scheduler-service"

export function NewsletterAutomationScheduler() {
  const [activeTab, setActiveTab] = useState("scheduled")
  const [scheduledNewsletters, setScheduledNewsletters] = useState<ScheduledNewsletter[]>([])
  const [isCreating, setIsCreating] = useState(false)
  const [selectedDate, setSelectedDate] = useState<Date | undefined>(new Date())

// Form state for creating a new scheduled newsletter
  const [formState, setFormState] = useState({
    title: "Daily Market Insights - {{date}}",
    subtitle: "Your daily dose of market intelligence",
    frequency: "daily",
    time: "07:00",
    days: ["monday", "wednesday", "friday"],
    monthlyDate: 1, // Changed from 'date' to 'monthlyDate' to avoid confusion
    sectors: ["Technology", "Financial", "Healthcare"],
    tickers: ["AAPL", "MSFT", "GOOGL"],
    wordCount: 1500,
    aiModules: ["market-analysis", "sector-performance"],
    saveToContentPipeline: true,
    publishToKit: true,
    publishAsDraft: true,
    makePublic: false,
  })

// Load scheduled newsletters
  useEffect(() => {
    // In a real implementation, this would fetch from an API
    const newsletters = getAllScheduledNewsletters()
    setScheduledNewsletters(newsletters)
  }, [])

// Handle form input changes
  const handleInputChange = (field: string, value: any) => {
    setFormState((prev) => ({
      ...prev,
      [field]: value,
    }))
  }

// Handle checkbox changes for days of week
  const handleDayChange = (day: string, checked: boolean) => {
    setFormState((prev) => {
      const currentDays = [...prev.days]

if (checked && !currentDays.includes(day)) {
        currentDays.push(day)
      } else if (!checked && currentDays.includes(day)) {
        const index = currentDays.indexOf(day)
        currentDays.splice(index, 1)
      }

return {
        ...prev,
        days: currentDays,
      }
    })
  }

// Handle checkbox changes for AI modules
  const handleModuleChange = (module: string, checked: boolean) => {
    setFormState((prev) => {
      const currentModules = [...prev.aiModules]

if (checked && !currentModules.includes(module)) {
        currentModules.push(module)
      } else if (!checked && currentModules.includes(module)) {
        const index = currentModules.indexOf(module)
        currentModules.splice(index, 1)
      }

return {
        ...prev,
        aiModules: currentModules,
      }
    })
  }

// Create a new scheduled newsletter
  const handleCreateNewsletter = () => {
    try {
      // Validate form
      if (!formState.title || !formState.time) {
        toast({
          title: "Validation Error",
          description: "Please fill in all required fields",
          variant: "destructive",
        })
        return
      }

if (formState.frequency === "weekly" && formState.days.length === 0) {
        toast({
          title: "Validation Error",
          description: "Please select at least one day of the week",
          variant: "destructive",
        })
        return
      }

// Create the newsletter
      const newNewsletter = createScheduledNewsletter({
        title: formState.title,
        subtitle: formState.subtitle,
        frequency: formState.frequency as "daily" | "weekly" | "monthly" | "custom",
        time: formState.time,
        days: formState.frequency === "weekly" ? formState.days : undefined,
        date: formState.frequency === "monthly" ? formState.monthlyDate : undefined, // Use monthlyDate here
        status: "active",
        lastRunDate: null,
        configuration: {
          sectors: formState.sectors,
          tickers: formState.tickers,
          wordCount: formState.wordCount,
          aiModules: formState.aiModules,
          contentSources: [], // Would be populated in a real implementation
          publishSettings: {
            saveToContentPipeline: formState.saveToContentPipeline,
            publishToKit: formState.publishToKit,
            publishAsDraft: formState.publishAsDraft,
            makePublic: formState.makePublic,
          },
        },
      })

// Update the UI
      setScheduledNewsletters((prev) => [...prev, newNewsletter])
      setIsCreating(false)

toast({
        title: "Newsletter Scheduled",
        description: `Your newsletter has been scheduled for ${format(new Date(newNewsletter.nextRunDate), "PPp")}`,
      })
    } catch (error) {
      console.error("Error creating scheduled newsletter:", error)
      toast({
        title: "Error",
        description: "Failed to create scheduled newsletter",
        variant: "destructive",
      })
    }
  }

// Toggle newsletter status (active/paused)
  const handleToggleStatus = (id: string) => {
    try {
      const updatedNewsletter = toggleScheduledNewsletterStatus(id)

if (updatedNewsletter) {
        setScheduledNewsletters((prev) =>
          prev.map((newsletter) => (newsletter.id === id ? updatedNewsletter : newsletter)),
        )

toast({
          title: `Newsletter ${updatedNewsletter.status === "active" ? "Activated" : "Paused"}`,
          description: `The newsletter has been ${updatedNewsletter.status === "active" ? "activated" : "paused"}`,
        })
      }
    } catch (error) {
      console.error("Error toggling newsletter status:", error)
      toast({
        title: "Error",
        description: "Failed to update newsletter status",
        variant: "destructive",
      })
    }
  }

// Delete a scheduled newsletter
  const handleDeleteNewsletter = (id: string) => {
    try {
      const success = deleteScheduledNewsletter(id)

if (success) {
        setScheduledNewsletters((prev) => prev.filter((newsletter) => newsletter.id !== id))

toast({
          title: "Newsletter Deleted",
          description: "The scheduled newsletter has been deleted",
        })
      }
    } catch (error) {
      console.error("Error deleting newsletter:", error)
      toast({
        title: "Error",
        description: "Failed to delete newsletter",
        variant: "destructive",
      })
    }
  }

// Format date for display
  const formatDate = (dateString: string) => {
    return format(new Date(dateString), "PPp")
  }

return (
    <div className="space-y-6">
      <Card>
        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
          <div>
            <CardTitle className="text-xl">Newsletter Automation</CardTitle>
            <CardDescription>Schedule and manage automated newsletter generation</CardDescription>
          </div>
          <Button onClick={() => setIsCreating(true)} disabled={isCreating}>
            <Plus className="mr-2 h-4 w-4" />
            New Scheduled Newsletter
          </Button>
        </CardHeader>
        <CardContent>
          <Tabs value={activeTab} onValueChange={setActiveTab}>
            <TabsList className="grid w-full grid-cols-3">
              <TabsTrigger value="scheduled">Scheduled Newsletters</TabsTrigger>
              <TabsTrigger value="history">Run History</TabsTrigger>
              <TabsTrigger value="templates">Templates</TabsTrigger>
            </TabsList>

<TabsContent value="scheduled" className="space-y-4">
              <div className="flex justify-between items-center">
                <div className="text-sm text-muted-foreground">
                  {scheduledNewsletters.filter((newsletter) => newsletter.status === "active").length} active
                  newsletters
                </div>
                <Select defaultValue="all">
                  <SelectTrigger className="w-[180px]">
                    <SelectValue placeholder="Filter by frequency" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">All Frequencies</SelectItem>
                    <SelectItem value="daily">Daily</SelectItem>
                    <SelectItem value="weekly">Weekly</SelectItem>
                    <SelectItem value="monthly">Monthly</SelectItem>
                  </SelectContent>
                </Select>
              </div>

{scheduledNewsletters.length === 0 ? (
                <div className="text-center p-8 border rounded-md border-dashed">
                  <h3 className="font-medium mb-2">No scheduled newsletters</h3>
                  <p className="text-sm text-muted-foreground mb-4">
                    Create your first automated newsletter to get started
                  </p>
                  <Button onClick={() => setIsCreating(true)}>
                    <Plus className="mr-2 h-4 w-4" />
                    Create Scheduled Newsletter
                  </Button>
                </div>
              ) : (
                <div className="space-y-4">
                  {scheduledNewsletters.map((newsletter) => (
                    <Card key={newsletter.id} className="overflow-hidden">
                      <CardHeader className="bg-muted/50 p-4 pb-0">
                        <div className="flex justify-between items-start">
                          <div className="space-y-1">
                            <CardTitle className="text-lg">{newsletter.title}</CardTitle>
                            <div className="flex flex-wrap gap-2">
                              <Badge className={getStatusColor(newsletter.status)}>{newsletter.status}</Badge>
                              <Badge className="bg-blue-100 text-blue-800 capitalize">{newsletter.frequency}</Badge>
                            </div>
                          </div>
                          <div className="flex items-center space-x-2">
                            <Switch
                              checked={newsletter.status === "active"}
                              onCheckedChange={() => handleToggleStatus(newsletter.id)}
                            />
                            <Button variant="ghost" size="icon">
                              <Edit className="h-4 w-4" />
                            </Button>
                            <Button variant="ghost" size="icon" onClick={() => handleDeleteNewsletter(newsletter.id)}>
                              <Trash2 className="h-4 w-4" />
                            </Button>
                          </div>
                        </div>
                      </CardHeader>
                      <CardContent className="p-4 pt-2">
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                          <div>
                            <div className="text-sm font-medium">Schedule</div>
                            <div className="flex items-center mt-1 text-sm">
                              <Calendar className="h-4 w-4 mr-1 text-muted-foreground" />
                              <span className="capitalize">
                                {newsletter.frequency}
                                {newsletter.frequency === "weekly" && newsletter.days
                                  ? ` (${newsletter.days.map((day) => day.charAt(0).toUpperCase() + day.slice(1)).join(", ")})`
                                  : ""}
                                {newsletter.frequency === "monthly" && newsletter.date
                                  ? ` (Day ${newsletter.date})`
                                  : ""}
                              </span>
                              <Clock className="h-4 w-4 ml-2 mr-1 text-muted-foreground" />
                              <span>{newsletter.time}</span>
                            </div>
                          </div>
                          <div>
                            <div className="text-sm font-medium">Next Run</div>
                            <div className="text-sm mt-1">{formatDate(newsletter.nextRunDate)}</div>
                          </div>
                        </div>

<div className="text-sm">
                          <div className="font-medium mb-1">Configuration</div>
                          <div className="grid grid-cols-1 md:grid-cols-2 gap-x-4 gap-y-2">
                            <div className="flex justify-between">
                              <span className="text-muted-foreground">Word Count</span>
                              <span className="font-medium">{newsletter.configuration.wordCount}</span>
                            </div>
                            <div className="flex justify-between">
                              <span className="text-muted-foreground">AI Modules</span>
                              <span className="font-medium">{newsletter.configuration.aiModules.length}</span>
                            </div>
                            <div className="flex justify-between">
                              <span className="text-muted-foreground">Publish to Kit</span>
                              <span className="font-medium">
                                {newsletter.configuration.publishSettings.publishToKit ? "Yes" : "No"}
                              </span>
                            </div>
                            <div className="flex justify-between">
                              <span className="text-muted-foreground">Save to Pipeline</span>
                              <span className="font-medium">
                                {newsletter.configuration.publishSettings.saveToContentPipeline ? "Yes" : "No"}
                              </span>
                            </div>
                          </div>
                        </div>

{newsletter.status === "failed" && newsletter.runHistory.length > 0 && (
                          <div className="mt-4 flex items-start bg-red-50 p-3 rounded-md">
                            <AlertCircle className="h-5 w-5 text-red-500 mr-2 mt-0.5 flex-shrink-0" />
                            <div>
                              <div className="font-medium text-red-800">Task failed on last run</div>
                              <p className="text-sm text-red-700">
                                {newsletter.runHistory[newsletter.runHistory.length - 1].error ||
                                  "Error generating newsletter. Please check your configuration and try again."}
                              </p>
                            </div>
                          </div>
                        )}
                      </CardContent>
                      <CardFooter className="bg-muted/30 px-4 py-2 text-xs text-muted-foreground">
                        <div className="flex justify-between w-full">
                          <span>Created {formatDate(newsletter.createdAt)}</span>
                          {newsletter.lastRunDate && <span>Last run {formatDate(newsletter.lastRunDate)}</span>}
                        </div>
                      </CardFooter>
                    </Card>
                  ))}
                </div>
              )}
            </TabsContent>

<TabsContent value="history" className="space-y-4">
              <div className="bg-muted/50 p-4 rounded-lg">
                <div className="flex items-center mb-4">
                  <div className="w-full">
                    <h3 className="text-lg font-medium">Run History</h3>
                    <p className="text-sm text-muted-foreground">
                      View the execution history of your automated newsletters
                    </p>
                  </div>
                  <div className="flex gap-2">
                    <Select defaultValue="7days">
                      <SelectTrigger className="w-[150px]">
                        <SelectValue placeholder="Time period" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="24hours">Last 24 hours</SelectItem>
                        <SelectItem value="7days">Last 7 days</SelectItem>
                        <SelectItem value="30days">Last 30 days</SelectItem>
                        <SelectItem value="custom">Custom range</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                </div>

<div className="space-y-3">
                  {/* Sample run history items */}
                  <div className="flex items-center p-3 bg-white rounded-md border">
                    <div className="mr-3">
                      <CheckCircle2 className="h-5 w-5 text-green-500" />
                    </div>
                    <div className="flex-1">
                      <div className="font-medium">Daily Market Insights - May 11, 2025</div>
                      <div className="text-sm text-muted-foreground">Completed successfully in 45 seconds</div>
                    </div>
                    <div className="text-right">
                      <div className="text-sm font-medium">May 11, 2025</div>
                      <div className="text-xs text-muted-foreground">07:00 AM</div>
                    </div>
                  </div>

<div className="flex items-center p-3 bg-white rounded-md border">
                    <div className="mr-3">
                      <CheckCircle2 className="h-5 w-5 text-green-500" />
                    </div>
                    <div className="flex-1">
                      <div className="font-medium">Weekly Market Recap - May 10, 2025</div>
                      <div className="text-sm text-muted-foreground">
                        Completed successfully in 2 minutes 12 seconds
                      </div>
                    </div>
                    <div className="text-right">
                      <div className="text-sm font-medium">May 10, 2025</div>
                      <div className="text-xs text-muted-foreground">06:00 PM</div>
                    </div>
                  </div>

<div className="flex items-center p-3 bg-white rounded-md border">
                    <div className="mr-3">
                      <AlertCircle className="h-5 w-5 text-red-500" />
                    </div>
                    <div className="flex-1">
                      <div className="font-medium">Sector Analysis - May 9, 2025</div>
                      <div className="text-sm text-red-500">Failed: API connection error</div>
                    </div>
                    <div className="text-right">
                      <div className="text-sm font-medium">May 9, 2025</div>
                      <div className="text-xs text-muted-foreground">05:30 AM</div>
                    </div>
                  </div>
                </div>
              </div>
            </TabsContent>

<TabsContent value="templates" className="space-y-4">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <Card>
                  <CardHeader className="pb-2">
                    <CardTitle className="text-lg">Daily Market Update</CardTitle>
                    <CardDescription>Comprehensive daily market overview with key indices and movers</CardDescription>
                  </CardHeader>
                  <CardContent className="pb-2">
                    <div className="space-y-2 text-sm">
                      <div className="flex justify-between">
                        <span className="text-muted-foreground">Frequency</span>
                        <span>Daily</span>
                      </div>
                      <div className="flex justify-between">
                        <span className="text-muted-foreground">Modules</span>
                        <span>Market Analysis, Top Movers</span>
                      </div>
                      <div className="flex justify-between">
                        <span className="text-muted-foreground">Word Count</span>
                        <span>1,500</span>
                      </div>
                    </div>
                  </CardContent>
                  <CardFooter>
                    <Button variant="outline" className="w-full">
                      <Zap className="mr-2 h-4 w-4" />
                      Use Template
                    </Button>
                  </CardFooter>
                </Card>

<Card>
                  <CardHeader className="pb-2">
                    <CardTitle className="text-lg">Weekly Sector Rotation</CardTitle>
                    <CardDescription>Analysis of sector performance and rotation strategies</CardDescription>
                  </CardHeader>
                  <CardContent className="pb-2">
                    <div className="space-y-2 text-sm">
                      <div className="flex justify-between">
                        <span className="text-muted-foreground">Frequency</span>
                        <span>Weekly</span>
                      </div>
                      <div className="flex justify-between">
                        <span className="text-muted-foreground">Modules</span>
                        <span>Sector Performance, Investment Strategy</span>
                      </div>
                      <div className="flex justify-between">
                        <span className="text-muted-foreground">Word Count</span>
                        <span>2,000</span>
                      </div>
                    </div>
                  </CardContent>
                  <CardFooter>
                    <Button variant="outline" className="w-full">
                      <Zap className="mr-2 h-4 w-4" />
                      Use Template
                    </Button>
                  </CardFooter>
                </Card>

<Card>
                  <CardHeader className="pb-2">
                    <CardTitle className="text-lg">Monthly Economic Outlook</CardTitle>
                    <CardDescription>Comprehensive economic analysis and market projections</CardDescription>
                  </CardHeader>
                  <CardContent className="pb-2">
                    <div className="space-y-2 text-sm">
                      <div className="flex justify-between">
                        <span className="text-muted-foreground">Frequency</span>
                        <span>Monthly</span>
                      </div>
                      <div className="flex justify-between">
                        <span className="text-muted-foreground">Modules</span>
                        <span>Economic Outlook, Risk Assessment</span>
                      </div>
                      <div className="flex justify-between">
                        <span className="text-muted-foreground">Word Count</span>
                        <span>2,500</span>
                      </div>
                    </div>
                  </CardContent>
                  <CardFooter>
                    <Button variant="outline" className="w-full">
                      <Zap className="mr-2 h-4 w-4" />
                      Use Template
                    </Button>
                  </CardFooter>
                </Card>

<Card>
                  <CardHeader className="pb-2">
                    <CardTitle className="text-lg">Earnings Season Recap</CardTitle>
                    <CardDescription>Summary and analysis of quarterly earnings reports</CardDescription>
                  </CardHeader>
                  <CardContent className="pb-2">
                    <div className="space-y-2 text-sm">
                      <div className="flex justify-between">
                        <span className="text-muted-foreground">Frequency</span>
                        <span>Quarterly</span>
                      </div>
                      <div className="flex justify-between">
                        <span className="text-muted-foreground">Modules</span>
                        <span>Earnings Summary, Stock Spotlight</span>
                      </div>
                      <div className="flex justify-between">
                        <span className="text-muted-foreground">Word Count</span>
                        <span>2,000</span>
                      </div>
                    </div>
                  </CardContent>
                  <CardFooter>
                    <Button variant="outline" className="w-full">
                      <Zap className="mr-2 h-4 w-4" />
                      Use Template
                    </Button>
                  </CardFooter>
                </Card>
              </div>
            </TabsContent>
          </Tabs>
        </CardContent>
      </Card>

{isCreating && (
        <Card>
          <CardHeader>
            <CardTitle>Create Scheduled Newsletter</CardTitle>
            <CardDescription>Set up a new automated newsletter generation task</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-6">
              <div className="space-y-4">
                <h3 className="text-lg font-medium">Basic Information</h3>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="title">Newsletter Title</Label>
                    <Input
                      id="title"
                      placeholder="Daily Market Insights - {{date}}"
                      value={formState.title}
                      onChange={(e) => handleInputChange("title", e.target.value)}
                    />
                    <p className="text-xs text-muted-foreground">Use {{ date }} to include the current date</p>
                  </div>

<div className="space-y-2">
                    <Label htmlFor="subtitle">Subtitle</Label>
                    <Input
                      id="subtitle"
                      placeholder="Your daily dose of market intelligence"
                      value={formState.subtitle}
                      onChange={(e) => handleInputChange("subtitle", e.target.value)}
                    />
                  </div>
                </div>
              </div>

<div className="space-y-4">
                <h3 className="text-lg font-medium">Schedule</h3>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="frequency">Frequency</Label>
                    <Select
                      value={formState.frequency}
                      onValueChange={(value) => handleInputChange("frequency", value)}
                    >
                      <SelectTrigger id="frequency">
                        <SelectValue placeholder="Select frequency" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="daily">Daily</SelectItem>
                        <SelectItem value="weekly">Weekly</SelectItem>
                        <SelectItem value="monthly">Monthly</SelectItem>
                        <SelectItem value="custom">Custom</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>

<div className="space-y-2">
                    <Label htmlFor="time">Time</Label>
                    <Input
                      id="time"
                      type="time"
                      value={formState.time}
                      onChange={(e) => handleInputChange("time", e.target.value)}
                    />
                  </div>
                </div>

{formState.frequency === "weekly" && (
                  <div className="space-y-2">
                    <Label>Days of Week</Label>
                    <div className="grid grid-cols-2 md:grid-cols-4 gap-2">
                      {["monday", "tuesday", "wednesday", "thursday", "friday", "saturday", "sunday"].map((day) => (
                        <div key={day} className="flex items-center space-x-2">
                          <Checkbox
                            id={`day-${day}`}
                            checked={formState.days.includes(day)}
                            onCheckedChange={(checked) => handleDayChange(day, checked as boolean)}
                          />
                          <label
                            htmlFor={`day-${day}`}
                            className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 capitalize"
                          >
                            {day}
                          </label>
                        </div>
                      ))}
                    </div>
                  </div>
                )}

{formState.frequency === "monthly" && (
                  <div className="space-y-2">
                    <Label htmlFor="monthlyDate">Day of Month</Label>
                    <Select
                      value={formState.monthlyDate.toString()}
                      onValueChange={(value) => handleInputChange("monthlyDate", Number.parseInt(value))}
                    >
                      <SelectTrigger id="monthlyDate">
                        <SelectValue placeholder="Select day of month" />
                      </SelectTrigger>
                      <SelectContent>
                        {Array.from({ length: 31 }, (_, i) => i + 1).map((day) => (
                          <SelectItem key={day} value={day.toString()}>
                            {day}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>
                )}

{formState.frequency === "custom" && (
                  <div className="space-y-2">
                    <Label>Custom Schedule</Label>
                    <div className="flex flex-col space-y-2">
                      <div className="grid grid-cols-7 gap-1">
                        <Popover>
                          <PopoverTrigger asChild>
                            <Button
                              variant={"outline"}
                              className={cn(
                                "w-full justify-start text-left font-normal",
                                !selectedDate && "text-muted-foreground",
                              )}
                            >
                              <CalendarIcon className="mr-2 h-4 w-4" />
                              {selectedDate ? format(selectedDate, "PPP") : <span>Pick a date</span>}
                            </Button>
                          </PopoverTrigger>
                          <PopoverContent className="w-auto p-0">
                            <CalendarComponent
                              mode="single"
                              selected={selectedDate}
                              onSelect={setSelectedDate}
                              initialFocus
                            />
                          </PopoverContent>
                        </Popover>
                      </div>
                    </div>
                  </div>
                )}
              </div>

<div className="space-y-4">
                <h3 className="text-lg font-medium">Content Configuration</h3>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="sectors">Target Sectors</Label>
                    <Input
                      id="sectors"
                      placeholder="Technology, Financial, Healthcare"
                      value={formState.sectors.join(", ")}
                      onChange={(e) => handleInputChange("sectors", e.target.value.split(", "))}
                    />
                  </div>

<div className="space-y-2">
                    <Label htmlFor="tickers">Target Tickers</Label>
                    <Input
                      id="tickers"
                      placeholder="AAPL, MSFT, GOOGL"
                      value={formState.tickers.join(", ")}
                      onChange={(e) => handleInputChange("tickers", e.target.value.split(", "))}
                    />
                  </div>

<div className="space-y-2">
                    <Label htmlFor="wordCount">Target Word Count</Label>
                    <Select
                      value={formState.wordCount.toString()}
                      onValueChange={(value) => handleInputChange("wordCount", Number.parseInt(value))}
                    >
                      <SelectTrigger id="wordCount">
                        <SelectValue placeholder="Select word count" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="500">500 words</SelectItem>
                        <SelectItem value="1000">1,000 words</SelectItem>
                        <SelectItem value="1500">1,500 words</SelectItem>
                        <SelectItem value="2000">2,000 words</SelectItem>
                        <SelectItem value="2500">2,500 words</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                </div>

<div className="space-y-2">
                  <Label>AI Content Modules</Label>
                  <div className="grid grid-cols-2 md:grid-cols-4 gap-2">
                    {[
                      "market-analysis",
                      "stock-spotlight",
                      "economic-outlook",
                      "sector-performance",
                      "investment-strategy",
                      "risk-assessment",
                      "earnings-summary",
                      "dividend-focus",
                    ].map((module) => (
                      <div key={module} className="flex items-center space-x-2">
                        <Checkbox
                          id={`module-${module}`}
                          checked={formState.aiModules.includes(module)}
                          onCheckedChange={(checked) => handleModuleChange(module, checked as boolean)}
                        />
                        <label
                          htmlFor={`module-${module}`}
                          className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 capitalize"
                        >
                          {module.split("-").join(" ")}
                        </label>
                      </div>
                    ))}
                  </div>
                </div>
              </div>

<div className="space-y-4">
                <h3 className="text-lg font-medium">Publishing Options</h3>

<div className="space-y-4">
                  <div className="flex items-center justify-between">
                    <div className="space-y-0.5">
                      <Label htmlFor="saveToContentPipeline">Save to Content Pipeline</Label>
                      <p className="text-xs text-muted-foreground">
                        Store generated newsletters in your content pipeline
                      </p>
                    </div>
                    <Switch
                      id="saveToContentPipeline"
                      checked={formState.saveToContentPipeline}
                      onCheckedChange={(checked) => handleInputChange("saveToContentPipeline", checked)}
                    />
                  </div>

<div className="flex items-center justify-between">
                    <div className="space-y-0.5">
                      <Label htmlFor="publishToKit">Publish to Kit</Label>
                      <p className="text-xs text-muted-foreground">
                        Automatically publish generated newsletters to Kit
                      </p>
                    </div>
                    <Switch
                      id="publishToKit"
                      checked={formState.publishToKit}
                      onCheckedChange={(checked) => handleInputChange("publishToKit", checked)}
                    />
                  </div>

{formState.publishToKit && (
                    <>
                      <div className="flex items-center justify-between">
                        <div className="space-y-0.5">
                          <Label htmlFor="publishAsDraft">Publish as Draft</Label>
                          <p className="text-xs text-muted-foreground">Save to Kit without publishing publicly</p>
                        </div>
                        <Switch
                          id="publishAsDraft"
                          checked={formState.publishAsDraft}
                          onCheckedChange={(checked) => handleInputChange("publishAsDraft", checked)}
                        />
                      </div>

<div className="flex items-center justify-between">
                        <div className="space-y-0.5">
                          <Label htmlFor="makePublic">Make Public</Label>
                          <p className="text-xs text-muted-foreground">Allow public access to this content</p>
                        </div>
                        <Switch
                          id="makePublic"
                          checked={formState.makePublic}
                          onCheckedChange={(checked) => handleInputChange("makePublic", checked)}
                          disabled={formState.publishAsDraft}
                        />
                      </div>
                    </>
                  )}
                </div>
              </div>
            </div>
          </CardContent>
          <CardFooter className="flex justify-between">
            <Button variant="outline" onClick={() => setIsCreating(false)}>
              Cancel
            </Button>
            <Button onClick={handleCreateNewsletter}>Create Scheduled Newsletter</Button>
          </CardFooter>
        </Card>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/newsletter-generator.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState, useTransition, useEffect, useCallback, useMemo } from "react"
import { useToast } from "@/hooks/use-toast"
import {
  BarChartIcon as ChartBarIcon,
  TrendingUp,
  Newspaper,
  AlertCircle,
  LineChart,
  DollarSign,
  Briefcase,
  Plus,
  Settings,
  Edit,
  Send,
  Download,
  Copy,
  Trash,
  Eye,
  Sparkles,
  Search,
  ExternalLink,
  Clock,
  RefreshCw,
  Bookmark,
  BookmarkCheck,
  ChevronLeft,
  ChevronRight,
  Calendar,
  Tag,
  Globe,
  FileText,
  BarChart,
  Rss,
  CheckCircle,
  PlusCircle,
  X,
  Calculator,
} from "lucide-react"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Switch } from "@/components/ui/switch"
import { Separator } from "@/components/ui/separator"
import { Badge } from "@/components/ui/badge"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { ContentItemSelector } from "@/components/content-item-selector"
import type { ContentItem } from "@/types/content-pipeline"
import { generateContentWithGemini } from "@/app/actions/ai-actions"
import { publishContentToKit, sendBroadcastToKit, checkKitStatus } from "@/app/actions/kit-actions"
import { createContentItem } from "@/services/content-pipeline-service"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { Calendar as CalendarComponent } from "@/components/ui/calendar"
import { format } from "date-fns"

import { KeyboardSensor, PointerSensor, useSensor, useSensors, type DragEndEvent } from "@dnd-kit/core"
import { arrayMove, sortableKeyboardCoordinates } from "@dnd-kit/sortable"

import { generateValuationAnalysisContent } from "@/app/actions/valuation-content-actions" // Import new action
import { ModuleDialog } from "./newsletter/module-dialog" // Import the new ModuleDialog
import type { ValuationAssumptions, ValuationScenario } from "./newsletter/types" // Import new types

interface ContentModule {
  id: string
  type: ContentModuleType
  title: string
  content: string
  isGenerating: boolean
  icon: React.ReactNode
  description: string
}

interface NewsletterSection {
  id: string
  type: "content" | "market-snapshot" | "market-movers" | "featured-content" | "module" | "related-news"
  title: string
  moduleId?: string // For module sections
  enabled: boolean
}

// Define interface for news search results
interface NewsSearchResult {
  id: string
  title: string
  summary: string
  source: string
  url: string
  publishedAt: string
  sentiment: "positive" | "negative" | "neutral"
  tickers?: string[]
  selected?: boolean
  image?: string
  category?: string
}

// Define news source type
type NewsSourceType = "all" | "fmp-articles" | "general-news" | "press-releases" | "stock-news"

export function NewsletterGenerator() {
  const [newsletterType, setNewsletterType] = useState("daily-market-update")
  const [reportTemplate, setReportTemplate] = useState("default-template")
  const [title, setTitle] = useState("Daily Market Insights - {{reportDate}}")
  const [subtitle, setSubtitle] = useState("Your daily dose of market intelligence")
  const [wordCount, setWordCount] = useState("1500")
  const [outputFormat, setOutputFormat] = useState("html")
  const [isGenerating, setIsGenerating] = useState(false)
  const [previewDevice, setPreviewDevice] = useState("desktop")
  const [activeTab, setActiveTab] = useState("settings")
  const [selectedContentItems, setSelectedContentItems] = useState<ContentItem[]>([])
  const [newsletterContent, setNewsletterContent] = useState("")
  const [isEnhancing, setIsEnhancing] = useState(false)
  const [isPending, startTransition] = useTransition()
  const [isSaving, setIsSaving] = useState(false)
  const [isPublishing, setIsPublishing] = useState(false)
  const [selectedModuleType, setSelectedModuleType] = useState<ContentModuleType | null>(null)
  const [isModuleDialogOpen, setIsModuleDialogOpen] = useState(false)
  // Removed moduleInput state from here, it's now managed internally by ModuleDialog
  const { toast } = useToast()
  const [isSending, setIsSending] = useState(false)
  const [publishAsDraft, setPublishAsDraft] = useState(true)
  const [makePublic, setMakePublic] = useState(false)
  const [kitStatus, setKitStatus] = useState<{ isConnected: boolean; error?: string } | null>(null)
  const [isCheckingKitStatus, setIsCheckingKitStatus] = useState(false)
  const [publishDialogOpen, setPublishDialogOpen] = useState(false)
  const [contentSummary, setContentSummary] = useState("")
  const [isGeneratingSummary, setIsGeneratingSummary] = useState(false)

const [includeMarketSnapshot, setIncludeMarketSnapshot] = useState(true)
  const [includeMarketMovers, setIncludeMarketMovers] = useState(true)

// News related states
  const [relatedNewsItems, setRelatedNewsItems] = useState<
    Array<{
      id: string
      title: string
      source: string
      url: string
      date: string
    }>
  >([])
  const [newsItemInput, setNewsItemInput] = useState({ title: "", source: "", url: "", date: "" })
  const [isAddingNews, setIsAddingNews] = useState(false)

// News search states
  const [isNewsSearchOpen, setIsNewsSearchOpen] = useState(false)
  const [newsSearchQuery, setNewsSearchQuery] = useState("")
  const [newsSearchResults, setNewsSearchResults] = useState<NewsSearchResult[]>([])
  const [isSearching, setIsSearching] = useState(false)
  const [selectedNewsResults, setSelectedNewsResults] = useState<NewsSearchResult[]>([])
  const [newsSearchFilter, setNewsSearchFilter] = useState<"all" | "positive" | "negative" | "neutral">("all")
  const [tickerFilter, setTickerFilter] = useState("")
  const [bookmarkedNews, setBookmarkedNews] = useState<NewsSearchResult[]>([])
  const [newsSource, setNewsSource] = useState<NewsSourceType>("all")
  const [newsCategory, setNewsCategory] = useState<NewsCategoryType>("all")
  const [currentPage, setCurrentPage] = useState(0)
  const [totalPages, setTotalPages] = useState(1)
  const [dateRange, setDateRange] = useState<{ from: Date | undefined; to: Date | undefined }>({
    from: undefined,
    to: undefined,
  })
  const [isDatePickerOpen, setIsDatePickerOpen] = useState(false)

// Add this state declaration
  const [showQuickActions, setShowQuickActions] = useState(false)

// Section ordering state
  const [sections, setSections] = useState<NewsletterSection[]>([
    { id: "content", type: "content", title: "Main Content", enabled: true },
    { id: "featured-content", type: "featured-content", title: "Featured Content", enabled: true },
    { id: "market-snapshot", type: "market-snapshot", title: "Market Snapshot", enabled: true },
    { id: "market-movers", type: "market-movers", title: "Market Movers", enabled: true },
    { id: "related-news", type: "related-news", title: "Related News", enabled: true },
  ])

// DnD sensors
  const sensors = useSensors(
    useSensor(PointerSensor),
    useSensor(KeyboardSensor, {
      coordinateGetter: sortableKeyboardCoordinates,
    }),
  )

// Content modules state
  const [contentModules, setContentModules] = useState<ContentModule[]>([])

// Add after other state declarations
  const [newsletterTemplates, setNewsletterTemplates] = useState<
    Array<{
      id: string
      name: string
      description: string
      structure: string
      thumbnail: string
    }>
  >([
    {
      id: "daily-market-update",
      name: "Daily Market Update",
      description: "A concise daily summary of market movements and key events",
      structure: "market-snapshot,top-news,sector-performance,market-movers",
      thumbnail: "/placeholder.svg?key=hsybu",
    },
    {
      id: "weekly-insights",
      name: "Weekly Investment Insights",
      description: "In-depth analysis of market trends and investment opportunities",
      structure: "market-analysis,stock-spotlight,economic-outlook,investment-strategy",
      thumbnail: "/placeholder.svg?key=dnhvi",
    },
    {
      id: "earnings-focus",
      name: "Earnings Season Focus",
      description: "Detailed coverage of earnings reports and their market impact",
      structure: "earnings-summary,stock-spotlight,sector-performance,market-outlook",
      thumbnail: "/earnings-report.png",
    },
  ])

// Current date formatted as May 11, 2025
  const currentDate = new Date().toLocaleDateString("en-US", {
    month: "long",
    day: "numeric",
    year: "numeric",
  })

const formattedTitle = title.replace("{{reportDate}}", currentDate)

// Check Kit status on component mount
  useEffect(() => {
    const checkStatus = async () => {
      setIsCheckingKitStatus(true)
      try {
        const status = await checkKitStatus()
        setKitStatus(status)
        console.log("Kit status:", status)

if (!status.isConnected) {
          toast({
            title: "Kit connection issue",
            description: status.error || "Unable to connect to Kit. Using development mode instead.",
            variant: "default",
          })
        } else {
          toast({
            title: "Kit API connected",
            description: "Successfully connected to Kit API.",
          })
        }
      } catch (error) {
        console.error("Error checking Kit status:", error)
        setKitStatus({
          isConnected: false,
          error: `Error checking Kit status: ${error instanceof Error ? error.message : "Unknown error"}`,
        })

toast({
          title: "Kit connection error",
          description: "Failed to check Kit API status. Using development mode instead.",
          variant: "default",
        })
      } finally {
        setIsCheckingKitStatus(false)
      }
    }

// Only check status if we're on the publish tab
    if (activeTab === "publish") {
      checkStatus()
    }
  }, [activeTab, toast])

// Sync market data toggles with section state
  useEffect(() => {
    setSections((prevSections) =>
      prevSections.map((section) => {
        if (section.id === "market-snapshot") {
          return { ...section, enabled: includeMarketSnapshot }
        } else if (section.id === "market-movers") {
          return { ...section, enabled: includeMarketMovers }
        }
        return section
      }),
    )
  }, [includeMarketSnapshot, includeMarketMovers])

// Add module sections when new modules are created
  useEffect(() => {
    // Find modules that don't have a section yet
    const modulesWithoutSection = contentModules.filter(
      (module) => !sections.some((section) => section.moduleId === module.id),
    )

if (modulesWithoutSection.length > 0) {
      setSections((prevSections) => [
        ...prevSections,
        ...modulesWithoutSection.map((module) => ({
          id: `module-section-${module.id}`,
          type: "module",
          title: module.title,
          moduleId: module.id,
          enabled: true,
        })),
      ])
    }

// Remove sections for deleted modules
    const moduleIds = contentModules.map((module) => module.id)
    setSections((prevSections) =>
      prevSections.filter(
        (section) => section.type !== "module" || (section.moduleId && moduleIds.includes(section.moduleId)),
      ),
    )
  }, [contentModules])

// Available content module types
  const availableModules = [
    {
      type: "market-analysis" as ContentModuleType,
      title: "Market Analysis",
      description: "In-depth analysis of current market conditions and trends",
      icon: <ChartBarIcon className="h-5 w-5" />,
    },
    {
      type: "stock-spotlight" as ContentModuleType,
      title: "Stock Spotlight",
      description: "Detailed analysis of noteworthy stocks",
      icon: <TrendingUp className="h-5 w-5" />,
    },
    {
      type: "valuation-analysis" as ContentModuleType, // Moved here
      title: "Valuation Analysis",
      description: "AI-powered intrinsic value and DCF analysis for a given stock",
      icon: <Calculator className="h-5 w-5" />,
    },
    {
      type: "economic-outlook" as ContentModuleType,
      title: "Economic Outlook",
      description: "Forecast of economic conditions and implications for investors",
      icon: <LineChart className="h-5 w-5" />,
    },
    {
      type: "sector-performance" as ContentModuleType,
      title: "Sector Performance",
      description: "Analysis of how different market sectors are performing",
      icon: <Briefcase className="h-5 w-5" />,
    },
    {
      type: "investment-strategy" as ContentModuleType,
      title: "Investment Strategy",
      description: "Strategic investment advice based on current market conditions",
      icon: <DollarSign className="h-5 w-5" />,
    },
    {
      type: "risk-assessment" as ContentModuleType,
      title: "Risk Assessment",
      description: "Evaluation of current market risks and mitigation strategies",
      icon: <AlertCircle className="h-5 w-5" />,
    },
    {
      type: "earnings-summary" as ContentModuleType,
      title: "Earnings Summary",
      description: "Summary of recent earnings reports and their market impact",
      icon: <Newspaper className="h-5 w-5" />,
    },
    {
      type: "dividend-focus" as ContentModuleType,
      title: "Dividend Focus",
      description: "Analysis of dividend-paying stocks and income strategies",
      icon: <DollarSign className="h-5 w-5" />,
    },
  ]

const handleGenerateHeadline = async () => {
    // In a real implementation, this would call an AI service
    setIsGenerating(true)
    setTimeout(() => {
      setTitle("Market Resilience Amid Tech Volatility - {{reportDate}}")
      setIsGenerating(false)
    }, 1500)
  }

// Use useCallback to memoize the function to prevent unnecessary re-renders
  const handleContentItemsSelected = useCallback((items: ContentItem[]) => {
    setSelectedContentItems(items)
    // Reset content summary when items change
    setContentSummary("")
  }, [])

const marketData = {
    indices: [
      { name: "S&P 500", price: 4587.64, change: "+0.63%" },
      { name: "Dow Jones", price: 37986.4, change: "+0.56%" },
      { name: "Nasdaq", price: 14409.45, change: "+0.32%" },
      { name: "Russell 2000", price: 1991.48, change: "-0.21%" },
    ],
    topGainers: [
      { symbol: "NVDA", name: "NVIDIA Corp", price: 450.2, change: "+4.20%", volume: "12.35M" },
      { symbol: "AAPL", name: "Apple Inc", price: 173.5, change: "+2.80%", volume: "65.12M" },
      { symbol: "MSFT", name: "Microsoft Corp", price: 418.65, change: "+1.95%", volume: "22.78M" },
    ],
    topLosers: [
      { symbol: "TSLA", name: "Tesla Inc", price: 167.2, change: "-2.15%", volume: "45.67M" },
      { symbol: "META", name: "Meta Platforms", price: 485.3, change: "-1.40%", volume: "18.92M" },
      { symbol: "AMZN", name: "Amazon.com Inc", price: 178.9, change: "-0.85%", volume: "32.45M" },
    ],
  }

// Generate content summary with Gemini
  const generateContentSummary = async () => {
    if (selectedContentItems.length === 0) {
      toast({
        title: "No content selected",
        description: "Please select at least one content item to generate a summary.",
        variant: "destructive",
      })
      return
    }

setIsGeneratingSummary(true)

try {
      // Prepare content items summaries
      const contentDetails = selectedContentItems
        .map((item) => `Title: ${item.title}\nDescription: ${item.description}\nTags: ${item.tags.join(", ")}`)
        .join("\n\n")

const prompt = `Generate a concise summary (about 200 words) of the following content items for an investment newsletter:
      
      ${contentDetails}
      
      The summary should highlight key themes, connections between the items, and their relevance to investors.
      Format the summary as a single paragraph that flows well.`

const result = await generateContentWithGemini(prompt)

if (result.error) {
        throw new Error(result.error)
      }

setContentSummary(result.content)
      toast({
        title: "Summary generated",
        description: "Content summary has been generated successfully.",
      })
    } catch (error) {
      toast({
        title: "Summary generation failed",
        description: `Failed to generate content summary: ${error instanceof Error ? error.message : "Unknown error"}`,
        variant: "destructive",
      })
    } finally {
      setIsGeneratingSummary(false)
    }
  }

// Add a function to handle adding a news item (after other handler functions)
  const handleAddNewsItem = () => {
    if (!newsItemInput.title || !newsItemInput.source) return

const newItem = {
      id: `news-${Date.now()}`,
      title: newsItemInput.title,
      source: newsItemInput.source,
      url: newsItemInput.url || "#",
      date: new Date().toISOString().split("T")[0],
    }

setRelatedNewsItems((prev) => [...prev, newItem])
    setNewsItemInput({ title: "", source: "", url: "", date: "" })
    setIsAddingNews(false)

toast({
      title: "News item added",
      description: `Added "${newItem.title}" to related news`,
    })
  }

// Add a function to remove a news item
  const removeNewsItem = (id: string) => {
    setRelatedNewsItems((prev) => prev.filter((item) => item.id !== id))
  }

// Search for news articles
  const searchNewsArticles = async () => {
    setIsSearching(true)
    setNewsSearchResults([])

try {
      // Determine which endpoint to use based on the selected news source
      let endpoint: string
      const params: Record<string, string> = {
        page: currentPage.toString(),
        limit: "20",
      }

// Add ticker filter if provided
      if (tickerFilter.trim()) {
        const tickers = tickerFilter
          .toUpperCase()
          .split(",")
          .map((t) => t.trim())
          .filter(Boolean)
          .join(",")

if (tickers) {
          params.symbols = tickers
        }
      }

// Set the endpoint based on the selected news source
      switch (newsSource) {
        case "fmp-articles":
          endpoint = "fmp-articles"
          break
        case "general-news":
          endpoint = "general-news"
          break
        case "press-releases":
          endpoint = tickerFilter.trim() ? "press-releases" : "press-releases"
          break
        case "stock-news":
          endpoint = tickerFilter.trim() ? "stock-news" : "stock-news"
          break
        case "all":
        default:
          // Default to stock news if no specific source is selected
          endpoint = "stock-news"
          break
      }

// Build the API URL
      const searchParams = new URLSearchParams()
      searchParams.append("endpoint", endpoint)

// Add all parameters
      Object.entries(params).forEach(([key, value]) => {
        if (value) searchParams.append(key, value)
      })

const apiUrl = `/api/fmp?${searchParams.toString()}`
      console.log("Fetching news with URL:", apiUrl)

const response = await fetch(apiUrl)

if (!response.ok) {
        const errorText = await response.text()
        console.error("News API Error Response:", errorText)
        throw new Error(`Failed to fetch news: ${response.status} - ${errorText || response.statusText}`)
      }

const data = await response.json()
      console.log("News API Response:", data)

if (!Array.isArray(data)) {
        console.error("Unexpected response format:", data)
        throw new Error("Invalid response format from News API")
      }

// Format results to match our NewsSearchResult interface
      const formattedResults: NewsSearchResult[] = data.map((item: any) => {
        // Determine which format the API returned and map accordingly
        const result: NewsSearchResult = {
          id: `news-${item.id || Date.now() + Math.random().toString(36).substring(2, 9)}`,
          title: item.title || item.headline || "Untitled Article",
          summary: item.text || item.summary || item.description || "No summary available",
          source: item.site || item.source || item.publisher || "Financial News",
          url: item.url || item.link || "",
          publishedAt: item.publishedDate || item.date || item.publishedAt || new Date().toISOString(),
          sentiment: determineSentiment(item.text || item.summary || item.description || ""),
          selected: false,
        }

// Add tickers if available
        if (item.symbols || item.tickers) {
          result.tickers = (item.symbols || item.tickers || "")
            .split(",")
            .map((t: string) => t.trim())
            .filter(Boolean)
            .join(",")
            .split(",") // Ensure it's an array of strings
        }

// Add image if available
        if (item.image || item.imageUrl) {
          result.image = item.image || item.imageUrl
        }

// Add category if available
        if (item.category) {
          result.category = item.category
        }

return result
      })

// Filter by search query if provided
      let filteredResults = [...formattedResults]
      if (newsSearchQuery.trim()) {
        const searchTerms = newsSearchQuery.toLowerCase()
        filteredResults = filteredResults.filter(
          (item) => item.title.toLowerCase().includes(searchTerms) || item.summary.toLowerCase().includes(searchTerms),
        )
      }

// Filter by sentiment if selected
      if (newsSearchFilter !== "all") {
        filteredResults = filteredResults.filter((item) => item.sentiment === newsSearchFilter)
      }

// Filter by category if selected
      if (newsCategory !== "all") {
        filteredResults = filteredResults.filter(
          (item) =>
            item.category?.toLowerCase().includes(newsCategory) ||
            item.summary.toLowerCase().includes(newsCategory) ||
            item.title.toLowerCase().includes(newsCategory),
        )
      }

// Filter by date range if selected
      if (dateRange.from || dateRange.to) {
        filteredResults = filteredResults.filter((item) => {
          const publishDate = new Date(item.publishedAt)
          if (dateRange.from && dateRange.to) {
            return publishDate >= dateRange.from && publishDate <= dateRange.to
          } else if (dateRange.from) {
            return publishDate >= dateRange.from
          } else if (dateRange.to) {
            return publishDate <= dateRange.to
          }
          return true
        })
      }

setNewsSearchResults(filteredResults)
      setTotalPages(Math.ceil(data.length / 20))

if (filteredResults.length === 0) {
        toast({
          title: "No results found",
          description: "Try different search terms or filters.",
          variant: "default",
        })
      } else {
        toast({
          title: "News search complete",
          description: `Found ${filteredResults.length} articles matching your criteria.`,
        })
      }
    } catch (error) {
      console.error("Error fetching news:", error)
      toast({
        title: "Search failed",
        description: `Failed to fetch news: ${error instanceof Error ? error.message : "Unknown error"}`,
        variant: "destructive",
      })
    } finally {
      setIsSearching(false)
    }
  }

// Helper function to determine sentiment from text
  const determineSentiment = (text: string): "positive" | "negative" | "neutral" => {
    const positiveWords = [
      "gain",
      "rise",
      "up",
      "growth",
      "profit",
      "positive",
      "bullish",
      "rally",
      "surge",
      "increase",
    ]
    const negativeWords = ["loss", "fall", "down", "decline", "negative", "bearish", "drop", "plunge", "decrease"]

const lowerText = text.toLowerCase()
    let positiveCount = 0
    let negativeCount = 0

positiveWords.forEach((word) => {
      const regex = new RegExp(`\\b${word}\\b`, "gi")
      const matches = lowerText.match(regex)
      if (matches) positiveCount += matches.length
    })

negativeWords.forEach((word) => {
      const regex = new RegExp(`\\b${word}\\b`, "gi")
      const matches = lowerText.match(regex)
      if (matches) negativeCount += matches.length
    })

if (positiveCount > negativeCount + 2) return "positive"
    if (negativeCount > positiveCount + 2) return "negative"
    return "neutral"
  }

// Toggle selection of a news search result
  const toggleNewsSelection = (id: string) => {
    setNewsSearchResults((prev) => prev.map((item) => (item.id === id ? { ...item, selected: !item.selected } : item)))

// Update selected news results
    const updatedResults = newsSearchResults.map((item) =>
      item.id === id ? { ...item, selected: !item.selected } : item,
    )

setSelectedNewsResults(updatedResults.filter((item) => item.selected))
  }

// Toggle bookmark for a news item
  const toggleBookmark = (item: NewsSearchResult) => {
    const isBookmarked = bookmarkedNews.some((bookmarked) => bookmarked.id === item.id)

if (isBookmarked) {
      // Remove from bookmarks
      setBookmarkedNews((prev) => prev.filter((bookmarked) => bookmarked.id !== item.id))
      toast({
        title: "Removed from bookmarks",
        description: "News item removed from your bookmarks.",
      })
    } else {
      // Add to bookmarks
      setBookmarkedNews((prev) => [...prev, item])
      toast({
        title: "Added to bookmarks",
        description: "News item added to your bookmarks.",
      })
    }
  }

// Add selected news items to related news
  const addSelectedNewsToRelated = () => {
    const selectedItems = newsSearchResults.filter((item) => item.selected)

if (selectedItems.length === 0) {
      toast({
        title: "No items selected",
        description: "Please select at least one news item to add.",
        variant: "destructive",
      })
      return
    }

// Convert selected news items to related news format
    const newRelatedItems = selectedItems.map((item) => ({
      id: `news-${item.id}`,
      title: item.title,
      source: item.source,
      url: item.url,
      date: new Date(item.publishedAt).toISOString().split("T")[0],
    }))

// Add to related news items
    setRelatedNewsItems((prev) => [...prev, ...newRelatedItems])

// Reset selections
    setNewsSearchResults((prev) => prev.map((item) => ({ ...item, selected: false })))
    setSelectedNewsResults([])

// Close dialog
    setIsNewsSearchOpen(false)

toast({
      title: "News items added",
      description: `Added ${selectedItems.length} news items to your newsletter.`,
    })
  }

// Format relative time for display
  const formatRelativeTime = (dateString: string): string => {
    const now = new Date()
    const date = new Date(dateString)
    const diffInSeconds = Math.floor((now.getTime() - date.getTime()) / 1000)

if (diffInSeconds < 60) return `${diffInSeconds} seconds ago`
    if (diffInSeconds < 3600) return `${Math.floor(diffInSeconds / 60)} minutes ago`
    if (diffInSeconds < 86400) return `${Math.floor(diffInSeconds / 3600)} hours ago`
    if (diffInSeconds < 604800) return `${Math.floor(diffInSeconds / 86400)} days ago`

return date.toLocaleDateString()
  }

// Generate newsletter content with Gemini
  const generateNewsletterContent = async () => {
    if (selectedContentItems.length === 0 && contentModules.length === 0) {
      toast({
        title: "No content selected",
        description: "Please select at least one content item or add a content module.",
        variant: "destructive",
      })
      return
    }

setIsEnhancing(true)

try {
      // Prepare content items summaries
      const contentSummaries = selectedContentItems
        .map((item) => `Title: ${item.title}\nDescription: ${item.description}\nTags: ${item.tags.join(", ")}`)
        .join("\n\n")

// Prepare content modules
      const modulesContent = contentModules
        .map((module) => `Section: ${module.title}\nContent: ${module.content}`)
        .join("\n\n")

// Prepare related news items
      const relatedNewsContent =
        relatedNewsItems.length > 0
          ? `RELATED NEWS ITEMS:\n${relatedNewsItems
              .map((item) => `Title: ${item.title}\nSource: ${item.source}\nDate: ${item.date}\nURL: ${item.url}`)
              .join("\n\n")}`
          : ""

// Combine all content for the prompt
      const contentToInclude = [
        contentSummaries ? `CONTENT ITEMS:\n${contentSummaries}` : "",
        contentSummary ? `CONTENT SUMMARY:\n${contentSummary}` : "",
        modulesContent ? `SPECIALIZED MODULES:\n${modulesContent}` : "",
        relatedNewsContent ? `${relatedNewsContent}` : "",
      ]
        .filter(Boolean)
        .join("\n\n")

// Enhanced prompt with more specific instructions for better quality
      const prompt = `Generate a comprehensive, professional investment newsletter with the title "${formattedTitle}" and subtitle "${subtitle}". 
    The newsletter should be approximately ${wordCount} words and include analysis of the following content:
    
    ${contentToInclude}
    
    IMPORTANT FORMATTING INSTRUCTIONS:
    1. Use clear section headings and subheadings to organize content
    2. Include bullet points for key takeaways where appropriate
    3. Use data-driven insights with specific numbers and percentages
    4. Maintain a professional, authoritative tone throughout
    5. Include actionable investment insights and recommendations
    6. Ensure proper paragraph breaks for readability
    7. Highlight important market trends and their implications
    8. Include a brief executive summary at the beginning
    9. End with forward-looking statements or expectations
    
    The target audience is sophisticated investors who need clear, concise, and actionable information.
    Focus on providing unique insights rather than general market commentary.`

const result = await generateContentWithGemini(prompt)

if (result.error) {
        throw new Error(result.error)
      }

setNewsletterContent(result.content)
      toast({
        title: "Newsletter generated",
        description: "Your newsletter content has been generated successfully.",
      })
    } catch (error) {
      toast({
        title: "Generation failed",
        description: `Failed to generate newsletter content: ${error instanceof Error ? error.message : "Unknown error"}`,
        variant: "destructive",
      })
    } finally {
      setIsEnhancing(false)
    }
  }

// Enhance existing newsletter content
  const enhanceNewsletterContent = async () => {
    if (!newsletterContent) {
      toast({
        title: "No content to enhance",
        description: "Please generate newsletter content first.",
        variant: "destructive",
      })
      return
    }

setIsEnhancing(true)

try {
      const prompt = `Enhance the following investment newsletter content. Make it more engaging, detailed, and insightful. 
      Ensure it maintains a professional tone and is approximately ${wordCount} words:
      
      ${newsletterContent}`

const result = await generateContentWithGemini(prompt)

if (result.error) {
        throw new Error(result.error)
      }

setNewsletterContent(result.content)
      toast({
        title: "Content enhanced",
        description: "Your newsletter content has been enhanced with AI.",
      })
    } catch (error) {
      toast({
        title: "Enhancement failed",
        description: `Failed to enhance newsletter content: ${error instanceof Error ? error.message : "Unknown error"}`,
        variant: "destructive",
      })
    } finally {
      setIsEnhancing(false)
    }
  }

// Save newsletter as a report in Supabase
  const saveNewsletterAsReport = async () => {
    if (!newsletterContent) {
      toast({
        title: "No content to save",
        description: "Please generate newsletter content first.",
        variant: "destructive",
      })
      return
    }

setIsSaving(true)

try {
      // Create a new content item in the pipeline
      const contentItem = await createContentItem({
        title: formattedTitle,
        description: subtitle,
        type: "newsletter",
        stage: "draft",
        priority: "medium",
        author: "AI Assistant",
        tags: ["newsletter", newsletterType.replace(/-/g, " "), ...selectedContentItems.flatMap((item) => item.tags)],
      })

// In a real implementation, you would save the full content to a content field
      // For now, we'll just create the content item

toast({
        title: "Newsletter saved",
        description: "Your newsletter has been saved as a report in the content pipeline.",
      })
    } catch (error) {
      toast({
        title: "Save failed",
        description: `Failed to save newsletter: ${error instanceof Error ? error.message : "Unknown error"}`,
        variant: "destructive",
      })
    } finally {
      setIsSaving(false)
    }
  }

// Publish newsletter to Kit
  const publishNewsletterToKit = async () => {
    if (!newsletterContent) {
      toast({
        title: "No content to publish",
        description: "Please generate newsletter content first.",
        variant: "destructive",
      })
      return
    }

setIsPublishing(true)

try {
      // Prepare tags from content items and newsletter type
      const tags = [
        "newsletter",
        newsletterType.replace(/-/g, " "),
        ...selectedContentItems.flatMap((item) => item.tags).slice(0, 5),
      ]

console.log("Publishing newsletter to Kit:", {
        title: formattedTitle,
        isDraft: publishAsDraft,
        isPublic: makePublic,
        tags,
      })

const result = await publishContentToKit({
        title: formattedTitle,
        content: newsletterContent,
        summary: contentSummary || subtitle,
        tags,
        isDraft: publishAsDraft,
        isPublic: makePublic,
      })

if (!result.success) {
        throw new Error(result.error || "Failed to publish to Kit")
      }

toast({
        title: publishAsDraft ? "Draft saved to Kit" : "Published to Kit",
        description: `Your newsletter has been ${publishAsDraft ? "saved as a draft" : "published"} to Kit. ${
          result.postUrl ? `View at ${result.postUrl}` : ""
        }`,
      })

// Close the dialog after successful publishing
      setPublishDialogOpen(false)
    } catch (error) {
      console.error("Kit publishing error:", error)
      toast({
        title: "Publish failed",
        description: `Failed to publish to Kit: ${error instanceof Error ? error.message : "Unknown error"}`,
        variant: "destructive",
      })
    } finally {
      setIsPublishing(false)
    }
  }

// Open module dialog
  const openModuleDialog = (moduleType: ContentModuleType) => {
    setSelectedModuleType(moduleType)
    setIsModuleDialogOpen(true)
    // ModuleDialog now manages its own internal input states
  }

// Generate specialized content module (now acts as the onConfirm handler for ModuleDialog)
  const handleGenerateModuleConfirm = async (
    moduleType: ContentModuleType,
    input: string,
    customAssumptions?: Partial<ValuationAssumptions>,
    scenario?: ValuationScenario,
  ) => {
    const moduleInfo = availableModules.find((m) => m.type === moduleType)
    if (!moduleInfo) return

const moduleId = `module-${Date.now()}`

// Add module with loading state
    const newModule: ContentModule = {
      id: moduleId,
      type: moduleType,
      title: moduleInfo.title,
      content: "",
      isGenerating: true,
      icon: moduleInfo.icon,
      description: moduleInfo.description,
    }

setContentModules((prev) => [...prev, newModule])
    setIsModuleDialogOpen(false) // Close dialog immediately

try {
      // Current market context to enhance responses
      const marketContext = `Current market context: S&P 500 at ${marketData.indices[0].price} (${marketData.indices[0].change}), 
    Dow Jones at ${marketData.indices[1].price} (${marketData.indices[1].change}), 
    Nasdaq at ${marketData.indices[2].price} (${marketData.indices[2].change}).
    Top performing stocks include ${marketData.topGainers.map((g) => `${g.symbol} (${g.change})`).join(", ")}.`

// Generate prompt based on module type with enhanced instructions
      let prompt = ""
      let result: { content: string; error?: string }

switch (moduleType) {
        case "market-analysis":
          prompt = `Generate a professional market analysis section for an investment newsletter. 
       
       ${marketContext}
       
       Include:
       1. Current market trends with specific index movements
       2. Key technical indicators and what they suggest
       3. Market sentiment analysis
       4. Notable market events and their impact
       5. Short-term outlook based on current conditions
       
       Format with clear subheadings and concise paragraphs. Use professional financial language but ensure it remains accessible to informed investors.`
          result = await generateContentWithGemini(prompt)
          break
        case "stock-spotlight":
          prompt = `Generate a detailed stock spotlight section for an investment newsletter focusing on these stocks: ${input || "AAPL, MSFT, NVDA"}. 
       
       ${marketContext}
       
       For each stock, include:
       1. Recent price performance with specific numbers
       2. Key fundamental metrics (P/E ratio, revenue growth, etc.)
       3. Recent news or catalysts affecting the stock
       4. Technical analysis insights
       5. Analyst consensus and price targets
       6. Potential risks and opportunities
       
       Format with clear subheadings for each stock and use professional financial language.`
          result = await generateContentWithGemini(prompt)
          break
        case "economic-outlook":
          prompt = `Generate a comprehensive economic outlook section for an investment newsletter. 
       
       ${marketContext}
       
       Include:
       1. Current state of key economic indicators (GDP, inflation, unemployment)
       2. Central bank policies and recent statements
       3. Global economic factors affecting markets
       4. Sector-specific economic trends
       5. Forward-looking economic projections
       6. Potential economic risks on the horizon
       
       Format with clear subheadings and provide specific data points to support analysis. Use professional economic terminology while ensuring accessibility.`
          result = await generateContentWithGemini(prompt)
          break
        case "sector-performance":
          prompt = `Generate a detailed sector performance analysis for an investment newsletter. Focus on ${input || "Technology, Healthcare, Financial, Energy, and Consumer sectors"}.
       
       ${marketContext}
       
       For each sector:
       1. Recent performance metrics with specific numbers
       2. Key stocks driving sector performance
       3. Industry trends and disruptions
       4. Regulatory developments affecting the sector
       5. Forward outlook with specific catalysts
       
       Format with clear subheadings for each sector and provide actionable insights for investors considering sector rotation strategies.`
          result = await generateContentWithGemini(prompt)
          break
        case "investment-strategy":
          prompt = `Generate a strategic investment advice section for an investment newsletter based on current market conditions.
       
       ${marketContext}
       
       Focus on ${input || "balanced risk management"} and include:
       1. Asset allocation recommendations with specific percentage ranges
       2. Sector positioning strategy
       3. Risk management techniques in the current environment
       4. Specific investment vehicles to consider (ETFs, individual stocks, etc.)
       5. Timeline considerations (short-term vs. long-term positioning)
       6. Tactical adjustments based on recent market movements
       
       Format with clear action items and provide specific examples where appropriate. Balance between conservative and growth-oriented approaches.`
          result = await generateContentWithGemini(prompt)
          break
        case "risk-assessment":
          prompt = `Generate a comprehensive risk assessment section for an investment newsletter.
       
       ${marketContext}
       
       Include:
       1. Systematic market risks with probability assessments
       2. Sector-specific risk factors
       3. Geopolitical considerations affecting markets
       4. Technical warning signs in current market conditions
       5. Volatility analysis and expectations
       6. Hedging strategies appropriate for the current environment
       
       Format with clear categorization of risks (high, medium, low) and provide specific mitigation strategies for each major risk identified.`
          result = await generateContentWithGemini(prompt)
          break
        case "earnings-summary":
          prompt = `Generate a detailed earnings summary section for an investment newsletter.
       
       ${marketContext}
       
       Include:
       1. Overview of the current earnings season with beat/miss percentages
       2. Highlight of 5-7 notable earnings reports with specific numbers
       3. Sector trends emerging from recent reports
       4. Earnings surprises and their market impact
       5. Forward guidance themes and what they suggest about economic conditions
       6. Upcoming important earnings releases to watch
       
       Format with tables or structured data for key metrics and provide analysis of what the earnings trends suggest for broader market direction.`
          result = await generateContentWithGemini(prompt)
          break
        case "dividend-focus":
          prompt = `Generate an in-depth dividend investment section for an investment newsletter.
       
       ${marketContext}
       
       Include:
       1. Overview of current dividend environment (yields vs. treasuries, payout trends)
       2. Analysis of 5-7 standout dividend stocks with metrics (yield, payout ratio, growth rate)
       3. Dividend aristocrats performance update
       4. Dividend ETFs worth considering with performance metrics
       5. Risk factors specific to dividend investing in current conditions
       6. Tax considerations for dividend investors
       
       Format with clear stock-by-stock breakdown and provide specific yield numbers and historical context for dividend reliability.`
          result = await generateContentWithGemini(prompt)
          break
        case "valuation-analysis": // New case for valuation analysis
          if (!input) {
            throw new Error("Ticker symbol is required for Valuation Analysis.")
          }
          result = await generateValuationAnalysisContent(input, scenario || "base", customAssumptions)
          break
        default:
          prompt = `Generate a detailed, data-driven section about ${moduleType} for an investment newsletter.
       
       ${marketContext}
       
       Include specific numbers, trends, and actionable insights. Format with clear subheadings and concise paragraphs suitable for a professional investment audience.`
          result = await generateContentWithGemini(prompt)
      }

if (result.error) {
        throw new Error(result.error)
      }

// Update module with generated content
      setContentModules((prev) =>
        prev.map((m) => (m.id === moduleId ? { ...m, content: result.content, isGenerating: false } : m)),
      )

toast({
        title: "Module generated",
        description: `Your ${moduleInfo.title} module has been generated successfully.`,
      })
    } catch (error) {
      // Remove failed module
      setContentModules((prev) => prev.filter((module) => module.id !== moduleId))

toast({
        title: "Module generation failed",
        description: `Failed to generate ${moduleInfo.title} module: ${error instanceof Error ? error.message : "Unknown error"}`,
        variant: "destructive",
      })
    }
  }

// Remove content module
  const removeContentModule = (moduleId: string) => {
    setContentModules((prev) => prev.filter((module) => module.id !== moduleId))
  }

// Handle section reordering
  const handleDragEnd = (event: DragEndEvent) => {
    const { active, over } = event

if (over && active.id !== over.id) {
      setSections((items) => {
        const oldIndex = items.findIndex((item) => item.id === active.id)
        const newIndex = items.findIndex((item) => item.id === over.id)
        return arrayMove(items, oldIndex, newIndex)
      })

toast({
        title: "Section reordered",
        description: "Newsletter sections have been reordered.",
      })
    }
  }

// Toggle section visibility
  const toggleSectionEnabled = (sectionId: string, enabled: boolean) => {
    setSections((prevSections) =>
      prevSections.map((section) => (section.id === sectionId ? { ...section, enabled } : section)),
    )

// Also update the corresponding state variables for market data sections
    if (sectionId === "market-snapshot") {
      setIncludeMarketSnapshot(enabled)
    } else if (sectionId === "market-movers") {
      setIncludeMarketMovers(enabled)
    }
  }

// Send newsletter as a broadcast via Kit v4 API
  const sendNewsletterBroadcast = async () => {
    if (!newsletterContent) {
      toast({
        title: "No content to send",
        description: "Please generate newsletter content first.",
        variant: "destructive",
      })
      return
    }

setIsSending(true)

// Format the content with proper HTML structure
      const formattedContent = formatNewsletterForKit(newsletterContent, formattedTitle, subtitle)

console.log("Sending newsletter to Kit:", {
        title: formattedTitle,
        isDraft: publishAsDraft,
        tags,
      })

const result = await sendBroadcastToKit({
        title: formattedTitle,
        content: formattedContent,
        summary: contentSummary || subtitle,
        tags,
        isDraft: publishAsDraft,
        isPublic: makePublic,
      })

if (!result.success) {
        throw new Error(result.error || "Failed to send newsletter to Kit")
      }

toast({
        title: "Newsletter sent to Kit",
        description: `Your newsletter has been sent to Kit subscribers. ${result.postUrl ? `View at ${result.postUrl}` : ""}`,
      })

// Close the dialog after successful sending
      setPublishDialogOpen(false)
    } catch (error) {
      console.error("Kit newsletter error:", error)
      toast({
        title: "Send failed",
        description: `Failed to send newsletter: ${error instanceof Error ? error.message : "Unknown error"}`,
        variant: "destructive",
      })
    } finally {
      setIsSending(false)
    }
  }

// Open publish dialog
  const openPublishDialog = () => {
    if (!newsletterContent) {
      toast({
        title: "No content to send",
        description: "Please generate newsletter content first.",
        variant: "destructive",
      })
      return
    }

setPublishDialogOpen(true)
  }

// Copy newsletter content to clipboard
  const copyNewsletterContent = async () => {
    if (!newsletterContent) {
      toast({
        title: "No content to copy",
        description: "Please generate newsletter content first.",
        variant: "destructive",
      })
      return
    }

try {
      await navigator.clipboard.writeText(newsletterContent)
      toast({
        title: "Copied to clipboard",
        description: "Newsletter content has been copied to your clipboard.",
      })
    } catch (error) {
      console.error("Error copying to clipboard:", error)
      toast({
        title: "Copy failed",
        description: "Failed to copy content to clipboard. Please try again.",
        variant: "destructive",
      })
    }
  }

// Download newsletter content as a file
  const downloadNewsletterContent = () => {
    if (!newsletterContent) {
      toast({
        title: "No content to download",
        description: "Please generate newsletter content first.",
        variant: "destructive",
      })
      return
    }

try {
      // Create a blob with the content
      const blob = new Blob([newsletterContent], { type: "text/plain" })
      const url = URL.createObjectURL(blob)

// Create a temporary link and trigger download
      const a = document.createElement("a")
      a.href = url
      a.download = `${formattedTitle.replace(/[^a-z0-9]/gi, "-").toLowerCase()}.txt`
      document.body.appendChild(a)
      a.click()

// Clean up
      document.body.removeChild(a)
      URL.revokeObjectURL(url)

toast({
        title: "Download started",
        description: "Your newsletter content is being downloaded.",
      })
    } catch (error) {
      console.error("Error downloading content:", error)
      toast({
        title: "Download failed",
        description: "Failed to download content. Please try again.",
        variant: "destructive",
      })
    }
  }

// Replace the existing formatNewsletterForKit function with this improved version
  const formatNewsletterForKit = (content: string, title: string, subtitle: string) => {
    // Use currentDate for any date references
    const formattedDate = new Date().toLocaleDateString("en-US", {
      month: "long",
      day: "numeric",
      year: "numeric",
    })

// Split content into paragraphs
    const paragraphs = content.split("\n").filter((p) => p.trim() !== "")

// Identify headings and format content with better styling
    const formattedParagraphs = paragraphs.map((paragraph) => {
      // Check if this is likely a heading (H2)
      if (paragraph.length < 80 && (paragraph.endsWith(":") || /^[A-Z][^.!?]*$/.test(paragraph))) {
        return `<h2 style="color: #2563eb; margin-top: 28px; margin-bottom: 16px; font-size: 22px; font-weight: bold; border-bottom: 1px solid #e5e7eb; padding-bottom: 8px;">${paragraph}</h2>`
      }

// Check if this is a subheading (H3)
      if (
        /^\d+\./.test(paragraph) ||
        paragraph.includes("Key ") ||
        paragraph.includes("Summary") ||
        paragraph.includes("Analysis")
      ) {
        return `<h3 style="color: #4b5563; margin-top: 22px; margin-bottom: 12px; font-size: 18px; font-weight: 600;">${paragraph}</h3>`
      }

// Check if this is a list item
      if (paragraph.startsWith("- ") || paragraph.startsWith("• ")) {
        return `<li style="margin-bottom: 8px; line-height: 1.6; color: #374151; margin-left: 20px;">${paragraph.substring(2)}</li>`
      }

// Check if this is a numbered list item
      if (/^\d+\.\s/.test(paragraph)) {
        return `<li style="margin-bottom: 8px; line-height: 1.6; color: #374151; margin-left: 20px;">${paragraph.replace(/^\d+\.\s/, "")}</li>`
      }

// Check if this is a callout or important note
      if (paragraph.includes("Note:") || paragraph.includes("Important:") || paragraph.includes("Key Takeaway:")) {
        return `<div style="background-color: #f3f4f6; border-left: 4px solid #3b82f6; padding: 12px 16px; margin: 16px 0; color: #1e3a8a;">${paragraph}</div>`
      }

// Regular paragraph with improved styling
      return `<p style="margin-bottom: 16px; line-height: 1.7; color: #374151; font-size: 16px;">${paragraph}</p>`
    })

// Process the paragraphs to properly handle lists
    let processedHTML = ""
    let inList = false

formattedParagraphs.forEach((p, index) => {
      if (p.startsWith("<li")) {
        if (!inList) {
          processedHTML += '<ul style="margin-bottom: 16px; margin-top: 8px;">'
          inList = true
        }
        processedHTML += p
      } else {
        if (inList) {
          processedHTML += "</ul>"
          inList = false
        }
        processedHTML += p
      }
    })

if (inList) {
      processedHTML += "</ul>"
    }

// Generate market snapshot HTML with improved styling if enabled
    let marketSnapshotHTML = ""
    if (includeMarketSnapshot && sections.find((s) => s.id === "market-snapshot")?.enabled) {
      marketSnapshotHTML = `
<h2 style="color: #2563eb; margin-top: 28px; margin-bottom: 16px; font-size: 22px; font-weight: bold; border-bottom: 1px solid #e5e7eb; padding-bottom: 8px;">Market Snapshot</h2>
<div style="overflow-x: auto; margin-bottom: 24px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
  <table style="min-width: 100%; border-collapse: collapse; border: 1px solid #e5e7eb;">
    <thead>
      <tr style="background-color: #f3f4f6;">
        <th style="padding: 12px 16px; text-align: left; border-bottom: 1px solid #e5e7eb; font-weight: 600;">Index</th>
        <th style="padding: 12px 16px; text-align: right; border-bottom: 1px solid #e5e7eb; font-weight: 600;">Price</th>
        <th style="padding: 12px 16px; text-align: right; border-bottom: 1px solid #e5e7eb; font-weight: 600;">Change</th>
      </tr>
    </thead>
    <tbody>
      ${marketData.indices
        .map(
          (index, i) => `
        <tr style="background-color: ${i % 2 === 0 ? "white" : "#f9fafb"};">
          <td style="padding: 12px 16px; border-bottom: 1px solid #e5e7eb; font-weight: 500;">${index.name}</td>
          <td style="padding: 12px 16px; text-align: right; border-bottom: 1px solid #e5e7eb;">${index.price.toLocaleString()}</td>
          <td style="padding: 12px 16px; text-align: right; border-bottom: 1px solid #e5e7eb; color: ${
            index.change.startsWith("+") ? "#10b981" : "#ef4444"
          }; font-weight: 500;">${index.change}</td>
        </tr>
      `,
        )
        .join("")}
    </tbody>
  </table>
</div>
`
    }

// Generate market movers HTML with improved styling if enabled
    let marketMoversHTML = ""
    if (includeMarketMovers && sections.find((s) => s.id === "market-movers")?.enabled) {
      marketMoversHTML = `
<h2 style="color: #2563eb; margin-top: 28px; margin-bottom: 16px; font-size: 22px; font-weight: bold; border-bottom: 1px solid #e5e7eb; padding-bottom: 8px;">Market Movers</h2>

<h3 style="color: #4b5563; margin-top: 20px; margin-bottom: 12px; font-size: 18px; font-weight: 600;">Top Gainers</h3>
<div style="overflow-x: auto; margin-bottom: 24px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
  <table style="min-width: 100%; border-collapse: collapse; border: 1px solid #e5e7eb;">
    <thead>
      <tr style="background-color: #f3f4f6;">
        <th style="padding: 12px 16px; text-align: left; border-bottom: 1px solid #e5e7eb; font-weight: 600;">Symbol</th>
        <th style="padding: 12px 16px; text-align: left; border-bottom: 1px solid #e5e7eb; font-weight: 600;">Name</th>
        <th style="padding: 12px 16px; text-align: right; border-bottom: 1px solid #e5e7eb; font-weight: 600;">Price</th>
        <th style="padding: 12px 16px; text-align: right; border-bottom: 1px solid #e5e7eb; font-weight: 600;">Change</th>
        <th style="padding: 12px 16px; text-align: right; border-bottom: 1px solid #e5e7eb; font-weight: 600;">Volume</th>
      </tr>
    </thead>
    <tbody>
      ${marketData.topGainers
        .map(
          (stock, i) => `
        <tr style="background-color: ${i % 2 === 0 ? "white" : "#f9fafb"};">
          <td style="padding: 12px 16px; font-weight: 600; border-bottom: 1px solid #e5e7eb;">${stock.symbol}</td>
          <td style="padding: 12px 16px; border-bottom: 1px solid #e5e7eb;">${stock.name}</td>
          <td style="padding: 12px 16px; text-align: right; border-bottom: 1px solid #e5e7eb;">${stock.price}</td>
          <td style="padding: 12px 16px; text-align: right; border-bottom: 1px solid #e5e7eb; color: #10b981; font-weight: 500;">${stock.change}</td>
          <td style="padding: 12px 16px; text-align: right; border-bottom: 1px solid #e5e7eb;">${stock.volume}</td>
        </tr>
      `,
        )
        .join("")}
    </tbody>
  </table>
</div>

<h3 style="color: #4b5563; margin-top: 20px; margin-bottom: 12px; font-size: 18px; font-weight: 600;">Top Losers</h3>
<div style="overflow-x: auto; margin-bottom: 24px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
  <table style="min-width: 100%; border-collapse: collapse; border: 1px solid #e5e7eb;">
    <thead>
      <tr style="background-color: #f3f4f6;">
        <th style="padding: 12px 16px; text-align: left; border-bottom: 1px solid #e5e7eb; font-weight: 600;">Symbol</th>
        <th style="padding: 12px 16px; text-align: left; border-bottom: 1px solid #e5e7eb; font-weight: 600;">Name</th>
        <th style="padding: 12px 16px; text-align: right; border-bottom: 1px solid #e5e7eb; font-weight: 600;">Price</th>
        <th style="padding: 12px 16px; text-align: right; border-bottom: 1px solid #e5e7eb; font-weight: 600;">Change</th>
        <th style="padding: 12px 16px; text-align: right; border-bottom: 1px solid #e5e7eb; font-weight: 600;">Volume</th>
      </tr>
    </thead>
    <tbody>
      ${marketData.topLosers
        .map(
          (stock, i) => `
        <tr style="background-color: ${i % 2 === 0 ? "white" : "#f9fafb"};">
          <td style="padding: 12px 16px; font-weight: 600; border-bottom: 1px solid #e5e7eb;">${stock.symbol}</td>
          <td style="padding: 12px 16px; border-bottom: 1px solid #e5e7eb;">${stock.name}</td>
          <td style="padding: 12px 16px; text-align: right; border-bottom: 1px solid #e5e7eb;">${stock.price}</td>
          <td style="padding: 12px 16px; text-align: right; border-bottom: 1px solid #e5e7eb; color: #ef4444; font-weight: 500;">${stock.change}</td>
          <td style="padding: 12px 16px; text-align: right; border-bottom: 1px solid #e5e7eb;">${stock.volume}</td>
        </tr>
      `,
        )
        .join("")}
    </tbody>
  </table>
</div>
`
    }

// Generate related news HTML with improved styling if there are news items
    let relatedNewsHTML = ""
    if (relatedNewsItems.length > 0 && sections.find((s) => s.id === "related-news")?.enabled) {
      relatedNewsHTML = `
<h2 style="color: #2563eb; margin-top: 28px; margin-bottom: 16px; font-size: 22px; font-weight: bold; border-bottom: 1px solid #e5e7eb; padding-bottom: 8px;">Related News</h2>
<div style="margin-bottom: 24px;">
  ${relatedNewsItems
    .map(
      (item) => `
    <div style="margin-bottom: 16px; padding: 16px; border: 1px solid #e5e7eb; border-radius: 8px; background-color: #f9fafb;">
      <h3 style="color: #4b5563; margin-top: 0; margin-bottom: 8px; font-size: 18px; font-weight: 600;">${item.title}</h3>
      <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
        <span style="color: #6b7280; font-size: 14px; font-weight: 500;">${item.source}</span>
        <span style="color: #6b7280; font-size: 14px;">${new Date(item.date).toLocaleDateString()}</span>
      </div>
      ${item.url && item.url !== "#" ? `<a href="${item.url}" target="_blank" style="color: #3b82f6; font-size: 14px; text-decoration: none; display: inline-flex; align-items: center;">Read more <span style="margin-left: 4px;">→</span></a>` : ""}
    </div>
  `,
    )
    .join("")}
</div>
`
    }

// Build the final HTML based on section order with improved styling
    const sectionsHTML = sections
      .filter((section) => section.enabled)
      .map((section) => {
        if (section.type === "module") {
          const module = contentModules.find((m) => m.id === section.moduleId)
          if (!module) return ""

return `
      <h2 style="color: #2563eb; margin-top: 28px; margin-bottom: 16px; font-size: 22px; font-weight: bold; border-bottom: 1px solid #e5e7eb; padding-bottom: 8px;">${module.title}</h2>
      <div style="margin-bottom: 24px;">
        ${module.content
          .split("\n")
          .map((paragraph) => {
            if (!paragraph.trim()) return ""

// Check if paragraph is a heading
            if (paragraph.startsWith("# ") || paragraph.startsWith("## ")) {
              const headingText = paragraph.replace(/^#+ /, "")
              return `<h3 style="color: #4b5563; margin-top: 20px; margin-bottom: 12px; font-size: 18px; font-weight: 600;">${headingText}</h3>`
            }

// Check if paragraph is a list item
            if (paragraph.startsWith("- ") || paragraph.startsWith("* ")) {
              return `<li style="margin-bottom: 8px; line-height: 1.6; color: #374151; margin-left: 20px;">${paragraph.substring(2)}</li>`
            }

// Check if paragraph is a numbered list item
            if (/^\d+\.\s/.test(paragraph)) {
              return `<li style="margin-bottom: 8px; line-height: 1.6; color: #374151; margin-left: 20px;">${paragraph.replace(/^\d+\.\s/, "")}</li>`
            }

// Regular paragraph
            return `<p style="margin-bottom: 16px; line-height: 1.7; color: #374151; font-size: 16px;">${paragraph}</p>`
          })
          .join("")}
      </div>
    `
        } else if (section.type === "content") {
          return `<div style="margin-top: 32px;">${processedHTML}</div>`
        } else if (section.type === "market-snapshot" && includeMarketSnapshot) {
          return marketSnapshotHTML
        } else if (section.type === "market-movers" && includeMarketMovers) {
          return marketMoversHTML
        } else if (section.type === "featured-content" && selectedContentItems.length > 0) {
          return `
<h2 style="color: #2563eb; margin-top: 28px; margin-bottom: 16px; font-size: 22px; font-weight: bold; border-bottom: 1px solid #e5e7eb; padding-bottom: 8px;">Featured Content</h2>

${
  contentSummary
    ? `
<div style="margin-bottom: 24px; padding: 16px; background-color: #f0f7ff; border: 1px solid #bfdbfe; border-radius: 8px;">
  <h3 style="color: #1e40af; margin-bottom: 8px; font-size: 16px; font-weight: 600;">Content Summary</h3>
  <p style="color: #374151; line-height: 1.6;">${contentSummary}</p>
</div>
`
    : ""
}

<div style="margin-bottom: 24px;">
  ${selectedContentItems
    .map(
      (item) => `
    <div style="margin-bottom: 16px; padding: 16px; border: 1px solid #e5e7eb; border-radius: 8px; background-color: #f9fafb;">
      <h3 style="color: #4b5563; margin-top: 0; margin-bottom: 8px; font-size: 18px; font-weight: 600;">${item.title}</h3>
      <p style="margin-bottom: 8px; color: #6b7280;">${item.description}</p>
      <div style="display: flex; flex-wrap: wrap; gap: 4px;">
        ${item.tags
          .slice(0, 5)
          .map(
            (tag) =>
              `<span style="font-size: 12px; background-color: #e5e7eb; color: #4b5563; padding: 2px 8px; border-radius: 4px;">${tag}</span>`,
          )
          .join("")}
      </div>
    </div>
  `,
    )
    .join("")}
</div>
`
        } else if (section.type === "related-news" && relatedNewsItems.length > 0) {
          return relatedNewsHTML
        }
        return ""
      })
      .filter(Boolean)
      .join("\n")

// Create the full HTML structure with improved styling
    return `
<div style="font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; color: #1f2937;">
  <div style="text-align: center; margin-bottom: 32px; padding-bottom: 24px; border-bottom: 1px solid #e5e7eb;">
    <h1 style="color: #1e40af; font-size: 28px; margin-bottom: 8px; font-weight: bold;">${title}</h1>
    <p style="color: #6b7280; font-size: 16px; margin-bottom: 16px; font-style: italic;">${subtitle}</p>
    <div style="color: #4b5563; font-size: 14px;">${formattedDate}</div>
  </div>
  
  ${sectionsHTML}
  
  <div style="margin-top: 40px; padding-top: 20px; border-top: 1px solid #e5e7eb; font-size: 14px; color: #9ca3af; text-align: center;">
    <p>This newsletter is for informational purposes only and does not constitute investment advice.</p>
    <p>Generated on ${formattedDate}</p>
  </div>
</div>
`
  }

// Add this function after other handler functions
  const handleOneClickGenerate = async () => {
    // Show toast to indicate process has started
    toast({
      title: "Generating newsletter",
      description: "Creating your newsletter with selected template and content...",
    })

setIsEnhancing(true)

try {
      // Step 1: Generate content modules based on template
      const templateInfo = newsletterTemplates.find((t) => t.id === reportTemplate)
      if (!templateInfo) throw new Error("Template not found")

const moduleTypes = templateInfo.structure
        .split(",")
        .filter((type) => availableModules.some((m) => m.type === type))

// Generate each module in sequence
      for (const moduleType of moduleTypes) {
        const moduleInfo = availableModules.find((m) => m.type === moduleType)
        if (!moduleInfo) continue

const moduleId = `module-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`

// Add module with loading state
        const newModule = {
          id: moduleId,
          type: moduleType as ContentModuleType,
          title: moduleInfo.title,
          content: "",
          isGenerating: true,
          icon: moduleInfo.icon,
          description: moduleInfo.description,
        }

setContentModules((prev) => [...prev, newModule])

// Current market context to enhance responses
        const marketContext = `Current market context: S&P 500 at ${marketData.indices[0].price} (${marketData.indices[0].change}), 
        Dow Jones at ${marketData.indices[1].price} (${marketData.indices[2].change}), 
        Nasdaq at ${marketData.indices[2].price} (${marketData.indices[2].change}).`

// Generate prompt based on module type
        let prompt = ""
        let result: { content: string; error?: string }

switch (moduleType) {
          case "market-analysis":
            prompt = `Generate a professional market analysis section for an investment newsletter. 
            ${marketContext}
            Include current market trends, key technical indicators, market sentiment analysis, and short-term outlook.`
            result = await generateContentWithGemini(prompt)
            break
          case "stock-spotlight":
            prompt = `Generate a detailed stock spotlight section for an investment newsletter focusing on top performing stocks.
            ${marketContext}
            Include recent price performance, key metrics, catalysts, and analyst consensus.`
            result = await generateContentWithGemini(prompt)
            break
          case "valuation-analysis":
            // For one-click generate, use a default ticker and base scenario with default assumptions
            result = await generateValuationAnalysisContent("MSFT", "base", {}) // Pass empty custom assumptions
            break
          // Add cases for other module types as needed
          default:
            prompt = `Generate a detailed, data-driven section about ${moduleType} for an investment newsletter.
            ${marketContext}
            Include specific numbers, trends, and actionable insights.`
            result = await generateContentWithGemini(prompt)
        }

if (result.error) {
          throw new Error(result.error)
        }

// Update module with generated content
        setContentModules((prev) =>
          prev.map((m) => (m.id === moduleId ? { ...m, content: result.content, isGenerating: false } : m)),
        )

// Small delay between module generations to avoid rate limiting
        await new Promise((resolve) => setTimeout(resolve, 500))
      }

// Step 2: Generate the full newsletter
      await generateNewsletterContent()

// Step 3: Switch to preview tab
      setActiveTab("preview")

toast({
        title: "Newsletter generated",
        description: "Your newsletter has been generated successfully. You can now preview and publish it.",
      })
    } catch (error) {
      toast({
        title: "Generation failed",
        description: `Failed to generate newsletter: ${error instanceof Error ? error.message : "Unknown error"}`,
        variant: "destructive",
      })
    } finally {
      setIsEnhancing(false)
    }
  }

// Handle page change for pagination
  const handlePageChange = (newPage: number) => {
    setCurrentPage(newPage)
    searchNewsArticles()
  }

// Reset all filters
  const resetFilters = () => {
    setNewsSearchQuery("")
    setNewsSearchFilter("all")
    setTickerFilter("")
    setNewsSource("all")
    setNewsCategory("all")
    setDateRange({ from: undefined, to: undefined })
    setCurrentPage(0)

toast({
      title: "Filters reset",
      description: "All news filters have been reset.",
    })

// Trigger a new search with reset filters
    searchNewsArticles()
  }

// Get sentiment color
  const getSentimentColor = (sentiment: "positive" | "negative" | "neutral") => {
    switch (sentiment) {
      case "positive":
        return "text-green-600"
      case "negative":
        return "text-red-600"
      default:
        return "text-gray-600"
    }
  }

// Get sentiment icon
  const getSentimentIcon = (sentiment: "positive" | "negative" | "neutral") => {
    switch (sentiment) {
      case "positive":
        return <TrendingUp className="h-3 w-3 mr-1" />
      case "negative":
        return <TrendingUp className="h-3 w-3 mr-1 rotate-180" />
      default:
        return <LineChart className="h-3 w-3 mr-1" />
    }
  }

// Format date for display
  const formatDate = (date: Date | undefined) => {
    if (!date) return ""
    return format(date, "MMM dd, yyyy")
  }

// News sources for filtering
  const newsSources = useMemo(
    () => [
      { value: "all", label: "All Sources", icon: <Globe className="h-4 w-4 mr-2" /> },
      { value: "fmp-articles", label: "FMP Articles", icon: <FileText className="h-4 w-4 mr-2" /> },
      { value: "general-news", label: "General News", icon: <Newspaper className="h-4 w-4 mr-2" /> },
      { value: "press-releases", label: "Press Releases", icon: <FileText className="h-4 w-4 mr-2" /> },
      { value: "stock-news", label: "Stock News", icon: <BarChart className="h-4 w-4 mr-2" /> },
    ],
    [],
  )

// News categories for filtering
  const newsCategories = useMemo(
    () => [
      { value: "all", label: "All Categories", icon: <Tag className="h-4 w-4 mr-2" /> },
      { value: "earnings", label: "Earnings", icon: <DollarSign className="h-4 w-4 mr-2" /> },
      { value: "ipo", label: "IPO", icon: <TrendingUp className="h-4 w-4 mr-2" /> },
      { value: "mergers", label: "Mergers & Acquisitions", icon: <Briefcase className="h-4 w-4 mr-2" /> },
      { value: "financial", label: "Financial", icon: <DollarSign className="h-4 w-4 mr-2" /> },
      { value: "economy", label: "Economy", icon: <BarChart className="h-4 w-4 mr-2" /> },
      { value: "technology", label: "Technology", icon: <Rss className="h-4 w-4 mr-2" /> },
    ],
    [],
  )

return (
    <div className="space-y-6">
      <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
        <TabsList className="grid grid-cols-5 mb-6">
          <TabsTrigger value="settings">
            <Settings className="h-4 w-4 mr-2" />
            Settings
          </TabsTrigger>
          <TabsTrigger value="templates">
            <FileText className="h-4 w-4 mr-2" />
            Templates
          </TabsTrigger>
          <TabsTrigger value="content">
            <Edit className="h-4 w-4 mr-2" />
            Content
          </TabsTrigger>
          <TabsTrigger value="preview">
            <Eye className="h-4 w-4 mr-2" />
            Preview
          </TabsTrigger>
          <TabsTrigger value="publish">
            <Send className="h-4 w-4 mr-2" />
            Publish
          </TabsTrigger>
        </TabsList>

<TabsContent value="settings" className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>Newsletter Settings</CardTitle>
              <CardDescription>Configure the basic settings for your newsletter</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="newsletter-type">Newsletter Type</Label>
                  <Select value={newsletterType} onValueChange={setNewsletterType}>
                    <SelectTrigger id="newsletter-type">
                      <SelectValue placeholder="Select newsletter type" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="daily-market-update">Daily Market Update</SelectItem>
                      <SelectItem value="weekly-investment-insights">Weekly Investment Insights</SelectItem>
                      <SelectItem value="monthly-market-outlook">Monthly Market Outlook</SelectItem>
                      <SelectItem value="quarterly-performance-review">Quarterly Performance Review</SelectItem>
                    </SelectContent>
                  </Select>
                </div>

<div className="space-y-2">
                  <Label htmlFor="report-template">Report Template</Label>
                  <Select value={reportTemplate} onValueChange={setReportTemplate}>
                    <SelectTrigger id="report-template">
                      <SelectValue placeholder="Select template" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="default-template">Default Template</SelectItem>
                      <SelectItem value="professional-template">Professional Template</SelectItem>
                      <SelectItem value="data-focused-template">Data-Focused Template</SelectItem>
                      <SelectItem value="narrative-template">Narrative Template</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </div>

<div className="space-y-2">
                <Label htmlFor="title">Newsletter Title</Label>
                <div className="flex gap-2">
                  <Input
                    id="title"
                    value={title}
                    onChange={(e) => setTitle(e.target.value)}
                    placeholder="Enter newsletter title"
                    className="flex-1"
                  />
                  <Button
                    variant="outline"
                    size="sm"
                    onClick={handleGenerateHeadline}
                    disabled={isGenerating}
                    className="whitespace-nowrap"
                  >
                    {isGenerating ? "Generating..." : "Generate Title"}
                  </Button>
                </div>
                <p className="text-sm text-muted-foreground">
                  Use {"{{"} reportDate {"}}"} to include the current date in the title
                </p>
              </div>

<div className="space-y-2">
                <Label htmlFor="subtitle">Subtitle</Label>
                <Input
                  id="subtitle"
                  value={subtitle}
                  onChange={(e) => setSubtitle(e.target.value)}
                  placeholder="Enter newsletter subtitle"
                />
              </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="word-count">Target Word Count</Label>
                  <Input
                    id="word-count"
                    type="number"
                    value={wordCount}
                    onChange={(e) => setWordCount(e.target.value)}
                    placeholder="Enter target word count"
                  />
                </div>

<div className="space-y-2">
                  <Label htmlFor="output-format">Output Format</Label>
                  <Select value={outputFormat} onValueChange={setOutputFormat}>
                    <SelectTrigger id="output-format">
                      <SelectValue placeholder="Select output format" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="html">HTML</SelectItem>
                      <SelectItem value="markdown">Markdown</SelectItem>
                      <SelectItem value="plain">Plain Text</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </div>

<div className="space-y-2">
                <Label>Market Data Sections</Label>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="flex items-center space-x-2">
                    <Switch
                      id="market-snapshot"
                      checked={includeMarketSnapshot}
                      onCheckedChange={setIncludeMarketSnapshot}
                    />
                    <Label htmlFor="market-snapshot">Include Market Snapshot</Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <Switch id="market-movers" checked={includeMarketMovers} onCheckedChange={setIncludeMarketMovers} />
                    <Label htmlFor="market-movers">Include Market Movers</Label>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="templates" className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>Newsletter Templates</CardTitle>
              <CardDescription>Choose a template to quickly create your newsletter</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                {newsletterTemplates.map((template) => (
                  <Card
                    key={template.id}
                    className={`cursor-pointer transition-all ${
                      reportTemplate === template.id ? "ring-2 ring-blue-500" : ""
                    }`}
                    onClick={() => {
                      setReportTemplate(template.id)
                      // Auto-configure sections based on template structure
                      const templateSections = template.structure.split(",")

// Update sections based on template
                      setSections((prev) => {
                        // First disable all sections
                        const updatedSections = prev.map((section) => ({
                          ...section,
                          enabled: false,
                        }))

// Then enable sections that are in the template
                        templateSections.forEach((sectionType) => {
                          const index = updatedSections.findIndex(
                            (s) =>
                              s.type === sectionType ||
                              (sectionType === "market-snapshot" && s.id === "market-snapshot") ||
                              (sectionType === "market-movers" && s.id === "market-movers"),
                          )
                          if (index >= 0) {
                            updatedSections[index].enabled = true
                          }
                        })

return updatedSections
                      })

// Update title and subtitle based on template
                      if (template.id === "daily-market-update") {
                        setTitle("Daily Market Update - {{reportDate}}")
                        setSubtitle("Your daily dose of market intelligence")
                        setWordCount("1200")
                      } else if (template.id === "weekly-insights") {
                        setTitle("Weekly Investment Insights - {{reportDate}}")
                        setSubtitle("In-depth analysis and investment opportunities")
                        setWordCount("2000")
                      } else if (template.id === "earnings-focus") {
                        setTitle("Earnings Season Spotlight - {{reportDate}}")
                        setSubtitle("Key earnings reports and their market impact")
                        setWordCount("1800")
                      }

toast({
                        title: "Template selected",
                        description: `${template.name} template has been applied.`,
                      })
                    }}
                  >
                    <CardContent className="p-0">
                      <div className="aspect-video relative overflow-hidden rounded-t-lg">
                        <img
                          src={template.thumbnail || "/placeholder.svg"}
                          alt={template.name}
                          className="w-full h-full object-cover"
                        />
                      </div>
                    </CardContent>
                    <CardFooter className="flex flex-col items-start p-4">
                      <h3 className="font-medium">{template.name}</h3>
                      <p className="text-sm text-gray-500 mt-1">{template.description}</p>
                    </CardFooter>
                  </Card>
                ))}
              </div>
            </CardContent>
            <CardFooter className="flex justify-between">
              <Button variant="outline" onClick={() => setActiveTab("settings")}>
                Back to Settings
              </Button>
              <Button onClick={handleOneClickGenerate} disabled={isEnhancing || !reportTemplate} className="gap-2">
                <Sparkles className="h-4 w-4" />
                {isEnhancing ? "Generating..." : "One-Click Generate"}
              </Button>
            </CardFooter>
          </Card>
        </TabsContent>

<TabsContent value="content" className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>Content Selection</CardTitle>
              <CardDescription>Select content items to include in your newsletter</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <ContentItemSelector onSelect={handleContentItemsSelected} />

{selectedContentItems.length > 0 && (
                <div className="mt-4">
                  <div className="flex items-center justify-between mb-2">
                    <h3 className="text-lg font-medium">Selected Content ({selectedContentItems.length})</h3>
                    <div className="flex gap-2">
                      <Button
                        variant="outline"
                        size="sm"
                        onClick={generateContentSummary}
                        disabled={isGeneratingSummary || selectedContentItems.length === 0}
                      >
                        {isGeneratingSummary ? (
                          "Generating..."
                        ) : contentSummary ? (
                          <>
                            <Sparkles className="h-4 w-4 mr-2" />
                            Regenerate Summary
                          </>
                        ) : (
                          <>
                            <Sparkles className="h-4 w-4 mr-2" />
                            Generate Summary
                          </>
                        )}
                      </Button>
                    </div>
                  </div>

{contentSummary && (
                    <div className="mb-4 p-4 bg-blue-50 border border-blue-200 rounded-md">
                      <h4 className="text-sm font-medium text-blue-800 mb-1">Content Summary</h4>
                      <p className="text-sm text-blue-700">{contentSummary}</p>
                    </div>
                  )}

<div className="space-y-2">
                    {selectedContentItems.map((item) => (
                      <div
                        key={item.id}
                        className="flex items-start justify-between p-3 border rounded-md hover:bg-gray-50"
                      >
                        <div>
                          <h4 className="font-medium">{item.title}</h4>
                          <p className="text-sm text-gray-500 mt-1">{item.description}</p>
                          <div className="flex flex-wrap gap-1 mt-2">
                            {item.tags.slice(0, 3).map((tag) => (
                              <Badge key={tag} variant="secondary" className="text-xs">
                                {tag}
                              </Badge>
                            ))}
                            {item.tags.length > 3 && (
                              <Badge variant="outline" className="text-xs">
                                +{item.tags.length - 3} more
                              </Badge>
                            )}
                          </div>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              )}
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle>Specialized Content Modules</CardTitle>
              <CardDescription>Add specialized content modules to your newsletter</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                {availableModules.map((module) => (
                  <Card key={module.type} className="overflow-hidden">
                    <CardHeader className="p-4">
                      <div className="flex items-center gap-2">
                        <div className="p-2 rounded-full bg-blue-100">{module.icon}</div>
                        <CardTitle className="text-base">{module.title}</CardTitle>
                      </div>
                    </CardHeader>
                    <CardContent className="p-4 pt-0">
                      <p className="text-sm text-gray-500">{module.description}</p>
                    </CardContent>
                    <CardFooter className="p-4 pt-0">
                      <Button
                        variant="outline"
                        size="sm"
                        className="w-full"
                        onClick={() => openModuleDialog(module.type)}
                      >
                        <Plus className="h-4 w-4 mr-2" />
                        Add Module
                      </Button>
                    </CardFooter>
                  </Card>
                ))}
              </div>

{contentModules.length > 0 && (
                <div className="mt-6">
                  <h3 className="text-lg font-medium mb-4">Added Modules ({contentModules.length})</h3>
                  <div className="space-y-4">
                    {contentModules.map((module) => (
                      <div key={module.id} className="border rounded-md overflow-hidden">
                        <div className="flex items-center justify-between p-4 bg-gray-50">
                          <div className="flex items-center gap-2">
                            <div className="p-2 rounded-full bg-blue-100">{module.icon}</div>
                            <h4 className="font-medium">{module.title}</h4>
                          </div>
                          <Button variant="ghost" size="sm" onClick={() => removeContentModule(module.id)}>
                            <Trash className="h-4 w-4" />
                          </Button>
                        </div>
                        <div className="p-4">
                          {module.isGenerating ? (
                            <div className="flex items-center justify-center p-6">
                              <div className="animate-pulse text-center">
                                <p className="text-sm text-gray-500">Generating content...</p>
                              </div>
                            </div>
                          ) : (
                            <div>
                              <p className="text-sm whitespace-pre-line">{module.content}</p>
                            </div>
                          )}
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              )}
            </CardContent>
            <CardFooter className="flex justify-between">
              <Button variant="outline" onClick={() => setActiveTab("settings")}>
                Back to Settings
              </Button>
              <Button
                onClick={generateNewsletterContent}
                disabled={isEnhancing || (selectedContentItems.length === 0 && contentModules.length === 0)}
              >
                {isEnhancing ? "Generating..." : "Generate Newsletter"}
              </Button>
            </CardFooter>
          </Card>

<Card className="mt-6">
            <CardHeader>
              <CardTitle>Related News</CardTitle>
              <CardDescription>Add relevant news articles to include in your newsletter</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="flex justify-between items-center">
                <h3 className="text-lg font-medium">News Articles ({relatedNewsItems.length})</h3>
                <div className="flex gap-2">
                  <Button variant="outline" size="sm" onClick={() => setIsNewsSearchOpen(true)}>
                    <Search className="h-4 w-4 mr-2" />
                    Search News
                  </Button>
                  <Button variant="outline" size="sm" onClick={() => setIsAddingNews(true)}>
                    <Plus className="h-4 w-4 mr-2" />
                    Add Manually
                  </Button>
                </div>
              </div>

{relatedNewsItems.length > 0 ? (
                <div className="space-y-3">
                  {relatedNewsItems.map((item) => (
                    <div
                      key={item.id}
                      className="flex items-start justify-between p-3 border rounded-md hover:bg-gray-50 dark:hover:bg-gray-800"
                    >
                      <div>
                        <h4 className="font-medium">{item.title}</h4>
                        <div className="flex items-center mt-1 text-sm text-gray-500">
                          <span className="mr-3">{item.source}</span>
                          <span>{new Date(item.date).toLocaleDateString()}</span>
                        </div>
                        {item.url && item.url !== "#" && (
                          <a
                            href={item.url}
                            target="_blank"
                            rel="noopener noreferrer"
                            className="text-sm text-blue-500 hover:underline mt-1 inline-block"
                          >
                            View source
                          </a>
                        )}
                      </div>
                      <Button variant="ghost" size="sm" onClick={() => removeNewsItem(item.id)}>
                        <Trash className="h-4 w-4" />
                      </Button>
                    </div>
                  ))}
                </div>
              ) : (
                <div className="text-center py-6">
                  <Newspaper className="h-12 w-12 mx-auto text-gray-300 mb-4" />
                  <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100 mb-2">No news items added</h3>
                  <p className="text-gray-500 mb-4">Add relevant news articles to enhance your newsletter</p>
                </div>
              )}

{isAddingNews ? (
                <div className="border rounded-md p-4 space-y-3">
                  <h4 className="font-medium mb-3">Add News Item</h4>
                  <div className="space-y-3">
                    <div>
                      <Label htmlFor="news-title">Title</Label>
                      <Input
                        id="news-title"
                        value={newsItemInput.title}
                        onChange={(e) => setNewsItemInput((prev) => ({ ...prev, title: e.target.value }))}
                        placeholder="News article title"
                      />
                    </div>
                    <div>
                      <Label htmlFor="news-source">Source</Label>
                      <Input
                        id="news-source"
                        value={newsItemInput.source}
                        onChange={(e) => setNewsItemInput((prev) => ({ ...prev, source: e.target.value }))}
                        placeholder="Publication or website name"
                      />
                    </div>
                    <div>
                      <Label htmlFor="news-url">URL (optional)</Label>
                      <Input
                        id="news-url"
                        value={newsItemInput.url}
                        onChange={(e) => setNewsItemInput((prev) => ({ ...prev, url: e.target.value }))}
                        placeholder="https://example.com/article"
                      />
                    </div>
                    <div>
                      <Label htmlFor="news-date">Date</Label>
                      <Input
                        id="news-date"
                        type="date"
                        value={newsItemInput.date}
                        onChange={(e) => setNewsItemInput((prev) => ({ ...prev, date: e.target.value }))}
                      />
                    </div>
                    <div className="flex justify-end gap-2 mt-3">
                      <Button variant="outline" onClick={() => setIsAddingNews(false)}>
                        Cancel
                      </Button>
                      <Button onClick={handleAddNewsItem} disabled={!newsItemInput.title || !newsItemInput.source}>
                        Add News Item
                      </Button>
                    </div>
                  </div>
                </div>
              ) : null}
            </CardContent>
          </Card>

<Dialog open={isNewsSearchOpen} onOpenChange={setIsNewsSearchOpen}>
            <DialogContent className="max-w-4xl max-h-[90vh] overflow-hidden flex flex-col">
              <DialogHeader>
                <DialogTitle>Financial News Search</DialogTitle>
                <DialogDescription>Search for financial news to include in your newsletter</DialogDescription>
              </DialogHeader>

<div className="space-y-4 py-4 overflow-y-auto">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="news-search">Search Term</Label>
                    <div className="flex mt-1">
                      <Input
                        id="news-search"
                        value={newsSearchQuery}
                        onChange={(e) => setNewsSearchQuery(e.target.value)}
                        placeholder="Enter keywords to search"
                        className="flex-1"
                        onKeyDown={(e) => e.key === "Enter" && searchNewsArticles()}
                      />
                    </div>
                  </div>

<div className="space-y-2">
                    <Label htmlFor="ticker-filter">Stock Symbol(s)</Label>
                    <div className="relative">
                      <Input
                        id="ticker-filter"
                        value={tickerFilter}
                        onChange={(e) => setTickerFilter(e.target.value)}
                        placeholder="e.g. AAPL, MSFT"
                        className="mt-1"
                      />
                      {tickerFilter.trim() && (
                        <div className="absolute right-2 top-1/2 -translate-y-1/2 text-xs bg-blue-100 text-blue-800 px-2 py-0.5 rounded">
                          Stock filter
                        </div>
                      )}
                    </div>
                  </div>
                </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="news-source">News Source</Label>
                    <Select value={newsSource} onValueChange={(value) => setNewsSource(value as NewsSourceType)}>
                      <SelectTrigger id="news-source">
                        <SelectValue placeholder="Select news source" />
                      </SelectTrigger>
                      <SelectContent>
                        {newsSources.map((source) => (
                          <SelectItem key={source.value} value={source.value}>
                            <div className="flex items-center">
                              {source.icon}
                              {source.label}
                            </div>
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>

<div className="space-y-2">
                    <Label htmlFor="news-category">Category</Label>
                    <Select value={newsCategory} onValueChange={(value) => setNewsCategory(value as NewsCategoryType)}>
                      <SelectTrigger id="news-category">
                        <SelectValue placeholder="Select category" />
                      </SelectTrigger>
                      <SelectContent>
                        {newsCategories.map((category) => (
                          <SelectItem key={category.value} value={category.value}>
                            <div className="flex items-center">
                              {category.icon}
                              {category.label}
                            </div>
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>

<div className="space-y-2">
                    <Label htmlFor="sentiment-filter">Sentiment</Label>
                    <Select value={newsSearchFilter} onValueChange={(value) => setNewsSearchFilter(value as any)}>
                      <SelectTrigger id="sentiment-filter">
                        <SelectValue placeholder="Filter by sentiment" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="all">All Sentiments</SelectItem>
                        <SelectItem value="positive">Positive</SelectItem>
                        <SelectItem value="negative">Negative</SelectItem>
                        <SelectItem value="neutral">Neutral</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                </div>

<div className="flex flex-wrap items-end gap-4">
                  <div className="space-y-2">
                    <Label>Date Range</Label>
                    <Popover open={isDatePickerOpen} onOpenChange={setIsDatePickerOpen}>
                      <PopoverTrigger asChild>
                        <Button variant="outline" className="w-[240px] justify-start text-left font-normal">
                          <Calendar className="mr-2 h-4 w-4" />
                          {dateRange.from ? (
                            dateRange.to ? (
                              <>
                                {formatDate(dateRange.from)} - {formatDate(dateRange.to)}
                              </>
                            ) : (
                              formatDate(dateRange.from)
                            )
                          ) : (
                            "Select date range"
                          )}
                        </Button>
                      </PopoverTrigger>
                      <PopoverContent className="w-auto p-0" align="start">
                        <CalendarComponent
                          initialFocus
                          mode="range"
                          defaultMonth={dateRange.from}
                          selected={dateRange}
                          onSelect={(range) => {
                            setDateRange(range)
                            if (range.to) {
                              setIsDatePickerOpen(false)
                            }
                          }}
                          numberOfMonths={2}
                        />
                      </PopoverContent>
                    </Popover>
                  </div>

<div className="flex gap-2 ml-auto">
                    <Button variant="outline" onClick={resetFilters}>
                      Reset Filters
                    </Button>
                    <Button onClick={searchNewsArticles} disabled={isSearching}>
                      {isSearching ? (
                        <>
                          <RefreshCw className="h-4 w-4 mr-2 animate-spin" />
                          Searching...
                        </>
                      ) : (
                        <>
                          <Search className="h-4 w-4 mr-2" />
                          Search News
                        </>
                      )}
                    </Button>
                  </div>
                </div>

<div className="max-h-[400px] overflow-y-auto">
                  {newsSearchResults.length > 0 ? (
                    <div className="space-y-4">
                      {newsSearchResults.map((item) => {
                        const isBookmarked = bookmarkedNews.some((bookmarked) => bookmarked.id === item.id)

return (
                          <div
                            key={item.id}
                            className={`p-4 border rounded-md transition-colors ${
                              item.selected ? "bg-blue-50 border-blue-200" : "hover:bg-gray-50"
                            }`}
                          >
                            <div className="flex items-start gap-3">
                              <div className="flex-shrink-0 pt-1">
                                <Switch checked={item.selected} onCheckedChange={() => toggleNewsSelection(item.id)} />
                              </div>
                              <div className="flex-1">
                                <div className="flex justify-between">
                                  <h4 className="font-medium">{item.title}</h4>
                                  <Button
                                    variant="ghost"
                                    size="sm"
                                    className="h-8 w-8 p-0"
                                    onClick={() => toggleBookmark(item)}
                                  >
                                    {isBookmarked ? (
                                      <BookmarkCheck className="h-4 w-4 text-blue-500" />
                                    ) : (
                                      <Bookmark className="h-4 w-4" />
                                    )}
                                  </Button>
                                </div>
                                <p className="text-sm text-gray-500 mt-1 line-clamp-2">{item.summary}</p>
                                <div className="flex flex-wrap items-center gap-x-4 gap-y-1 mt-2 text-xs">
                                  <span className="text-gray-500">{item.source}</span>
                                  <span className="text-gray-500 flex items-center">
                                    <Clock className="h-3 w-3 mr-1" />
                                    {formatRelativeTime(item.publishedAt)}
                                  </span>
                                  <span className={`flex items-center ${getSentimentColor(item.sentiment)}`}>
                                    {getSentimentIcon(item.sentiment)}
                                    {item.sentiment === "positive"
                                      ? "Positive"
                                      : item.sentiment === "negative"
                                        ? "Negative"
                                        : "Neutral"}
                                  </span>
                                  {item.tickers && item.tickers.length > 0 && (
                                    <div className="flex flex-wrap gap-1 mt-1">
                                      {item.tickers.map((ticker) => (
                                        <Badge key={ticker} variant="outline" className="text-xs">
                                          {ticker}
                                        </Badge>
                                      ))}
                                    </div>
                                  )}
                                </div>
                                {item.url && (
                                  <a
                                    href={item.url}
                                    target="_blank"
                                    rel="noopener noreferrer"
                                    className="text-xs text-blue-500 hover:underline mt-2 inline-flex items-center"
                                    onClick={(e) => e.stopPropagation()}
                                  >
                                    Read full article
                                    <ExternalLink className="h-3 w-3 ml-1" />
                                  </a>
                                )}
                              </div>
                            </div>
                          </div>
                        )
                      })}
                    </div>
                  ) : isSearching ? (
                    <div className="text-center py-8">
                      <RefreshCw className="h-8 w-8 mx-auto text-gray-400 animate-spin mb-4" />
                      <p className="text-gray-500">Searching for news articles...</p>
                    </div>
                  ) : (
                    <div className="text-center py-8">
                      <Search className="h-8 w-8 mx-auto text-gray-300 mb-4" />
                      <h3 className="text-lg font-medium text-gray-900 mb-2">No results found</h3>
                      <p className="text-gray-500">
                        {newsSearchQuery || tickerFilter
                          ? "Try different search terms or filters"
                          : "Enter search terms above to find news articles"}
                      </p>
                    </div>
                  )}
                </div>

{newsSearchResults.length > 0 && (
                  <div className="flex justify-center mt-4">
                    <div className="flex items-center space-x-2">
                      <Button
                        variant="outline"
                        size="sm"
                        onClick={() => handlePageChange(Math.max(0, currentPage - 1))}
                        disabled={currentPage === 0 || isSearching}
                      >
                        <ChevronLeft className="h-4 w-4" />
                      </Button>
                      <span className="text-sm">
                        Page {currentPage + 1} of {totalPages}
                      </span>
                      <Button
                        variant="outline"
                        size="sm"
                        onClick={() => handlePageChange(Math.min(totalPages - 1, currentPage + 1))}
                        disabled={currentPage >= totalPages - 1 || isSearching}
                      >
                        <ChevronRight className="h-4 w-4" />
                      </Button>
                    </div>
                  </div>
                )}

{bookmarkedNews.length > 0 && (
                  <div className="mt-6">
                    <h3 className="text-lg font-medium mb-3">Bookmarked News ({bookmarkedNews.length})</h3>
                    <div className="space-y-3 max-h-[200px] overflow-y-auto p-2">
                      {bookmarkedNews.map((item) => (
                        <div key={item.id} className="p-3 border rounded-md hover:bg-gray-50">
                          <div className="flex justify-between">
                            <h4 className="font-medium">{item.title}</h4>
                            <div className="flex gap-1">
                              <Button
                                variant="ghost"
                                size="sm"
                                className="h-8 w-8 p-0"
                                onClick={() => toggleNewsSelection(item.id)}
                              >
                                {item.selected ? (
                                  <CheckCircle className="h-4 w-4 text-green-500" />
                                ) : (
                                  <PlusCircle className="h-4 w-4" />
                                )}
                              </Button>
                              <Button
                                variant="ghost"
                                size="sm"
                                className="h-8 w-8 p-0"
                                onClick={() => toggleBookmark(item)}
                              >
                                <BookmarkCheck className="h-4 w-4 text-blue-500" />
                              </Button>
                            </div>
                          </div>
                          <div className="flex items-center gap-x-4 mt-1 text-xs">
                            <span className="text-gray-500">{item.source}</span>
                            <span className="text-gray-500">{formatRelativeTime(item.publishedAt)}</span>
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>
                )}
              </div>

<DialogFooter className="flex justify-between items-center">
                <div className="text-sm text-gray-500">
                  {selectedNewsResults.length > 0
                    ? `${selectedNewsResults.length} article${selectedNewsResults.length > 1 ? "s" : ""} selected`
                    : "Select articles to add to your newsletter"}
                </div>
                <div className="flex gap-2">
                  <Button variant="outline" onClick={() => setIsNewsSearchOpen(false)}>
                    Cancel
                  </Button>
                  <Button onClick={addSelectedNewsToRelated} disabled={selectedNewsResults.length === 0}>
                    Add Selected Articles
                  </Button>
                </div>
              </DialogFooter>
            </DialogContent>
          </Dialog>

{/* Use the new ModuleDialog component */}
          <Dialog open={isModuleDialogOpen} onOpenChange={setIsModuleDialogOpen}>
            <ModuleDialog
              selectedModuleType={selectedModuleType}
              onConfirm={handleGenerateModuleConfirm}
              onClose={() => setIsModuleDialogOpen(false)}
            />
          </Dialog>
        </TabsContent>

<TabsContent value="preview" className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>Newsletter Preview</CardTitle>
              <CardDescription>Preview your generated newsletter content</CardDescription>
            </CardHeader>
            <CardContent>
              {newsletterContent ? (
                <div className="space-y-6 bg-white p-6 rounded-lg border border-gray-200 shadow-sm">
                  <div className="flex justify-between items-center">
                    <div>
                      <h2 className="text-2xl font-bold text-blue-800">{formattedTitle}</h2>
                      <p className="text-gray-500 italic">{subtitle}</p>
                    </div>
                    <div className="flex gap-2">
                      <Button variant="outline" size="sm" onClick={copyNewsletterContent}>
                        <Copy className="h-4 w-4 mr-2" />
                        Copy
                      </Button>
                      <Button variant="outline" size="sm" onClick={downloadNewsletterContent}>
                        <Download className="h-4 w-4 mr-2" />
                        Download
                      </Button>
                    </div>
                  </div>

{contentSummary && (
                    <div className="p-4 bg-blue-50 border border-blue-200 rounded-md">
                      <h3 className="text-sm font-medium text-blue-800 mb-1">Content Summary</h3>
                      <p className="text-sm text-blue-700">{contentSummary}</p>
                    </div>
                  )}

<div className="prose max-w-none">
                    {newsletterContent.split("\n\n").map((paragraph, index) => {
                      // Check if paragraph is a heading (shorter text, often ends with colon)
                      if (paragraph.length < 80 && (paragraph.endsWith(":") || /^[A-Z][^.!?]*$/.test(paragraph))) {
                        return (
                          <h3 key={index} className="text-xl font-semibold text-blue-700 mt-6 mb-3">
                            {paragraph}
                          </h3>
                        )
                      }

// Check if paragraph is a subheading (often starts with numbers or key phrases)
                      if (
                        /^\d+\./.test(paragraph) ||
                        paragraph.includes("Key ") ||
                        paragraph.includes("Summary") ||
                        paragraph.includes("Analysis")
                      ) {
                        return (
                          <h4 key={index} className="text-lg font-medium text-gray-700 mt-4 mb-2">
                            {paragraph}
                          </h4>
                        )
                      }

// Regular paragraph
                      return (
                        <p key={index} className="my-3 text-gray-800 leading-relaxed">
                          {paragraph}
                        </p>
                      )
                    })}
                  </div>

{/* Market data sections if enabled */}
                  {includeMarketSnapshot && (
                    <div className="mt-8 border-t border-gray-200 pt-6">
                      <h3 className="text-xl font-semibold text-blue-700 mb-4">Market Snapshot</h3>
                      <div className="overflow-x-auto">
                        <table className="min-w-full divide-y divide-gray-200">
                          <thead className="bg-gray-50">
                            <tr>
                              <th
                                scope="col"
                                className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                              >
                                Index
                              </th>
                              <th
                                scope="col"
                                className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider"
                              >
                                Price
                              </th>
                              <th
                                scope="col"
                                className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider"
                              >
                                Change
                              </th>
                            </tr>
                          </thead>
                          <tbody className="bg-white divide-y divide-gray-200">
                            {marketData.indices.map((index, i) => (
                              <tr key={index.name} className={i % 2 === 0 ? "bg-white" : "bg-gray-50"}>
                                <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                                  {index.name}
                                </td>
                                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 text-right">
                                  {index.price.toLocaleString()}
                                </td>
                                <td
                                  className={`px-6 py-4 whitespace-nowrap text-sm text-right ${index.change.startsWith("+") ? "text-green-600" : "text-red-600"}`}
                                >
                                  {index.change}
                                </td>
                              </tr>
                            ))}
                          </tbody>
                        </table>
                      </div>
                    </div>
                  )}

{includeMarketMovers && (
                    <div className="mt-8 border-t border-gray-200 pt-6">
                      <h3 className="text-xl font-semibold text-blue-700 mb-4">Market Movers</h3>

<h4 className="text-lg font-medium text-gray-700 mb-3">Top Gainers</h4>
                      <div className="overflow-x-auto mb-6">
                        <table className="min-w-full divide-y divide-gray-200">
                          <thead className="bg-gray-50">
                            <tr>
                              <th
                                scope="col"
                                className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                              >
                                Symbol
                              </th>
                              <th
                                scope="col"
                                className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                              >
                                Name
                              </th>
                              <th
                                scope="col"
                                className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider"
                              >
                                Price
                              </th>
                              <th
                                scope="col"
                                className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider"
                              >
                                Change
                              </th>
                              <th
                                scope="col"
                                className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider"
                              >
                                Volume
                              </th>
                            </tr>
                          </thead>
                          <tbody className="bg-white divide-y divide-gray-200">
                            {marketData.topGainers.map((stock, i) => (
                              <tr key={stock.symbol} className={i % 2 === 0 ? "bg-white" : "bg-gray-50"}>
                                <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                                  {stock.symbol}
                                </td>
                                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{stock.name}</td>
                                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 text-right">
                                  {stock.price}
                                </td>
                                <td className="px-6 py-4 whitespace-nowrap text-sm text-green-600 text-right">
                                  {stock.change}
                                </td>
                                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 text-right">
                                  {stock.volume}
                                </td>
                              </tr>
                            ))}
                          </tbody>
                        </table>
                      </div>

<h4 className="text-lg font-medium text-gray-700 mb-3">Top Losers</h4>
                      <div className="overflow-x-auto">
                        <table className="min-w-full divide-y divide-gray-200">
                          <thead className="bg-gray-50">
                            <tr>
                              <th
                                scope="col"
                                className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                              >
                                Symbol
                              </th>
                              <th
                                scope="col"
                                className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                              >
                                Name
                              </th>
                              <th
                                scope="col"
                                className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider"
                              >
                                Price
                              </th>
                              <th
                                scope="col"
                                className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider"
                              >
                                Change
                              </th>
                              <th
                                scope="col"
                                className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider"
                              >
                                Volume
                              </th>
                            </tr>
                          </thead>
                          <tbody className="bg-white divide-y divide-gray-200">
                            {marketData.topLosers.map((stock, i) => (
                              <tr key={stock.symbol} className={i % 2 === 0 ? "bg-white" : "bg-gray-50"}>
                                <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                                  {stock.symbol}
                                </td>
                                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{stock.name}</td>
                                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 text-right">
                                  {stock.price}
                                </td>
                                <td className="px-6 py-4 whitespace-nowrap text-sm text-red-600 text-right">
                                  {stock.change}
                                </td>
                                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 text-right">
                                  {stock.volume}
                                </td>
                              </tr>
                            ))}
                          </tbody>
                        </table>
                      </div>
                    </div>
                  )}

{/* Related news section if available */}
                  {relatedNewsItems.length > 0 && (
                    <div className="mt-8 border-t border-gray-200 pt-6">
                      <h3 className="text-xl font-semibold text-blue-700 mb-4">Related News</h3>
                      <div className="space-y-4">
                        {relatedNewsItems.map((item) => (
                          <div key={item.id} className="p-4 border border-gray-200 rounded-md hover:bg-gray-50">
                            <h4 className="font-medium text-gray-800 mb-2">{item.title}</h4>
                            <div className="flex justify-between text-sm text-gray-500 mb-2">
                              <span>{item.source}</span>
                              <span>{new Date(item.date).toLocaleDateString()}</span>
                            </div>
                            {item.url && item.url !== "#" && (
                              <a
                                href={item.url}
                                target="_blank"
                                rel="noopener noreferrer"
                                className="text-sm text-blue-600 hover:underline inline-flex items-center"
                              >
                                Read more <ExternalLink className="h-3 w-3 ml-1" />
                              </a>
                            )}
                          </div>
                        ))}
                      </div>
                    </div>
                  )}

<div className="mt-8 pt-6 border-t border-gray-200 text-center text-sm text-gray-500">
                    <p>This newsletter is for informational purposes only and does not constitute investment advice.</p>
                    <p className="mt-1">Generated on {currentDate}</p>
                  </div>
                </div>
              ) : (
                <div className="text-center py-12">
                  <Newspaper className="h-12 w-12 mx-auto text-gray-300 mb-4" />
                  <h3 className="text-lg font-medium text-gray-900 mb-2">No content generated yet</h3>
                  <p className="text-gray-500 mb-4">
                    Go to the Content tab to select content items and generate your newsletter
                  </p>
                  <Button onClick={() => setActiveTab("content")}>Go to Content</Button>
                </div>
              )}
            </CardContent>
            <CardFooter className="flex justify-between">
              <Button variant="outline" onClick={() => setActiveTab("content")}>
                Back to Content
              </Button>
              {newsletterContent && (
                <div className="flex gap-2">
                  <Button variant="outline" onClick={enhanceNewsletterContent} disabled={isEnhancing}>
                    {isEnhancing ? "Enhancing..." : "Enhance Content"}
                  </Button>
                  <Button onClick={() => setActiveTab("publish")}>Proceed to Publish</Button>
                </div>
              )}
            </CardFooter>
          </Card>
        </TabsContent>

<TabsContent value="publish" className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>Publish Newsletter</CardTitle>
              <CardDescription>Publish your newsletter to various platforms</CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              {newsletterContent ? (
                <>
                  <div className="p-4 border rounded-md">
                    <h3 className="text-lg font-medium mb-2">{formattedTitle}</h3>
                    <p className="text-gray-500 mb-4">{subtitle}</p>
                    <div className="flex flex-wrap gap-2 mb-4">
                      <Badge>Newsletter</Badge>
                      <Badge variant="outline">{newsletterType.replace(/-/g, " ")}</Badge>
                      {selectedContentItems
                        .flatMap((item) => item.tags)
                        .slice(0, 3)
                        .map((tag) => (
                          <Badge key={tag} variant="secondary">
                            {tag}
                          </Badge>
                        ))}
                    </div>
                    <div className="text-sm text-gray-500">
                      {contentSummary || newsletterContent.substring(0, 200)}...
                    </div>
                  </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <Card>
                      <CardHeader>
                        <CardTitle className="text-base">Save to Content Pipeline</CardTitle>
                      </CardHeader>
                      <CardContent>
                        <p className="text-sm text-gray-500 mb-4">
                          Save this newsletter as a draft in your content pipeline for further editing or review.
                        </p>
                      </CardContent>
                      <CardFooter>
                        <Button
                          variant="outline"
                          className="w-full"
                          onClick={saveNewsletterAsReport}
                          disabled={isSaving}
                        >
                          {isSaving ? "Saving..." : "Save as Draft"}
                        </Button>
                      </CardFooter>
                    </Card>

<Card>
                      <CardHeader>
                        <CardTitle className="text-base">Publish to Kit</CardTitle>
                      </CardHeader>
                      <CardContent>
                        <p className="text-sm text-gray-500 mb-4">
                          Publish this newsletter to Kit as a post or broadcast to your subscribers.
                        </p>
                        {isCheckingKitStatus ? (
                          <div className="text-center py-2">
                            <p className="text-sm text-gray-500">Checking Kit connection...</p>
                          </div>
                        ) : kitStatus ? (
                          kitStatus.isConnected ? (
                            <div className="text-sm text-green-600 flex items-center gap-2 mb-2">
                              <div className="h-2 w-2 rounded-full bg-green-600"></div>
                              Connected to Kit API
                            </div>
                          ) : (
                            <div className="text-sm text-amber-600 flex items-center gap-2 mb-2">
                              <div className="h-2 w-2 rounded-full bg-amber-600"></div>
                              {kitStatus.error || "Not connected to Kit API"}
                            </div>
                          )
                        ) : null}
                      </CardContent>
                      <CardFooter>
                        <Button className="w-full" onClick={openPublishDialog}>
                          Publish to Kit
                        </Button>
                      </CardFooter>
                    </Card>
                  </div>
                </>
              ) : (
                <div className="text-center py-12">
                  <Send className="h-12 w-12 mx-auto text-gray-300 mb-4" />
                  <h3 className="text-lg font-medium text-gray-900 mb-2">No content to publish</h3>
                  <p className="text-gray-500 mb-4">
                    You need to generate newsletter content before you can publish it
                  </p>
                  <Button onClick={() => setActiveTab("content")}>Go to Content</Button>
                </div>
              )}
            </CardContent>
            <CardFooter>
              <Button variant="outline" onClick={() => setActiveTab("preview")}>
                Back to Preview
              </Button>
            </CardFooter>
          </Card>

<Dialog open={publishDialogOpen} onOpenChange={setPublishDialogOpen}>
            <DialogContent>
              <DialogHeader>
                <DialogTitle>Publish to Kit</DialogTitle>
                <DialogDescription>Configure how you want to publish your newsletter</DialogDescription>
              </DialogHeader>
              <div className="space-y-4 py-4">
                <div className="flex items-center space-x-2">
                  <Switch id="publish-as-draft" checked={publishAsDraft} onCheckedChange={setPublishAsDraft} />
                  <Label htmlFor="publish-as-draft">Save as draft (don't publish immediately)</Label>
                </div>
                <div className="flex items-center space-x-2">
                  <Switch id="make-public" checked={makePublic} onCheckedChange={setMakePublic} />
                  <Label htmlFor="make-public">Make public (visible to everyone)</Label>
                </div>
                <Separator />
                <div className="space-y-2">
                  <div className="flex justify-between">
                    <Label>Publishing Options</Label>
                  </div>
                  <div className="grid grid-cols-1 gap-2">
                    <Button
                      variant="outline"
                      className="justify-start"
                      onClick={publishNewsletterToKit}
                      disabled={isPublishing}
                    >
                      <Newspaper className="h-4 w-4 mr-2" />
                      {isPublishing ? "Publishing..." : "Publish as Post"}
                    </Button>
                    <Button
                      variant="outline"
                      className="justify-start"
                      onClick={sendNewsletterBroadcast}
                      disabled={isSending}
                    >
                      <Send className="h-4 w-4 mr-2" />
                      {isSending ? "Sending..." : "Send as Broadcast"}
                    </Button>
                  </div>
                </div>
              </div>
              <DialogFooter>
                <Button variant="outline" onClick={() => setPublishDialogOpen(false)}>
                  Cancel
                </Button>
              </DialogFooter>
            </DialogContent>
          </Dialog>
        </TabsContent>
      </Tabs>
      <div className="fixed bottom-6 right-6 z-50">
        <div className="relative">
          {showQuickActions && (
            <div className="absolute bottom-16 right-0 bg-white dark:bg-gray-800 rounded-lg shadow-lg p-2 border border-gray-200 dark:border-gray-700 w-48">
              <div className="space-y-1">
                <Button
                  variant="ghost"
                  size="sm"
                  className="w-full justify-start hover:bg-gray-100 dark:hover:bg-gray-700"
                  onClick={() => {
                    setActiveTab("templates")
                    setShowQuickActions(false)
                  }}
                >
                  <FileText className="h-4 w-4 mr-2" />
                  Templates
                </Button>
                <Button
                  variant="ghost"
                  size="sm"
                  className="w-full justify-start hover:bg-gray-100 dark:hover:bg-gray-700"
                  onClick={() => {
                    handleOneClickGenerate()
                    setShowQuickActions(false)
                  }}
                  disabled={isEnhancing || !reportTemplate}
                >
                  <Sparkles className="h-4 w-4 mr-2" />
                  Quick Generate
                </Button>
                <Button
                  variant="ghost"
                  size="sm"
                  className="w-full justify-start hover:bg-gray-100 dark:hover:bg-gray-700"
                  onClick={() => {
                    if (newsletterContent) {
                      copyNewsletterContent()
                    } else {
                      toast({
                        title: "No content",
                        description: "Generate newsletter content first",
                        variant: "destructive",
                      })
                    }
                    setShowQuickActions(false)
                  }}
                >
                  <Copy className="h-4 w-4 mr-2" />
                  Copy Content
                </Button>
                <Button
                  variant="ghost"
                  size="sm"
                  className="w-full justify-start hover:bg-gray-100 dark:hover:bg-gray-700"
                  onClick={() => {
                    if (newsletterContent) {
                      openPublishDialog()
                    } else {
                      toast({
                        title: "No content",
                        description: "Generate newsletter content first",
                        variant: "destructive",
                      })
                    }
                    setShowQuickActions(false)
                  }}
                >
                  <Send className="h-4 w-4 mr-2" />
                  Publish
                </Button>
              </div>
            </div>
          )}
          <Button
            size="lg"
            className="rounded-full h-14 w-14 shadow-lg bg-blue-600 hover:bg-blue-700"
            onClick={() => setShowQuickActions(!showQuickActions)}
          >
            {showQuickActions ? <X className="h-6 w-6" /> : <Plus className="h-6 w-6" />}
          </Button>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/newsletter-publisher.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Switch } from "@/components/ui/switch"
import { Badge } from "@/components/ui/badge"
import { Separator } from "@/components/ui/separator"
import { Calendar } from "@/components/ui/calendar"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { format } from "date-fns"
import { cn } from "@/lib/utils"
import {
  AlertCircle,
  CalendarIcon,
  Check,
  Clock,
  Facebook,
  FileText,
  Linkedin,
  RefreshCw,
  Send,
  Twitter,
} from "lucide-react"
import { AIEnhancedEditor } from "./ai-enhanced-editor"
import type { KitPublishingOptions, KitPublishingResult } from "@/services/kit-publishing-service"
import { publishContentToKit, scheduleContentForKit, checkKitStatus } from "@/app/actions/kit-actions"

export function NewsletterPublisher() {
  const [activeTab, setActiveTab] = useState("edit")
  const [title, setTitle] = useState("")
  const [content, setContent] = useState("")
  const [summary, setSummary] = useState("")
  const [tags, setTags] = useState("")
  const [coverImage, setCoverImage] = useState("")
  const [isPublic, setIsPublic] = useState(false)
  const [isScheduled, setIsScheduled] = useState(false)
  const [publishDate, setPublishDate] = useState<Date | undefined>(undefined)
  const [socialPlatforms, setSocialPlatforms] = useState({
    twitter: false,
    linkedin: false,
    facebook: false,
  })
  const [isPublishing, setIsPublishing] = useState(false)
  const [publishingResult, setPublishingResult] = useState<KitPublishingResult | null>(null)
  const [kitStatus, setKitStatus] = useState<{ isConnected: boolean; error?: string } | null>(null)
  const [isLoading, setIsLoading] = useState(true)

// Check Kit connection status
  useEffect(() => {
    const checkKitConnectionStatus = async () => {
      setIsLoading(true)
      try {
        const status = await checkKitStatus()
        setKitStatus(status)
      } catch (error) {
        setKitStatus({
          isConnected: false,
          error: `Error checking Kit status: ${(error as Error).message}`,
        })
      } finally {
        setIsLoading(false)
      }
    }

checkKitConnectionStatus()
  }, [])

// Handle content update from AI editor
  const handleContentUpdate = (newContent: string) => {
    setContent(newContent)
  }

// Handle publish
  const handlePublish = async () => {
    if (!title || !content) {
      return
    }

setIsPublishing(true)
    setPublishingResult(null)

try {
      const options: KitPublishingOptions = {
        title,
        content,
        summary: summary || undefined,
        tags: tags ? tags.split(",").map((tag) => tag.trim()) : undefined,
        coverImage: coverImage || undefined,
        isPublic,
        isScheduled,
        publishDate: isScheduled ? publishDate : undefined,
        socialPlatforms: {
          twitter: socialPlatforms.twitter,
          linkedin: socialPlatforms.linkedin,
          facebook: socialPlatforms.facebook,
        },
      }

let result: KitPublishingResult

if (isScheduled && publishDate) {
        result = await scheduleContentForKit(options)
      } else {
        result = await publishContentToKit(options)
      }

setPublishingResult(result)
    } catch (error) {
      setPublishingResult({
        success: false,
        error: `Error publishing: ${(error as Error).message}`,
      })
    } finally {
      setIsPublishing(false)
    }
  }

return (
    <div className="space-y-6">
      <Card>
        <CardHeader>
          <CardTitle>Newsletter Publisher</CardTitle>
          <CardDescription>Create and publish newsletters directly to Kit</CardDescription>
        </CardHeader>
        <CardContent>
          {isLoading ? (
            <div className="flex justify-center items-center py-8">
              <RefreshCw className="h-6 w-6 animate-spin text-muted-foreground" />
            </div>
          ) : !kitStatus?.isConnected ? (
            <div className="bg-red-50 p-4 rounded-md flex items-start">
              <AlertCircle className="h-5 w-5 text-red-500 mr-2 mt-0.5 flex-shrink-0" />
              <div>
                <h3 className="font-medium text-red-800">Kit Connection Error</h3>
                <p className="text-sm text-red-700 mt-1">
                  {kitStatus?.error || "Unable to connect to Kit. Please check your API key."}
                </p>
              </div>
            </div>
          ) : (
            <Tabs value={activeTab} onValueChange={setActiveTab}>
              <TabsList className="grid w-full grid-cols-3">
                <TabsTrigger value="edit">Edit</TabsTrigger>
                <TabsTrigger value="preview">Preview</TabsTrigger>
                <TabsTrigger value="publish">Publish</TabsTrigger>
              </TabsList>

<TabsContent value="edit" className="space-y-4 mt-4">
                <div className="space-y-2">
                  <Label htmlFor="title">Newsletter Title</Label>
                  <Input
                    id="title"
                    value={title}
                    onChange={(e) => setTitle(e.target.value)}
                    placeholder="Enter newsletter title..."
                  />
                </div>

<div className="space-y-2">
                  <Label htmlFor="summary">Summary</Label>
                  <Textarea
                    id="summary"
                    value={summary}
                    onChange={(e) => setSummary(e.target.value)}
                    placeholder="Enter a brief summary..."
                    className="h-20"
                  />
                </div>

<div className="space-y-2">
                  <Label>Content</Label>
                  <AIEnhancedEditor
                    initialContent={content}
                    contentId="newsletter-content"
                    contentType="newsletter"
                    onSave={handleContentUpdate}
                  />
                </div>

<div className="space-y-2">
                  <Label htmlFor="tags">Tags</Label>
                  <Input
                    id="tags"
                    value={tags}
                    onChange={(e) => setTags(e.target.value)}
                    placeholder="Enter tags separated by commas..."
                  />
                </div>

<div className="space-y-2">
                  <Label htmlFor="cover-image">Cover Image URL</Label>
                  <Input
                    id="cover-image"
                    value={coverImage}
                    onChange={(e) => setCoverImage(e.target.value)}
                    placeholder="Enter cover image URL..."
                  />
                </div>
              </TabsContent>

<TabsContent value="preview" className="space-y-4 mt-4">
                <div className="bg-white border rounded-lg overflow-hidden">
                  <div className="p-6">
                    <h1 className="text-2xl font-bold">{title || "Newsletter Title"}</h1>

{summary && <div className="mt-2 text-muted-foreground">{summary}</div>}

{coverImage && (
                      <div className="mt-4">
                        <img
                          src={coverImage || "/placeholder.svg"}
                          alt="Cover"
                          className="w-full h-48 object-cover rounded-md"
                          onError={(e) => {
                            ;(e.target as HTMLImageElement).src = "/newsletter-concept.png"
                          }}
                        />
                      </div>
                    )}

<div className="mt-6 prose max-w-none">
                      {content ? (
                        <div dangerouslySetInnerHTML={{ __html: content.replace(/\n/g, "<br />") }} />
                      ) : (
                        <p className="text-muted-foreground">No content yet. Add content in the Edit tab.</p>
                      )}
                    </div>

{tags && (
                      <div className="mt-6 flex flex-wrap gap-2">
                        {tags.split(",").map((tag, index) => (
                          <Badge key={index} variant="outline">
                            {tag.trim()}
                          </Badge>
                        ))}
                      </div>
                    )}
                  </div>
                </div>
              </TabsContent>

<TabsContent value="publish" className="space-y-4 mt-4">
                <div className="space-y-4">
                  <div className="space-y-2">
                    <Label htmlFor="visibility">Visibility</Label>
                    <div className="flex items-center space-x-2">
                      <Switch id="visibility" checked={isPublic} onCheckedChange={setIsPublic} />
                      <Label htmlFor="visibility" className="cursor-pointer">
                        {isPublic ? "Public" : "Private"}
                      </Label>
                    </div>
                    <p className="text-sm text-muted-foreground">
                      {isPublic
                        ? "Anyone can view this newsletter."
                        : "Only you and people with the link can view this newsletter."}
                    </p>
                  </div>

<div className="space-y-2">
                    <Label htmlFor="schedule">Schedule Publishing</Label>
                    <div className="flex items-center space-x-2">
                      <Switch id="schedule" checked={isScheduled} onCheckedChange={setIsScheduled} />
                      <Label htmlFor="schedule" className="cursor-pointer">
                        {isScheduled ? "Scheduled" : "Publish immediately"}
                      </Label>
                    </div>

{isScheduled && (
                      <div className="flex flex-col space-y-2 mt-2">
                        <Label>Publish Date</Label>
                        <div className="flex space-x-2">
                          <Popover>
                            <PopoverTrigger asChild>
                              <Button
                                variant="outline"
                                className={cn(
                                  "w-[240px] justify-start text-left font-normal",
                                  !publishDate && "text-muted-foreground",
                                )}
                              >
                                <CalendarIcon className="mr-2 h-4 w-4" />
                                {publishDate ? format(publishDate, "PPP") : "Select date"}
                              </Button>
                            </PopoverTrigger>
                            <PopoverContent className="w-auto p-0">
                              <Calendar mode="single" selected={publishDate} onSelect={setPublishDate} initialFocus />
                            </PopoverContent>
                          </Popover>

<Select
                            value={publishDate ? format(publishDate, "HH:mm") : "09:00"}
                            onValueChange={(value) => {
                              const [hours, minutes] = value.split(":").map(Number)
                              const date = publishDate || new Date()
                              date.setHours(hours, minutes)
                              setPublishDate(new Date(date))
                            }}
                          >
                            <SelectTrigger className="w-[120px]">
                              <SelectValue placeholder="Select time" />
                            </SelectTrigger>
                            <SelectContent>
                              <SelectItem value="09:00">09:00 AM</SelectItem>
                              <SelectItem value="12:00">12:00 PM</SelectItem>
                              <SelectItem value="15:00">03:00 PM</SelectItem>
                              <SelectItem value="18:00">06:00 PM</SelectItem>
                              <SelectItem value="21:00">09:00 PM</SelectItem>
                            </SelectContent>
                          </Select>
                        </div>
                      </div>
                    )}
                  </div>

<div className="space-y-2">
                    <Label>Share on Social Media</Label>
                    <div className="space-y-2">
                      <div className="flex items-center space-x-2">
                        <Switch
                          id="twitter"
                          checked={socialPlatforms.twitter}
                          onCheckedChange={(checked) => setSocialPlatforms({ ...socialPlatforms, twitter: checked })}
                        />
                        <Label htmlFor="twitter" className="cursor-pointer flex items-center">
                          <Twitter className="h-4 w-4 mr-2" />
                          Twitter
                        </Label>
                      </div>

<div className="flex items-center space-x-2">
                        <Switch
                          id="linkedin"
                          checked={socialPlatforms.linkedin}
                          onCheckedChange={(checked) => setSocialPlatforms({ ...socialPlatforms, linkedin: checked })}
                        />
                        <Label htmlFor="linkedin" className="cursor-pointer flex items-center">
                          <Linkedin className="h-4 w-4 mr-2" />
                          LinkedIn
                        </Label>
                      </div>

<div className="flex items-center space-x-2">
                        <Switch
                          id="facebook"
                          checked={socialPlatforms.facebook}
                          onCheckedChange={(checked) => setSocialPlatforms({ ...socialPlatforms, facebook: checked })}
                        />
                        <Label htmlFor="facebook" className="cursor-pointer flex items-center">
                          <Facebook className="h-4 w-4 mr-2" />
                          Facebook
                        </Label>
                      </div>
                    </div>
                  </div>

<div className="flex justify-end">
                    <Button onClick={handlePublish} disabled={isPublishing || !title || !content}>
                      {isPublishing ? (
                        <>
                          <RefreshCw className="mr-2 h-4 w-4 animate-spin" />
                          {isScheduled ? "Scheduling..." : "Publishing..."}
                        </>
                      ) : (
                        <>
                          <Send className="mr-2 h-4 w-4" />
                          {isScheduled ? "Schedule" : "Publish"} to Kit
                        </>
                      )}
                    </Button>
                  </div>

{publishingResult && (
                    <div className={`p-4 rounded-md ${publishingResult.success ? "bg-green-50" : "bg-red-50"}`}>
                      <div className="flex items-start">
                        {publishingResult.success ? (
                          <Check className={`h-5 w-5 mr-2 mt-0.5 flex-shrink-0 text-green-500`} />
                        ) : (
                          <AlertCircle className={`h-5 w-5 mr-2 mt-0.5 flex-shrink-0 text-red-500`} />
                        )}
                        <div>
                          <h3 className={`font-medium ${publishingResult.success ? "text-green-800" : "text-red-800"}`}>
                            {publishingResult.success
                              ? isScheduled
                                ? "Newsletter scheduled successfully!"
                                : "Newsletter published successfully!"
                              : "Publishing failed"}
                          </h3>
                          {publishingResult.success ? (
                            <div className="mt-1">
                              {publishingResult.postUrl && (
                                <a
                                  href={publishingResult.postUrl}
                                  target="_blank"
                                  rel="noopener noreferrer"
                                  className="text-sm text-blue-600 hover:underline"
                                >
                                  View on Kit
                                </a>
                              )}
                              {isScheduled && publishDate && (
                                <p className="text-sm text-green-700 mt-1 flex items-center">
                                  <Clock className="h-4 w-4 mr-1" />
                                  Scheduled for {format(publishDate, "PPP 'at' p")}
                                </p>
                              )}
                            </div>
                          ) : (
                            <p className="text-sm text-red-700 mt-1">
                              {publishingResult.error || "An unknown error occurred."}
                            </p>
                          )}
                        </div>
                      </div>
                    </div>
                  )}
                </div>
              </TabsContent>
            </Tabs>
          )}
        </CardContent>
        <CardFooter className="flex justify-between">
          <div className="flex items-center text-sm text-muted-foreground">
            <FileText className="h-4 w-4 mr-1" />
            {title ? title : "Untitled Newsletter"}
          </div>
          {kitStatus?.isConnected && (
            <div className="flex items-center">
              <Badge variant="outline" className="bg-green-100 text-green-800">
                <Check className="h-3 w-3 mr-1" />
                Connected to Kit
              </Badge>
            </div>
          )}
        </CardFooter>
      </Card>
    </div>
  )
}
[V0_FILE]typescript:file="components/newsletter/index.ts" isMerged="true"
// Export all newsletter components from this file
export { NewsletterGenerator } from "./newsletter-generator"
export { default as NewsletterGenerator } from "./newsletter-generator"
export { NewsletterSettings } from "./newsletter-settings"
export { NewsletterTemplates } from "./newsletter-templates"
export { NewsletterContent } from "./newsletter-content"
export { NewsletterPreview } from "./newsletter-preview"
export { NewsletterPublish } from "./newsletter-publish"
export { ContentModules } from "./content-modules"
export { NewsSearch } from "./news-search"
export { RelatedNews } from "./related-news"
[V0_FILE]typescriptreact:file="components/newsletter/module-dialog.tsx" isMerged="true"
"use client"

import { Separator } from "@/components/ui/separator"

import { DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Textarea } from "@/components/ui/textarea" // Import Textarea
import type { ContentModuleType, ValuationScenario, ValuationAssumptions } from "./types"
import { useState, useEffect } from "react"

interface ModuleDialogProps {
  selectedModuleType: ContentModuleType | null
  // Changed prop to a single onConfirm callback
  onConfirm: (
    moduleType: ContentModuleType,
    input: string,
    customAssumptions?: Partial<ValuationAssumptions>,
    scenario?: ValuationScenario,
  ) => void
  onClose: () => void
}

// Default assumptions for the dialog inputs (matching base case from valuation-service)
const DEFAULT_VALUATION_ASSUMPTIONS: ValuationAssumptions = {
  revenueGrowthRates: [0.1, 0.08, 0.06, 0.04, 0.03],
  operatingMargin: 0.2,
  capexAsPctRevenue: 0.05,
  changeInWorkingCapitalAsPctRevenue: 0.02,
  discountRate: 0.09,
  terminalGrowthRate: 0.025,
  targetPE: 25,
}

export function ModuleDialog({ selectedModuleType, onConfirm, onClose }: ModuleDialogProps) {
  const [tickerInput, setTickerInput] = useState("AAPL") // Default ticker for valuation
  const [moduleInput, setModuleInput] = useState("") // For other modules like stock-spotlight
  const [valuationScenario, setValuationScenario] = useState<ValuationScenario>("base")
  const [scenarioDescription, setScenarioDescription] = useState("") // New state for scenario planning

// States for detailed DCF assumptions
  const [revenueGrowthRatesInput, setRevenueGrowthRatesInput] = useState(
    DEFAULT_VALUATION_ASSUMPTIONS.revenueGrowthRates.map((r) => r * 100).join(", "),
  )
  const [operatingMarginInput, setOperatingMarginInput] = useState(
    (DEFAULT_VALUATION_ASSUMPTIONS.operatingMargin * 100).toString(),
  )
  const [capexAsPctRevenueInput, setCapexAsPctRevenueInput] = useState(
    (DEFAULT_VALUATION_ASSUMPTIONS.capexAsPctRevenue * 100).toString(),
  )
  const [changeInWorkingCapitalAsPctRevenueInput, setChangeInWorkingCapitalAsPctRevenueInput] = useState(
    (DEFAULT_VALUATION_ASSUMPTIONS.changeInWorkingCapitalAsPctRevenue * 100).toString(),
  )
  const [discountRateInput, setDiscountRateInput] = useState(
    (DEFAULT_VALUATION_ASSUMPTIONS.discountRate * 100).toString(),
  )
  const [terminalGrowthRateInput, setTerminalGrowthRateInput] = useState(
    (DEFAULT_VALUATION_ASSUMPTIONS.terminalGrowthRate * 100).toString(),
  )
  const [targetPEInput, setTargetPEInput] = useState(DEFAULT_VALUATION_ASSUMPTIONS.targetPE.toString())

// Reset inputs when module type changes
  useEffect(() => {
    if (selectedModuleType === "valuation-analysis") {
      setModuleInput(tickerInput) // Ensure moduleInput reflects tickerInput for consistency
    } else if (selectedModuleType === "stock-spotlight") {
      setModuleInput("AAPL, MSFT, NVDA")
    } else if (selectedModuleType === "scenario-planning") {
      // Reset scenario description
      setScenarioDescription("")
    } else {
      setModuleInput("")
    }
    // Reset detailed valuation inputs to defaults when opening for valuation analysis
    setRevenueGrowthRatesInput(DEFAULT_VALUATION_ASSUMPTIONS.revenueGrowthRates.map((r) => r * 100).join(", "))
    setOperatingMarginInput((DEFAULT_VALUATION_ASSUMPTIONS.operatingMargin * 100).toString())
    setCapexAsPctRevenueInput((DEFAULT_VALUATION_ASSUMPTIONS.capexAsPctRevenue * 100).toString())
    setChangeInWorkingCapitalAsPctRevenueInput(
      (DEFAULT_VALUATION_ASSUMPTIONS.changeInWorkingCapitalAsPctRevenue * 100).toString(),
    )
    setDiscountRateInput((DEFAULT_VALUATION_ASSUMPTIONS.discountRate * 100).toString())
    setTerminalGrowthRateInput((DEFAULT_VALUATION_ASSUMPTIONS.terminalGrowthRate * 100).toString())
    setTargetPEInput(DEFAULT_VALUATION_ASSUMPTIONS.targetPE.toString())
    setValuationScenario("base") // Reset scenario to base
  }, [selectedModuleType])

const parseNumberArray = (input: string): number[] => {
    return input
      .split(",")
      .map((s) => Number.parseFloat(s.trim()) / 100)
      .filter((n) => !isNaN(n))
  }

const parsePercentage = (input: string): number => {
    const value = Number.parseFloat(input)
    return isNaN(value) ? 0 : value / 100
  }

const parseNumber = (input: string): number => {
    const value = Number.parseFloat(input)
    return isNaN(value) ? 0 : value
  }

const handleGenerateClick = () => {
    if (selectedModuleType === "valuation-analysis") {
      const customAssumptions: Partial<ValuationAssumptions> = {
        revenueGrowthRates: parseNumberArray(revenueGrowthRatesInput),
        operatingMargin: parsePercentage(operatingMarginInput),
        capexAsPctRevenue: parsePercentage(capexAsPctRevenueInput),
        changeInWorkingCapitalAsPctRevenue: parsePercentage(changeInWorkingCapitalAsPctRevenueInput),
        discountRate: parsePercentage(discountRateInput),
        terminalGrowthRate: parsePercentage(terminalGrowthRateInput),
        targetPE: parseNumber(targetPEInput),
      }
      onConfirm(selectedModuleType, tickerInput.toUpperCase(), customAssumptions, valuationScenario)
    } else if (selectedModuleType === "scenario-planning") {
      // Handle scenario planning
      onConfirm(selectedModuleType, scenarioDescription)
    } else {
      onConfirm(selectedModuleType!, moduleInput)
    }
  }

return (
    <DialogContent>
      <DialogHeader>
        <DialogTitle>
          {selectedModuleType === "valuation-analysis"
            ? "Generate Valuation Analysis"
            : selectedModuleType === "scenario-planning"
              ? "Generate Scenario Analysis"
              : "Generate Content Module"}
        </DialogTitle>
        <DialogDescription>
          {selectedModuleType === "valuation-analysis"
            ? "Enter the ticker symbol and customize valuation assumptions."
            : selectedModuleType === "scenario-planning"
              ? "Describe the hypothetical market scenario to analyze."
              : "Select the type of content module to generate."}
        </DialogDescription>
      </DialogHeader>
      <div className="grid gap-4 py-4">
        {selectedModuleType === "stock-spotlight" && (
          <div className="grid grid-cols-4 items-center gap-4">
            <Label htmlFor="moduleInput" className="text-right">
              Stock Symbols
            </Label>
            <Input
              type="text"
              id="moduleInput"
              value={moduleInput}
              onChange={(e) => setModuleInput(e.target.value)}
              className="col-span-3"
              placeholder="AAPL, MSFT, NVDA"
            />
          </div>
        )}
        {selectedModuleType === "valuation-analysis" && (
          <>
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="tickerInput" className="text-right">
                Ticker Symbol
              </Label>
              <Input
                type="text"
                id="tickerInput"
                value={tickerInput}
                onChange={(e) => setTickerInput(e.target.value.toUpperCase())}
                className="col-span-3"
                placeholder="e.g. AAPL"
              />
            </div>
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="scenarioSelect" className="text-right">
                Scenario
              </Label>
              <Select
                value={valuationScenario}
                onValueChange={(value) => setValuationScenario(value as ValuationScenario)}
              >
                <SelectTrigger id="scenarioSelect" className="col-span-3">
                  <SelectValue placeholder="Select scenario" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="base">Base Case</SelectItem>
                  <SelectItem value="bull">Bull Case</SelectItem>
                  <SelectItem value="bear">Bear Case</SelectItem>
                  <SelectItem value="all">All Scenarios</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <Separator className="my-2" />
            <h4 className="text-md font-medium col-span-4">Detailed DCF Assumptions (in %)</h4>
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="revenueGrowthRatesInput" className="text-right">
                Revenue Growth Rates
              </Label>
              <Input
                type="text"
                id="revenueGrowthRatesInput"
                value={revenueGrowthRatesInput}
                onChange={(e) => setRevenueGrowthRatesInput(e.target.value)}
                className="col-span-3"
                placeholder="e.g. 10, 8, 6, 4, 3"
                title="Comma-separated percentages for each forecast year"
              />
            </div>
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="operatingMarginInput" className="text-right">
                Operating Margin
              </Label>
              <Input
                type="number"
                id="operatingMarginInput"
                value={operatingMarginInput}
                onChange={(e) => setOperatingMarginInput(e.target.value)}
                className="col-span-3"
                placeholder="e.g. 20"
              />
            </div>
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="capexAsPctRevenueInput" className="text-right">
                Capex as % Revenue
              </Label>
              <Input
                type="number"
                id="capexAsPctRevenueInput"
                value={capexAsPctRevenueInput}
                onChange={(e) => setCapexAsPctRevenueInput(e.target.value)}
                className="col-span-3"
                placeholder="e.g. 5"
              />
            </div>
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="changeInWorkingCapitalAsPctRevenueInput" className="text-right">
                Change in WC as % Revenue
              </Label>
              <Input
                type="number"
                id="changeInWorkingCapitalAsPctRevenueInput"
                value={changeInWorkingCapitalAsPctRevenueInput}
                onChange={(e) => setChangeInWorkingCapitalAsPctRevenueInput(e.target.value)}
                className="col-span-3"
                placeholder="e.g. 2"
              />
            </div>
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="discountRateInput" className="text-right">
                Discount Rate (WACC)
              </Label>
              <Input
                type="number"
                id="discountRateInput"
                value={discountRateInput}
                onChange={(e) => setDiscountRateInput(e.target.value)}
                className="col-span-3"
                placeholder="e.g. 9"
              />
            </div>
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="terminalGrowthRateInput" className="text-right">
                Terminal Growth Rate
              </Label>
              <Input
                type="number"
                id="terminalGrowthRateInput"
                value={terminalGrowthRateInput}
                onChange={(e) => setTerminalGrowthRateInput(e.target.value)}
                className="col-span-3"
                placeholder="e.g. 2.5"
              />
            </div>
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="targetPEInput" className="text-right">
                Target P/E Multiple
              </Label>
              <Input
                type="number"
                id="targetPEInput"
                value={targetPEInput}
                onChange={(e) => setTargetPEInput(e.target.value)}
                className="col-span-3"
                placeholder="e.g. 25"
              />
            </div>
          </>
        )}
        {selectedModuleType === "scenario-planning" && (
          <div className="grid gap-4">
            <Label htmlFor="scenarioDescription" className="text-left">
              Describe the hypothetical scenario
            </Label>
            <Textarea
              id="scenarioDescription"
              value={scenarioDescription}
              onChange={(e) => setScenarioDescription(e.target.value)}
              className="col-span-4 min-h-[100px]"
              placeholder="e.g., 'What if interest rates rise by 100 bps over the next 6 months?' or 'What if a major tech company misses earnings by 20%?'"
            />
          </div>
        )}
        {selectedModuleType === "sector-performance" && (
          <div className="grid grid-cols-4 items-center gap-4">
            <Label htmlFor="moduleInput" className="text-right">
              Sectors
            </Label>
            <Input
              type="text"
              id="moduleInput"
              value={moduleInput}
              onChange={(e) => setModuleInput(e.target.value)}
              className="col-span-3"
              placeholder="e.g. Technology, Healthcare"
            />
          </div>
        )}
        {selectedModuleType === "investment-strategy" && (
          <div className="grid grid-cols-4 items-center gap-4">
            <Label htmlFor="moduleInput" className="text-right">
              Strategy Focus
            </Label>
            <Input
              type="text"
              id="moduleInput"
              value={moduleInput}
              onChange={(e) => setModuleInput(e.target.value)}
              className="col-span-3"
              placeholder="e.g. growth, income, value"
            />
          </div>
        )}
      </div>
      <DialogFooter>
        <Button variant="outline" onClick={onClose}>
          Cancel
        </Button>
        <Button
          onClick={handleGenerateClick}
          disabled={
            (selectedModuleType === "valuation-analysis" && !tickerInput) ||
            (selectedModuleType === "scenario-planning" && !scenarioDescription.trim())
          }
        >
          Generate Module
        </Button>
      </DialogFooter>
    </DialogContent>
  )
}
[V0_FILE]typescriptreact:file="components/newsletter/module-layout-manager.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Switch } from "@/components/ui/switch"
import { ArrowDown, ArrowUp, GripVertical, RefreshCw } from "lucide-react"
import { DragDropContext, Droppable, Draggable, type DropResult } from "@hello-pangea/dnd"
import { newsletterEventBus } from "./newsletter-bus"
import type { ContentModule } from "./types"

export function ModuleLayoutManager() {
  const [modules, setModules] = useState<ContentModule[]>([])
  const [isLoading, setIsLoading] = useState(false)

// Subscribe to content module updates
  useEffect(() => {
    const unsubscribe = newsletterEventBus.subscribe("contentUpdated", (data: any) => {
      if (data.modules) {
        setModules(data.modules)
      }
    })

return () => unsubscribe()
  }, [])

// Handle drag and drop reordering
  const handleDragEnd = (result: DropResult) => {
    if (!result.destination || !modules.length) return

const items = Array.from(modules)
    const [reorderedItem] = items.splice(result.source.index, 1)
    items.splice(result.destination.index, 0, reorderedItem)

// Update order property for all modules
    const reorderedModules = items.map((m, idx) => ({ ...m, order: idx }))

setModules(reorderedModules)

// Publish event for other components
    newsletterEventBus.publish("contentUpdated", { modules: reorderedModules })
  }

// Toggle module visibility
  const toggleModuleVisibility = (moduleId: string) => {
    const updatedModules = modules.map((m) => (m.id === moduleId ? { ...m, isIncluded: !m.isIncluded } : m))

setModules(updatedModules)

// Publish event for other components
    newsletterEventBus.publish("contentUpdated", { modules: updatedModules })
  }

// Move module up in the order
  const moveModuleUp = (index: number) => {
    if (index === 0) return

const updatedModules = [...modules]
    const temp = updatedModules[index]
    updatedModules[index] = updatedModules[index - 1]
    updatedModules[index - 1] = temp

// Update order property for all modules
    const reorderedModules = updatedModules.map((m, idx) => ({ ...m, order: idx }))

setModules(reorderedModules)

// Publish event for other components
    newsletterEventBus.publish("contentUpdated", { modules: reorderedModules })
  }

// Move module down in the order
  const moveModuleDown = (index: number) => {
    if (index === modules.length - 1) return

const updatedModules = [...modules]
    const temp = updatedModules[index]
    updatedModules[index] = updatedModules[index + 1]
    updatedModules[index + 1] = temp

// Update order property for all modules
    const reorderedModules = updatedModules.map((m, idx) => ({ ...m, order: idx }))

setModules(reorderedModules)

// Publish event for other components
    newsletterEventBus.publish("contentUpdated", { modules: reorderedModules })
  }

// Regenerate the newsletter with the current layout
  const regenerateNewsletter = () => {
    setIsLoading(true)

// Publish regenerate event
    newsletterEventBus.publish("regenerate-content", {})

// Also trigger content generation for all modules
    newsletterEventBus.publish("generateAllContent", {})

setTimeout(() => setIsLoading(false), 500)
  }

if (modules.length === 0) {
    return (
      <Card className="h-full flex flex-col">
        <CardHeader className="pb-3">
          <CardTitle>Module Layout</CardTitle>
        </CardHeader>
        <CardContent className="flex-grow flex items-center justify-center text-center text-muted-foreground">
          <div>
            <p>No modules added yet.</p>
            <p className="mt-2">Add content modules to manage their layout.</p>
          </div>
        </CardContent>
      </Card>
    )
  }

return (
    <Card className="h-full flex flex-col">
      <CardHeader className="pb-3">
        <div className="flex justify-between items-center">
          <CardTitle>Module Layout</CardTitle>
          <Button variant="outline" size="sm" onClick={regenerateNewsletter} disabled={isLoading}>
            <RefreshCw className={`h-4 w-4 mr-2 ${isLoading ? "animate-spin" : ""}`} />
            Regenerate
          </Button>
        </div>
      </CardHeader>
      <CardContent className="flex-grow overflow-auto pt-0">
        <DragDropContext onDragEnd={handleDragEnd}>
          <Droppable droppableId="newsletter-modules">
            {(provided) => (
              <div {...provided.droppableProps} ref={provided.innerRef} className="space-y-3">
                {modules
                  .sort((a, b) => (a.order ?? 0) - (b.order ?? 0))
                  .map((module, index) => (
                    <Draggable key={module.id} draggableId={module.id} index={index}>
                      {(provided) => (
                        <div
                          ref={provided.innerRef}
                          {...provided.draggableProps}
                          className={`p-3 rounded-md border ${
                            module.isIncluded ? "bg-white dark:bg-slate-800" : "bg-gray-50 dark:bg-slate-900"
                          } dark:border-slate-700`}
                        >
                          <div className="flex items-center justify-between">
                            <div className="flex items-center space-x-3">
                              <div {...provided.dragHandleProps} className="cursor-grab">
                                <GripVertical className="h-5 w-5 text-gray-400" />
                              </div>
                              <Switch
                                checked={module.isIncluded}
                                onCheckedChange={() => toggleModuleVisibility(module.id)}
                                aria-label={`Toggle ${module.name} visibility`}
                              />
                              <span className={`font-medium ${!module.isIncluded ? "text-gray-500" : ""}`}>
                                {module.name}
                              </span>
                            </div>
                            <div className="flex items-center space-x-2">
                              <Button
                                variant="ghost"
                                size="sm"
                                onClick={() => moveModuleUp(index)}
                                disabled={index === 0}
                                className="h-8 w-8 p-0"
                              >
                                <ArrowUp className="h-4 w-4" />
                              </Button>
                              <Button
                                variant="ghost"
                                size="sm"
                                onClick={() => moveModuleDown(index)}
                                disabled={index === modules.length - 1}
                                className="h-8 w-8 p-0"
                              >
                                <ArrowDown className="h-4 w-4" />
                              </Button>
                            </div>
                          </div>
                        </div>
                      )}
                    </Draggable>
                  ))}
                {provided.placeholder}
              </div>
            )}
          </Droppable>
        </DragDropContext>
        <div className="mt-4 text-sm text-gray-500 dark:text-gray-400">
          <p>Drag modules to reorder or toggle visibility to customize your newsletter layout.</p>
          <p className="mt-2">Click Regenerate to update the newsletter with your layout changes.</p>
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/newsletter/news-search-dialog.tsx" isMerged="true"
"use client"

import { DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Switch } from "@/components/ui/switch"
import { Separator } from "@/components/ui/separator"
import { Bookmark, ArrowLeft, ArrowRight } from "lucide-react"
import { format } from "date-fns"
import type { NewsSearchResult, NewsSourceType, NewsCategoryType } from "./types"

interface NewsSearchDialogProps {
  newsSearchQuery: string
  setNewsSearchQuery: (query: string) => void
  newsSource: NewsSourceType
  setNewsSource: (source: NewsSourceType) => void
  newsCategory: NewsCategoryType
  setNewsCategory: (category: NewsCategoryType) => void
  tickerFilter: string
  setTickerFilter: (filter: string) => void
  searchNewsArticles: () => void
  isSearching: boolean
  newsSearchResults: NewsSearchResult[]
  toggleNewsSelection: (id: string) => void
  bookmarkedNews: NewsSearchResult[]
  toggleBookmark: (item: NewsSearchResult) => void
  formatRelativeTime: (dateString: string) => string
  currentPage: number
  setCurrentPage: (page: number) => void
  totalPages: number
  addSelectedNewsToRelated: () => void
  dateRange: { from: Date | undefined; to: Date | undefined }
  setIsDatePickerOpen: (isOpen: boolean) => void
  isDatePickerOpen: boolean
}

export function NewsSearchDialog({
  newsSearchQuery,
  setNewsSearchQuery,
  newsSource,
  setNewsSource,
  newsCategory,
  setNewsCategory,
  tickerFilter,
  setTickerFilter,
  searchNewsArticles,
  isSearching,
  newsSearchResults,
  toggleNewsSelection,
  bookmarkedNews,
  toggleBookmark,
  formatRelativeTime,
  currentPage,
  setCurrentPage,
  totalPages,
  addSelectedNewsToRelated,
  dateRange,
  setIsDatePickerOpen,
  isDatePickerOpen,
}: NewsSearchDialogProps) {
  return (
    <DialogContent className="max-h-[80vh] overflow-y-auto">
      <DialogHeader>
        <DialogTitle>Search News Articles</DialogTitle>
        <DialogDescription>Search for news articles to add to your newsletter.</DialogDescription>
      </DialogHeader>
      <div className="space-y-4">
        <div className="flex items-center space-x-2">
          <Input
            type="text"
            placeholder="Search query"
            value={newsSearchQuery}
            onChange={(e) => setNewsSearchQuery(e.target.value)}
          />
          <Select value={newsSource} onValueChange={setNewsSource}>
            <SelectTrigger>
              <SelectValue placeholder="Select Source" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">All Sources</SelectItem>
              <SelectItem value="fmp-articles">FMP Articles</SelectItem>
              <SelectItem value="general-news">General News</SelectItem>
              <SelectItem value="press-releases">Press Releases</SelectItem>
              <SelectItem value="stock-news">Stock News</SelectItem>
            </SelectContent>
          </Select>
          <Select value={newsCategory} onValueChange={setNewsCategory}>
            <SelectTrigger>
              <SelectValue placeholder="Select Category" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">All Categories</SelectItem>
              <SelectItem value="earnings">Earnings</SelectItem>
              <SelectItem value="ipo">IPO</SelectItem>
              <SelectItem value="mergers">Mergers</SelectItem>
              <SelectItem value="financial">Financial</SelectItem>
              <SelectItem value="economy">Economy</SelectItem>
              <SelectItem value="technology">Technology</SelectItem>
            </SelectContent>
          </Select>
          <Input
            type="text"
            placeholder="Filter by Ticker (AAPL, MSFT)"
            value={tickerFilter}
            onChange={(e) => setTickerFilter(e.target.value)}
          />
          <Button variant="outline" size="sm" onClick={searchNewsArticles} disabled={isSearching}>
            {isSearching ? <>Searching...</> : <>Search</>}
          </Button>
        </div>

<div className="flex items-center space-x-2">
          <Button variant="outline" size="sm" onClick={() => setIsDatePickerOpen(true)}>
            Select Date Range
          </Button>
          {dateRange.from && dateRange.to && (
            <span>
              {format(dateRange.from, "MMM dd, yyyy")} - {format(dateRange.to, "MMM dd, yyyy")}
            </span>
          )}
        </div>

{isDatePickerOpen && (
          <div className="relative">
            {/* Implement your date picker component here */}
            <p>Date Picker Component Here</p>
            <Button variant="outline" size="sm" onClick={() => setIsDatePickerOpen(false)}>
              Close Date Picker
            </Button>
          </div>
        )}

{newsSearchResults.length > 0 ? (
          <div className="space-y-2">
            {newsSearchResults.map((item) => (
              <div key={item.id} className="flex items-start justify-between rounded-md border p-4">
                <div className="space-y-1">
                  <div className="flex items-center justify-between">
                    <p className="text-sm font-medium leading-none">{item.title}</p>
                    <Switch
                      id={`news-item-${item.id}`}
                      checked={item.selected || false}
                      onChange={() => toggleNewsSelection(item.id)}
                    />
                  </div>
                  <p className="text-sm text-muted-foreground">{item.summary.substring(0, 100)}...</p>
                  <div className="flex items-center space-x-2">
                    <a href={item.url} target="_blank" rel="noopener noreferrer" className="text-blue-500">
                      Read More
                    </a>
                    <span className="text-gray-500">
                      {item.source} - {formatRelativeTime(item.publishedAt)}
                    </span>
                    {item.tickers && <span className="text-gray-500">Tickers: {item.tickers}</span>}
                    <Button variant="ghost" size="icon" onClick={() => toggleBookmark(item)}>
                      {bookmarkedNews.some((bookmarked) => bookmarked.id === item.id) ? (
                        <Bookmark className="h-4 w-4 text-yellow-500" />
                      ) : (
                        <Bookmark className="h-4 w-4" />
                      )}
                    </Button>
                  </div>
                </div>
              </div>
            ))}
            <div className="flex justify-between">
              <Button
                variant="outline"
                size="sm"
                onClick={() => setCurrentPage(currentPage - 1)}
                disabled={currentPage === 0}
              >
                <ArrowLeft className="mr-2 h-4 w-4" />
                Previous Page
              </Button>
              <Button
                variant="outline"
                size="sm"
                onClick={() => setCurrentPage(currentPage + 1)}
                disabled={currentPage === totalPages - 1}
              >
                Next Page
                <ArrowRight className="ml-2 h-4 w-4" />
              </Button>
            </div>
          </div>
        ) : (
          <p>No results found.</p>
        )}

<Button variant="outline" size="sm" onClick={addSelectedNewsToRelated}>
          Add Selected to Newsletter
        </Button>
      </div>
    </DialogContent>
  )
}
[V0_FILE]typescriptreact:file="components/newsletter/news-search.tsx" isMerged="true"
"use client"

import type React from "react"

import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Checkbox } from "@/components/ui/checkbox"
import { Label } from "@/components/ui/label"
import { Calendar } from "@/components/ui/calendar"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { Search, CalendarIcon, Bookmark, BookmarkCheck, ArrowLeft, ArrowRight, Loader2 } from "lucide-react"
import { useState, useEffect } from "react"
import { format } from "date-fns"
import type { NewsSearchProps, NewsSearchFilters } from "./types"

export function NewsSearch({
  isOpen,
  onClose,
  onSearch,
  onAddSelectedToRelated,
  results,
  isSearching,
  selectedResults,
  onToggleSelection,
  bookmarkedNews,
  onToggleBookmark,
  currentPage,
  totalPages,
  onPageChange,
}: NewsSearchProps) {
  const [activeTab, setActiveTab] = useState("search")
  const [filters, setFilters] = useState<NewsSearchFilters>({
    query: "",
    ticker: "",
    source: "",
    category: "",
    sentiment: "",
    dateRange: {},
  })

// Reset filters when dialog opens
  useEffect(() => {
    if (isOpen) {
      setFilters({
        query: "",
        ticker: "",
        source: "",
        category: "",
        sentiment: "",
        dateRange: {},
      })
    }
  }, [isOpen])

const handleSearch = () => {
    onSearch(filters.query, filters)
  }

const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === "Enter") {
      handleSearch()
    }
  }

return (
    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
      <DialogContent className="max-w-4xl max-h-[90vh] overflow-hidden flex flex-col">
        <DialogHeader>
          <DialogTitle>Search News Articles</DialogTitle>
        </DialogHeader>

<Tabs value={activeTab} onValueChange={setActiveTab} className="flex-1 overflow-hidden flex flex-col">
          <TabsList className="mb-4">
            <TabsTrigger value="search">Search</TabsTrigger>
            <TabsTrigger value="bookmarks">Bookmarks ({bookmarkedNews.length})</TabsTrigger>
            <TabsTrigger value="selected">Selected ({selectedResults.length})</TabsTrigger>
          </TabsList>

<div className="flex-1 overflow-hidden flex flex-col">
            <TabsContent value="search" className="flex-1 overflow-hidden flex flex-col">
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
                <div className="md:col-span-3">
                  <div className="flex gap-2">
                    <Input
                      placeholder="Search for news articles..."
                      value={filters.query}
                      onChange={(e) => setFilters({ ...filters, query: e.target.value })}
                      onKeyDown={handleKeyDown}
                      className="flex-1"
                    />
                    <Button onClick={handleSearch} disabled={isSearching}>
                      {isSearching ? <Loader2 className="h-4 w-4 animate-spin" /> : <Search className="h-4 w-4" />}
                    </Button>
                  </div>
                </div>

<div>
                  <Label htmlFor="ticker-filter" className="text-xs">
                    Ticker Symbol
                  </Label>
                  <Input
                    id="ticker-filter"
                    placeholder="e.g., AAPL"
                    value={filters.ticker}
                    onChange={(e) => setFilters({ ...filters, ticker: e.target.value })}
                    className="mt-1"
                  />
                </div>

<div>
                  <Label htmlFor="source-filter" className="text-xs">
                    Source
                  </Label>
                  <Select value={filters.source} onValueChange={(value) => setFilters({ ...filters, source: value })}>
                    <SelectTrigger id="source-filter" className="mt-1">
                      <SelectValue placeholder="All Sources" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="all">All Sources</SelectItem>
                      <SelectItem value="bloomberg">Bloomberg</SelectItem>
                      <SelectItem value="cnbc">CNBC</SelectItem>
                      <SelectItem value="reuters">Reuters</SelectItem>
                      <SelectItem value="wsj">Wall Street Journal</SelectItem>
                      <SelectItem value="ft">Financial Times</SelectItem>
                    </SelectContent>
                  </Select>
                </div>

<div>
                  <Label htmlFor="date-filter" className="text-xs">
                    Date Range
                  </Label>
                  <Popover>
                    <PopoverTrigger asChild>
                      <Button variant="outline" className="w-full mt-1 justify-start text-left font-normal">
                        <CalendarIcon className="mr-2 h-4 w-4" />
                        {filters.dateRange.from ? (
                          filters.dateRange.to ? (
                            <>
                              {format(filters.dateRange.from, "LLL dd, y")} -{" "}
                              {format(filters.dateRange.to, "LLL dd, y")}
                            </>
                          ) : (
                            format(filters.dateRange.from, "LLL dd, y")
                          )
                        ) : (
                          <span>Pick a date range</span>
                        )}
                      </Button>
                    </PopoverTrigger>
                    <PopoverContent className="w-auto p-0" align="start">
                      <Calendar
                        mode="range"
                        selected={{
                          from: filters.dateRange.from,
                          to: filters.dateRange.to,
                        }}
                        onSelect={(range) => setFilters({ ...filters, dateRange: range || {} })}
                        initialFocus
                      />
                    </PopoverContent>
                  </Popover>
                </div>
              </div>

<div className="flex-1 overflow-y-auto border rounded-md">
                {results.length === 0 ? (
                  <div className="flex items-center justify-center h-full">
                    <p className="text-muted-foreground">
                      {isSearching ? "Searching..." : "No results found. Try a different search."}
                    </p>
                  </div>
                ) : (
                  <div className="divide-y">
                    {results.map((article) => (
                      <div
                        key={article.id}
                        className="p-4 hover:bg-gray-50 dark:hover:bg-gray-800 flex items-start gap-3"
                      >
                        <Checkbox
                          id={`select-${article.id}`}
                          checked={selectedResults.some((item) => item.id === article.id)}
                          onCheckedChange={() => onToggleSelection(article.id)}
                        />
                        <div className="flex-1">
                          <div className="flex justify-between">
                            <Label htmlFor={`select-${article.id}`} className="font-medium cursor-pointer">
                              {article.title}
                            </Label>
                            <Button
                              variant="ghost"
                              size="icon"
                              onClick={() => onToggleBookmark(article)}
                              className="h-8 w-8"
                            >
                              {bookmarkedNews.some((item) => item.id === article.id) ? (
                                <BookmarkCheck className="h-4 w-4 text-blue-500" />
                              ) : (
                                <Bookmark className="h-4 w-4" />
                              )}
                            </Button>
                          </div>
                          <p className="text-sm text-muted-foreground mt-1">{article.summary}</p>
                          <div className="flex items-center text-xs text-muted-foreground mt-2 gap-2">
                            <span>{article.source}</span>
                            <span>•</span>
                            <span>{new Date(article.publishedAt).toLocaleDateString()}</span>
                            {article.sentiment && (
                              <>
                                <span>•</span>
                                <span
                                  className={
                                    article.sentiment === "positive"
                                      ? "text-green-600"
                                      : article.sentiment === "negative"
                                        ? "text-red-600"
                                        : "text-gray-600"
                                  }
                                >
                                  {article.sentiment.charAt(0).toUpperCase() + article.sentiment.slice(1)}
                                </span>
                              </>
                            )}
                            {article.tickers && article.tickers.length > 0 && (
                              <>
                                <span>•</span>
                                <span>{article.tickers.join(", ")}</span>
                              </>
                            )}
                          </div>
                        </div>
                      </div>
                    ))}
                  </div>
                )}
              </div>

{results.length > 0 && (
                <div className="flex items-center justify-between mt-4">
                  <div className="text-sm text-muted-foreground">
                    Page {currentPage} of {totalPages}
                  </div>
                  <div className="flex gap-2">
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={() => onPageChange(currentPage - 1)}
                      disabled={currentPage <= 1}
                    >
                      <ArrowLeft className="h-4 w-4" />
                    </Button>
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={() => onPageChange(currentPage + 1)}
                      disabled={currentPage >= totalPages}
                    >
                      <ArrowRight className="h-4 w-4" />
                    </Button>
                  </div>
                </div>
              )}
            </TabsContent>

<TabsContent value="bookmarks" className="flex-1 overflow-y-auto">
              {bookmarkedNews.length === 0 ? (
                <div className="flex items-center justify-center h-40 border rounded-md border-dashed">
                  <p className="text-muted-foreground">No bookmarked news articles</p>
                </div>
              ) : (
                <div className="divide-y border rounded-md">
                  {bookmarkedNews.map((article) => (
                    <div
                      key={article.id}
                      className="p-4 hover:bg-gray-50 dark:hover:bg-gray-800 flex items-start gap-3"
                    >
                      <Checkbox
                        id={`bookmark-select-${article.id}`}
                        checked={selectedResults.some((item) => item.id === article.id)}
                        onCheckedChange={() => onToggleSelection(article.id)}
                      />
                      <div className="flex-1">
                        <div className="flex justify-between">
                          <Label htmlFor={`bookmark-select-${article.id}`} className="font-medium cursor-pointer">
                            {article.title}
                          </Label>
                          <Button
                            variant="ghost"
                            size="icon"
                            onClick={() => onToggleBookmark(article)}
                            className="h-8 w-8"
                          >
                            <BookmarkCheck className="h-4 w-4 text-blue-500" />
                          </Button>
                        </div>
                        <p className="text-sm text-muted-foreground mt-1">{article.summary}</p>
                        <div className="flex items-center text-xs text-muted-foreground mt-2 gap-2">
                          <span>{article.source}</span>
                          <span>•</span>
                          <span>{new Date(article.publishedAt).toLocaleDateString()}</span>
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </TabsContent>

<TabsContent value="selected" className="flex-1 overflow-y-auto">
              {selectedResults.length === 0 ? (
                <div className="flex items-center justify-center h-40 border rounded-md border-dashed">
                  <p className="text-muted-foreground">No selected news articles</p>
                </div>
              ) : (
                <div className="divide-y border rounded-md">
                  {selectedResults.map((article) => (
                    <div
                      key={article.id}
                      className="p-4 hover:bg-gray-50 dark:hover:bg-gray-800 flex items-start gap-3"
                    >
                      <Checkbox
                        id={`selected-${article.id}`}
                        checked={true}
                        onCheckedChange={() => onToggleSelection(article.id)}
                      />
                      <div className="flex-1">
                        <Label htmlFor={`selected-${article.id}`} className="font-medium cursor-pointer">
                          {article.title}
                        </Label>
                        <p className="text-sm text-muted-foreground mt-1">{article.summary}</p>
                        <div className="flex items-center text-xs text-muted-foreground mt-2 gap-2">
                          <span>{article.source}</span>
                          <span>•</span>
                          <span>{new Date(article.publishedAt).toLocaleDateString()}</span>
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </TabsContent>
          </div>
        </Tabs>

<div className="flex justify-between mt-4">
          <Button variant="outline" onClick={onClose}>
            Cancel
          </Button>
          <Button onClick={onAddSelectedToRelated} disabled={selectedResults.length === 0}>
            Add {selectedResults.length} Selected {selectedResults.length === 1 ? "Item" : "Items"}
          </Button>
        </div>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescriptreact:file="components/newsletter/newsletter-analytics.tsx" isMerged="true"
"use client"

export function NewsletterAnalytics() {
  const [period, setPeriod] = useState("week")

return (
    <div className="space-y-4">
      <Tabs value={period} onValueChange={setPeriod} className="w-full">
        <TabsList className="grid grid-cols-3 w-full max-w-xs">
          <TabsTrigger value="week">Week</TabsTrigger>
          <TabsTrigger value="month">Month</TabsTrigger>
          <TabsTrigger value="year">Year</TabsTrigger>
        </TabsList>

<TabsContent value="week" className="space-y-4">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <Card>
              <CardHeader className="pb-2">
                <CardTitle className="text-sm font-medium">Opens</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">1,254</div>
                <p className="text-xs text-muted-foreground">+12% from last week</p>
              </CardContent>
            </Card>
            <Card>
              <CardHeader className="pb-2">
                <CardTitle className="text-sm font-medium">Clicks</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">348</div>
                <p className="text-xs text-muted-foreground">+5% from last week</p>
              </CardContent>
            </Card>
            <Card>
              <CardHeader className="pb-2">
                <CardTitle className="text-sm font-medium">CTR</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">27.7%</div>
                <p className="text-xs text-muted-foreground">-2% from last week</p>
              </CardContent>
            </Card>
          </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <Card className="col-span-1">
              <CardHeader>
                <CardTitle>Engagement Over Time</CardTitle>
                <CardDescription>Daily opens and clicks</CardDescription>
              </CardHeader>
              <CardContent className="h-[300px] flex items-center justify-center">
                <LineChart className="h-16 w-16 text-gray-400" />
              </CardContent>
            </Card>
            <Card className="col-span-1">
              <CardHeader>
                <CardTitle>Content Performance</CardTitle>
                <CardDescription>Click distribution by section</CardDescription>
              </CardHeader>
              <CardContent className="h-[300px] flex items-center justify-center">
                <PieChart className="h-16 w-16 text-gray-400" />
              </CardContent>
            </Card>
          </div>
        </TabsContent>

<TabsContent value="month" className="space-y-4">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <Card>
              <CardHeader className="pb-2">
                <CardTitle className="text-sm font-medium">Opens</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">5,127</div>
                <p className="text-xs text-muted-foreground">+8% from last month</p>
              </CardContent>
            </Card>
            <Card>
              <CardHeader className="pb-2">
                <CardTitle className="text-sm font-medium">Clicks</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">1,485</div>
                <p className="text-xs text-muted-foreground">+3% from last month</p>
              </CardContent>
            </Card>
            <Card>
              <CardHeader className="pb-2">
                <CardTitle className="text-sm font-medium">CTR</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">29.0%</div>
                <p className="text-xs text-muted-foreground">-1% from last month</p>
              </CardContent>
            </Card>
          </div>

<Card>
            <CardHeader>
              <CardTitle>Monthly Performance</CardTitle>
              <CardDescription>Newsletter metrics for the past month</CardDescription>
            </CardHeader>
            <CardContent className="h-[300px] flex items-center justify-center">
              <BarChart className="h-16 w-16 text-gray-400" />
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="year" className="space-y-4">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <Card>
              <CardHeader className="pb-2">
                <CardTitle className="text-sm font-medium">Opens</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">62,489</div>
                <p className="text-xs text-muted-foreground">+15% from last year</p>
              </CardContent>
            </Card>
            <Card>
              <CardHeader className="pb-2">
                <CardTitle className="text-sm font-medium">Clicks</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">18,472</div>
                <p className="text-xs text-muted-foreground">+12% from last year</p>
              </CardContent>
            </Card>
            <Card>
              <CardHeader className="pb-2">
                <CardTitle className="text-sm font-medium">CTR</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">29.6%</div>
                <p className="text-xs text-muted-foreground">+2% from last year</p>
              </CardContent>
            </Card>
          </div>

<Card>
            <CardHeader>
              <CardTitle>Yearly Performance</CardTitle>
              <CardDescription>Newsletter metrics for the past year</CardDescription>
            </CardHeader>
            <CardContent className="h-[300px] flex items-center justify-center">
              <BarChart className="h-16 w-16 text-gray-400" />
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescript:file="components/newsletter/newsletter-bus.ts" isMerged="true"
// Simple event bus implementation
export const newsletterEventBus = {
  events: new Map<string, Array<(data: any) => void>>(),

subscribe(event: string, callback: (data: any) => void) {
    if (!this.events.has(event)) {
      this.events.set(event, [])
    }
    this.events.get(event)?.push(callback)

return () => {
      const callbacks = this.events.get(event) || []
      const index = callbacks.indexOf(callback)
      if (index > -1) {
        callbacks.splice(index, 1)
      }
    }
  },

publish(event: string, data: any) {
    if (!this.events.has(event)) return
    this.events.get(event)?.forEach((callback) => callback(data))
  },
}
[V0_FILE]typescriptreact:file="components/newsletter/newsletter-content.tsx" isMerged="true"
"use client"

import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

export function NewsletterContent() {
  return (
    <div className="space-y-4">
      <Tabs defaultValue="content-items">
        <TabsList>
          <TabsTrigger value="content-items">Content Items</TabsTrigger>
          <TabsTrigger value="modules">Content Modules</TabsTrigger>
          <TabsTrigger value="related">Related News</TabsTrigger>
        </TabsList>

<TabsContent value="content-items">
          <Card>
            <CardContent className="pt-6">
              <div className="h-[300px] bg-gray-100 rounded-md flex items-center justify-center">
                <p className="text-muted-foreground">Content item selection will appear here</p>
              </div>

<div className="flex justify-end mt-4">
                <Button>Select Content Items</Button>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="modules">
          <Card>
            <CardContent className="pt-6">
              <div className="h-[300px] bg-gray-100 rounded-md flex items-center justify-center">
                <p className="text-muted-foreground">Content modules will appear here</p>
              </div>

<div className="flex justify-end mt-4">
                <Button>Add Module</Button>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="related">
          <Card>
            <CardContent className="pt-6">
              <div className="h-[300px] bg-gray-100 rounded-md flex items-center justify-center">
                <p className="text-muted-foreground">Related news items will appear here</p>
              </div>

<div className="flex justify-end mt-4">
                <Button>Add Related News</Button>
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>

<div className="flex justify-end">
        <Button size="lg">Generate Newsletter</Button>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/newsletter/newsletter-layout-manager.tsx" isMerged="true"
"use client"

import type React from "react"
import { useEffect } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Switch } from "@/components/ui/switch"
import { useNewsletterState } from "@/hooks/use-newsletter-state"
import { ArrowDown, ArrowUp, RefreshCw } from "lucide-react"
import { DragDropContext, Droppable, Draggable, type DropResult } from "@hello-pangea/dnd"

export const NewsletterLayoutManager: React.FC = () => {
  const { newsletterLayout, updateNewsletterLayout, regenerateNewsletter, isGenerating } = useNewsletterState()

// Handle drag and drop reordering
  const handleDragEnd = (result: DropResult) => {
    if (!result.destination || !newsletterLayout) return

const items = Array.from(newsletterLayout)
    const [reorderedItem] = items.splice(result.source.index, 1)
    items.splice(result.destination.index, 0, reorderedItem)

updateNewsletterLayout(items)
  }

// Toggle section visibility
  const toggleSectionVisibility = (index: number) => {
    if (!newsletterLayout) return

const updatedLayout = [...newsletterLayout]
    updatedLayout[index] = {
      ...updatedLayout[index],
      visible: !updatedLayout[index].visible,
    }

updateNewsletterLayout(updatedLayout)
  }

// Move section up in the order
  const moveSectionUp = (index: number) => {
    if (!newsletterLayout || index === 0) return

const updatedLayout = [...newsletterLayout]
    const temp = updatedLayout[index]
    updatedLayout[index] = updatedLayout[index - 1]
    updatedLayout[index - 1] = temp

updateNewsletterLayout(updatedLayout)
  }

// Move section down in the order
  const moveSectionDown = (index: number) => {
    if (!newsletterLayout || index === newsletterLayout.length - 1) return

const updatedLayout = [...newsletterLayout]
    const temp = updatedLayout[index]
    updatedLayout[index] = updatedLayout[index + 1]
    updatedLayout[index + 1] = temp

updateNewsletterLayout(updatedLayout)
  }

// Trigger regeneration when layout changes
  useEffect(() => {
    // We don't want to auto-regenerate on initial load or every layout change
    // This would be handled by the regenerate button
  }, [newsletterLayout])

if (!newsletterLayout) return null

return (
    <Card className="h-full flex flex-col">
      <CardHeader className="pb-3">
        <div className="flex justify-between items-center">
          <CardTitle>Newsletter Layout</CardTitle>
          <Button variant="outline" size="sm" onClick={regenerateNewsletter} disabled={isGenerating}>
            <RefreshCw className={`h-4 w-4 mr-2 ${isGenerating ? "animate-spin" : ""}`} />
            Regenerate
          </Button>
        </div>
      </CardHeader>
      <CardContent className="flex-grow overflow-auto pt-0">
        <DragDropContext onDragEnd={handleDragEnd}>
          <Droppable droppableId="newsletter-sections">
            {(provided) => (
              <div {...provided.droppableProps} ref={provided.innerRef} className="space-y-3">
                {newsletterLayout.map((section, index) => (
                  <Draggable key={section.id} draggableId={section.id} index={index}>
                    {(provided) => (
                      <div
                        ref={provided.innerRef}
                        {...provided.draggableProps}
                        {...provided.dragHandleProps}
                        className={`p-3 rounded-md border ${section.visible ? "bg-white" : "bg-gray-50"}`}
                      >
                        <div className="flex items-center justify-between">
                          <div className="flex items-center space-x-3">
                            <Switch
                              checked={section.visible}
                              onCheckedChange={() => toggleSectionVisibility(index)}
                              aria-label={`Toggle ${section.title} visibility`}
                            />
                            <span className={`font-medium ${!section.visible ? "text-gray-500" : ""}`}>
                              {section.title}
                            </span>
                          </div>
                          <div className="flex items-center space-x-2">
                            <Button
                              variant="ghost"
                              size="sm"
                              onClick={() => moveSectionUp(index)}
                              disabled={index === 0}
                              className="h-8 w-8 p-0"
                            >
                              <ArrowUp className="h-4 w-4" />
                            </Button>
                            <Button
                              variant="ghost"
                              size="sm"
                              onClick={() => moveSectionDown(index)}
                              disabled={index === newsletterLayout.length - 1}
                              className="h-8 w-8 p-0"
                            >
                              <ArrowDown className="h-4 w-4" />
                            </Button>
                          </div>
                        </div>
                      </div>
                    )}
                  </Draggable>
                ))}
                {provided.placeholder}
              </div>
            )}
          </Droppable>
        </DragDropContext>
        <div className="mt-4 text-sm text-gray-500">
          <p>Drag sections to reorder or toggle visibility to customize your newsletter layout.</p>
          <p className="mt-2">Click Regenerate to update the newsletter with your layout changes.</p>
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/newsletter/newsletter-scheduler.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Calendar, Clock, Plus, Trash } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Switch } from "@/components/ui/switch"
import { useToast } from "@/components/ui/use-toast"

export function NewsletterScheduler() {
  const [schedules, setSchedules] = useState([
    { id: 1, name: "Daily Market Update", frequency: "daily", time: "08:00", enabled: true },
    { id: 2, name: "Weekly Investment Insights", frequency: "weekly", day: "monday", time: "09:00", enabled: true },
    { id: 3, name: "Monthly Performance Review", frequency: "monthly", day: "1", time: "10:00", enabled: false },
  ])

const [showAddForm, setShowAddForm] = useState(false)
  const [newSchedule, setNewSchedule] = useState({
    name: "",
    frequency: "daily",
    day: "monday",
    time: "09:00",
    enabled: true,
  })

const { toast } = useToast()

const handleAddSchedule = () => {
    if (!newSchedule.name) {
      toast({
        title: "Name required",
        description: "Please enter a name for the schedule",
        variant: "destructive",
      })
      return
    }

setSchedules([
      ...schedules,
      {
        id: Date.now(),
        ...newSchedule,
      },
    ])

setNewSchedule({
      name: "",
      frequency: "daily",
      day: "monday",
      time: "09:00",
      enabled: true,
    })

setShowAddForm(false)

toast({
      title: "Schedule added",
      description: `${newSchedule.name} has been scheduled successfully`,
    })
  }

const handleDeleteSchedule = (id: number) => {
    setSchedules(schedules.filter((schedule) => schedule.id !== id))

toast({
      title: "Schedule deleted",
      description: "The schedule has been removed",
    })
  }

const handleToggleSchedule = (id: number) => {
    setSchedules(
      schedules.map((schedule) => (schedule.id === id ? { ...schedule, enabled: !schedule.enabled } : schedule)),
    )

const schedule = schedules.find((s) => s.id === id)
    if (schedule) {
      toast({
        title: schedule.enabled ? "Schedule disabled" : "Schedule enabled",
        description: `${schedule.name} has been ${schedule.enabled ? "disabled" : "enabled"}`,
      })
    }
  }

// Find the function that handles scheduling and update it to use the new function
  // For example, if there's a handleSchedule function, update it to:

const handleSchedule = async () => {
    //setIsScheduling(true); // Assuming setIsScheduling is defined elsewhere.  If not, remove this line.

try {
      // Validate the scheduled date
      //if (!scheduledDate) { // Assuming scheduledDate is defined elsewhere. If not, remove this line.
      //  toast({
      //    title: "Missing date",
      //    description: "Please select a date for scheduling",
      //    variant: "destructive"
      //  });
      //  return;
      //}
      // Prepare the content for scheduling
      //const formattedContent = formatNewsletterContent(activeModules); // Assuming formatNewsletterContent and activeModules are defined elsewhere. If not, remove this line.
      // Call the server action
      //const result = await scheduleContentForKit({ // Assuming settings is defined elsewhere. If not, remove this line.
      //  title: settings.title || "Investment Newsletter",
      //  content: formattedContent,
      //  summary: settings.summary,
      //  coverImage: settings.coverImage,
      //  isPublic: settings.isPublic,
      //  isDraft: false,
      //  scheduledDate: scheduledDate.toISOString()
      //});
      //if (result.success) {
      //  toast({
      //    title: "Newsletter scheduled",
      //    description: result.message
      //  });
      // Update the scheduling history or status if needed
      // ...
      //} else {
      //  toast({
      //    title: "Scheduling failed",
      //    description: result.error || "Failed to schedule newsletter",
      //    variant: "destructive"
      //  });
      //}
    } catch (error) {
      console.error("Error scheduling newsletter:", error)
      toast({
        title: "Scheduling failed",
        description: "An unexpected error occurred",
        variant: "destructive",
      })
    } finally {
      //setIsScheduling(false); // Assuming setIsScheduling is defined elsewhere. If not, remove this line.
    }
  }

return (
    <div className="space-y-4">
      <div className="flex justify-between items-center">
        <h3 className="text-lg font-medium">Scheduled Newsletters</h3>
        <Button size="sm" onClick={() => setShowAddForm(!showAddForm)}>
          <Plus className="h-4 w-4 mr-1" />
          Add Schedule
        </Button>
      </div>

{showAddForm && (
        <Card>
          <CardContent className="pt-4">
            <div className="space-y-4">
              <div>
                <Label htmlFor="name">Schedule Name</Label>
                <Input
                  id="name"
                  value={newSchedule.name}
                  onChange={(e) => setNewSchedule({ ...newSchedule, name: e.target.value })}
                  placeholder="e.g. Daily Market Update"
                />
              </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div>
                  <Label htmlFor="frequency">Frequency</Label>
                  <Select
                    value={newSchedule.frequency}
                    onValueChange={(value) => setNewSchedule({ ...newSchedule, frequency: value })}
                  >
                    <SelectTrigger id="frequency">
                      <SelectValue placeholder="Select frequency" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="daily">Daily</SelectItem>
                      <SelectItem value="weekly">Weekly</SelectItem>
                      <SelectItem value="monthly">Monthly</SelectItem>
                    </SelectContent>
                  </Select>
                </div>

{newSchedule.frequency !== "daily" && (
                  <div>
                    <Label htmlFor="day">{newSchedule.frequency === "weekly" ? "Day of Week" : "Day of Month"}</Label>
                    <Select
                      value={newSchedule.day}
                      onValueChange={(value) => setNewSchedule({ ...newSchedule, day: value })}
                    >
                      <SelectTrigger id="day">
                        <SelectValue placeholder="Select day" />
                      </SelectTrigger>
                      <SelectContent>
                        {newSchedule.frequency === "weekly" ? (
                          <>
                            <SelectItem value="monday">Monday</SelectItem>
                            <SelectItem value="tuesday">Tuesday</SelectItem>
                            <SelectItem value="wednesday">Wednesday</SelectItem>
                            <SelectItem value="thursday">Thursday</SelectItem>
                            <SelectItem value="friday">Friday</SelectItem>
                            <SelectItem value="saturday">Saturday</SelectItem>
                            <SelectItem value="sunday">Sunday</SelectItem>
                          </>
                        ) : (
                          Array.from({ length: 28 }, (_, i) => (
                            <SelectItem key={i + 1} value={(i + 1).toString()}>
                              {(i + 1).toString()}
                            </SelectItem>
                          ))
                        )}
                      </SelectContent>
                    </Select>
                  </div>
                )}

<div>
                  <Label htmlFor="time">Time</Label>
                  <Input
                    id="time"
                    type="time"
                    value={newSchedule.time}
                    onChange={(e) => setNewSchedule({ ...newSchedule, time: e.target.value })}
                  />
                </div>
              </div>

<div className="flex items-center space-x-2">
                <Switch
                  id="enabled"
                  checked={newSchedule.enabled}
                  onCheckedChange={(checked) => setNewSchedule({ ...newSchedule, enabled: checked })}
                />
                <Label htmlFor="enabled">Enable schedule immediately</Label>
              </div>

<div className="flex justify-end gap-2">
                <Button variant="outline" onClick={() => setShowAddForm(false)}>
                  Cancel
                </Button>
                <Button onClick={handleAddSchedule}>Add Schedule</Button>
              </div>
            </div>
          </CardContent>
        </Card>
      )}

<div className="space-y-2">
        {schedules.map((schedule) => (
          <Card key={schedule.id}>
            <CardContent className="p-4 flex justify-between items-center">
              <div className="flex items-center gap-2">
                <div className={`w-3 h-3 rounded-full ${schedule.enabled ? "bg-green-500" : "bg-gray-300"}`}></div>
                <div>
                  <h4 className="font-medium">{schedule.name}</h4>
                  <div className="text-sm text-gray-500 flex items-center gap-4">
                    <span className="flex items-center">
                      <Calendar className="h-3 w-3 mr-1" />
                      {schedule.frequency === "daily"
                        ? "Every day"
                        : schedule.frequency === "weekly"
                          ? `Every ${schedule.day}`
                          : `Monthly on day ${schedule.day}`}
                    </span>
                    <span className="flex items-center">
                      <Clock className="h-3 w-3 mr-1" />
                      {schedule.time}
                    </span>
                  </div>
                </div>
              </div>
              <div className="flex items-center gap-2">
                <Switch checked={schedule.enabled} onCheckedChange={() => handleToggleSchedule(schedule.id)} />
                <Button variant="ghost" size="icon" onClick={() => handleDeleteSchedule(schedule.id)}>
                  <Trash className="h-4 w-4 text-gray-500" />
                </Button>
              </div>
            </CardContent>
          </Card>
        ))}

{schedules.length === 0 && (
          <div className="text-center py-8 text-gray-500">
            No schedules found. Add a schedule to automate your newsletter delivery.
          </div>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/newsletter/newsletter-section-manager.tsx" isMerged="true"
"use client"

import type React from "react"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { NewsletterLayoutManager } from "./newsletter-layout-manager"
import { ContentModulesPanel } from "./content-modules-panel"
import { RelatedNewsPanel } from "./related-news-panel"
import { NewsletterSettingsPanel } from "./newsletter-settings-panel"

export const NewsletterSectionManager: React.FC = () => {
  return (
    <Tabs defaultValue="layout" className="h-full flex flex-col">
      <TabsList className="grid grid-cols-4 mb-4">
        <TabsTrigger value="layout">Layout</TabsTrigger>
        <TabsTrigger value="modules">Modules</TabsTrigger>
        <TabsTrigger value="related">Related News</TabsTrigger>
        <TabsTrigger value="settings">Settings</TabsTrigger>
      </TabsList>

<TabsContent value="settings" className="h-full m-0">
          <NewsletterSettingsPanel />
        </TabsContent>
      </div>
    </Tabs>
  )
}
[V0_FILE]typescriptreact:file="components/newsletter/newsletter-settings-panel.tsx" isMerged="true"
"use client"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Switch } from "@/components/ui/switch"
import { Settings, Sparkles, GripVertical } from "lucide-react"
import type { NewsletterSection } from "./types"

interface NewsletterSettingsPanelProps {
  title: string
  setTitle: (title: string) => void
  subtitle: string
  setSubtitle: (subtitle: string) => void
  newsletterType: string
  setNewsletterType: (type: string) => void
  wordCount: string
  setWordCount: (count: string) => void
  outputFormat: string
  setOutputFormat: (format: string) => void
  writingStyle: string
  setWritingStyle: (style: string) => void
  isGenerating: boolean
  handleGenerateHeadline: () => void
  sections: NewsletterSection[]
  toggleSectionEnabled: (sectionId: string, enabled: boolean) => void
}

export function NewsletterSettingsPanel({
  title,
  setTitle,
  subtitle,
  setSubtitle,
  newsletterType,
  setNewsletterType,
  wordCount,
  setWordCount,
  outputFormat,
  setOutputFormat,
  writingStyle,
  setWritingStyle,
  isGenerating,
  handleGenerateHeadline,
  sections,
  toggleSectionEnabled,
}: NewsletterSettingsPanelProps) {
  return (
    <div>
      <h2 className="text-2xl font-bold mb-4 flex items-center">
        <Settings className="mr-2 h-5 w-5" />
        Newsletter Settings
      </h2>
      <div className="space-y-4">
        <Card>
          <CardHeader>
            <CardTitle>Newsletter Settings</CardTitle>
            <CardDescription>Configure the basic settings for your newsletter.</CardDescription>
          </CardHeader>
          <CardContent className="grid gap-4">
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="title" className="text-right">
                Title
              </Label>
              <Input
                type="text"
                id="title"
                value={title}
                onChange={(e) => setTitle(e.target.value)}
                className="col-span-3"
              />
              <Button variant="outline" size="sm" onClick={handleGenerateHeadline} disabled={isGenerating}>
                {isGenerating ? (
                  <>Generating...</>
                ) : (
                  <>
                    <Sparkles className="mr-2 h-4 w-4" />
                    Generate Headline
                  </>
                )}
              </Button>
            </div>
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="subtitle" className="text-right">
                Subtitle
              </Label>
              <Input
                type="text"
                id="subtitle"
                value={subtitle}
                onChange={(e) => setSubtitle(e.target.value)}
                className="col-span-3"
              />
            </div>
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="newsletterType" className="text-right">
                Newsletter Type
              </Label>
              <Select value={newsletterType} onValueChange={setNewsletterType}>
                <SelectTrigger className="col-span-3">
                  <SelectValue placeholder="Select a newsletter type" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="daily-market-update">Daily Market Update</SelectItem>
                  <SelectItem value="weekly-investment-insights">Weekly Investment Insights</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="wordCount" className="text-right">
                Word Count
              </Label>
              <Input
                type="number"
                id="wordCount"
                value={wordCount}
                onChange={(e) => setWordCount(e.target.value)}
                className="col-span-3"
              />
            </div>
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="writingStyle" className="text-right">
                Writing Style
              </Label>
              <Select value={writingStyle} onValueChange={setWritingStyle}>
                <SelectTrigger className="col-span-3">
                  <SelectValue placeholder="Select a writing style" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="professional">Professional</SelectItem>
                  <SelectItem value="conversational">Conversational</SelectItem>
                  <SelectItem value="technical">Technical</SelectItem>
                  <SelectItem value="persuasive">Persuasive</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="outputFormat" className="text-right">
                Output Format
              </Label>
              <Select value={outputFormat} onValueChange={setOutputFormat}>
                <SelectTrigger className="col-span-3">
                  <SelectValue placeholder="Select an output format" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="html">HTML</SelectItem>
                  <SelectItem value="text">Text</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle>Section Ordering</CardTitle>
            <CardDescription>Drag and drop to reorder the sections in your newsletter.</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-2">
              {sections.map((section) => (
                <div key={section.id} className="flex items-center justify-between rounded-md border p-4">
                  <div className="flex items-center space-x-2">
                    <GripVertical className="h-4 w-4 cursor-grab" />
                    <span>{section.title}</span>
                  </div>
                  <Switch
                    id={`section-${section.id}`}
                    checked={section.enabled}
                    onCheckedChange={(checked) => toggleSectionEnabled(section.id, checked)}
                  />
                </div>
              ))}
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/newsletter/newsletter-settings.tsx" isMerged="true"
"use client"

import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"

export function NewsletterSettings({
  data = {},
  onChange = () => {},
  onGenerateHeadline = () => {},
  isGenerating = false,
}) {
  return (
    <div className="space-y-4">
      <Card>
        <CardContent className="pt-6">
          <div className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="title">Newsletter Title</Label>
              <div className="flex gap-2">
                <Input
                  id="title"
                  placeholder="Enter newsletter title"
                  value={data.title || ""}
                  onChange={(e) => onChange({ title: e.target.value })}
                />
                <Button variant="outline" onClick={onGenerateHeadline} disabled={isGenerating}>
                  {isGenerating ? "Generating..." : "Generate"}
                </Button>
              </div>
            </div>

<div className="space-y-2">
              <Label htmlFor="subtitle">Subtitle (Optional)</Label>
              <Input
                id="subtitle"
                placeholder="Enter subtitle"
                value={data.subtitle || ""}
                onChange={(e) => onChange({ subtitle: e.target.value })}
              />
            </div>

<div className="space-y-2">
              <Label htmlFor="description">Description</Label>
              <Textarea
                id="description"
                placeholder="Enter newsletter description"
                value={data.description || ""}
                onChange={(e) => onChange({ description: e.target.value })}
                rows={3}
              />
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/newsletter/newsletter-templates.tsx" isMerged="true"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Wand2 } from "lucide-react"

export function NewsletterTemplates({
  templates = [],
  selectedTemplate,
  onSelectTemplate,
  onOneClickGenerate,
  isGenerating,
}) {
  // Default templates if none provided
  const defaultTemplates = [
    {
      id: "default-template",
      name: "Standard Newsletter",
      description: "A clean, professional newsletter format with balanced text and data",
      thumbnail: "/newsletter-concept.png",
    },
    {
      id: "data-focused-template",
      name: "Data-Focused",
      description: "Emphasizes charts, tables, and data visualization with minimal narrative",
      thumbnail: "/abstract-data-flow.png",
    },
    {
      id: "narrative-template",
      name: "Narrative Style",
      description: "Story-driven format that weaves market insights into a compelling narrative",
      thumbnail: "/open-storybook.png",
    },
    {
      id: "executive-brief-template",
      name: "Executive Brief",
      description: "Concise, bullet-point heavy format designed for busy executives",
      thumbnail: "/placeholder.svg?key=1zitv",
    },
  ]

const displayTemplates = templates.length > 0 ? templates : defaultTemplates

return (
    <div className="space-y-6">
      <Card>
        <CardHeader>
          <CardTitle>Newsletter Templates</CardTitle>
          <CardDescription>Select a template for your newsletter</CardDescription>
        </CardHeader>
        <CardContent>
          <Tabs defaultValue="all" className="w-full">
            <TabsList className="mb-4">
              <TabsTrigger value="all">All Templates</TabsTrigger>
              <TabsTrigger value="recent">Recently Used</TabsTrigger>
              <TabsTrigger value="custom">Custom Templates</TabsTrigger>
            </TabsList>
            <TabsContent value="all" className="space-y-4">
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                {displayTemplates.map((template) => (
                  <Card
                    key={template.id}
                    className={`cursor-pointer transition-all hover:shadow-md ${
                      selectedTemplate === template.id ? "ring-2 ring-blue-500" : ""
                    }`}
                    onClick={() => onSelectTemplate(template.id)}
                  >
                    <div className="relative h-40 w-full overflow-hidden rounded-t-lg">
                      <img
                        src={template.thumbnail || "/placeholder.svg"}
                        alt={template.name}
                        className="object-cover w-full h-full"
                      />
                    </div>
                    <CardContent className="p-4">
                      <h3 className="font-medium text-lg">{template.name}</h3>
                      <p className="text-sm text-muted-foreground mt-1">{template.description}</p>
                    </CardContent>
                  </Card>
                ))}
              </div>
            </TabsContent>
            <TabsContent value="recent">
              <div className="flex items-center justify-center h-40 border rounded-md border-dashed">
                <p className="text-muted-foreground">No recent templates found</p>
              </div>
            </TabsContent>
            <TabsContent value="custom">
              <div className="flex items-center justify-center h-40 border rounded-md border-dashed">
                <p className="text-muted-foreground">No custom templates found</p>
              </div>
            </TabsContent>
          </Tabs>
        </CardContent>
      </Card>

<Card>
        <CardHeader>
          <CardTitle>One-Click Generation</CardTitle>
          <CardDescription>Generate a complete newsletter with a single click</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="flex flex-col items-center justify-center p-6 border rounded-md border-dashed space-y-4">
            <Wand2 className="h-12 w-12 text-blue-500" />
            <h3 className="text-lg font-medium">Magic Newsletter Generation</h3>
            <p className="text-center text-muted-foreground max-w-md">
              Let AI create a complete newsletter based on your selected template and content items. You can always edit
              the result afterward.
            </p>
            <Button
              size="lg"
              onClick={onOneClickGenerate}
              disabled={isGenerating || !selectedTemplate}
              className="mt-4"
            >
              {isGenerating ? "Generating..." : "Generate Complete Newsletter"}
            </Button>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/newsletter/prompt-recommendations-panel.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Textarea } from "@/components/ui/textarea"
import { Label } from "@/components/ui/label"
import { Sparkles, Copy, Check, RefreshCw, Lightbulb, TrendingUp, User, Globe, ChevronRight } from "lucide-react"
import { useToast } from "@/hooks/use-toast"
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
} from "@/components/ui/dialog"
import {
  generatePromptRecommendations,
  getPersonalizedRecommendations,
  type PromptRecommendation,
  type PromptRecommendationRequest,
} from "@/services/prompt-recommendation-service"

interface PromptRecommendationsPanelProps {
  moduleType: string
  currentPrompt?: string
  onSelectPrompt: (prompt: string) => void
  isOpen: boolean
  onClose: () => void
}

export function PromptRecommendationsPanel({
  moduleType,
  currentPrompt,
  onSelectPrompt,
  isOpen,
  onClose,
}: PromptRecommendationsPanelProps) {
  const { toast } = useToast()
  const [recommendations, setRecommendations] = useState<PromptRecommendation[]>([])
  const [personalizedRecommendations, setPersonalizedRecommendations] = useState<PromptRecommendation[]>([])
  const [isLoading, setIsLoading] = useState(false)
  const [isLoadingPersonalized, setIsLoadingPersonalized] = useState(false)
  const [copiedId, setCopiedId] = useState<string | null>(null)
  const [activeTab, setActiveTab] = useState("ai-powered")
  const [customContext, setCustomContext] = useState("")

const usePrompt = (prompt: string) => {
    onSelectPrompt(prompt)
    onClose()

toast({
      title: "Prompt Applied",
      description: "The selected prompt has been applied to your module.",
    })
  }

// Load recommendations when dialog opens
  useEffect(() => {
    if (isOpen && recommendations.length === 0) {
      loadRecommendations()
    }
  }, [isOpen, moduleType])

const loadRecommendations = async (context?: string) => {
    setIsLoading(true)
    try {
      const request: PromptRecommendationRequest = {
        moduleType,
        currentPrompt,
        userContext: {
          audienceLevel: "intermediate",
          newsletterType: "daily",
          focusArea: context || "general market analysis",
        },
        marketContext: {
          marketCondition: "neutral",
          volatility: "medium",
        },
      }

const newRecommendations = await generatePromptRecommendations(request)
      setRecommendations(newRecommendations)

if (newRecommendations.length > 0) {
        toast({
          title: "Recommendations Generated",
          description: `Found ${newRecommendations.length} AI-powered prompt suggestions.`,
        })
      }
    } catch (error) {
      console.error("Error loading recommendations:", error)
      toast({
        title: "Error Loading Recommendations",
        description: "Failed to generate prompt recommendations. Please try again.",
        variant: "destructive",
      })
    } finally {
      setIsLoading(false)
    }
  }

const loadPersonalizedRecommendations = async () => {
    setIsLoadingPersonalized(true)
    try {
      // Simulate user history - in a real app, this would come from user data
      const userHistory = {
        previousPrompts: [
          currentPrompt || "",
          "Analyze market trends with focus on technology sector",
          "Provide investment insights for conservative portfolios",
        ].filter(Boolean),
        preferredStyle: "detailed and data-driven",
        successfulPrompts: ["Provide detailed analysis with specific metrics and actionable insights"],
      }

const personalizedRecs = await getPersonalizedRecommendations(moduleType, userHistory)
      setPersonalizedRecommendations(personalizedRecs)

if (personalizedRecs.length > 0) {
        toast({
          title: "Personalized Recommendations Ready",
          description: `Generated ${personalizedRecs.length} recommendations based on your preferences.`,
        })
      }
    } catch (error) {
      console.error("Error loading personalized recommendations:", error)
      toast({
        title: "Error Loading Personalized Recommendations",
        description: "Failed to generate personalized suggestions. Please try again.",
        variant: "destructive",
      })
    } finally {
      setIsLoadingPersonalized(false)
    }
  }

const copyPrompt = async (prompt: string, id: string) => {
    try {
      await navigator.clipboard.writeText(prompt)
      setCopiedId(id)
      setTimeout(() => setCopiedId(null), 2000)

toast({
        title: "Prompt Copied",
        description: "The prompt has been copied to your clipboard.",
      })
    } catch (error) {
      toast({
        title: "Copy Failed",
        description: "Failed to copy prompt to clipboard.",
        variant: "destructive",
      })
    }
  }

const getDifficultyColor = (difficulty: string) => {
    switch (difficulty) {
      case "beginner":
        return "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300"
      case "intermediate":
        return "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300"
      case "advanced":
        return "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300"
      default:
        return "bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-300"
    }
  }

const RecommendationCard = ({
    rec,
    showPersonalized = false,
  }: { rec: PromptRecommendation; showPersonalized?: boolean }) => (
    <Card key={rec.id} className="dark:bg-slate-800 dark:border-slate-700">
      <CardHeader className="pb-3">
        <div className="flex justify-between items-start">
          <div className="flex-1">
            <CardTitle className="text-base flex items-center gap-2">
              {showPersonalized && <User className="h-4 w-4 text-blue-500" />}
              {rec.title}
            </CardTitle>
            <CardDescription className="mt-1">{rec.description}</CardDescription>
          </div>
          <div className="flex items-center gap-2 ml-4">
            <Badge className={getDifficultyColor(rec.difficulty)}>{rec.difficulty}</Badge>
            <Badge variant="outline">~{rec.estimatedWordCount} words</Badge>
          </div>
        </div>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="bg-slate-50 dark:bg-slate-900 p-3 rounded-md">
          <p className="text-sm font-mono leading-relaxed">{rec.prompt}</p>
        </div>

<div className="flex justify-between items-center pt-2">
          <Button variant="outline" size="sm" onClick={() => copyPrompt(rec.prompt, rec.id)} className="gap-2">
            {copiedId === rec.id ? (
              <>
                <Check className="h-4 w-4" />
                Copied
              </>
            ) : (
              <>
                <Copy className="h-4 w-4" />
                Copy
              </>
            )}
          </Button>

<Button variant="default" size="sm" onClick={() => usePrompt(rec.prompt)} className="gap-2">
            Use This Prompt
            <ChevronRight className="h-4 w-4" />
          </Button>
        </div>
      </CardContent>
    </Card>
  )

return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="sm:max-w-[900px] max-h-[90vh] dark:bg-slate-800">
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2">
            <Sparkles className="h-5 w-5 text-blue-500" />
            AI-Powered Prompt Recommendations
          </DialogTitle>
          <DialogDescription>
            Get intelligent prompt suggestions for your {moduleType.replace(/-/g, " ")} module based on current market
            conditions and best practices.
          </DialogDescription>
        </DialogHeader>

<div className="py-4">
          <Tabs value={activeTab} onValueChange={setActiveTab}>
            <TabsList className="grid w-full grid-cols-3">
              <TabsTrigger value="ai-powered" className="gap-2">
                <Sparkles className="h-4 w-4" />
                AI-Powered
              </TabsTrigger>
              <TabsTrigger value="personalized" className="gap-2">
                <User className="h-4 w-4" />
                Personalized
              </TabsTrigger>
              <TabsTrigger value="custom" className="gap-2">
                <Globe className="h-4 w-4" />
                Custom Context
              </TabsTrigger>
            </TabsList>

<TabsContent value="ai-powered" className="space-y-4 mt-6">
              <div className="flex justify-between items-center">
                <div>
                  <h3 className="text-lg font-medium">Smart Recommendations</h3>
                  <p className="text-sm text-muted-foreground">
                    AI-generated prompts optimized for current market conditions
                  </p>
                </div>
                <Button variant="outline" onClick={() => loadRecommendations()} disabled={isLoading} className="gap-2">
                  <RefreshCw className={`h-4 w-4 ${isLoading ? "animate-spin" : ""}`} />
                  Refresh
                </Button>
              </div>

{isLoading ? (
                <div className="flex justify-center py-12">
                  <div className="text-center">
                    <div className="animate-spin h-8 w-8 border-2 border-primary border-t-transparent rounded-full mx-auto mb-4"></div>
                    <p className="text-muted-foreground">Generating AI recommendations...</p>
                  </div>
                </div>
              ) : recommendations.length > 0 ? (
                <div className="space-y-4 max-h-[500px] overflow-y-auto">
                  {recommendations.map((rec) => (
                    <RecommendationCard key={rec.id} rec={rec} />
                  ))}
                </div>
              ) : (
                <div className="text-center py-12">
                  <Lightbulb className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
                  <p className="text-muted-foreground">
                    No recommendations available. Click "Refresh" to generate new suggestions.
                  </p>
                </div>
              )}
            </TabsContent>

<TabsContent value="personalized" className="space-y-4 mt-6">
              <div className="flex justify-between items-center">
                <div>
                  <h3 className="text-lg font-medium">Personalized for You</h3>
                  <p className="text-sm text-muted-foreground">
                    Recommendations based on your writing style and preferences
                  </p>
                </div>
                <Button
                  variant="outline"
                  onClick={loadPersonalizedRecommendations}
                  disabled={isLoadingPersonalized}
                  className="gap-2"
                >
                  <TrendingUp className={`h-4 w-4 ${isLoadingPersonalized ? "animate-spin" : ""}`} />
                  Generate
                </Button>
              </div>

{isLoadingPersonalized ? (
                <div className="flex justify-center py-12">
                  <div className="text-center">
                    <div className="animate-spin h-8 w-8 border-2 border-primary border-t-transparent rounded-full mx-auto mb-4"></div>
                    <p className="text-muted-foreground">Analyzing your preferences...</p>
                  </div>
                </div>
              ) : personalizedRecommendations.length > 0 ? (
                <div className="space-y-4 max-h-[500px] overflow-y-auto">
                  {personalizedRecommendations.map((rec) => (
                    <RecommendationCard key={rec.id} rec={rec} showPersonalized />
                  ))}
                </div>
              ) : (
                <div className="text-center py-12">
                  <User className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
                  <p className="text-muted-foreground mb-4">
                    Get personalized recommendations based on your writing history and preferences.
                  </p>
                  <Button onClick={loadPersonalizedRecommendations} disabled={isLoadingPersonalized}>
                    Generate Personalized Recommendations
                  </Button>
                </div>
              )}
            </TabsContent>

<TabsContent value="custom" className="space-y-4 mt-6">
              <div>
                <h3 className="text-lg font-medium">Custom Context</h3>
                <p className="text-sm text-muted-foreground mb-4">
                  Provide specific context to get tailored prompt recommendations
                </p>
              </div>

<div className="space-y-4">
                <div>
                  <Label htmlFor="custom-context">Context & Requirements</Label>
                  <Textarea
                    id="custom-context"
                    value={customContext}
                    onChange={(e) => setCustomContext(e.target.value)}
                    placeholder="Describe your specific needs, audience, focus areas, or any special requirements for this module..."
                    className="min-h-[100px] mt-2"
                  />
                  <p className="text-xs text-muted-foreground mt-2">
                    Example: "Focus on ESG investing for millennial investors, include specific sustainability metrics"
                  </p>
                </div>

<Button
                  onClick={() => loadRecommendations(customContext)}
                  disabled={isLoading || !customContext.trim()}
                  className="w-full gap-2"
                >
                  <Sparkles className={`h-4 w-4 ${isLoading ? "animate-spin" : ""}`} />
                  Generate Custom Recommendations
                </Button>

{recommendations.length > 0 && customContext && (
                  <div className="space-y-4 max-h-[400px] overflow-y-auto">
                    {recommendations.map((rec) => (
                      <RecommendationCard key={rec.id} rec={rec} />
                    ))}
                  </div>
                )}
              </div>
            </TabsContent>
          </Tabs>
        </div>

<DialogFooter>
          <Button variant="outline" onClick={onClose}>
            Close
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescriptreact:file="components/newsletter/prompt-template-library.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
} from "@/components/ui/dialog"
import {
  Search,
  Star,
  Users,
  Copy,
  Check,
  Eye,
  Settings,
  Filter,
  BookOpen,
  TrendingUp,
  Target,
  PieChart,
  BarChart3,
  Activity,
  Leaf,
  Calculator,
  GraduationCap,
  ChevronRight,
  Sparkles,
} from "lucide-react"
import { useToast } from "@/hooks/use-toast"
import {
  searchTemplates,
  getPopularTemplates,
  processTemplate,
  TEMPLATE_CATEGORIES,
  type PromptTemplate,
  type PromptCategory,
} from "@/services/prompt-template-library-service"

interface PromptTemplateLibraryProps {
  moduleType?: string
  onSelectTemplate: (prompt: string) => void
  isOpen: boolean
  onClose: () => void
}

const categoryIcons = {
  TrendingUp,
  Target,
  PieChart,
  BarChart3,
  Activity,
  Leaf,
  Calculator,
  GraduationCap,
}

export function PromptTemplateLibrary({ moduleType, onSelectTemplate, isOpen, onClose }: PromptTemplateLibraryProps) {
  const { toast } = useToast()
  const [searchQuery, setSearchQuery] = useState("")
  const [selectedCategory, setSelectedCategory] = useState("all")
  const [selectedDifficulty, setSelectedDifficulty] = useState("all")
  const [selectedTags, setSelectedTags] = useState<string[]>([])
  const [templates, setTemplates] = useState<PromptTemplate[]>([])
  const [popularTemplates, setPopularTemplates] = useState<PromptTemplate[]>([])
  const [selectedTemplate, setSelectedTemplate] = useState<PromptTemplate | null>(null)
  const [templateDialogOpen, setTemplateDialogOpen] = useState(false)
  const [customizationDialogOpen, setCustomizationDialogOpen] = useState(false)
  const [templateVariables, setTemplateVariables] = useState<Record<string, string>>({})
  const [copiedId, setCopiedId] = useState<string | null>(null)
  const [activeTab, setActiveTab] = useState("browse")

// Load templates on mount and when filters change
  useEffect(() => {
    const filtered = searchTemplates(searchQuery, selectedCategory, selectedDifficulty, moduleType, selectedTags)
    setTemplates(filtered)
  }, [searchQuery, selectedCategory, selectedDifficulty, moduleType, selectedTags])

// Load popular templates
  useEffect(() => {
    setPopularTemplates(getPopularTemplates(6))
  }, [])

const handleTemplateSelect = (template: PromptTemplate) => {
    setSelectedTemplate(template)

// Initialize variables with default values
    const initialVariables: Record<string, string> = {}
    if (template.variables) {
      template.variables.forEach((variable) => {
        initialVariables[variable.name] = variable.defaultValue
      })
    }
    setTemplateVariables(initialVariables)

// If template has variables, open customization dialog
    if (template.variables && template.variables.length > 0) {
      setCustomizationDialogOpen(true)
    } else {
      // Use template directly
      onSelectTemplate(template.prompt)
      onClose()
      toast({
        title: "Template Applied",
        description: `"${template.title}" has been applied to your module.`,
      })
    }
  }

const handleTemplateCustomize = () => {
    if (!selectedTemplate) return

const processedPrompt = processTemplate(selectedTemplate, templateVariables)
    onSelectTemplate(processedPrompt)
    onClose()
    setCustomizationDialogOpen(false)

toast({
      title: "Customized Template Applied",
      description: `"${selectedTemplate.title}" has been customized and applied to your module.`,
    })
  }

const copyTemplate = async (template: PromptTemplate) => {
    try {
      await navigator.clipboard.writeText(template.prompt)
      setCopiedId(template.id)
      setTimeout(() => setCopiedId(null), 2000)

toast({
        title: "Template Copied",
        description: "The template has been copied to your clipboard.",
      })
    } catch (error) {
      toast({
        title: "Copy Failed",
        description: "Failed to copy template to clipboard.",
        variant: "destructive",
      })
    }
  }

const viewTemplate = (template: PromptTemplate) => {
    setSelectedTemplate(template)
    setTemplateDialogOpen(true)
  }

const TemplateCard = ({ template }: { template: PromptTemplate }) => (
    <Card className="dark:bg-slate-800 dark:border-slate-700 hover:shadow-lg transition-shadow">
      <CardHeader className="pb-3">
        <div className="flex justify-between items-start">
          <div className="flex-1">
            <CardTitle className="text-base mb-2">{template.title}</CardTitle>
            <CardDescription className="text-sm">{template.description}</CardDescription>
          </div>
          <div className="flex items-center gap-2 ml-4">
            <Badge className={getDifficultyColor(template.difficulty)}>{template.difficulty}</Badge>
            <Badge variant="outline">~{template.estimatedWordCount}w</Badge>
          </div>
        </div>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="flex items-center gap-4 text-sm text-muted-foreground">
          <div className="flex items-center gap-1">
            <Star className="h-4 w-4 fill-yellow-400 text-yellow-400" />
            <span>{template.rating}</span>
          </div>
          <div className="flex items-center gap-1">
            <Users className="h-4 w-4" />
            <span>{template.usageCount.toLocaleString()}</span>
          </div>
          <div className="flex items-center gap-1">
            <span>by {template.author}</span>
          </div>
        </div>

<div className="flex flex-wrap gap-1">
          {template.tags.slice(0, 4).map((tag) => (
            <Badge key={tag} variant="secondary" className="text-xs">
              {tag}
            </Badge>
          ))}
          {template.tags.length > 4 && (
            <Badge variant="secondary" className="text-xs">
              +{template.tags.length - 4} more
            </Badge>
          )}
        </div>

<div className="flex justify-between items-center pt-2">
          <div className="flex gap-2">
            <Button variant="outline" size="sm" onClick={() => viewTemplate(template)} className="gap-2">
              <Eye className="h-4 w-4" />
              Preview
            </Button>
            <Button variant="outline" size="sm" onClick={() => copyTemplate(template)} className="gap-2">
              {copiedId === template.id ? (
                <>
                  <Check className="h-4 w-4" />
                  Copied
                </>
              ) : (
                <>
                  <Copy className="h-4 w-4" />
                  Copy
                </>
              )}
            </Button>
          </div>

<Button variant="default" size="sm" onClick={() => handleTemplateSelect(template)} className="gap-2">
            Use Template
            <ChevronRight className="h-4 w-4" />
          </Button>
        </div>
      </CardContent>
    </Card>
  )

const CategoryCard = ({ category }: { category: PromptCategory }) => {
    const IconComponent = categoryIcons[category.icon as keyof typeof categoryIcons]

return (
      <Card
        className="dark:bg-slate-800 dark:border-slate-700 hover:shadow-lg transition-shadow cursor-pointer"
        onClick={() => {
          setSelectedCategory(category.id)
          setActiveTab("browse")
        }}
      >
        <CardHeader className="text-center">
          <div className="mx-auto mb-2 p-3 bg-primary/10 rounded-full w-fit">
            <IconComponent className="h-6 w-6 text-primary" />
          </div>
          <CardTitle className="text-lg">{category.name}</CardTitle>
          <CardDescription>{category.description}</CardDescription>
        </CardHeader>
        <CardContent className="text-center">
          <Badge variant="outline">{category.templateCount} templates</Badge>
        </CardContent>
      </Card>
    )
  }

return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="sm:max-w-[1200px] max-h-[90vh] dark:bg-slate-800">
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2">
            <BookOpen className="h-5 w-5 text-blue-500" />
            Prompt Template Library
          </DialogTitle>
          <DialogDescription>
            Browse and customize proven prompt templates for your newsletter modules
          </DialogDescription>
        </DialogHeader>

<div className="py-4">
          <Tabs value={activeTab} onValueChange={setActiveTab}>
            <TabsList className="grid w-full grid-cols-3">
              <TabsTrigger value="popular" className="gap-2">
                <Star className="h-4 w-4" />
                Popular
              </TabsTrigger>
              <TabsTrigger value="categories" className="gap-2">
                <Filter className="h-4 w-4" />
                Categories
              </TabsTrigger>
              <TabsTrigger value="browse" className="gap-2">
                <Search className="h-4 w-4" />
                Browse All
              </TabsTrigger>
            </TabsList>

<TabsContent value="popular" className="space-y-4 mt-6">
              <div>
                <h3 className="text-lg font-medium mb-4">Most Popular Templates</h3>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4 max-h-[500px] overflow-y-auto">
                  {popularTemplates.map((template) => (
                    <TemplateCard key={template.id} template={template} />
                  ))}
                </div>
              </div>
            </TabsContent>

<TabsContent value="categories" className="space-y-4 mt-6">
              <div>
                <h3 className="text-lg font-medium mb-4">Browse by Category</h3>
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 max-h-[500px] overflow-y-auto">
                  {TEMPLATE_CATEGORIES.map((category) => (
                    <CategoryCard key={category.id} category={category} />
                  ))}
                </div>
              </div>
            </TabsContent>

<TabsContent value="browse" className="space-y-4 mt-6">
              {/* Search and Filter Controls */}
              <div className="space-y-4 p-4 bg-slate-50 dark:bg-slate-900 rounded-lg">
                <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
                  <div>
                    <Label htmlFor="search">Search Templates</Label>
                    <Input
                      id="search"
                      placeholder="Search by title, description, or tags..."
                      value={searchQuery}
                      onChange={(e) => setSearchQuery(e.target.value)}
                      className="mt-1"
                    />
                  </div>
                  <div>
                    <Label htmlFor="category">Category</Label>
                    <Select value={selectedCategory} onValueChange={setSelectedCategory}>
                      <SelectTrigger className="mt-1">
                        <SelectValue placeholder="All categories" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="all">All Categories</SelectItem>
                        {TEMPLATE_CATEGORIES.map((category) => (
                          <SelectItem key={category.id} value={category.id}>
                            {category.name}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>
                  <div>
                    <Label htmlFor="difficulty">Difficulty</Label>
                    <Select value={selectedDifficulty} onValueChange={setSelectedDifficulty}>
                      <SelectTrigger className="mt-1">
                        <SelectValue placeholder="All levels" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="all">All Levels</SelectItem>
                        <SelectItem value="beginner">Beginner</SelectItem>
                        <SelectItem value="intermediate">Intermediate</SelectItem>
                        <SelectItem value="advanced">Advanced</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                  <div className="flex items-end">
                    <Button
                      variant="outline"
                      onClick={() => {
                        setSearchQuery("")
                        setSelectedCategory("all")
                        setSelectedDifficulty("all")
                        setSelectedTags([])
                      }}
                      className="w-full"
                    >
                      Clear Filters
                    </Button>
                  </div>
                </div>
              </div>

{/* Results */}
              <div>
                <div className="flex justify-between items-center mb-4">
                  <h3 className="text-lg font-medium">
                    {templates.length} Template{templates.length !== 1 ? "s" : ""} Found
                  </h3>
                  {moduleType && <Badge variant="outline">Filtered for: {moduleType.replace(/-/g, " ")}</Badge>}
                </div>

{templates.length > 0 ? (
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4 max-h-[500px] overflow-y-auto">
                    {templates.map((template) => (
                      <TemplateCard key={template.id} template={template} />
                    ))}
                  </div>
                ) : (
                  <div className="text-center py-12">
                    <Search className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
                    <p className="text-muted-foreground">
                      No templates found matching your criteria. Try adjusting your filters.
                    </p>
                  </div>
                )}
              </div>
            </TabsContent>
          </Tabs>
        </div>

<DialogFooter>
          <Button variant="outline" onClick={onClose}>
            Close
          </Button>
        </DialogFooter>
      </DialogContent>

{/* Template Preview Dialog */}
      <Dialog open={templateDialogOpen} onOpenChange={setTemplateDialogOpen}>
        <DialogContent className="sm:max-w-[800px] max-h-[90vh] dark:bg-slate-800">
          <DialogHeader>
            <DialogTitle>{selectedTemplate?.title}</DialogTitle>
            <DialogDescription>{selectedTemplate?.description}</DialogDescription>
          </DialogHeader>

{selectedTemplate && (
            <div className="py-4 space-y-4">
              <div className="flex items-center gap-4 text-sm">
                <Badge className={getDifficultyColor(selectedTemplate.difficulty)}>{selectedTemplate.difficulty}</Badge>
                <Badge variant="outline">~{selectedTemplate.estimatedWordCount} words</Badge>
                <div className="flex items-center gap-1">
                  <Star className="h-4 w-4 fill-yellow-400 text-yellow-400" />
                  <span>{selectedTemplate.rating}</span>
                </div>
                <div className="flex items-center gap-1">
                  <Users className="h-4 w-4" />
                  <span>{selectedTemplate.usageCount.toLocaleString()}</span>
                </div>
              </div>

<div className="flex flex-wrap gap-1">
                {selectedTemplate.tags.map((tag) => (
                  <Badge key={tag} variant="secondary" className="text-xs">
                    {tag}
                  </Badge>
                ))}
              </div>

<div className="bg-slate-50 dark:bg-slate-900 p-4 rounded-md max-h-[400px] overflow-y-auto">
                <h4 className="font-medium mb-2">Template Content:</h4>
                <pre className="text-sm whitespace-pre-wrap font-mono">{selectedTemplate.prompt}</pre>
              </div>

{selectedTemplate.variables && selectedTemplate.variables.length > 0 && (
                <div>
                  <h4 className="font-medium mb-2">Customizable Variables:</h4>
                  <div className="space-y-2">
                    {selectedTemplate.variables.map((variable) => (
                      <div key={variable.name} className="text-sm">
                        <span className="font-medium">{variable.name}</span>: {variable.description}
                        {variable.defaultValue && (
                          <span className="text-muted-foreground"> (default: {variable.defaultValue})</span>
                        )}
                      </div>
                    ))}
                  </div>
                </div>
              )}

{selectedTemplate.examples && selectedTemplate.examples.length > 0 && (
                <div>
                  <h4 className="font-medium mb-2">Example Output:</h4>
                  <div className="bg-slate-50 dark:bg-slate-900 p-3 rounded-md text-sm">
                    {selectedTemplate.examples[0].sampleOutput}
                  </div>
                </div>
              )}
            </div>
          )}

<DialogFooter>
            <Button variant="outline" onClick={() => setTemplateDialogOpen(false)}>
              Close
            </Button>
            <Button
              onClick={() => {
                setTemplateDialogOpen(false)
                if (selectedTemplate) {
                  handleTemplateSelect(selectedTemplate)
                }
              }}
            >
              Use This Template
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

{/* Template Customization Dialog */}
      <Dialog open={customizationDialogOpen} onOpenChange={setCustomizationDialogOpen}>
        <DialogContent className="sm:max-w-[700px] max-h-[90vh] dark:bg-slate-800">
          <DialogHeader>
            <DialogTitle className="flex items-center gap-2">
              <Settings className="h-5 w-5" />
              Customize Template: {selectedTemplate?.title}
            </DialogTitle>
            <DialogDescription>Customize the template variables to fit your specific needs</DialogDescription>
          </DialogHeader>

{selectedTemplate && (
            <div className="py-4 space-y-4 max-h-[500px] overflow-y-auto">
              {selectedTemplate.variables?.map((variable) => (
                <div key={variable.name} className="space-y-2">
                  <Label htmlFor={variable.name}>
                    {variable.name.replace(/([A-Z])/g, " $1").replace(/^./, (str) => str.toUpperCase())}
                    {variable.required && <span className="text-red-500 ml-1">*</span>}
                  </Label>

{variable.type === "select" && variable.options ? (
                    <Select
                      value={templateVariables[variable.name] || variable.defaultValue}
                      onValueChange={(value) =>
                        setTemplateVariables((prev) => ({
                          ...prev,
                          [variable.name]: value,
                        }))
                      }
                    >
                      <SelectTrigger>
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        {variable.options.map((option) => (
                          <SelectItem key={option} value={option}>
                            {option}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  ) : variable.type === "number" ? (
                    <Input
                      id={variable.name}
                      type="number"
                      value={templateVariables[variable.name] || variable.defaultValue}
                      onChange={(e) =>
                        setTemplateVariables((prev) => ({
                          ...prev,
                          [variable.name]: e.target.value,
                        }))
                      }
                    />
                  ) : (
                    <Input
                      id={variable.name}
                      value={templateVariables[variable.name] || variable.defaultValue}
                      onChange={(e) =>
                        setTemplateVariables((prev) => ({
                          ...prev,
                          [variable.name]: e.target.value,
                        }))
                      }
                    />
                  )}

<p className="text-xs text-muted-foreground">{variable.description}</p>
                </div>
              ))}

<div className="mt-6">
                <Label>Preview:</Label>
                <div className="bg-slate-50 dark:bg-slate-900 p-3 rounded-md mt-2 max-h-[200px] overflow-y-auto">
                  <pre className="text-xs whitespace-pre-wrap">
                    {processTemplate(selectedTemplate, templateVariables)}
                  </pre>
                </div>
              </div>
            </div>
          )}

<DialogFooter>
            <Button variant="outline" onClick={() => setCustomizationDialogOpen(false)}>
              Cancel
            </Button>
            <Button onClick={handleTemplateCustomize} className="gap-2">
              <Sparkles className="h-4 w-4" />
              Apply Customized Template
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </Dialog>
  )
}
[V0_FILE]typescriptreact:file="components/newsletter/publish-dialog.tsx" isMerged="true"
"use client"

import { DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"
import { Send } from "lucide-react"

interface PublishDialogProps {
  publishAsDraft: boolean
  setPublishAsDraft: (isDraft: boolean) => void
  makePublic: boolean
  setMakePublic: (isPublic: boolean) => void
  sendNewsletterBroadcast: () => void
  isSending: boolean
  setPublishDialogOpen: (isOpen: boolean) => void
}

export function PublishDialog({
  publishAsDraft,
  setPublishAsDraft,
  makePublic,
  setMakePublic,
  sendNewsletterBroadcast,
  isSending,
  setPublishDialogOpen,
}: PublishDialogProps) {
  return (
    <DialogContent>
      <DialogHeader>
        <DialogTitle>Publish Newsletter</DialogTitle>
        <DialogDescription>Choose how you want to publish your newsletter.</DialogDescription>
      </DialogHeader>
      <div className="space-y-4">
        <div className="space-y-2">
          <Label htmlFor="publishAsDraft">Publish as Draft</Label>
          <Switch id="publishAsDraft" checked={publishAsDraft} onCheckedChange={setPublishAsDraft} />
          <p className="text-sm text-gray-500">Save to Kit as a draft (recommended for review before publishing)</p>
        </div>
        <div className="space-y-2">
          <Label htmlFor="makePublic">Make Public</Label>
          <Switch id="makePublic" checked={makePublic} onCheckedChange={setMakePublic} />
          <p className="text-sm text-gray-500">Make this newsletter publicly accessible</p>
        </div>
        <div className="flex space-x-2 mt-4">
          <Button variant="outline" size="sm" onClick={() => setPublishDialogOpen(false)}>
            Cancel
          </Button>
          <Button
            variant="default"
            size="sm"
            onClick={sendNewsletterBroadcast}
            disabled={isSending}
            className="bg-green-600 hover:bg-green-700 text-white"
          >
            {isSending ? (
              <>Sending...</>
            ) : (
              <>
                <Send className="mr-2 h-4 w-4" />
                Publish to Kit
              </>
            )}
          </Button>
        </div>
      </div>
    </DialogContent>
  )
}
[V0_FILE]typescriptreact:file="components/newsletter/related-news.tsx" isMerged="true"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Plus, X, Search, ExternalLink } from "lucide-react"
import { useState } from "react"
import type { RelatedNewsProps } from "./types"

export function RelatedNews({ relatedNewsItems, onAddNewsItem, onRemoveNewsItem, onOpenNewsSearch }: RelatedNewsProps) {
  const [newItem, setNewItem] = useState({
    title: "",
    source: "",
    url: "",
    date: new Date().toISOString().split("T")[0],
  })

const handleAddManually = () => {
    if (newItem.title && newItem.source && newItem.url) {
      onAddNewsItem(newItem)
      setNewItem({
        title: "",
        source: "",
        url: "",
        date: new Date().toISOString().split("T")[0],
      })
    }
  }

return (
    <Card>
      <CardHeader>
        <CardTitle>Related News</CardTitle>
        <CardDescription>Add related news articles to your newsletter</CardDescription>
      </CardHeader>
      <CardContent className="space-y-6">
        <Button variant="outline" className="w-full" onClick={onOpenNewsSearch}>
          <Search className="h-4 w-4 mr-2" />
          Search for News Articles
        </Button>

<div className="space-y-4">
          <h3 className="text-sm font-medium">Add News Item Manually</h3>
          <div className="space-y-3">
            <div>
              <Label htmlFor="news-title">Article Title</Label>
              <Input
                id="news-title"
                value={newItem.title}
                onChange={(e) => setNewItem({ ...newItem, title: e.target.value })}
                placeholder="Enter article title"
              />
            </div>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
              <div>
                <Label htmlFor="news-source">Source</Label>
                <Input
                  id="news-source"
                  value={newItem.source}
                  onChange={(e) => setNewItem({ ...newItem, source: e.target.value })}
                  placeholder="e.g., Bloomberg, CNBC"
                />
              </div>
              <div>
                <Label htmlFor="news-date">Date</Label>
                <Input
                  id="news-date"
                  type="date"
                  value={newItem.date}
                  onChange={(e) => setNewItem({ ...newItem, date: e.target.value })}
                />
              </div>
            </div>
            <div>
              <Label htmlFor="news-url">Article URL</Label>
              <Input
                id="news-url"
                value={newItem.url}
                onChange={(e) => setNewItem({ ...newItem, url: e.target.value })}
                placeholder="https://..."
              />
            </div>
            <Button onClick={handleAddManually} disabled={!newItem.title || !newItem.source || !newItem.url}>
              <Plus className="h-4 w-4 mr-2" />
              Add News Item
            </Button>
          </div>
        </div>

<div className="space-y-3">
          <h3 className="text-sm font-medium">Current News Items ({relatedNewsItems.length})</h3>
          {relatedNewsItems.length === 0 ? (
            <div className="flex items-center justify-center h-20 border rounded-md border-dashed">
              <p className="text-muted-foreground">No news items added yet</p>
            </div>
          ) : (
            <div className="space-y-2">
              {relatedNewsItems.map((item) => (
                <div
                  key={item.id}
                  className="flex items-start justify-between p-3 border rounded-md hover:bg-gray-50 dark:hover:bg-gray-800"
                >
                  <div className="space-y-1">
                    <div className="font-medium">{item.title}</div>
                    <div className="text-sm text-muted-foreground">
                      {item.source} • {new Date(item.date).toLocaleDateString()}
                    </div>
                    <a
                      href={item.url}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="text-xs text-blue-600 hover:underline flex items-center"
                    >
                      <ExternalLink className="h-3 w-3 mr-1" />
                      View Article
                    </a>
                  </div>
                  <Button variant="ghost" size="icon" onClick={() => onRemoveNewsItem(item.id)}>
                    <X className="h-4 w-4" />
                  </Button>
                </div>
              ))}
            </div>
          )}
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/newsletter/research-assistant-panel.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Textarea } from "@/components/ui/textarea"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Search, BookOpen, Plus, ExternalLink, Loader2 } from "lucide-react"
import {
  conductResearch,
  saveCitation,
  type ResearchResult,
  type Citation,
} from "@/services/research-assistant-service"
import { toast } from "@/hooks/use-toast"
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"

interface ResearchAssistantPanelProps {
  onAddToContent?: (content: string) => void
  contentId?: string
}

export function ResearchAssistantPanel({ onAddToContent, contentId }: ResearchAssistantPanelProps) {
  const [searchQuery, setSearchQuery] = useState("")
  const [researchResults, setResearchResults] = useState<ResearchResult | null>(null)
  const [isResearching, setIsResearching] = useState(false)
  const [citations, setCitations] = useState<Citation[]>([])
  const [newCitation, setNewCitation] = useState({
    sourceTitle: "",
    sourceUrl: "",
    author: "",
    notes: "",
  })
  const [showAddCitation, setShowAddCitation] = useState(false)

const handleResearch = async () => {
    if (!searchQuery.trim()) return

setIsResearching(true)
    try {
      const result = await conductResearch({
        topic: searchQuery,
        depth: "detailed",
      })
      setResearchResults(result)
      toast({
        title: "Research Complete",
        description: `Found ${result.keyPoints.length} key points and ${result.sources.length} sources`,
      })
    } catch (error) {
      console.error("Research failed:", error)
      toast({
        title: "Research Failed",
        description: "Could not complete research. Please try again.",
        variant: "destructive",
      })
    } finally {
      setIsResearching(false)
    }
  }

const handleAddToContent = (content: string) => {
    if (onAddToContent) {
      onAddToContent(content)
      toast({
        title: "Added to Content",
        description: "Research content has been added to your newsletter",
      })
    }
  }

const handleSaveCitation = async () => {
    if (!newCitation.sourceTitle || !contentId) return

try {
      const citation = await saveCitation({
        contentId,
        sourceTitle: newCitation.sourceTitle,
        sourceUrl: newCitation.sourceUrl,
        sourceType: "article",
        author: newCitation.author,
        dateAccessed: new Date().toISOString(),
        notes: newCitation.notes,
      })

setCitations([citation, ...citations])
      setNewCitation({ sourceTitle: "", sourceUrl: "", author: "", notes: "" })
      setShowAddCitation(false)

toast({
        title: "Citation Saved",
        description: "Citation has been added to your content",
      })
    } catch (error) {
      console.error("Error saving citation:", error)
      toast({
        title: "Error",
        description: "Could not save citation",
        variant: "destructive",
      })
    }
  }

return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <BookOpen className="h-5 w-5" />
          Research Assistant
        </CardTitle>
      </CardHeader>
      <CardContent>
        <Tabs defaultValue="research" className="w-full">
          <TabsList className="grid w-full grid-cols-2">
            <TabsTrigger value="research">Research</TabsTrigger>
            <TabsTrigger value="citations">Citations</TabsTrigger>
          </TabsList>

<TabsContent value="research" className="space-y-4">
            <div className="flex gap-2">
              <Input
                placeholder="Enter research topic..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                onKeyPress={(e) => e.key === "Enter" && handleResearch()}
              />
              <Button onClick={handleResearch} disabled={isResearching || !searchQuery.trim()}>
                {isResearching ? <Loader2 className="h-4 w-4 animate-spin" /> : <Search className="h-4 w-4" />}
              </Button>
            </div>

{researchResults && (
              <div className="space-y-4">
                <div className="bg-blue-50 dark:bg-blue-900/30 p-4 rounded-lg">
                  <div className="flex justify-between items-start mb-2">
                    <h4 className="font-medium">Research Summary</h4>
                    <Button size="sm" variant="outline" onClick={() => handleAddToContent(researchResults.summary)}>
                      <Plus className="h-4 w-4 mr-1" />
                      Add
                    </Button>
                  </div>
                  <p className="text-sm text-gray-700 dark:text-gray-300">{researchResults.summary}</p>
                </div>

{researchResults.keyPoints.length > 0 && (
                  <Collapsible>
                    <CollapsibleTrigger asChild>
                      <Button variant="outline" className="w-full">
                        Key Points ({researchResults.keyPoints.length})
                      </Button>
                    </CollapsibleTrigger>
                    <CollapsibleContent className="space-y-2 mt-2">
                      {researchResults.keyPoints.map((point, index) => (
                        <div
                          key={index}
                          className="flex justify-between items-start p-3 bg-gray-50 dark:bg-gray-800 rounded-lg"
                        >
                          <p className="text-sm flex-1">{point}</p>
                          <Button size="sm" variant="ghost" onClick={() => handleAddToContent(point)}>
                            <Plus className="h-4 w-4" />
                          </Button>
                        </div>
                      ))}
                    </CollapsibleContent>
                  </Collapsible>
                )}

{researchResults.sources.length > 0 && (
                  <Collapsible>
                    <CollapsibleTrigger asChild>
                      <Button variant="outline" className="w-full">
                        Sources ({researchResults.sources.length})
                      </Button>
                    </CollapsibleTrigger>
                    <CollapsibleContent className="space-y-2 mt-2">
                      {researchResults.sources.map((source) => (
                        <div key={source.id} className="p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
                          <div className="flex justify-between items-start mb-1">
                            <h5 className="font-medium text-sm">{source.title}</h5>
                            <Badge variant="secondary" className="text-xs">
                              {source.type}
                            </Badge>
                          </div>
                          <p className="text-xs text-gray-600 dark:text-gray-400 mb-2">{source.summary}</p>
                          {source.author && <p className="text-xs text-gray-500">By {source.author}</p>}
                        </div>
                      ))}
                    </CollapsibleContent>
                  </Collapsible>
                )}

{researchResults.relatedTopics.length > 0 && (
                  <div>
                    <h4 className="font-medium mb-2">Related Topics</h4>
                    <div className="flex flex-wrap gap-2">
                      {researchResults.relatedTopics.map((topic, index) => (
                        <Button
                          key={index}
                          variant="outline"
                          size="sm"
                          onClick={() => {
                            setSearchQuery(topic)
                            handleResearch()
                          }}
                        >
                          {topic}
                        </Button>
                      ))}
                    </div>
                  </div>
                )}
              </div>
            )}
          </TabsContent>

<TabsContent value="citations" className="space-y-4">
            <div className="flex justify-between items-center">
              <h4 className="font-medium">Manage Citations</h4>
              <Button size="sm" onClick={() => setShowAddCitation(!showAddCitation)}>
                <Plus className="h-4 w-4 mr-1" />
                Add Citation
              </Button>
            </div>

{showAddCitation && (
              <div className="space-y-3 p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
                <Input
                  placeholder="Source title"
                  value={newCitation.sourceTitle}
                  onChange={(e) => setNewCitation({ ...newCitation, sourceTitle: e.target.value })}
                />
                <Input
                  placeholder="Source URL (optional)"
                  value={newCitation.sourceUrl}
                  onChange={(e) => setNewCitation({ ...newCitation, sourceUrl: e.target.value })}
                />
                <Input
                  placeholder="Author (optional)"
                  value={newCitation.author}
                  onChange={(e) => setNewCitation({ ...newCitation, author: e.target.value })}
                />
                <Textarea
                  placeholder="Notes (optional)"
                  value={newCitation.notes}
                  onChange={(e) => setNewCitation({ ...newCitation, notes: e.target.value })}
                />
                <div className="flex gap-2">
                  <Button onClick={handleSaveCitation} disabled={!newCitation.sourceTitle}>
                    Save Citation
                  </Button>
                  <Button variant="outline" onClick={() => setShowAddCitation(false)}>
                    Cancel
                  </Button>
                </div>
              </div>
            )}

{citations.length > 0 && (
              <div className="space-y-2">
                {citations.map((citation) => (
                  <div key={citation.id} className="p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
                    <div className="flex justify-between items-start">
                      <div className="flex-1">
                        <h5 className="font-medium text-sm">{citation.sourceTitle}</h5>
                        {citation.author && (
                          <p className="text-xs text-gray-600 dark:text-gray-400">By {citation.author}</p>
                        )}
                        {citation.notes && <p className="text-xs text-gray-500 mt-1">{citation.notes}</p>}
                      </div>
                      {citation.sourceUrl && (
                        <Button size="sm" variant="ghost" asChild>
                          <a href={citation.sourceUrl} target="_blank" rel="noopener noreferrer">
                            <ExternalLink className="h-4 w-4" />
                          </a>
                        </Button>
                      )}
                    </div>
                  </div>
                ))}
              </div>
            )}

{citations.length === 0 && (
              <div className="text-center py-8 text-gray-500">
                <BookOpen className="h-12 w-12 mx-auto mb-2 opacity-50" />
                <p>No citations added yet</p>
              </div>
            )}
          </TabsContent>
        </Tabs>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/newsletter/use-content-modules.ts" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useCallback } from "react"
import { v4 as uuidv4 } from "uuid"
import type { ContentModule } from "./types"

export function useContentModules() {
  const [selectedModules, setSelectedModules] = useState<ContentModule[]>([])
  const [modules, setModules] = useState<ContentModule[]>([
    {
      id: "market-analysis",
      type: "marketAnalysis",
      title: "Market Analysis",
      content: "Analysis of current market conditions and trends.",
      prompt:
        "Generate a comprehensive market analysis for an investment newsletter. Include current market conditions, key trends, and notable market movements. Focus on major indices, sectors showing strength or weakness, and any significant economic indicators affecting the markets. Provide context and insights that would be valuable for investors.",
    },
    {
      id: "stock-spotlight",
      type: "stockSpotlight",
      title: "Stock Spotlight",
      content: "Detailed analysis of featured stocks.",
      prompt:
        "Create a detailed stock spotlight section for an investment newsletter. Focus on 2-3 notable stocks that deserve investor attention. For each stock, include current performance, recent developments, key metrics (P/E ratio, growth rate, etc.), and future outlook. Explain why these stocks are noteworthy and what investors should watch for.",
    },
    {
      id: "economic-outlook",
      type: "economicOutlook",
      title: "Economic Outlook",
      content: "Forecast of economic conditions and implications for investors.",
      prompt:
        "Generate an economic outlook section for an investment newsletter. Analyze current economic conditions, upcoming economic events or data releases, and their potential impact on markets. Include perspectives on inflation, interest rates, employment, and GDP growth. Conclude with implications for different asset classes and investment strategies.",
    },
    {
      id: "sector-performance",
      type: "sectorPerformance",
      title: "Sector Performance",
      content: "Analysis of how different market sectors are performing.",
      prompt:
        "Create a sector performance analysis for an investment newsletter. Identify the best and worst performing sectors in the current market. Explain the factors driving each sector's performance, notable companies within each sector, and whether the trends are likely to continue. Provide specific insights that would help investors make sector allocation decisions.",
    },
    {
      id: "investment-strategy",
      type: "investmentStrategy",
      title: "Investment Strategy",
      content: "Recommendations for portfolio positioning and investment approach.",
      prompt:
        "Develop an investment strategy section for a professional investment newsletter. Provide actionable advice on portfolio positioning given current market conditions. Include asset allocation recommendations, risk management strategies, and specific investment opportunities to consider. Tailor the advice to be relevant for both short-term tactical moves and longer-term strategic positioning.",
    },
    {
      id: "chart-generator",
      type: "chart-generator",
      title: "Chart Generator",
      content: "Create professional financial charts and visualizations.",
      prompt:
        "Generate a professional financial chart using FMP API data. Create visually appealing charts that enhance newsletter content with clear data visualization. Include proper titles, legends, and formatting that matches professional investment research standards.",
    },
  ])

const addModule = useCallback(
    (moduleId: string) => {
      const moduleToAdd = modules.find((m) => m.id === moduleId)
      if (moduleToAdd) {
        setSelectedModules((prev) => [
          ...prev,
          {
            ...moduleToAdd,
            id: uuidv4(), // Generate a new ID for the selected instance
          },
        ])
      }
    },
    [modules],
  )

const removeModule = useCallback((moduleId: string) => {
    setSelectedModules((prev) => prev.filter((module) => module.id !== moduleId))
  }, [])

const updateModuleContent = useCallback((moduleId: string, content: string) => {
    setSelectedModules((prev) => prev.map((module) => (module.id === moduleId ? { ...module, content } : module)))
  }, [])

return {
    modules,
    selectedModules,
    addModule,
    removeModule,
    updateModuleContent,
  }
}
[V0_FILE]typescript:file="components/newsletter/use-newsletter-state.ts" isMerged="true"
"use client"

import { useState, useCallback } from "react"
import { useToast } from "@/hooks/use-toast"
import type { NewsItem, NewsletterSettings } from "@/types/newsletter-types"

// Default settings
const defaultSettings: NewsletterSettings = {
  style: "professional",
  tone: "authoritative",
  audience: "sophisticated investors",
  length: "1500",
  includeDisclaimer: true,
  includeCallToAction: true,
  format: "html",
}

export function useNewsletterState() {
  const [settings, setSettings] = useState<NewsletterSettings>(defaultSettings)
  const [relatedNews, setRelatedNews] = useState<NewsItem[]>([])
  const { toast } = useToast()

// Update settings
  const updateSettings = useCallback((newSettings: Partial<NewsletterSettings>) => {
    setSettings((prev) => ({ ...prev, ...newSettings }))
  }, [])

// Add related news
  const addRelatedNews = useCallback(
    (news: NewsItem) => {
      setRelatedNews((prev) => [...prev, news])
      toast({
        title: "News added",
        description: `"${news.title}" has been added to related news`,
      })
    },
    [toast],
  )

// Remove related news
  const removeRelatedNews = useCallback((index: number) => {
    setRelatedNews((prev) => prev.filter((_, i) => i !== index))
  }, [])

return {
    settings,
    updateSettings,
    relatedNews,
    addRelatedNews,
    removeRelatedNews,
  }
}
[V0_FILE]typescriptreact:file="components/primer-viewer.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { BarChart3, TrendingUp, Building2, FileText, Edit, Plus, ArrowLeft } from "lucide-react"
import type { ContentItem, PrimerMetric, PrimerCompanyData } from "@/types/content-pipeline"
import { getFullPrimerData } from "@/services/primer-content-service"
import { toast } from "@/hooks/use-toast"

interface PrimerViewerProps {
  contentItem: ContentItem
  onClose?: () => void
  onEdit?: () => void
}

export function PrimerViewer({ contentItem, onClose, onEdit }: PrimerViewerProps) {
  const [primerData, setPrimerData] = useState<ContentItem | null>(null)
  const [loading, setLoading] = useState(true)
  const [activeTab, setActiveTab] = useState("overview")

useEffect(() => {
    const loadPrimerData = async () => {
      try {
        setLoading(true)
        const data = await getFullPrimerData(contentItem.id)
        if (data) {
          setPrimerData(data)
        } else {
          toast({
            title: "Error",
            description: "Failed to load primer data",
            variant: "destructive",
          })
        }
      } catch (error) {
        console.error("Error loading primer data:", error)
        toast({
          title: "Error",
          description: "An error occurred while loading the primer",
          variant: "destructive",
        })
      } finally {
        setLoading(false)
      }
    }

loadPrimerData()
  }, [contentItem.id])

if (loading) {
    return (
      <Card>
        <CardHeader>
          <CardTitle>Loading Primer...</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="flex items-center justify-center h-32">
            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
          </div>
        </CardContent>
      </Card>
    )
  }

if (!primerData) {
    return (
      <Card>
        <CardHeader>
          <CardTitle>Primer Not Found</CardTitle>
        </CardHeader>
        <CardContent>
          <p>Unable to load primer data.</p>
        </CardContent>
      </Card>
    )
  }

const sections = primerData.primerSections || []
  const metrics = primerData.primerMetrics || []
  const companies = primerData.primerCompanies || []

// Group metrics by category
  const metricsByCategory = metrics.reduce(
    (acc, metric) => {
      if (!acc[metric.category]) {
        acc[metric.category] = []
      }
      acc[metric.category].push(metric)
      return acc
    },
    {} as Record<string, PrimerMetric[]>,
  )

// Group companies by category
  const companiesByCategory = companies.reduce(
    (acc, company) => {
      if (!acc[company.category]) {
        acc[company.category] = []
      }
      acc[company.category].push(company)
      return acc
    },
    {} as Record<string, PrimerCompanyData[]>,
  )

return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex justify-between items-start">
        <div>
          <div className="flex items-center gap-2 mb-2">
            {onClose && (
              <Button size="sm" variant="outline" onClick={onClose}>
                <ArrowLeft className="h-4 w-4 mr-1" />
                Back
              </Button>
            )}
            <Badge variant="outline" className="bg-purple-50 text-purple-700 border-purple-200">
              Industry Primer
            </Badge>
          </div>
          <h1 className="text-3xl font-bold">{primerData.title}</h1>
          <p className="text-gray-600 mt-2">{primerData.description}</p>
          <div className="flex items-center gap-4 mt-2 text-sm text-gray-500">
            <span>By {primerData.author}</span>
            <span>•</span>
            <span>Updated {new Date(primerData.updated_at).toLocaleDateString()}</span>
            <span>•</span>
            <span>{sections.length} sections</span>
            <span>•</span>
            <span>{companies.length} companies analyzed</span>
          </div>
        </div>
        <div className="flex items-center gap-2">
          {onEdit && (
            <Button variant="outline" onClick={onEdit}>
              <Edit className="h-4 w-4 mr-2" />
              Edit Primer
            </Button>
          )}
        </div>
      </div>

{/* Content */}
      <Tabs value={activeTab} onValueChange={setActiveTab}>
        <TabsList className="grid w-full grid-cols-4">
          <TabsTrigger value="overview" className="flex items-center gap-2">
            <FileText className="h-4 w-4" />
            Overview
          </TabsTrigger>
          <TabsTrigger value="sections" className="flex items-center gap-2">
            <FileText className="h-4 w-4" />
            Sections
          </TabsTrigger>
          <TabsTrigger value="metrics" className="flex items-center gap-2">
            <BarChart3 className="h-4 w-4" />
            Metrics
          </TabsTrigger>
          <TabsTrigger value="companies" className="flex items-center gap-2">
            <Building2 className="h-4 w-4" />
            Companies
          </TabsTrigger>
        </TabsList>

<TabsContent value="overview" className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>Primer Overview</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="prose max-w-none">
                <div dangerouslySetInnerHTML={{ __html: primerData.content || "" }} />
              </div>
            </CardContent>
          </Card>

{/* Quick Stats */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <Card>
              <CardHeader className="pb-2">
                <CardTitle className="text-base">Sections</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">{sections.length}</div>
                <p className="text-sm text-gray-500">Content sections</p>
              </CardContent>
            </Card>
            <Card>
              <CardHeader className="pb-2">
                <CardTitle className="text-base">Key Metrics</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">{metrics.length}</div>
                <p className="text-sm text-gray-500">Industry metrics tracked</p>
              </CardContent>
            </Card>
            <Card>
              <CardHeader className="pb-2">
                <CardTitle className="text-base">Companies</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">{companies.length}</div>
                <p className="text-sm text-gray-500">Companies analyzed</p>
              </CardContent>
            </Card>
          </div>
        </TabsContent>

<TabsContent value="sections" className="space-y-4">
          {sections.length === 0 ? (
            <Card>
              <CardContent className="text-center py-8">
                <p className="text-gray-500">No sections available</p>
                <Button className="mt-4">
                  <Plus className="h-4 w-4 mr-2" />
                  Add Section
                </Button>
              </CardContent>
            </Card>
          ) : (
            sections.map((section, index) => (
              <Card key={section.id}>
                <CardHeader>
                  <div className="flex justify-between items-start">
                    <div>
                      <CardTitle className="text-lg">{section.title}</CardTitle>
                      <p className="text-sm text-gray-500">Section {index + 1}</p>
                    </div>
                    <Button variant="ghost" size="sm">
                      <Edit className="h-4 w-4" />
                    </Button>
                  </div>
                </CardHeader>
                <CardContent>
                  <div className="prose max-w-none">
                    <p>{section.content}</p>
                  </div>
                </CardContent>
              </Card>
            ))
          )}
        </TabsContent>

<TabsContent value="metrics" className="space-y-4">
          {Object.keys(metricsByCategory).length === 0 ? (
            <Card>
              <CardContent className="text-center py-8">
                <p className="text-gray-500">No metrics available</p>
                <Button className="mt-4">
                  <Plus className="h-4 w-4 mr-2" />
                  Add Metric
                </Button>
              </CardContent>
            </Card>
          ) : (
            Object.entries(metricsByCategory).map(([category, categoryMetrics]) => (
              <Card key={category}>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <TrendingUp className="h-5 w-5" />
                    {category} Metrics
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                    {categoryMetrics.map((metric) => (
                      <div key={metric.id} className="p-4 bg-gray-50 rounded-lg">
                        <div className="flex justify-between items-start mb-2">
                          <h4 className="font-medium text-sm">{metric.name}</h4>
                        </div>
                        <div className="text-2xl font-bold">
                          {metric.value}
                          {metric.unit && <span className="text-lg text-gray-500 ml-1">{metric.unit}</span>}
                        </div>
                        {metric.description && <p className="text-xs text-gray-500 mt-1">{metric.description}</p>}
                      </div>
                    ))}
                  </div>
                </CardContent>
              </Card>
            ))
          )}
        </TabsContent>

<TabsContent value="companies" className="space-y-4">
          {Object.keys(companiesByCategory).length === 0 ? (
            <Card>
              <CardContent className="text-center py-8">
                <p className="text-gray-500">No companies available</p>
                <Button className="mt-4">
                  <Plus className="h-4 w-4 mr-2" />
                  Add Company
                </Button>
              </CardContent>
            </Card>
          ) : (
            Object.entries(companiesByCategory).map(([category, categoryCompanies]) => (
              <Card key={category}>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <Building2 className="h-5 w-5" />
                    {category} Companies
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    {categoryCompanies.map((company) => (
                      <div key={company.id} className="border rounded-lg p-4">
                        <div className="flex justify-between items-start mb-3">
                          <div>
                            <h4 className="font-semibold">{company.name}</h4>
                            <p className="text-sm text-gray-500">{company.ticker}</p>
                          </div>
                          <Badge variant="outline">{company.category}</Badge>
                        </div>
                        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                          {Object.entries(company.metrics).map(([key, value]) => (
                            <div key={key} className="text-center">
                              <div className="text-lg font-semibold">
                                {typeof value === "number" ? value.toFixed(1) : value}
                                {key.includes("Growth") || key.includes("Margin") ? "%" : ""}
                              </div>
                              <div className="text-xs text-gray-500 capitalize">
                                {key.replace(/([A-Z])/g, " $1").trim()}
                              </div>
                            </div>
                          ))}
                        </div>
                      </div>
                    ))}
                  </div>
                </CardContent>
              </Card>
            ))
          )}
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/roe-grade-card.tsx" isMerged="true"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import type { RoeAnalysis } from "@/services/fmp-service"
import { TrendingDown, TrendingUp, Minus } from "lucide-react"

interface RoeGradeCardProps {
  roeAnalysis: RoeAnalysis
}

export function RoeGradeCard({ roeAnalysis }: RoeGradeCardProps) {
  const { grade, currentRoe, industryAverage, gradeDescription, trend, trendDescription } = roeAnalysis

const getGradeColor = (grade: string) => {
    switch (grade) {
      case "A":
        return "bg-green-900 text-green-100"
      case "B":
        return "bg-emerald-900 text-emerald-100"
      case "C":
        return "bg-yellow-900 text-yellow-100"
      case "D":
        return "bg-orange-900 text-orange-100"
      case "F":
        return "bg-red-900 text-red-100"
      default:
        return "bg-blue-900 text-blue-100"
    }
  }

const getTrendIcon = (trend: string) => {
    switch (trend) {
      case "improving":
        return <TrendingUp className="h-5 w-5 text-green-400" />
      case "declining":
        return <TrendingDown className="h-5 w-5 text-red-400" />
      default:
        return <Minus className="h-5 w-5 text-blue-400" />
    }
  }

return (
    <Card className="bg-slate-900 border-slate-800 text-white">
      <CardHeader className="pb-2">
        <div className="flex justify-between items-start">
          <div>
            <CardTitle className="text-xl">Return on Equity (ROE)</CardTitle>
            <CardDescription className="text-gray-400">
              Measures how efficiently a company uses its equity to generate profits
            </CardDescription>
          </div>
          <Badge className={`text-2xl px-4 py-2 ${getGradeColor(grade)}`}>{grade}</Badge>
        </div>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="flex justify-between items-center">
          <div>
            <div className="text-sm text-gray-400">Current ROE</div>
            <div className="text-2xl font-bold">{currentRoe.toFixed(2)}%</div>
          </div>
          <div>
            <div className="text-sm text-gray-400">Industry Average</div>
            <div className="text-2xl font-bold">{industryAverage.toFixed(2)}%</div>
          </div>
          <div>
            <div className="text-sm text-gray-400">Trend</div>
            <div className="flex items-center">
              {getTrendIcon(trend)}
              <span className="ml-1 capitalize">{trend}</span>
            </div>
          </div>
        </div>

<div className="p-3 rounded-md bg-slate-800">
          <div className="font-medium mb-2">Grade Assessment</div>
          <p className="text-sm text-gray-300">{gradeDescription}</p>
        </div>

<div className="p-3 rounded-md bg-slate-800">
          <div className="font-medium mb-2">Trend Analysis</div>
          <p className="text-sm text-gray-300">{trendDescription}</p>
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/roe-history-chart.tsx" isMerged="true"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import type { RoeAnalysis } from "@/services/fmp-service"
import { useEffect, useRef } from "react"

interface RoeHistoryChartProps {
  roeAnalysis: RoeAnalysis
}

export function RoeHistoryChart({ roeAnalysis }: RoeHistoryChartProps) {
  const { historicalRoe, historicalDates, industryAverage } = roeAnalysis
  const chartRef = useRef<HTMLCanvasElement>(null)

useEffect(() => {
    if (!chartRef.current) return

const ctx = chartRef.current.getContext("2d")
    if (!ctx) return

// Clear previous chart
    ctx.clearRect(0, 0, chartRef.current.width, chartRef.current.height)

const width = chartRef.current.width
    const height = chartRef.current.height
    const padding = 40
    const chartWidth = width - padding * 2
    const chartHeight = height - padding * 2

// Find min and max values for scaling
    const allValues = [...historicalRoe, industryAverage]
    const maxValue = Math.max(...allValues) * 1.2
    const minValue = Math.min(0, ...allValues) * 1.2

// Draw axes
    ctx.strokeStyle = "#475569" // slate-600
    ctx.lineWidth = 1
    ctx.beginPath()
    ctx.moveTo(padding, padding)
    ctx.lineTo(padding, height - padding)
    ctx.lineTo(width - padding, height - padding)
    ctx.stroke()

// Draw industry average line
    const industryY = height - padding - ((industryAverage - minValue) / (maxValue - minValue)) * chartHeight
    ctx.strokeStyle = "#94a3b8" // slate-400
    ctx.setLineDash([5, 5])
    ctx.beginPath()
    ctx.moveTo(padding, industryY)
    ctx.lineTo(width - padding, industryY)
    ctx.stroke()
    ctx.setLineDash([])

// Add industry average label
    ctx.fillStyle = "#94a3b8" // slate-400
    ctx.font = "12px sans-serif"
    ctx.textAlign = "left"
    ctx.fillText(`Industry Avg: ${industryAverage.toFixed(2)}%`, padding + 5, industryY - 5)

// Draw ROE line
    if (historicalRoe.length > 0) {
      ctx.strokeStyle = "#3b82f6" // blue-500
      ctx.lineWidth = 2
      ctx.beginPath()

// Reverse the arrays to draw from oldest to newest
      const reversedRoe = [...historicalRoe].reverse()
      const reversedDates = [...historicalDates].reverse()

for (let i = 0; i < reversedRoe.length; i++) {
        const x = padding + (i / (reversedRoe.length - 1)) * chartWidth
        const y = height - padding - ((reversedRoe[i] - minValue) / (maxValue - minValue)) * chartHeight

if (i === 0) {
          ctx.moveTo(x, y)
        } else {
          ctx.lineTo(x, y)
        }

// Draw data point
        ctx.fillStyle = "#3b82f6" // blue-500
        ctx.beginPath()
        ctx.arc(x, y, 4, 0, Math.PI * 2)
        ctx.fill()

// Add value label
        ctx.fillStyle = "#ffffff"
        ctx.font = "12px sans-serif"
        ctx.textAlign = "center"
        ctx.fillText(`${reversedRoe[i].toFixed(1)}%`, x, y - 10)

// Add date label
        ctx.fillStyle = "#94a3b8" // slate-400
        ctx.fillText(new Date(reversedDates[i]).getFullYear().toString(), x, height - padding + 20)
      }

ctx.stroke()
    }

// Add y-axis labels
    ctx.fillStyle = "#94a3b8" // slate-400
    ctx.font = "12px sans-serif"
    ctx.textAlign = "right"

const steps = 5
    for (let i = 0; i <= steps; i++) {
      const value = minValue + (maxValue - minValue) * (i / steps)
      const y = height - padding - (i / steps) * chartHeight
      ctx.fillText(`${value.toFixed(1)}%`, padding - 10, y + 4)
    }
  }, [historicalRoe, historicalDates, industryAverage])

return (
    <Card className="bg-slate-900 border-slate-800 text-white">
      <CardHeader className="pb-2">
        <CardTitle className="text-xl">Historical ROE Performance</CardTitle>
        <CardDescription className="text-gray-400">
          5-year trend of Return on Equity compared to industry average
        </CardDescription>
      </CardHeader>
      <CardContent>
        <div className="w-full h-80">
          <canvas ref={chartRef} width={800} height={400} className="w-full h-full"></canvas>
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/role-guard.tsx" isMerged="true"
"use client"

import type React from "react"

import { useUserRole } from "@/hooks/use-user-role"
import { useRouter } from "next/navigation"
import { useEffect } from "react"

interface RoleGuardProps {
  requiredRole: "admin" | "editor" | "viewer"
  children: React.ReactNode
  fallback?: React.ReactNode
  redirectTo?: string
}

export function RoleGuard({ requiredRole, children, fallback, redirectTo = "/unauthorized" }: RoleGuardProps) {
  const { role, isLoading } = useUserRole()
  const router = useRouter()

const roleHierarchy = {
    admin: 3,
    editor: 2,
    viewer: 1,
  }

useEffect(() => {
    if (!isLoading && role) {
      const userRoleLevel = roleHierarchy[role as keyof typeof roleHierarchy] || 0
      const requiredRoleLevel = roleHierarchy[requiredRole]

if (userRoleLevel < requiredRoleLevel && redirectTo) {
        router.push(redirectTo)
      }
    }
  }, [isLoading, role, requiredRole, redirectTo, router])

if (isLoading) {
    return <div className="flex items-center justify-center p-8">Loading...</div>
  }

if (!role) {
    if (redirectTo) {
      router.push("/login")
      return null
    }
    return fallback || <div className="text-red-500">Authentication required</div>
  }

const userRoleLevel = roleHierarchy[role as keyof typeof roleHierarchy] || 0
  const requiredRoleLevel = roleHierarchy[requiredRole]

if (userRoleLevel < requiredRoleLevel) {
    return fallback || <div className="text-red-500">Insufficient permissions</div>
  }

return <>{children}</>
}
[V0_FILE]typescriptreact:file="components/semantic-search-dialog.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Slider } from "@/components/ui/slider"
import { Loader2, Search, Sparkles } from "lucide-react"
import { Badge } from "@/components/ui/badge"
import { findSimilarContent } from "@/services/semantic-search-service"
import type { SimilarContentItem } from "@/services/semantic-search-service"

interface SemanticSearchDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  onSelectContent?: (contentId: string) => void
}

export function SemanticSearchDialog({ open, onOpenChange, onSelectContent }: SemanticSearchDialogProps) {
  const [query, setQuery] = useState("")
  const [threshold, setThreshold] = useState(0.7)
  const [limit, setLimit] = useState(10)
  const [isSearching, setIsSearching] = useState(false)
  const [results, setResults] = useState<SimilarContentItem[]>([])
  const [hasSearched, setHasSearched] = useState(false)

const handleSearch = async () => {
    if (!query.trim()) return

setIsSearching(true)
    setHasSearched(true)

try {
      const similarContent = await findSimilarContent(query, [], limit, threshold)
      setResults(similarContent)
    } catch (error) {
      console.error("Error searching for similar content:", error)
    } finally {
      setIsSearching(false)
    }
  }

// Get similarity badge color
  const getSimilarityColor = (score: number) => {
    if (score >= 0.9) return "bg-green-900/70 text-green-100 border-green-800"
    if (score >= 0.8) return "bg-emerald-900/70 text-emerald-100 border-emerald-800"
    if (score >= 0.7) return "bg-teal-900/70 text-teal-100 border-teal-800"
    if (score >= 0.6) return "bg-cyan-900/70 text-cyan-100 border-cyan-800"
    if (score >= 0.5) return "bg-blue-900/70 text-blue-100 border-blue-800"
    return "bg-indigo-900/70 text-indigo-100 border-indigo-800"
  }

return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-[600px] bg-slate-900 border-slate-800 text-white">
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2">
            <Sparkles className="h-5 w-5 text-blue-400" />
            Gemini Semantic Search
          </DialogTitle>
        </DialogHeader>

<div className="space-y-6">
          <div className="flex gap-2">
            <Input
              placeholder="Enter search query..."
              value={query}
              onChange={(e) => setQuery(e.target.value)}
              className="bg-slate-800 border-slate-700 text-white"
              onKeyDown={(e) => {
                if (e.key === "Enter") handleSearch()
              }}
            />
            <Button
              onClick={handleSearch}
              disabled={isSearching || !query.trim()}
              className="bg-blue-600 hover:bg-blue-700"
            >
              {isSearching ? <Loader2 className="h-4 w-4 animate-spin" /> : <Search className="h-4 w-4" />}
            </Button>
          </div>

<div className="space-y-4">
            <div>
              <div className="flex justify-between text-xs text-gray-400 mb-1">
                <span>Similarity Threshold</span>
                <span>{threshold.toFixed(1)}</span>
              </div>
              <Slider
                value={[threshold]}
                min={0.3}
                max={0.9}
                step={0.1}
                onValueChange={(value) => setThreshold(value[0])}
              />
            </div>

<div>
              <div className="flex justify-between text-xs text-gray-400 mb-1">
                <span>Results Limit</span>
                <span>{limit}</span>
              </div>
              <Slider value={[limit]} min={5} max={20} step={5} onValueChange={(value) => setLimit(value[0])} />
            </div>
          </div>

<div className="max-h-[300px] overflow-y-auto space-y-3">
            {isSearching ? (
              <div className="flex justify-center py-8">
                <Loader2 className="h-8 w-8 animate-spin text-blue-500" />
              </div>
            ) : hasSearched ? (
              results.length > 0 ? (
                results.map((item) => (
                  <div
                    key={item.id}
                    className="group flex flex-col border border-slate-800 rounded-md p-3 hover:bg-slate-800/50 transition-colors cursor-pointer"
                    onClick={() => onSelectContent && onSelectContent(item.id)}
                  >
                    <div className="flex items-center gap-2 mb-1">
                      <Badge className={getStageColor(item.stage)}>{item.stage}</Badge>
                      <Badge variant="outline" className="bg-slate-800 border-slate-700 text-white">
                        {item.type}
                      </Badge>
                      <Badge variant="outline" className={getSimilarityColor(item.similarity)}>
                        {(item.similarity * 100).toFixed(0)}% match
                      </Badge>
                    </div>

<h3 className="font-medium text-white group-hover:text-blue-300 transition-colors">{item.title}</h3>

<p className="text-sm text-gray-400 mt-1 line-clamp-2">{item.description}</p>
                  </div>
                ))
              ) : (
                <div className="text-center py-6">
                  <p className="text-gray-400">No matching content found.</p>
                  <p className="text-sm text-gray-500 mt-1">
                    Try adjusting your search query or lowering the similarity threshold.
                  </p>
                </div>
              )
            ) : (
              <div className="text-center py-6">
                <p className="text-gray-400">Enter a search query to find semantically similar content.</p>
              </div>
            )}
          </div>
        </div>

<DialogFooter>
          <Button variant="outline" onClick={() => onOpenChange(false)} className="bg-slate-800 border-slate-700">
            Close
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescriptreact:file="components/semantic-similarity-panel.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardHeader, CardTitle, CardFooter } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Slider } from "@/components/ui/slider"
import { Loader2, Lightbulb, Clipboard, ExternalLink, Sparkles } from "lucide-react"
import { findSimilarContentById } from "@/services/semantic-search-service"
import type { SimilarContentItem } from "@/services/semantic-search-service"
import { toast } from "@/components/ui/use-toast"

interface SemanticSimilarityPanelProps {
  contentId: string
  title?: string
}

export function SemanticSimilarityPanel({
  contentId,
  title = "Semantically Similar Content",
}: SemanticSimilarityPanelProps) {
  const [similarItems, setSimilarItems] = useState<SimilarContentItem[]>([])
  const [isLoading, setIsLoading] = useState(true)
  const [threshold, setThreshold] = useState(0.7)
  const [limit, setLimit] = useState(5)

useEffect(() => {
    fetchSimilarContent()
  }, [contentId, threshold, limit])

const fetchSimilarContent = async () => {
    setIsLoading(true)
    try {
      const items = await findSimilarContentById(contentId, limit, threshold)
      setSimilarItems(items)
    } catch (error) {
      console.error("Error fetching similar content:", error)
      toast({
        title: "Error",
        description: "Failed to fetch similar content",
        variant: "destructive",
      })
    } finally {
      setIsLoading(false)
    }
  }

// Format content preview
  const formatContentPreview = (content: string): string => {
    if (!content) return "No content available"

// If it's HTML content, strip tags for preview
    if (content.includes("<")) {
      const tempDiv = document.createElement("div")
      tempDiv.innerHTML = content
      return tempDiv.textContent || tempDiv.innerText || "No content available"
    }

return content
  }

// Copy content reference to clipboard
  const copyToClipboard = (item: SimilarContentItem) => {
    const reference = `[${item.title}](ref:${item.id})`
    navigator.clipboard.writeText(reference).then(
      () => {
        toast({
          title: "Reference Copied",
          description: "Content reference copied to clipboard",
        })
      },
      (err) => {
        console.error("Could not copy text: ", err)
        toast({
          title: "Copy Failed",
          description: "Failed to copy reference to clipboard",
          variant: "destructive",
        })
      },
    )
  }

if (isLoading) {
    return (
      <Card className="bg-slate-900 border-slate-800">
        <CardHeader>
          <CardTitle className="text-white flex items-center gap-2">
            <Sparkles className="h-5 w-5 text-blue-400" />
            {title}
          </CardTitle>
        </CardHeader>
        <CardContent className="flex justify-center py-8">
          <Loader2 className="h-8 w-8 animate-spin text-blue-500" />
        </CardContent>
      </Card>
    )
  }

if (similarItems.length === 0) {
    return (
      <Card className="bg-slate-900 border-slate-800">
        <CardHeader>
          <CardTitle className="text-white flex items-center gap-2">
            <Sparkles className="h-5 w-5 text-blue-400" />
            {title}
          </CardTitle>
        </CardHeader>
        <CardContent className="text-center py-6">
          <div className="flex flex-col items-center justify-center space-y-3">
            <div className="bg-slate-800 rounded-full p-3">
              <Lightbulb className="h-6 w-6 text-amber-400" />
            </div>
            <p className="text-gray-400">No similar content found.</p>
            <p className="text-sm text-gray-500 max-w-md">
              Try adjusting the similarity threshold to find more content that might be related to this topic.
            </p>

<div className="w-full max-w-xs mt-4">
              <div className="flex justify-between text-xs text-gray-500 mb-2">
                <span>Similarity Threshold</span>
                <span>{threshold.toFixed(1)}</span>
              </div>
              <Slider
                value={[threshold]}
                min={0.3}
                max={0.9}
                step={0.1}
                onValueChange={(value) => setThreshold(value[0])}
                className="mb-6"
              />
              <Button
                variant="outline"
                size="sm"
                className="w-full bg-slate-800 border-slate-700 text-white hover:bg-slate-700"
                onClick={fetchSimilarContent}
              >
                Refresh Results
              </Button>
            </div>
          </div>
        </CardContent>
      </Card>
    )
  }

return (
    <Card className="bg-slate-900 border-slate-800">
      <CardHeader className="flex flex-row items-center justify-between pb-2">
        <CardTitle className="text-white flex items-center gap-2">
          <Sparkles className="h-5 w-5 text-blue-400" />
          {title}
        </CardTitle>
        <Badge variant="outline" className="bg-blue-900/30 text-blue-300 border-blue-800 hover:bg-blue-900">
          {similarItems.length} {similarItems.length === 1 ? "item" : "items"}
        </Badge>
      </CardHeader>

<CardContent className="space-y-4 pt-2">
        {similarItems.map((item) => (
          <div
            key={item.id}
            className="group flex flex-col border border-slate-800 rounded-md p-4 hover:bg-slate-800/50 transition-colors"
          >
            <div className="flex items-center gap-2 mb-2">
              <Badge className={getStageColor(item.stage)}>{item.stage}</Badge>
              <Badge variant="outline" className="bg-slate-800 border-slate-700 text-white">
                {item.type}
              </Badge>
              <Badge variant="outline" className={getSimilarityColor(item.similarity)}>
                {(item.similarity * 100).toFixed(0)}% match
              </Badge>
            </div>

<h3 className="font-medium text-white group-hover:text-blue-300 transition-colors">{item.title}</h3>

<p className="text-sm text-gray-400 mt-1 line-clamp-2">{item.description}</p>

{/* Content Preview */}
            {item.content && (
              <div className="mt-3 p-3 bg-slate-800/70 rounded border border-slate-700 text-sm text-gray-300 max-h-24 overflow-y-auto">
                <div className="line-clamp-3">{formatContentPreview(item.content)}</div>
              </div>
            )}

<div className="flex flex-wrap gap-1 mt-3">
              {item.tags &&
                item.tags.slice(0, 3).map((tag, index) => (
                  <Badge key={index} variant="outline" className="text-xs bg-slate-700 border-slate-600 text-gray-300">
                    {tag}
                  </Badge>
                ))}
              {item.tags && item.tags.length > 3 && (
                <Badge variant="outline" className="text-xs bg-slate-700 border-slate-600 text-gray-300">
                  +{item.tags.length - 3} more
                </Badge>
              )}
            </div>

<div className="flex justify-between items-center mt-3 pt-2 border-t border-slate-800">
              <Button
                variant="ghost"
                size="sm"
                className="text-gray-400 hover:text-white hover:bg-slate-700"
                onClick={() => window.open(`/content-pipeline/${item.id}`, "_blank")}
              >
                <ExternalLink className="h-3.5 w-3.5 mr-1" />
                Open
              </Button>

<Button
                variant="ghost"
                size="sm"
                className="text-gray-400 hover:text-white hover:bg-slate-700"
                onClick={() => copyToClipboard(item)}
              >
                <Clipboard className="h-3.5 w-3.5 mr-1" />
                Copy Reference
              </Button>
            </div>
          </div>
        ))}
      </CardContent>

<CardFooter className="flex flex-col space-y-4 border-t border-slate-800 pt-4">
        <div className="w-full">
          <div className="flex justify-between text-xs text-gray-500 mb-2">
            <span>Similarity Threshold</span>
            <span>{threshold.toFixed(1)}</span>
          </div>
          <Slider
            value={[threshold]}
            min={0.3}
            max={0.9}
            step={0.1}
            onValueChange={(value) => setThreshold(value[0])}
          />
        </div>

<div className="w-full">
          <div className="flex justify-between text-xs text-gray-500 mb-2">
            <span>Results Limit</span>
            <span>{limit}</span>
          </div>
          <Slider value={[limit]} min={3} max={10} step={1} onValueChange={(value) => setLimit(value[0])} />
        </div>

<Button
          variant="outline"
          size="sm"
          className="w-full bg-slate-800 border-slate-700 text-white hover:bg-slate-700"
          onClick={fetchSimilarContent}
        >
          Refresh Results
        </Button>
      </CardFooter>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/template-selector.tsx" isMerged="true"
"use client"

interface TemplateSelectorProps {
  onSelect: (template: ContentItem) => void
  onCancel: () => void
}

export function TemplateSelector({ onSelect, onCancel }: TemplateSelectorProps) {
  const [templates, setTemplates] = useState<ContentItem[]>([])
  const [filteredTemplates, setFilteredTemplates] = useState<ContentItem[]>([])
  const [searchQuery, setSearchQuery] = useState("")
  const [isLoading, setIsLoading] = useState(true)
  const [selectedTemplate, setSelectedTemplate] = useState<ContentItem | null>(null)

const { toast } = useToast()

// Fetch templates
  useEffect(() => {
    const fetchTemplates = async () => {
      setIsLoading(true)
      try {
        const data = await getTemplates()
        setTemplates(data)
        setFilteredTemplates(data)
      } catch (error) {
        console.error("Error fetching templates:", error)
        toast({
          title: "Error",
          description: "Failed to fetch templates",
          variant: "destructive",
        })
      } finally {
        setIsLoading(false)
      }
    }

fetchTemplates()
  }, [toast])

// Filter templates based on search query
  useEffect(() => {
    if (!searchQuery.trim()) {
      setFilteredTemplates(templates)
      return
    }

const query = searchQuery.toLowerCase()
    const filtered = templates.filter(
      (template) =>
        template.title.toLowerCase().includes(query) ||
        template.description.toLowerCase().includes(query) ||
        template.tags.some((tag) => tag.toLowerCase().includes(query)),
    )
    setFilteredTemplates(filtered)
  }, [searchQuery, templates])

// Handle template selection
  const handleSelect = (template: ContentItem) => {
    setSelectedTemplate(template)
  }

// Handle confirmation
  const handleConfirm = () => {
    if (selectedTemplate) {
      onSelect(selectedTemplate)
    }
  }

return (
    <Card className="w-full max-w-4xl bg-slate-900 border-slate-800">
      <CardHeader>
        <CardTitle className="text-white">Select a Template</CardTitle>
        <CardDescription className="text-gray-400">
          Choose a template to use as a starting point for your new content
        </CardDescription>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="relative">
          <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-500" />
          <Input
            placeholder="Search templates..."
            className="pl-8 bg-slate-800 border-slate-700 text-white"
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
          />
        </div>

{isLoading ? (
          <div className="flex justify-center items-center py-8">
            <Loader2 className="h-8 w-8 animate-spin text-blue-500" />
          </div>
        ) : filteredTemplates.length === 0 ? (
          <div className="text-center py-8 text-gray-400">
            No templates found. Try adjusting your search or create a new template.
          </div>
        ) : (
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 max-h-[400px] overflow-y-auto p-1">
            {filteredTemplates.map((template) => (
              <div
                key={template.id}
                className={`p-4 rounded-lg border cursor-pointer transition-colors ${
                  selectedTemplate?.id === template.id
                    ? "bg-blue-900/20 border-blue-500"
                    : "bg-slate-800 border-slate-700 hover:bg-slate-700"
                }`}
                onClick={() => handleSelect(template)}
              >
                <div className="flex justify-between items-start">
                  <h3 className="font-medium text-white">{template.title}</h3>
                  <Badge className="bg-slate-700 text-white">{template.type}</Badge>
                </div>
                <p className="text-sm text-gray-400 mt-2 line-clamp-2">{template.description}</p>
                <div className="flex flex-wrap gap-1 mt-3">
                  {template.tags
                    .filter((tag) => tag !== "template")
                    .map((tag, index) => (
                      <Badge
                        key={index}
                        variant="outline"
                        className="text-xs bg-slate-700 border-slate-600 text-gray-300"
                      >
                        {tag}
                      </Badge>
                    ))}
                </div>
              </div>
            ))}
          </div>
        )}

<div className="flex justify-end gap-2 pt-4 border-t border-slate-800">
          <Button variant="outline" className="bg-slate-800 border-slate-700 text-white" onClick={onCancel}>
            Cancel
          </Button>
          <Button
            className="bg-blue-600 hover:bg-blue-700"
            onClick={handleConfirm}
            disabled={!selectedTemplate || isLoading}
          >
            Use Template
          </Button>
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/theme-provider.tsx" isMerged="true"
'use client'

import * as React from 'react'
import {
  ThemeProvider as NextThemesProvider,
  type ThemeProviderProps,
} from 'next-themes'

export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}
[V0_FILE]typescriptreact:file="components/ticker-news-volume.tsx" isMerged="true"
"use client"

interface NewsCount {
  ticker: string
  count: number
  sentiment: {
    positive: number
    negative: number
    neutral: number
  }
}

interface TickerNewsVolumeProps {
  data: NewsCount[]
  onTickerSelect?: (ticker: string) => void
}

export function TickerNewsVolume({ data, onTickerSelect }: TickerNewsVolumeProps) {
  const [sortBy, setSortBy] = useState<"volume" | "positive" | "negative">("volume")
  const [sortedData, setSortedData] = useState<NewsCount[]>([])

useEffect(() => {
    // Sort data based on selected criteria
    const sorted = [...data].sort((a, b) => {
      if (sortBy === "volume") {
        return b.count - a.count
      } else if (sortBy === "positive") {
        return b.sentiment.positive - a.sentiment.positive
      } else {
        return b.sentiment.negative - a.sentiment.negative
      }
    })

setSortedData(sorted.slice(0, 10)) // Show top 10
  }, [data, sortBy])

// Calculate sentiment percentages for each ticker
  const calculateSentimentPercentage = (ticker: NewsCount) => {
    const total = ticker.sentiment.positive + ticker.sentiment.negative + ticker.sentiment.neutral
    if (total === 0) return { positive: 0, negative: 0, neutral: 0 }

return {
      positive: Math.round((ticker.sentiment.positive / total) * 100),
      negative: Math.round((ticker.sentiment.negative / total) * 100),
      neutral: Math.round((ticker.sentiment.neutral / total) * 100),
    }
  }

return (
    <Card>
      <CardHeader className="flex flex-row items-center justify-between pb-2">
        <div>
          <CardTitle>Ticker News Volume</CardTitle>
          <CardDescription>Most discussed stocks in the news</CardDescription>
        </div>
        <Select value={sortBy} onValueChange={(value: "volume" | "positive" | "negative") => setSortBy(value)}>
          <SelectTrigger className="w-[180px]">
            <SelectValue placeholder="Sort by" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="volume">Sort by Volume</SelectItem>
            <SelectItem value="positive">Sort by Positive News</SelectItem>
            <SelectItem value="negative">Sort by Negative News</SelectItem>
          </SelectContent>
        </Select>
      </CardHeader>
      <CardContent>
        <div className="space-y-4">
          {sortedData.length > 0 ? (
            sortedData.map((item) => {
              const sentimentPercentages = calculateSentimentPercentage(item)

return (
                <div key={item.ticker} className="space-y-2">
                  <div className="flex items-center justify-between">
                    <Button
                      variant="ghost"
                      className="p-0 h-auto hover:bg-transparent hover:underline"
                      onClick={() => onTickerSelect && onTickerSelect(item.ticker)}
                    >
                      <span className="font-medium">{item.ticker}</span>
                    </Button>
                    <Badge variant="outline">{item.count} articles</Badge>
                  </div>

<div className="flex justify-between text-xs text-slate-500">
                    <div className="flex items-center">
                      <TrendingUp className="h-3 w-3 mr-1 text-green-500" />
                      {item.sentiment.positive} positive
                    </div>
                    <div className="flex items-center">
                      <TrendingDown className="h-3 w-3 mr-1 text-red-500" />
                      {item.sentiment.negative} negative
                    </div>
                    <div className="flex items-center">
                      <BarChart3 className="h-3 w-3 mr-1 text-slate-500" />
                      {item.sentiment.neutral} neutral
                    </div>
                  </div>
                </div>
              )
            })
          ) : (
            <div className="text-center py-4 text-slate-500">No ticker data available</div>
          )}
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/ui/accordion.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as AccordionPrimitive from "@radix-ui/react-accordion"
import { ChevronDown } from "lucide-react"

import { cn } from "@/lib/utils"

const Accordion = AccordionPrimitive.Root

const AccordionItem = React.forwardRef<
  React.ElementRef<typeof AccordionPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
>(({ className, ...props }, ref) => (
  <AccordionPrimitive.Item
    ref={ref}
    className={cn("border-b", className)}
    {...props}
  />
))
AccordionItem.displayName = "AccordionItem"

const AccordionTrigger = React.forwardRef<
  React.ElementRef<typeof AccordionPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
>(({ className, children, ...props }, ref) => (
  <AccordionPrimitive.Header className="flex">
    <AccordionPrimitive.Trigger
      ref={ref}
      className={cn(
        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
        className
      )}
      {...props}
    >
      {children}
      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
    </AccordionPrimitive.Trigger>
  </AccordionPrimitive.Header>
))
AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName

const AccordionContent = React.forwardRef<
  React.ElementRef<typeof AccordionPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
>(({ className, children, ...props }, ref) => (
  <AccordionPrimitive.Content
    ref={ref}
    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
    {...props}
  >
    <div className={cn("pb-4 pt-0", className)}>{children}</div>
  </AccordionPrimitive.Content>
))

AccordionContent.displayName = AccordionPrimitive.Content.displayName

export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
[V0_FILE]typescriptreact:file="components/ui/alert-dialog.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"

import { cn } from "@/lib/utils"
import { buttonVariants } from "@/components/ui/button"

const AlertDialog = AlertDialogPrimitive.Root

const AlertDialogTrigger = AlertDialogPrimitive.Trigger

const AlertDialogPortal = AlertDialogPrimitive.Portal

const AlertDialogOverlay = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
>(({ className, ...props }, ref) => (
  <AlertDialogPrimitive.Overlay
    className={cn(
      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
      className
    )}
    {...props}
    ref={ref}
  />
))
AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName

const AlertDialogContent = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
>(({ className, ...props }, ref) => (
  <AlertDialogPortal>
    <AlertDialogOverlay />
    <AlertDialogPrimitive.Content
      ref={ref}
      className={cn(
        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
        className
      )}
      {...props}
    />
  </AlertDialogPortal>
))
AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName

const AlertDialogHeader = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn(
      "flex flex-col space-y-2 text-center sm:text-left",
      className
    )}
    {...props}
  />
)
AlertDialogHeader.displayName = "AlertDialogHeader"

const AlertDialogFooter = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn(
      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
      className
    )}
    {...props}
  />
)
AlertDialogFooter.displayName = "AlertDialogFooter"

const AlertDialogTitle = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Title>,
  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
>(({ className, ...props }, ref) => (
  <AlertDialogPrimitive.Title
    ref={ref}
    className={cn("text-lg font-semibold", className)}
    {...props}
  />
))
AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName

const AlertDialogDescription = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Description>,
  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
>(({ className, ...props }, ref) => (
  <AlertDialogPrimitive.Description
    ref={ref}
    className={cn("text-sm text-muted-foreground", className)}
    {...props}
  />
))
AlertDialogDescription.displayName =
  AlertDialogPrimitive.Description.displayName

const AlertDialogAction = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Action>,
  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
>(({ className, ...props }, ref) => (
  <AlertDialogPrimitive.Action
    ref={ref}
    className={cn(buttonVariants(), className)}
    {...props}
  />
))
AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName

const AlertDialogCancel = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
>(({ className, ...props }, ref) => (
  <AlertDialogPrimitive.Cancel
    ref={ref}
    className={cn(
      buttonVariants({ variant: "outline" }),
      "mt-2 sm:mt-0",
      className
    )}
    {...props}
  />
))
AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName

export {
  AlertDialog,
  AlertDialogPortal,
  AlertDialogOverlay,
  AlertDialogTrigger,
  AlertDialogContent,
  AlertDialogHeader,
  AlertDialogFooter,
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogAction,
  AlertDialogCancel,
}
[V0_FILE]typescriptreact:file="components/ui/aspect-ratio.tsx" isMerged="true"
"use client"

import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"

const AspectRatio = AspectRatioPrimitive.Root

export { AspectRatio }
[V0_FILE]typescriptreact:file="components/ui/avatar.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as AvatarPrimitive from "@radix-ui/react-avatar"

import { cn } from "@/lib/utils"

const Avatar = React.forwardRef<
  React.ElementRef<typeof AvatarPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
>(({ className, ...props }, ref) => (
  <AvatarPrimitive.Root
    ref={ref}
    className={cn(
      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
      className
    )}
    {...props}
  />
))
Avatar.displayName = AvatarPrimitive.Root.displayName

const AvatarImage = React.forwardRef<
  React.ElementRef<typeof AvatarPrimitive.Image>,
  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
>(({ className, ...props }, ref) => (
  <AvatarPrimitive.Image
    ref={ref}
    className={cn("aspect-square h-full w-full", className)}
    {...props}
  />
))
AvatarImage.displayName = AvatarPrimitive.Image.displayName

const AvatarFallback = React.forwardRef<
  React.ElementRef<typeof AvatarPrimitive.Fallback>,
  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
>(({ className, ...props }, ref) => (
  <AvatarPrimitive.Fallback
    ref={ref}
    className={cn(
      "flex h-full w-full items-center justify-center rounded-full bg-muted",
      className
    )}
    {...props}
  />
))
AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName

export { Avatar, AvatarImage, AvatarFallback }
[V0_FILE]typescriptreact:file="components/ui/badge.tsx" isMerged="true"
import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const badgeVariants = cva(
  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
  {
    variants: {
      variant: {
        default:
          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
        secondary:
          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
        destructive:
          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
        outline: "text-foreground",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  }
)

export interface BadgeProps
  extends React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof badgeVariants> {}

function Badge({ className, variant, ...props }: BadgeProps) {
  return (
    <div className={cn(badgeVariants({ variant }), className)} {...props} />
  )
}

export { Badge, badgeVariants }
[V0_FILE]typescriptreact:file="components/ui/breadcrumb.tsx" isMerged="true"
import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { ChevronRight, MoreHorizontal } from "lucide-react"

import { cn } from "@/lib/utils"

const Breadcrumb = React.forwardRef<
  HTMLElement,
  React.ComponentPropsWithoutRef<"nav"> & {
    separator?: React.ReactNode
  }
>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />)
Breadcrumb.displayName = "Breadcrumb"

const BreadcrumbList = React.forwardRef<
  HTMLOListElement,
  React.ComponentPropsWithoutRef<"ol">
>(({ className, ...props }, ref) => (
  <ol
    ref={ref}
    className={cn(
      "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
      className
    )}
    {...props}
  />
))
BreadcrumbList.displayName = "BreadcrumbList"

const BreadcrumbItem = React.forwardRef<
  HTMLLIElement,
  React.ComponentPropsWithoutRef<"li">
>(({ className, ...props }, ref) => (
  <li
    ref={ref}
    className={cn("inline-flex items-center gap-1.5", className)}
    {...props}
  />
))
BreadcrumbItem.displayName = "BreadcrumbItem"

const BreadcrumbLink = React.forwardRef<
  HTMLAnchorElement,
  React.ComponentPropsWithoutRef<"a"> & {
    asChild?: boolean
  }
>(({ asChild, className, ...props }, ref) => {
  const Comp = asChild ? Slot : "a"

return (
    <Comp
      ref={ref}
      className={cn("transition-colors hover:text-foreground", className)}
      {...props}
    />
  )
})
BreadcrumbLink.displayName = "BreadcrumbLink"

const BreadcrumbPage = React.forwardRef<
  HTMLSpanElement,
  React.ComponentPropsWithoutRef<"span">
>(({ className, ...props }, ref) => (
  <span
    ref={ref}
    role="link"
    aria-disabled="true"
    aria-current="page"
    className={cn("font-normal text-foreground", className)}
    {...props}
  />
))
BreadcrumbPage.displayName = "BreadcrumbPage"

const BreadcrumbSeparator = ({
  children,
  className,
  ...props
}: React.ComponentProps<"li">) => (
  <li
    role="presentation"
    aria-hidden="true"
    className={cn("[&>svg]:w-3.5 [&>svg]:h-3.5", className)}
    {...props}
  >
    {children ?? <ChevronRight />}
  </li>
)
BreadcrumbSeparator.displayName = "BreadcrumbSeparator"

const BreadcrumbEllipsis = ({
  className,
  ...props
}: React.ComponentProps<"span">) => (
  <span
    role="presentation"
    aria-hidden="true"
    className={cn("flex h-9 w-9 items-center justify-center", className)}
    {...props}
  >
    <MoreHorizontal className="h-4 w-4" />
    <span className="sr-only">More</span>
  </span>
)
BreadcrumbEllipsis.displayName = "BreadcrumbElipssis"

export {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbPage,
  BreadcrumbSeparator,
  BreadcrumbEllipsis,
}
[V0_FILE]typescriptreact:file="components/ui/button.tsx" isMerged="true"
import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const buttonVariants = cva(
  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/90",
        destructive:
          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
        outline:
          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
        secondary:
          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
        ghost: "hover:bg-accent hover:text-accent-foreground",
        link: "text-primary underline-offset-4 hover:underline",
      },
      size: {
        default: "h-10 px-4 py-2",
        sm: "h-9 rounded-md px-3",
        lg: "h-11 rounded-md px-8",
        icon: "h-10 w-10",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)

export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {
  asChild?: boolean
}

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, asChild = false, ...props }, ref) => {
    const Comp = asChild ? Slot : "button"
    return (
      <Comp
        className={cn(buttonVariants({ variant, size, className }))}
        ref={ref}
        {...props}
      />
    )
  }
)
Button.displayName = "Button"

export { Button, buttonVariants }
[V0_FILE]typescriptreact:file="components/ui/calendar.tsx" isMerged="true"
"use client"

import * as React from "react"
import { ChevronLeft, ChevronRight } from "lucide-react"
import { DayPicker } from "react-day-picker"

import { cn } from "@/lib/utils"
import { buttonVariants } from "@/components/ui/button"

export type CalendarProps = React.ComponentProps<typeof DayPicker>

function Calendar({
  className,
  classNames,
  showOutsideDays = true,
  ...props
}: CalendarProps) {
  return (
    <DayPicker
      showOutsideDays={showOutsideDays}
      className={cn("p-3", className)}
      classNames={{
        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
        month: "space-y-4",
        caption: "flex justify-center pt-1 relative items-center",
        caption_label: "text-sm font-medium",
        nav: "space-x-1 flex items-center",
        nav_button: cn(
          buttonVariants({ variant: "outline" }),
          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
        ),
        nav_button_previous: "absolute left-1",
        nav_button_next: "absolute right-1",
        table: "w-full border-collapse space-y-1",
        head_row: "flex",
        head_cell:
          "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
        row: "flex w-full mt-2",
        cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
        day: cn(
          buttonVariants({ variant: "ghost" }),
          "h-9 w-9 p-0 font-normal aria-selected:opacity-100"
        ),
        day_range_end: "day-range-end",
        day_selected:
          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
        day_today: "bg-accent text-accent-foreground",
        day_outside:
          "day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground",
        day_disabled: "text-muted-foreground opacity-50",
        day_range_middle:
          "aria-selected:bg-accent aria-selected:text-accent-foreground",
        day_hidden: "invisible",
        ...classNames,
      }}
      components={{
        IconLeft: ({ ...props }) => <ChevronLeft className="h-4 w-4" />,
        IconRight: ({ ...props }) => <ChevronRight className="h-4 w-4" />,
      }}
      {...props}
    />
  )
}
Calendar.displayName = "Calendar"

export { Calendar }
[V0_FILE]typescriptreact:file="components/ui/card.tsx" isMerged="true"
import * as React from "react"

import { cn } from "@/lib/utils"

const Card = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn(
      "rounded-lg border bg-card text-card-foreground shadow-sm",
      className
    )}
    {...props}
  />
))
Card.displayName = "Card"

const CardHeader = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn("flex flex-col space-y-1.5 p-6", className)}
    {...props}
  />
))
CardHeader.displayName = "CardHeader"

const CardTitle = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn(
      "text-2xl font-semibold leading-none tracking-tight",
      className
    )}
    {...props}
  />
))
CardTitle.displayName = "CardTitle"

const CardDescription = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn("text-sm text-muted-foreground", className)}
    {...props}
  />
))
CardDescription.displayName = "CardDescription"

const CardContent = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
))
CardContent.displayName = "CardContent"

const CardFooter = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn("flex items-center p-6 pt-0", className)}
    {...props}
  />
))
CardFooter.displayName = "CardFooter"

export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
[V0_FILE]typescriptreact:file="components/ui/carousel.tsx" isMerged="true"
"use client"

import * as React from "react"
import useEmblaCarousel, {
  type UseEmblaCarouselType,
} from "embla-carousel-react"
import { ArrowLeft, ArrowRight } from "lucide-react"

import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"

type CarouselApi = UseEmblaCarouselType[1]
type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
type CarouselOptions = UseCarouselParameters[0]
type CarouselPlugin = UseCarouselParameters[1]

type CarouselProps = {
  opts?: CarouselOptions
  plugins?: CarouselPlugin
  orientation?: "horizontal" | "vertical"
  setApi?: (api: CarouselApi) => void
}

type CarouselContextProps = {
  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
  api: ReturnType<typeof useEmblaCarousel>[1]
  scrollPrev: () => void
  scrollNext: () => void
  canScrollPrev: boolean
  canScrollNext: boolean
} & CarouselProps

const CarouselContext = React.createContext<CarouselContextProps | null>(null)

function useCarousel() {
  const context = React.useContext(CarouselContext)

if (!context) {
    throw new Error("useCarousel must be used within a <Carousel />")
  }

return context
}

const Carousel = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement> & CarouselProps
>(
  (
    {
      orientation = "horizontal",
      opts,
      setApi,
      plugins,
      className,
      children,
      ...props
    },
    ref
  ) => {
    const [carouselRef, api] = useEmblaCarousel(
      {
        ...opts,
        axis: orientation === "horizontal" ? "x" : "y",
      },
      plugins
    )
    const [canScrollPrev, setCanScrollPrev] = React.useState(false)
    const [canScrollNext, setCanScrollNext] = React.useState(false)

const onSelect = React.useCallback((api: CarouselApi) => {
      if (!api) {
        return
      }

setCanScrollPrev(api.canScrollPrev())
      setCanScrollNext(api.canScrollNext())
    }, [])

const scrollPrev = React.useCallback(() => {
      api?.scrollPrev()
    }, [api])

const scrollNext = React.useCallback(() => {
      api?.scrollNext()
    }, [api])

const handleKeyDown = React.useCallback(
      (event: React.KeyboardEvent<HTMLDivElement>) => {
        if (event.key === "ArrowLeft") {
          event.preventDefault()
          scrollPrev()
        } else if (event.key === "ArrowRight") {
          event.preventDefault()
          scrollNext()
        }
      },
      [scrollPrev, scrollNext]
    )

React.useEffect(() => {
      if (!api || !setApi) {
        return
      }

setApi(api)
    }, [api, setApi])

React.useEffect(() => {
      if (!api) {
        return
      }

onSelect(api)
      api.on("reInit", onSelect)
      api.on("select", onSelect)

return () => {
        api?.off("select", onSelect)
      }
    }, [api, onSelect])

return (
      <CarouselContext.Provider
        value={{
          carouselRef,
          api: api,
          opts,
          orientation:
            orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
          scrollPrev,
          scrollNext,
          canScrollPrev,
          canScrollNext,
        }}
      >
        <div
          ref={ref}
          onKeyDownCapture={handleKeyDown}
          className={cn("relative", className)}
          role="region"
          aria-roledescription="carousel"
          {...props}
        >
          {children}
        </div>
      </CarouselContext.Provider>
    )
  }
)
Carousel.displayName = "Carousel"

const CarouselContent = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => {
  const { carouselRef, orientation } = useCarousel()

return (
    <div ref={carouselRef} className="overflow-hidden">
      <div
        ref={ref}
        className={cn(
          "flex",
          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
          className
        )}
        {...props}
      />
    </div>
  )
})
CarouselContent.displayName = "CarouselContent"

const CarouselItem = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => {
  const { orientation } = useCarousel()

return (
    <div
      ref={ref}
      role="group"
      aria-roledescription="slide"
      className={cn(
        "min-w-0 shrink-0 grow-0 basis-full",
        orientation === "horizontal" ? "pl-4" : "pt-4",
        className
      )}
      {...props}
    />
  )
})
CarouselItem.displayName = "CarouselItem"

const CarouselPrevious = React.forwardRef<
  HTMLButtonElement,
  React.ComponentProps<typeof Button>
>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
  const { orientation, scrollPrev, canScrollPrev } = useCarousel()

return (
    <Button
      ref={ref}
      variant={variant}
      size={size}
      className={cn(
        "absolute  h-8 w-8 rounded-full",
        orientation === "horizontal"
          ? "-left-12 top-1/2 -translate-y-1/2"
          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
        className
      )}
      disabled={!canScrollPrev}
      onClick={scrollPrev}
      {...props}
    >
      <ArrowLeft className="h-4 w-4" />
      <span className="sr-only">Previous slide</span>
    </Button>
  )
})
CarouselPrevious.displayName = "CarouselPrevious"

const CarouselNext = React.forwardRef<
  HTMLButtonElement,
  React.ComponentProps<typeof Button>
>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
  const { orientation, scrollNext, canScrollNext } = useCarousel()

return (
    <Button
      ref={ref}
      variant={variant}
      size={size}
      className={cn(
        "absolute h-8 w-8 rounded-full",
        orientation === "horizontal"
          ? "-right-12 top-1/2 -translate-y-1/2"
          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
        className
      )}
      disabled={!canScrollNext}
      onClick={scrollNext}
      {...props}
    >
      <ArrowRight className="h-4 w-4" />
      <span className="sr-only">Next slide</span>
    </Button>
  )
})
CarouselNext.displayName = "CarouselNext"

export {
  type CarouselApi,
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselPrevious,
  CarouselNext,
}
[V0_FILE]typescriptreact:file="components/ui/chart.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as RechartsPrimitive from "recharts"

import { cn } from "@/lib/utils"

// Format: { THEME_NAME: CSS_SELECTOR }
const THEMES = { light: "", dark: ".dark" } as const

export type ChartConfig = {
  [k in string]: {
    label?: React.ReactNode
    icon?: React.ComponentType
  } & (
    | { color?: string; theme?: never }
    | { color?: never; theme: Record<keyof typeof THEMES, string> }
  )
}

type ChartContextProps = {
  config: ChartConfig
}

const ChartContext = React.createContext<ChartContextProps | null>(null)

function useChart() {
  const context = React.useContext(ChartContext)

if (!context) {
    throw new Error("useChart must be used within a <ChartContainer />")
  }

return context
}

const ChartContainer = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div"> & {
    config: ChartConfig
    children: React.ComponentProps<
      typeof RechartsPrimitive.ResponsiveContainer
    >["children"]
  }
>(({ id, className, children, config, ...props }, ref) => {
  const uniqueId = React.useId()
  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`

return (
    <ChartContext.Provider value={{ config }}>
      <div
        data-chart={chartId}
        ref={ref}
        className={cn(
          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
          className
        )}
        {...props}
      >
        <ChartStyle id={chartId} config={config} />
        <RechartsPrimitive.ResponsiveContainer>
          {children}
        </RechartsPrimitive.ResponsiveContainer>
      </div>
    </ChartContext.Provider>
  )
})
ChartContainer.displayName = "Chart"

const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
  const colorConfig = Object.entries(config).filter(
    ([_, config]) => config.theme || config.color
  )

if (!colorConfig.length) {
    return null
  }

return (
    <style
      dangerouslySetInnerHTML={{
        __html: Object.entries(THEMES)
          .map(
            ([theme, prefix]) => `
${prefix} [data-chart=${id}] {
${colorConfig
  .map(([key, itemConfig]) => {
    const color =
      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
      itemConfig.color
    return color ? `  --color-${key}: ${color};` : null
  })
  .join("\n")}
}
`
          )
          .join("\n"),
      }}
    />
  )
}

const ChartTooltip = RechartsPrimitive.Tooltip

const ChartTooltipContent = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
    React.ComponentProps<"div"> & {
      hideLabel?: boolean
      hideIndicator?: boolean
      indicator?: "line" | "dot" | "dashed"
      nameKey?: string
      labelKey?: string
    }
>(
  (
    {
      active,
      payload,
      className,
      indicator = "dot",
      hideLabel = false,
      hideIndicator = false,
      label,
      labelFormatter,
      labelClassName,
      formatter,
      color,
      nameKey,
      labelKey,
    },
    ref
  ) => {
    const { config } = useChart()

const tooltipLabel = React.useMemo(() => {
      if (hideLabel || !payload?.length) {
        return null
      }

const [item] = payload
      const key = `${labelKey || item.dataKey || item.name || "value"}`
      const itemConfig = getPayloadConfigFromPayload(config, item, key)
      const value =
        !labelKey && typeof label === "string"
          ? config[label as keyof typeof config]?.label || label
          : itemConfig?.label

if (labelFormatter) {
        return (
          <div className={cn("font-medium", labelClassName)}>
            {labelFormatter(value, payload)}
          </div>
        )
      }

if (!value) {
        return null
      }

return <div className={cn("font-medium", labelClassName)}>{value}</div>
    }, [
      label,
      labelFormatter,
      payload,
      hideLabel,
      labelClassName,
      config,
      labelKey,
    ])

if (!active || !payload?.length) {
      return null
    }

const nestLabel = payload.length === 1 && indicator !== "dot"

return (
      <div
        ref={ref}
        className={cn(
          "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
          className
        )}
      >
        {!nestLabel ? tooltipLabel : null}
        <div className="grid gap-1.5">
          {payload.map((item, index) => {
            const key = `${nameKey || item.name || item.dataKey || "value"}`
            const itemConfig = getPayloadConfigFromPayload(config, item, key)
            const indicatorColor = color || item.payload.fill || item.color

return (
              <div
                key={item.dataKey}
                className={cn(
                  "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
                  indicator === "dot" && "items-center"
                )}
              >
                {formatter && item?.value !== undefined && item.name ? (
                  formatter(item.value, item.name, item, index, item.payload)
                ) : (
                  <>
                    {itemConfig?.icon ? (
                      <itemConfig.icon />
                    ) : (
                      !hideIndicator && (
                        <div
                          className={cn(
                            "shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
                            {
                              "h-2.5 w-2.5": indicator === "dot",
                              "w-1": indicator === "line",
                              "w-0 border-[1.5px] border-dashed bg-transparent":
                                indicator === "dashed",
                              "my-0.5": nestLabel && indicator === "dashed",
                            }
                          )}
                          style={
                            {
                              "--color-bg": indicatorColor,
                              "--color-border": indicatorColor,
                            } as React.CSSProperties
                          }
                        />
                      )
                    )}
                    <div
                      className={cn(
                        "flex flex-1 justify-between leading-none",
                        nestLabel ? "items-end" : "items-center"
                      )}
                    >
                      <div className="grid gap-1.5">
                        {nestLabel ? tooltipLabel : null}
                        <span className="text-muted-foreground">
                          {itemConfig?.label || item.name}
                        </span>
                      </div>
                      {item.value && (
                        <span className="font-mono font-medium tabular-nums text-foreground">
                          {item.value.toLocaleString()}
                        </span>
                      )}
                    </div>
                  </>
                )}
              </div>
            )
          })}
        </div>
      </div>
    )
  }
)
ChartTooltipContent.displayName = "ChartTooltip"

const ChartLegend = RechartsPrimitive.Legend

const ChartLegendContent = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div"> &
    Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
      hideIcon?: boolean
      nameKey?: string
    }
>(
  (
    { className, hideIcon = false, payload, verticalAlign = "bottom", nameKey },
    ref
  ) => {
    const { config } = useChart()

if (!payload?.length) {
      return null
    }

return (
      <div
        ref={ref}
        className={cn(
          "flex items-center justify-center gap-4",
          verticalAlign === "top" ? "pb-3" : "pt-3",
          className
        )}
      >
        {payload.map((item) => {
          const key = `${nameKey || item.dataKey || "value"}`
          const itemConfig = getPayloadConfigFromPayload(config, item, key)

return (
            <div
              key={item.value}
              className={cn(
                "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
              )}
            >
              {itemConfig?.icon && !hideIcon ? (
                <itemConfig.icon />
              ) : (
                <div
                  className="h-2 w-2 shrink-0 rounded-[2px]"
                  style={{
                    backgroundColor: item.color,
                  }}
                />
              )}
              {itemConfig?.label}
            </div>
          )
        })}
      </div>
    )
  }
)
ChartLegendContent.displayName = "ChartLegend"

// Helper to extract item config from a payload.
function getPayloadConfigFromPayload(
  config: ChartConfig,
  payload: unknown,
  key: string
) {
  if (typeof payload !== "object" || payload === null) {
    return undefined
  }

const payloadPayload =
    "payload" in payload &&
    typeof payload.payload === "object" &&
    payload.payload !== null
      ? payload.payload
      : undefined

let configLabelKey: string = key

if (
    key in payload &&
    typeof payload[key as keyof typeof payload] === "string"
  ) {
    configLabelKey = payload[key as keyof typeof payload] as string
  } else if (
    payloadPayload &&
    key in payloadPayload &&
    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
  ) {
    configLabelKey = payloadPayload[
      key as keyof typeof payloadPayload
    ] as string
  }

return configLabelKey in config
    ? config[configLabelKey]
    : config[key as keyof typeof config]
}

export {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  ChartLegend,
  ChartLegendContent,
  ChartStyle,
}
[V0_FILE]typescriptreact:file="components/ui/checkbox.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
import { Check } from "lucide-react"

import { cn } from "@/lib/utils"

const Checkbox = React.forwardRef<
  React.ElementRef<typeof CheckboxPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
>(({ className, ...props }, ref) => (
  <CheckboxPrimitive.Root
    ref={ref}
    className={cn(
      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
      className
    )}
    {...props}
  >
    <CheckboxPrimitive.Indicator
      className={cn("flex items-center justify-center text-current")}
    >
      <Check className="h-4 w-4" />
    </CheckboxPrimitive.Indicator>
  </CheckboxPrimitive.Root>
))
Checkbox.displayName = CheckboxPrimitive.Root.displayName

export { Checkbox }
[V0_FILE]typescriptreact:file="components/ui/collapsible.tsx" isMerged="true"
"use client"

import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"

const Collapsible = CollapsiblePrimitive.Root

const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger

const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent

export { Collapsible, CollapsibleTrigger, CollapsibleContent }
[V0_FILE]typescriptreact:file="components/ui/command.tsx" isMerged="true"
"use client"

import * as React from "react"
import { type DialogProps } from "@radix-ui/react-dialog"
import { Command as CommandPrimitive } from "cmdk"
import { Search } from "lucide-react"

import { cn } from "@/lib/utils"
import { Dialog, DialogContent } from "@/components/ui/dialog"

const Command = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive>,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
>(({ className, ...props }, ref) => (
  <CommandPrimitive
    ref={ref}
    className={cn(
      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
      className
    )}
    {...props}
  />
))
Command.displayName = CommandPrimitive.displayName

const CommandDialog = ({ children, ...props }: DialogProps) => {
  return (
    <Dialog {...props}>
      <DialogContent className="overflow-hidden p-0 shadow-lg">
        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
          {children}
        </Command>
      </DialogContent>
    </Dialog>
  )
}

const CommandInput = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.Input>,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
>(({ className, ...props }, ref) => (
  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
    <CommandPrimitive.Input
      ref={ref}
      className={cn(
        "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
        className
      )}
      {...props}
    />
  </div>
))

CommandInput.displayName = CommandPrimitive.Input.displayName

const CommandList = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.List>,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
>(({ className, ...props }, ref) => (
  <CommandPrimitive.List
    ref={ref}
    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
    {...props}
  />
))

CommandList.displayName = CommandPrimitive.List.displayName

const CommandEmpty = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.Empty>,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
>((props, ref) => (
  <CommandPrimitive.Empty
    ref={ref}
    className="py-6 text-center text-sm"
    {...props}
  />
))

CommandEmpty.displayName = CommandPrimitive.Empty.displayName

const CommandGroup = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.Group>,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
>(({ className, ...props }, ref) => (
  <CommandPrimitive.Group
    ref={ref}
    className={cn(
      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
      className
    )}
    {...props}
  />
))

CommandGroup.displayName = CommandPrimitive.Group.displayName

const CommandSeparator = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.Separator>,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
>(({ className, ...props }, ref) => (
  <CommandPrimitive.Separator
    ref={ref}
    className={cn("-mx-1 h-px bg-border", className)}
    {...props}
  />
))
CommandSeparator.displayName = CommandPrimitive.Separator.displayName

const CommandItem = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
>(({ className, ...props }, ref) => (
  <CommandPrimitive.Item
    ref={ref}
    className={cn(
      "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
      className
    )}
    {...props}
  />
))

CommandItem.displayName = CommandPrimitive.Item.displayName

const CommandShortcut = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLSpanElement>) => {
  return (
    <span
      className={cn(
        "ml-auto text-xs tracking-widest text-muted-foreground",
        className
      )}
      {...props}
    />
  )
}
CommandShortcut.displayName = "CommandShortcut"

export {
  Command,
  CommandDialog,
  CommandInput,
  CommandList,
  CommandEmpty,
  CommandGroup,
  CommandItem,
  CommandShortcut,
  CommandSeparator,
}
[V0_FILE]typescriptreact:file="components/ui/context-menu.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
import { Check, ChevronRight, Circle } from "lucide-react"

import { cn } from "@/lib/utils"

const ContextMenu = ContextMenuPrimitive.Root

const ContextMenuTrigger = ContextMenuPrimitive.Trigger

const ContextMenuGroup = ContextMenuPrimitive.Group

const ContextMenuPortal = ContextMenuPrimitive.Portal

const ContextMenuSub = ContextMenuPrimitive.Sub

const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup

const ContextMenuSubTrigger = React.forwardRef<
  React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
    inset?: boolean
  }
>(({ className, inset, children, ...props }, ref) => (
  <ContextMenuPrimitive.SubTrigger
    ref={ref}
    className={cn(
      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
      inset && "pl-8",
      className
    )}
    {...props}
  >
    {children}
    <ChevronRight className="ml-auto h-4 w-4" />
  </ContextMenuPrimitive.SubTrigger>
))
ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName

const ContextMenuSubContent = React.forwardRef<
  React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
>(({ className, ...props }, ref) => (
  <ContextMenuPrimitive.SubContent
    ref={ref}
    className={cn(
      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
      className
    )}
    {...props}
  />
))
ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName

const ContextMenuContent = React.forwardRef<
  React.ElementRef<typeof ContextMenuPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
>(({ className, ...props }, ref) => (
  <ContextMenuPrimitive.Portal>
    <ContextMenuPrimitive.Content
      ref={ref}
      className={cn(
        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
        className
      )}
      {...props}
    />
  </ContextMenuPrimitive.Portal>
))
ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName

const ContextMenuItem = React.forwardRef<
  React.ElementRef<typeof ContextMenuPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
    inset?: boolean
  }
>(({ className, inset, ...props }, ref) => (
  <ContextMenuPrimitive.Item
    ref={ref}
    className={cn(
      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
      inset && "pl-8",
      className
    )}
    {...props}
  />
))
ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName

const ContextMenuCheckboxItem = React.forwardRef<
  React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
>(({ className, children, checked, ...props }, ref) => (
  <ContextMenuPrimitive.CheckboxItem
    ref={ref}
    className={cn(
      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
      className
    )}
    checked={checked}
    {...props}
  >
    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <ContextMenuPrimitive.ItemIndicator>
        <Check className="h-4 w-4" />
      </ContextMenuPrimitive.ItemIndicator>
    </span>
    {children}
  </ContextMenuPrimitive.CheckboxItem>
))
ContextMenuCheckboxItem.displayName =
  ContextMenuPrimitive.CheckboxItem.displayName

const ContextMenuRadioItem = React.forwardRef<
  React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
>(({ className, children, ...props }, ref) => (
  <ContextMenuPrimitive.RadioItem
    ref={ref}
    className={cn(
      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
      className
    )}
    {...props}
  >
    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <ContextMenuPrimitive.ItemIndicator>
        <Circle className="h-2 w-2 fill-current" />
      </ContextMenuPrimitive.ItemIndicator>
    </span>
    {children}
  </ContextMenuPrimitive.RadioItem>
))
ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName

const ContextMenuLabel = React.forwardRef<
  React.ElementRef<typeof ContextMenuPrimitive.Label>,
  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
    inset?: boolean
  }
>(({ className, inset, ...props }, ref) => (
  <ContextMenuPrimitive.Label
    ref={ref}
    className={cn(
      "px-2 py-1.5 text-sm font-semibold text-foreground",
      inset && "pl-8",
      className
    )}
    {...props}
  />
))
ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName

const ContextMenuSeparator = React.forwardRef<
  React.ElementRef<typeof ContextMenuPrimitive.Separator>,
  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
>(({ className, ...props }, ref) => (
  <ContextMenuPrimitive.Separator
    ref={ref}
    className={cn("-mx-1 my-1 h-px bg-border", className)}
    {...props}
  />
))
ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName

const ContextMenuShortcut = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLSpanElement>) => {
  return (
    <span
      className={cn(
        "ml-auto text-xs tracking-widest text-muted-foreground",
        className
      )}
      {...props}
    />
  )
}
ContextMenuShortcut.displayName = "ContextMenuShortcut"

export {
  ContextMenu,
  ContextMenuTrigger,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuCheckboxItem,
  ContextMenuRadioItem,
  ContextMenuLabel,
  ContextMenuSeparator,
  ContextMenuShortcut,
  ContextMenuGroup,
  ContextMenuPortal,
  ContextMenuSub,
  ContextMenuSubContent,
  ContextMenuSubTrigger,
  ContextMenuRadioGroup,
}
[V0_FILE]typescriptreact:file="components/ui/dialog.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as DialogPrimitive from "@radix-ui/react-dialog"
import { X } from "lucide-react"

import { cn } from "@/lib/utils"

const Dialog = DialogPrimitive.Root

const DialogTrigger = DialogPrimitive.Trigger

const DialogPortal = DialogPrimitive.Portal

const DialogClose = DialogPrimitive.Close

const DialogOverlay = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Overlay>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
>(({ className, ...props }, ref) => (
  <DialogPrimitive.Overlay
    ref={ref}
    className={cn(
      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
      className
    )}
    {...props}
  />
))
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName

const DialogContent = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
>(({ className, children, ...props }, ref) => (
  <DialogPortal>
    <DialogOverlay />
    <DialogPrimitive.Content
      ref={ref}
      className={cn(
        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
        className
      )}
      {...props}
    >
      {children}
      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
        <X className="h-4 w-4" />
        <span className="sr-only">Close</span>
      </DialogPrimitive.Close>
    </DialogPrimitive.Content>
  </DialogPortal>
))
DialogContent.displayName = DialogPrimitive.Content.displayName

const DialogHeader = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn(
      "flex flex-col space-y-1.5 text-center sm:text-left",
      className
    )}
    {...props}
  />
)
DialogHeader.displayName = "DialogHeader"

const DialogFooter = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn(
      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
      className
    )}
    {...props}
  />
)
DialogFooter.displayName = "DialogFooter"

const DialogTitle = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Title>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
>(({ className, ...props }, ref) => (
  <DialogPrimitive.Title
    ref={ref}
    className={cn(
      "text-lg font-semibold leading-none tracking-tight",
      className
    )}
    {...props}
  />
))
DialogTitle.displayName = DialogPrimitive.Title.displayName

const DialogDescription = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Description>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
>(({ className, ...props }, ref) => (
  <DialogPrimitive.Description
    ref={ref}
    className={cn("text-sm text-muted-foreground", className)}
    {...props}
  />
))
DialogDescription.displayName = DialogPrimitive.Description.displayName

export {
  Dialog,
  DialogPortal,
  DialogOverlay,
  DialogClose,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogFooter,
  DialogTitle,
  DialogDescription,
}
[V0_FILE]typescriptreact:file="components/ui/drawer.tsx" isMerged="true"
"use client"

import * as React from "react"
import { Drawer as DrawerPrimitive } from "vaul"

import { cn } from "@/lib/utils"

const Drawer = ({
  shouldScaleBackground = true,
  ...props
}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
  <DrawerPrimitive.Root
    shouldScaleBackground={shouldScaleBackground}
    {...props}
  />
)
Drawer.displayName = "Drawer"

const DrawerTrigger = DrawerPrimitive.Trigger

const DrawerPortal = DrawerPrimitive.Portal

const DrawerClose = DrawerPrimitive.Close

const DrawerOverlay = React.forwardRef<
  React.ElementRef<typeof DrawerPrimitive.Overlay>,
  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
>(({ className, ...props }, ref) => (
  <DrawerPrimitive.Overlay
    ref={ref}
    className={cn("fixed inset-0 z-50 bg-black/80", className)}
    {...props}
  />
))
DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName

const DrawerContent = React.forwardRef<
  React.ElementRef<typeof DrawerPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
>(({ className, children, ...props }, ref) => (
  <DrawerPortal>
    <DrawerOverlay />
    <DrawerPrimitive.Content
      ref={ref}
      className={cn(
        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
        className
      )}
      {...props}
    >
      <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
      {children}
    </DrawerPrimitive.Content>
  </DrawerPortal>
))
DrawerContent.displayName = "DrawerContent"

const DrawerHeader = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
    {...props}
  />
)
DrawerHeader.displayName = "DrawerHeader"

const DrawerFooter = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn("mt-auto flex flex-col gap-2 p-4", className)}
    {...props}
  />
)
DrawerFooter.displayName = "DrawerFooter"

const DrawerTitle = React.forwardRef<
  React.ElementRef<typeof DrawerPrimitive.Title>,
  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
>(({ className, ...props }, ref) => (
  <DrawerPrimitive.Title
    ref={ref}
    className={cn(
      "text-lg font-semibold leading-none tracking-tight",
      className
    )}
    {...props}
  />
))
DrawerTitle.displayName = DrawerPrimitive.Title.displayName

const DrawerDescription = React.forwardRef<
  React.ElementRef<typeof DrawerPrimitive.Description>,
  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
>(({ className, ...props }, ref) => (
  <DrawerPrimitive.Description
    ref={ref}
    className={cn("text-sm text-muted-foreground", className)}
    {...props}
  />
))
DrawerDescription.displayName = DrawerPrimitive.Description.displayName

export {
  Drawer,
  DrawerPortal,
  DrawerOverlay,
  DrawerTrigger,
  DrawerClose,
  DrawerContent,
  DrawerHeader,
  DrawerFooter,
  DrawerTitle,
  DrawerDescription,
}
[V0_FILE]typescriptreact:file="components/ui/dropdown-menu.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
import { Check, ChevronRight, Circle } from "lucide-react"

import { cn } from "@/lib/utils"

const DropdownMenu = DropdownMenuPrimitive.Root

const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger

const DropdownMenuGroup = DropdownMenuPrimitive.Group

const DropdownMenuPortal = DropdownMenuPrimitive.Portal

const DropdownMenuSub = DropdownMenuPrimitive.Sub

const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup

const DropdownMenuSubTrigger = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
    inset?: boolean
  }
>(({ className, inset, children, ...props }, ref) => (
  <DropdownMenuPrimitive.SubTrigger
    ref={ref}
    className={cn(
      "flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
      inset && "pl-8",
      className
    )}
    {...props}
  >
    {children}
    <ChevronRight className="ml-auto" />
  </DropdownMenuPrimitive.SubTrigger>
))
DropdownMenuSubTrigger.displayName =
  DropdownMenuPrimitive.SubTrigger.displayName

const DropdownMenuSubContent = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
>(({ className, ...props }, ref) => (
  <DropdownMenuPrimitive.SubContent
    ref={ref}
    className={cn(
      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
      className
    )}
    {...props}
  />
))
DropdownMenuSubContent.displayName =
  DropdownMenuPrimitive.SubContent.displayName

const DropdownMenuContent = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
>(({ className, sideOffset = 4, ...props }, ref) => (
  <DropdownMenuPrimitive.Portal>
    <DropdownMenuPrimitive.Content
      ref={ref}
      sideOffset={sideOffset}
      className={cn(
        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
        className
      )}
      {...props}
    />
  </DropdownMenuPrimitive.Portal>
))
DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName

const DropdownMenuItem = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
    inset?: boolean
  }
>(({ className, inset, ...props }, ref) => (
  <DropdownMenuPrimitive.Item
    ref={ref}
    className={cn(
      "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
      inset && "pl-8",
      className
    )}
    {...props}
  />
))
DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName

const DropdownMenuCheckboxItem = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
>(({ className, children, checked, ...props }, ref) => (
  <DropdownMenuPrimitive.CheckboxItem
    ref={ref}
    className={cn(
      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
      className
    )}
    checked={checked}
    {...props}
  >
    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <DropdownMenuPrimitive.ItemIndicator>
        <Check className="h-4 w-4" />
      </DropdownMenuPrimitive.ItemIndicator>
    </span>
    {children}
  </DropdownMenuPrimitive.CheckboxItem>
))
DropdownMenuCheckboxItem.displayName =
  DropdownMenuPrimitive.CheckboxItem.displayName

const DropdownMenuRadioItem = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
>(({ className, children, ...props }, ref) => (
  <DropdownMenuPrimitive.RadioItem
    ref={ref}
    className={cn(
      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
      className
    )}
    {...props}
  >
    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <DropdownMenuPrimitive.ItemIndicator>
        <Circle className="h-2 w-2 fill-current" />
      </DropdownMenuPrimitive.ItemIndicator>
    </span>
    {children}
  </DropdownMenuPrimitive.RadioItem>
))
DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName

const DropdownMenuLabel = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
    inset?: boolean
  }
>(({ className, inset, ...props }, ref) => (
  <DropdownMenuPrimitive.Label
    ref={ref}
    className={cn(
      "px-2 py-1.5 text-sm font-semibold",
      inset && "pl-8",
      className
    )}
    {...props}
  />
))
DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName

const DropdownMenuSeparator = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
>(({ className, ...props }, ref) => (
  <DropdownMenuPrimitive.Separator
    ref={ref}
    className={cn("-mx-1 my-1 h-px bg-muted", className)}
    {...props}
  />
))
DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName

const DropdownMenuShortcut = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLSpanElement>) => {
  return (
    <span
      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
      {...props}
    />
  )
}
DropdownMenuShortcut.displayName = "DropdownMenuShortcut"

export {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuCheckboxItem,
  DropdownMenuRadioItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuGroup,
  DropdownMenuPortal,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuRadioGroup,
}
[V0_FILE]typescriptreact:file="components/ui/form.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as LabelPrimitive from "@radix-ui/react-label"
import { Slot } from "@radix-ui/react-slot"
import {
  Controller,
  ControllerProps,
  FieldPath,
  FieldValues,
  FormProvider,
  useFormContext,
} from "react-hook-form"

import { cn } from "@/lib/utils"
import { Label } from "@/components/ui/label"

const Form = FormProvider

type FormFieldContextValue<
  TFieldValues extends FieldValues = FieldValues,
  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
> = {
  name: TName
}

const FormFieldContext = React.createContext<FormFieldContextValue>(
  {} as FormFieldContextValue
)

const FormField = <
  TFieldValues extends FieldValues = FieldValues,
  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
>({
  ...props
}: ControllerProps<TFieldValues, TName>) => {
  return (
    <FormFieldContext.Provider value={{ name: props.name }}>
      <Controller {...props} />
    </FormFieldContext.Provider>
  )
}

const useFormField = () => {
  const fieldContext = React.useContext(FormFieldContext)
  const itemContext = React.useContext(FormItemContext)
  const { getFieldState, formState } = useFormContext()

const fieldState = getFieldState(fieldContext.name, formState)

if (!fieldContext) {
    throw new Error("useFormField should be used within <FormField>")
  }

const { id } = itemContext

return {
    id,
    name: fieldContext.name,
    formItemId: `${id}-form-item`,
    formDescriptionId: `${id}-form-item-description`,
    formMessageId: `${id}-form-item-message`,
    ...fieldState,
  }
}

type FormItemContextValue = {
  id: string
}

const FormItemContext = React.createContext<FormItemContextValue>(
  {} as FormItemContextValue
)

const FormItem = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => {
  const id = React.useId()

return (
    <FormItemContext.Provider value={{ id }}>
      <div ref={ref} className={cn("space-y-2", className)} {...props} />
    </FormItemContext.Provider>
  )
})
FormItem.displayName = "FormItem"

const FormLabel = React.forwardRef<
  React.ElementRef<typeof LabelPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
>(({ className, ...props }, ref) => {
  const { error, formItemId } = useFormField()

return (
    <Label
      ref={ref}
      className={cn(error && "text-destructive", className)}
      htmlFor={formItemId}
      {...props}
    />
  )
})
FormLabel.displayName = "FormLabel"

const FormControl = React.forwardRef<
  React.ElementRef<typeof Slot>,
  React.ComponentPropsWithoutRef<typeof Slot>
>(({ ...props }, ref) => {
  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()

return (
    <Slot
      ref={ref}
      id={formItemId}
      aria-describedby={
        !error
          ? `${formDescriptionId}`
          : `${formDescriptionId} ${formMessageId}`
      }
      aria-invalid={!!error}
      {...props}
    />
  )
})
FormControl.displayName = "FormControl"

const FormDescription = React.forwardRef<
  HTMLParagraphElement,
  React.HTMLAttributes<HTMLParagraphElement>
>(({ className, ...props }, ref) => {
  const { formDescriptionId } = useFormField()

return (
    <p
      ref={ref}
      id={formDescriptionId}
      className={cn("text-sm text-muted-foreground", className)}
      {...props}
    />
  )
})
FormDescription.displayName = "FormDescription"

const FormMessage = React.forwardRef<
  HTMLParagraphElement,
  React.HTMLAttributes<HTMLParagraphElement>
>(({ className, children, ...props }, ref) => {
  const { error, formMessageId } = useFormField()
  const body = error ? String(error?.message) : children

if (!body) {
    return null
  }

return (
    <p
      ref={ref}
      id={formMessageId}
      className={cn("text-sm font-medium text-destructive", className)}
      {...props}
    >
      {body}
    </p>
  )
})
FormMessage.displayName = "FormMessage"

export {
  useFormField,
  Form,
  FormItem,
  FormLabel,
  FormControl,
  FormDescription,
  FormMessage,
  FormField,
}
[V0_FILE]typescriptreact:file="components/ui/hover-card.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as HoverCardPrimitive from "@radix-ui/react-hover-card"

import { cn } from "@/lib/utils"

const HoverCard = HoverCardPrimitive.Root

const HoverCardTrigger = HoverCardPrimitive.Trigger

const HoverCardContent = React.forwardRef<
  React.ElementRef<typeof HoverCardPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
  <HoverCardPrimitive.Content
    ref={ref}
    align={align}
    sideOffset={sideOffset}
    className={cn(
      "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
      className
    )}
    {...props}
  />
))
HoverCardContent.displayName = HoverCardPrimitive.Content.displayName

export { HoverCard, HoverCardTrigger, HoverCardContent }
[V0_FILE]typescriptreact:file="components/ui/input-otp.tsx" isMerged="true"
"use client"

import * as React from "react"
import { OTPInput, OTPInputContext } from "input-otp"
import { Dot } from "lucide-react"

import { cn } from "@/lib/utils"

const InputOTP = React.forwardRef<
  React.ElementRef<typeof OTPInput>,
  React.ComponentPropsWithoutRef<typeof OTPInput>
>(({ className, containerClassName, ...props }, ref) => (
  <OTPInput
    ref={ref}
    containerClassName={cn(
      "flex items-center gap-2 has-[:disabled]:opacity-50",
      containerClassName
    )}
    className={cn("disabled:cursor-not-allowed", className)}
    {...props}
  />
))
InputOTP.displayName = "InputOTP"

const InputOTPGroup = React.forwardRef<
  React.ElementRef<"div">,
  React.ComponentPropsWithoutRef<"div">
>(({ className, ...props }, ref) => (
  <div ref={ref} className={cn("flex items-center", className)} {...props} />
))
InputOTPGroup.displayName = "InputOTPGroup"

const InputOTPSlot = React.forwardRef<
  React.ElementRef<"div">,
  React.ComponentPropsWithoutRef<"div"> & { index: number }
>(({ index, className, ...props }, ref) => {
  const inputOTPContext = React.useContext(OTPInputContext)
  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]

return (
    <div
      ref={ref}
      className={cn(
        "relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
        isActive && "z-10 ring-2 ring-ring ring-offset-background",
        className
      )}
      {...props}
    >
      {char}
      {hasFakeCaret && (
        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
          <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
        </div>
      )}
    </div>
  )
})
InputOTPSlot.displayName = "InputOTPSlot"

const InputOTPSeparator = React.forwardRef<
  React.ElementRef<"div">,
  React.ComponentPropsWithoutRef<"div">
>(({ ...props }, ref) => (
  <div ref={ref} role="separator" {...props}>
    <Dot />
  </div>
))
InputOTPSeparator.displayName = "InputOTPSeparator"

export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }
[V0_FILE]typescriptreact:file="components/ui/input.tsx" isMerged="true"
import * as React from "react"

import { cn } from "@/lib/utils"

const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
  ({ className, type, ...props }, ref) => {
    return (
      <input
        type={type}
        className={cn(
          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
          className
        )}
        ref={ref}
        {...props}
      />
    )
  }
)
Input.displayName = "Input"

export { Input }
[V0_FILE]typescriptreact:file="components/ui/label.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as LabelPrimitive from "@radix-ui/react-label"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const labelVariants = cva(
  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
)

const Label = React.forwardRef<
  React.ElementRef<typeof LabelPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
    VariantProps<typeof labelVariants>
>(({ className, ...props }, ref) => (
  <LabelPrimitive.Root
    ref={ref}
    className={cn(labelVariants(), className)}
    {...props}
  />
))
Label.displayName = LabelPrimitive.Root.displayName

export { Label }
[V0_FILE]typescriptreact:file="components/ui/menubar.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as MenubarPrimitive from "@radix-ui/react-menubar"
import { Check, ChevronRight, Circle } from "lucide-react"

import { cn } from "@/lib/utils"

const MenubarMenu = MenubarPrimitive.Menu

const MenubarGroup = MenubarPrimitive.Group

const MenubarPortal = MenubarPrimitive.Portal

const MenubarSub = MenubarPrimitive.Sub

const MenubarRadioGroup = MenubarPrimitive.RadioGroup

const Menubar = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>
>(({ className, ...props }, ref) => (
  <MenubarPrimitive.Root
    ref={ref}
    className={cn(
      "flex h-10 items-center space-x-1 rounded-md border bg-background p-1",
      className
    )}
    {...props}
  />
))
Menubar.displayName = MenubarPrimitive.Root.displayName

const MenubarTrigger = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>
>(({ className, ...props }, ref) => (
  <MenubarPrimitive.Trigger
    ref={ref}
    className={cn(
      "flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
      className
    )}
    {...props}
  />
))
MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName

const MenubarSubTrigger = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.SubTrigger>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {
    inset?: boolean
  }
>(({ className, inset, children, ...props }, ref) => (
  <MenubarPrimitive.SubTrigger
    ref={ref}
    className={cn(
      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
      inset && "pl-8",
      className
    )}
    {...props}
  >
    {children}
    <ChevronRight className="ml-auto h-4 w-4" />
  </MenubarPrimitive.SubTrigger>
))
MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName

const MenubarSubContent = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.SubContent>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>
>(({ className, ...props }, ref) => (
  <MenubarPrimitive.SubContent
    ref={ref}
    className={cn(
      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
      className
    )}
    {...props}
  />
))
MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName

const MenubarContent = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>
>(
  (
    { className, align = "start", alignOffset = -4, sideOffset = 8, ...props },
    ref
  ) => (
    <MenubarPrimitive.Portal>
      <MenubarPrimitive.Content
        ref={ref}
        align={align}
        alignOffset={alignOffset}
        sideOffset={sideOffset}
        className={cn(
          "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
          className
        )}
        {...props}
      />
    </MenubarPrimitive.Portal>
  )
)
MenubarContent.displayName = MenubarPrimitive.Content.displayName

const MenubarItem = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {
    inset?: boolean
  }
>(({ className, inset, ...props }, ref) => (
  <MenubarPrimitive.Item
    ref={ref}
    className={cn(
      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
      inset && "pl-8",
      className
    )}
    {...props}
  />
))
MenubarItem.displayName = MenubarPrimitive.Item.displayName

const MenubarCheckboxItem = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>
>(({ className, children, checked, ...props }, ref) => (
  <MenubarPrimitive.CheckboxItem
    ref={ref}
    className={cn(
      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
      className
    )}
    checked={checked}
    {...props}
  >
    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <MenubarPrimitive.ItemIndicator>
        <Check className="h-4 w-4" />
      </MenubarPrimitive.ItemIndicator>
    </span>
    {children}
  </MenubarPrimitive.CheckboxItem>
))
MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName

const MenubarRadioItem = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.RadioItem>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>
>(({ className, children, ...props }, ref) => (
  <MenubarPrimitive.RadioItem
    ref={ref}
    className={cn(
      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
      className
    )}
    {...props}
  >
    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <MenubarPrimitive.ItemIndicator>
        <Circle className="h-2 w-2 fill-current" />
      </MenubarPrimitive.ItemIndicator>
    </span>
    {children}
  </MenubarPrimitive.RadioItem>
))
MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName

const MenubarLabel = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.Label>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {
    inset?: boolean
  }
>(({ className, inset, ...props }, ref) => (
  <MenubarPrimitive.Label
    ref={ref}
    className={cn(
      "px-2 py-1.5 text-sm font-semibold",
      inset && "pl-8",
      className
    )}
    {...props}
  />
))
MenubarLabel.displayName = MenubarPrimitive.Label.displayName

const MenubarSeparator = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.Separator>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>
>(({ className, ...props }, ref) => (
  <MenubarPrimitive.Separator
    ref={ref}
    className={cn("-mx-1 my-1 h-px bg-muted", className)}
    {...props}
  />
))
MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName

const MenubarShortcut = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLSpanElement>) => {
  return (
    <span
      className={cn(
        "ml-auto text-xs tracking-widest text-muted-foreground",
        className
      )}
      {...props}
    />
  )
}
MenubarShortcut.displayname = "MenubarShortcut"

export {
  Menubar,
  MenubarMenu,
  MenubarTrigger,
  MenubarContent,
  MenubarItem,
  MenubarSeparator,
  MenubarLabel,
  MenubarCheckboxItem,
  MenubarRadioGroup,
  MenubarRadioItem,
  MenubarPortal,
  MenubarSubContent,
  MenubarSubTrigger,
  MenubarGroup,
  MenubarSub,
  MenubarShortcut,
}
[V0_FILE]typescriptreact:file="components/ui/navigation-menu.tsx" isMerged="true"
import * as React from "react"
import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
import { cva } from "class-variance-authority"
import { ChevronDown } from "lucide-react"

import { cn } from "@/lib/utils"

const NavigationMenu = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
>(({ className, children, ...props }, ref) => (
  <NavigationMenuPrimitive.Root
    ref={ref}
    className={cn(
      "relative z-10 flex max-w-max flex-1 items-center justify-center",
      className
    )}
    {...props}
  >
    {children}
    <NavigationMenuViewport />
  </NavigationMenuPrimitive.Root>
))
NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName

const NavigationMenuList = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.List>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
>(({ className, ...props }, ref) => (
  <NavigationMenuPrimitive.List
    ref={ref}
    className={cn(
      "group flex flex-1 list-none items-center justify-center space-x-1",
      className
    )}
    {...props}
  />
))
NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName

const NavigationMenuItem = NavigationMenuPrimitive.Item

const navigationMenuTriggerStyle = cva(
  "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50"
)

const NavigationMenuTrigger = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
>(({ className, children, ...props }, ref) => (
  <NavigationMenuPrimitive.Trigger
    ref={ref}
    className={cn(navigationMenuTriggerStyle(), "group", className)}
    {...props}
  >
    {children}{" "}
    <ChevronDown
      className="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
      aria-hidden="true"
    />
  </NavigationMenuPrimitive.Trigger>
))
NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName

const NavigationMenuContent = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
>(({ className, ...props }, ref) => (
  <NavigationMenuPrimitive.Content
    ref={ref}
    className={cn(
      "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ",
      className
    )}
    {...props}
  />
))
NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName

const NavigationMenuLink = NavigationMenuPrimitive.Link

const NavigationMenuViewport = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
>(({ className, ...props }, ref) => (
  <div className={cn("absolute left-0 top-full flex justify-center")}>
    <NavigationMenuPrimitive.Viewport
      className={cn(
        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
        className
      )}
      ref={ref}
      {...props}
    />
  </div>
))
NavigationMenuViewport.displayName =
  NavigationMenuPrimitive.Viewport.displayName

const NavigationMenuIndicator = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
>(({ className, ...props }, ref) => (
  <NavigationMenuPrimitive.Indicator
    ref={ref}
    className={cn(
      "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
      className
    )}
    {...props}
  >
    <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
  </NavigationMenuPrimitive.Indicator>
))
NavigationMenuIndicator.displayName =
  NavigationMenuPrimitive.Indicator.displayName

export {
  navigationMenuTriggerStyle,
  NavigationMenu,
  NavigationMenuList,
  NavigationMenuItem,
  NavigationMenuContent,
  NavigationMenuTrigger,
  NavigationMenuLink,
  NavigationMenuIndicator,
  NavigationMenuViewport,
}
[V0_FILE]typescriptreact:file="components/ui/pagination.tsx" isMerged="true"
import * as React from "react"
import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"

import { cn } from "@/lib/utils"
import { ButtonProps, buttonVariants } from "@/components/ui/button"

const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
  <nav
    role="navigation"
    aria-label="pagination"
    className={cn("mx-auto flex w-full justify-center", className)}
    {...props}
  />
)
Pagination.displayName = "Pagination"

const PaginationContent = React.forwardRef<
  HTMLUListElement,
  React.ComponentProps<"ul">
>(({ className, ...props }, ref) => (
  <ul
    ref={ref}
    className={cn("flex flex-row items-center gap-1", className)}
    {...props}
  />
))
PaginationContent.displayName = "PaginationContent"

const PaginationItem = React.forwardRef<
  HTMLLIElement,
  React.ComponentProps<"li">
>(({ className, ...props }, ref) => (
  <li ref={ref} className={cn("", className)} {...props} />
))
PaginationItem.displayName = "PaginationItem"

type PaginationLinkProps = {
  isActive?: boolean
} & Pick<ButtonProps, "size"> &
  React.ComponentProps<"a">

const PaginationLink = ({
  className,
  isActive,
  size = "icon",
  ...props
}: PaginationLinkProps) => (
  <a
    aria-current={isActive ? "page" : undefined}
    className={cn(
      buttonVariants({
        variant: isActive ? "outline" : "ghost",
        size,
      }),
      className
    )}
    {...props}
  />
)
PaginationLink.displayName = "PaginationLink"

const PaginationPrevious = ({
  className,
  ...props
}: React.ComponentProps<typeof PaginationLink>) => (
  <PaginationLink
    aria-label="Go to previous page"
    size="default"
    className={cn("gap-1 pl-2.5", className)}
    {...props}
  >
    <ChevronLeft className="h-4 w-4" />
    <span>Previous</span>
  </PaginationLink>
)
PaginationPrevious.displayName = "PaginationPrevious"

const PaginationNext = ({
  className,
  ...props
}: React.ComponentProps<typeof PaginationLink>) => (
  <PaginationLink
    aria-label="Go to next page"
    size="default"
    className={cn("gap-1 pr-2.5", className)}
    {...props}
  >
    <span>Next</span>
    <ChevronRight className="h-4 w-4" />
  </PaginationLink>
)
PaginationNext.displayName = "PaginationNext"

const PaginationEllipsis = ({
  className,
  ...props
}: React.ComponentProps<"span">) => (
  <span
    aria-hidden
    className={cn("flex h-9 w-9 items-center justify-center", className)}
    {...props}
  >
    <MoreHorizontal className="h-4 w-4" />
    <span className="sr-only">More pages</span>
  </span>
)
PaginationEllipsis.displayName = "PaginationEllipsis"

export {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
}
[V0_FILE]typescriptreact:file="components/ui/popover.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as PopoverPrimitive from "@radix-ui/react-popover"

import { cn } from "@/lib/utils"

const Popover = PopoverPrimitive.Root

const PopoverTrigger = PopoverPrimitive.Trigger

const PopoverContent = React.forwardRef<
  React.ElementRef<typeof PopoverPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
  <PopoverPrimitive.Portal>
    <PopoverPrimitive.Content
      ref={ref}
      align={align}
      sideOffset={sideOffset}
      className={cn(
        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
        className
      )}
      {...props}
    />
  </PopoverPrimitive.Portal>
))
PopoverContent.displayName = PopoverPrimitive.Content.displayName

export { Popover, PopoverTrigger, PopoverContent }
[V0_FILE]typescriptreact:file="components/ui/radio-group.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
import { Circle } from "lucide-react"

import { cn } from "@/lib/utils"

const RadioGroup = React.forwardRef<
  React.ElementRef<typeof RadioGroupPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
>(({ className, ...props }, ref) => {
  return (
    <RadioGroupPrimitive.Root
      className={cn("grid gap-2", className)}
      {...props}
      ref={ref}
    />
  )
})
RadioGroup.displayName = RadioGroupPrimitive.Root.displayName

const RadioGroupItem = React.forwardRef<
  React.ElementRef<typeof RadioGroupPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
>(({ className, ...props }, ref) => {
  return (
    <RadioGroupPrimitive.Item
      ref={ref}
      className={cn(
        "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
        className
      )}
      {...props}
    >
      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
        <Circle className="h-2.5 w-2.5 fill-current text-current" />
      </RadioGroupPrimitive.Indicator>
    </RadioGroupPrimitive.Item>
  )
})
RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName

export { RadioGroup, RadioGroupItem }
[V0_FILE]typescriptreact:file="components/ui/resizable.tsx" isMerged="true"
"use client"

import { GripVertical } from "lucide-react"
import * as ResizablePrimitive from "react-resizable-panels"

import { cn } from "@/lib/utils"

const ResizablePanelGroup = ({
  className,
  ...props
}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
  <ResizablePrimitive.PanelGroup
    className={cn(
      "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
      className
    )}
    {...props}
  />
)

const ResizablePanel = ResizablePrimitive.Panel

const ResizableHandle = ({
  withHandle,
  className,
  ...props
}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
  withHandle?: boolean
}) => (
  <ResizablePrimitive.PanelResizeHandle
    className={cn(
      "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
      className
    )}
    {...props}
  >
    {withHandle && (
      <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
        <GripVertical className="h-2.5 w-2.5" />
      </div>
    )}
  </ResizablePrimitive.PanelResizeHandle>
)

export { ResizablePanelGroup, ResizablePanel, ResizableHandle }
[V0_FILE]typescriptreact:file="components/ui/scroll-area.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"

import { cn } from "@/lib/utils"

const ScrollArea = React.forwardRef<
  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
>(({ className, children, ...props }, ref) => (
  <ScrollAreaPrimitive.Root
    ref={ref}
    className={cn("relative overflow-hidden", className)}
    {...props}
  >
    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
      {children}
    </ScrollAreaPrimitive.Viewport>
    <ScrollBar />
    <ScrollAreaPrimitive.Corner />
  </ScrollAreaPrimitive.Root>
))
ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName

const ScrollBar = React.forwardRef<
  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
>(({ className, orientation = "vertical", ...props }, ref) => (
  <ScrollAreaPrimitive.ScrollAreaScrollbar
    ref={ref}
    orientation={orientation}
    className={cn(
      "flex touch-none select-none transition-colors",
      orientation === "vertical" &&
        "h-full w-2.5 border-l border-l-transparent p-[1px]",
      orientation === "horizontal" &&
        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
      className
    )}
    {...props}
  >
    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
  </ScrollAreaPrimitive.ScrollAreaScrollbar>
))
ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName

export { ScrollArea, ScrollBar }
[V0_FILE]typescriptreact:file="components/ui/select.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as SelectPrimitive from "@radix-ui/react-select"
import { Check, ChevronDown, ChevronUp } from "lucide-react"

import { cn } from "@/lib/utils"

const Select = SelectPrimitive.Root

const SelectGroup = SelectPrimitive.Group

const SelectValue = SelectPrimitive.Value

const SelectTrigger = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
>(({ className, children, ...props }, ref) => (
  <SelectPrimitive.Trigger
    ref={ref}
    className={cn(
      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
      className
    )}
    {...props}
  >
    {children}
    <SelectPrimitive.Icon asChild>
      <ChevronDown className="h-4 w-4 opacity-50" />
    </SelectPrimitive.Icon>
  </SelectPrimitive.Trigger>
))
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName

const SelectScrollUpButton = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
>(({ className, ...props }, ref) => (
  <SelectPrimitive.ScrollUpButton
    ref={ref}
    className={cn(
      "flex cursor-default items-center justify-center py-1",
      className
    )}
    {...props}
  >
    <ChevronUp className="h-4 w-4" />
  </SelectPrimitive.ScrollUpButton>
))
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName

const SelectScrollDownButton = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
>(({ className, ...props }, ref) => (
  <SelectPrimitive.ScrollDownButton
    ref={ref}
    className={cn(
      "flex cursor-default items-center justify-center py-1",
      className
    )}
    {...props}
  >
    <ChevronDown className="h-4 w-4" />
  </SelectPrimitive.ScrollDownButton>
))
SelectScrollDownButton.displayName =
  SelectPrimitive.ScrollDownButton.displayName

const SelectContent = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
>(({ className, children, position = "popper", ...props }, ref) => (
  <SelectPrimitive.Portal>
    <SelectPrimitive.Content
      ref={ref}
      className={cn(
        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
        position === "popper" &&
          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
        className
      )}
      position={position}
      {...props}
    >
      <SelectScrollUpButton />
      <SelectPrimitive.Viewport
        className={cn(
          "p-1",
          position === "popper" &&
            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
        )}
      >
        {children}
      </SelectPrimitive.Viewport>
      <SelectScrollDownButton />
    </SelectPrimitive.Content>
  </SelectPrimitive.Portal>
))
SelectContent.displayName = SelectPrimitive.Content.displayName

const SelectLabel = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Label>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
>(({ className, ...props }, ref) => (
  <SelectPrimitive.Label
    ref={ref}
    className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
    {...props}
  />
))
SelectLabel.displayName = SelectPrimitive.Label.displayName

const SelectItem = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
>(({ className, children, ...props }, ref) => (
  <SelectPrimitive.Item
    ref={ref}
    className={cn(
      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
      className
    )}
    {...props}
  >
    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <SelectPrimitive.ItemIndicator>
        <Check className="h-4 w-4" />
      </SelectPrimitive.ItemIndicator>
    </span>

<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
  </SelectPrimitive.Item>
))
SelectItem.displayName = SelectPrimitive.Item.displayName

const SelectSeparator = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Separator>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
>(({ className, ...props }, ref) => (
  <SelectPrimitive.Separator
    ref={ref}
    className={cn("-mx-1 my-1 h-px bg-muted", className)}
    {...props}
  />
))
SelectSeparator.displayName = SelectPrimitive.Separator.displayName

export {
  Select,
  SelectGroup,
  SelectValue,
  SelectTrigger,
  SelectContent,
  SelectLabel,
  SelectItem,
  SelectSeparator,
  SelectScrollUpButton,
  SelectScrollDownButton,
}
[V0_FILE]typescriptreact:file="components/ui/separator.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as SeparatorPrimitive from "@radix-ui/react-separator"

import { cn } from "@/lib/utils"

const Separator = React.forwardRef<
  React.ElementRef<typeof SeparatorPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
>(
  (
    { className, orientation = "horizontal", decorative = true, ...props },
    ref
  ) => (
    <SeparatorPrimitive.Root
      ref={ref}
      decorative={decorative}
      orientation={orientation}
      className={cn(
        "shrink-0 bg-border",
        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
        className
      )}
      {...props}
    />
  )
)
Separator.displayName = SeparatorPrimitive.Root.displayName

export { Separator }
[V0_FILE]typescriptreact:file="components/ui/sheet.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as SheetPrimitive from "@radix-ui/react-dialog"
import { cva, type VariantProps } from "class-variance-authority"
import { X } from "lucide-react"

import { cn } from "@/lib/utils"

const Sheet = SheetPrimitive.Root

const SheetTrigger = SheetPrimitive.Trigger

const SheetClose = SheetPrimitive.Close

const SheetPortal = SheetPrimitive.Portal

const SheetOverlay = React.forwardRef<
  React.ElementRef<typeof SheetPrimitive.Overlay>,
  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
>(({ className, ...props }, ref) => (
  <SheetPrimitive.Overlay
    className={cn(
      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
      className
    )}
    {...props}
    ref={ref}
  />
))
SheetOverlay.displayName = SheetPrimitive.Overlay.displayName

const sheetVariants = cva(
  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
  {
    variants: {
      side: {
        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
        bottom:
          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
        right:
          "inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
      },
    },
    defaultVariants: {
      side: "right",
    },
  }
)

interface SheetContentProps
  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
    VariantProps<typeof sheetVariants> {}

const SheetContent = React.forwardRef<
  React.ElementRef<typeof SheetPrimitive.Content>,
  SheetContentProps
>(({ side = "right", className, children, ...props }, ref) => (
  <SheetPortal>
    <SheetOverlay />
    <SheetPrimitive.Content
      ref={ref}
      className={cn(sheetVariants({ side }), className)}
      {...props}
    >
      {children}
      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
        <X className="h-4 w-4" />
        <span className="sr-only">Close</span>
      </SheetPrimitive.Close>
    </SheetPrimitive.Content>
  </SheetPortal>
))
SheetContent.displayName = SheetPrimitive.Content.displayName

const SheetHeader = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn(
      "flex flex-col space-y-2 text-center sm:text-left",
      className
    )}
    {...props}
  />
)
SheetHeader.displayName = "SheetHeader"

const SheetFooter = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn(
      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
      className
    )}
    {...props}
  />
)
SheetFooter.displayName = "SheetFooter"

const SheetTitle = React.forwardRef<
  React.ElementRef<typeof SheetPrimitive.Title>,
  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
>(({ className, ...props }, ref) => (
  <SheetPrimitive.Title
    ref={ref}
    className={cn("text-lg font-semibold text-foreground", className)}
    {...props}
  />
))
SheetTitle.displayName = SheetPrimitive.Title.displayName

const SheetDescription = React.forwardRef<
  React.ElementRef<typeof SheetPrimitive.Description>,
  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
>(({ className, ...props }, ref) => (
  <SheetPrimitive.Description
    ref={ref}
    className={cn("text-sm text-muted-foreground", className)}
    {...props}
  />
))
SheetDescription.displayName = SheetPrimitive.Description.displayName

export {
  Sheet,
  SheetPortal,
  SheetOverlay,
  SheetTrigger,
  SheetClose,
  SheetContent,
  SheetHeader,
  SheetFooter,
  SheetTitle,
  SheetDescription,
}
[V0_FILE]typescriptreact:file="components/ui/sidebar.tsx" isMerged="true"
"use client"

import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { VariantProps, cva } from "class-variance-authority"
import { PanelLeft } from "lucide-react"

import { useIsMobile } from "@/hooks/use-mobile"
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Separator } from "@/components/ui/separator"
import { Sheet, SheetContent } from "@/components/ui/sheet"
import { Skeleton } from "@/components/ui/skeleton"
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip"

const SIDEBAR_COOKIE_NAME = "sidebar:state"
const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
const SIDEBAR_WIDTH = "16rem"
const SIDEBAR_WIDTH_MOBILE = "18rem"
const SIDEBAR_WIDTH_ICON = "3rem"
const SIDEBAR_KEYBOARD_SHORTCUT = "b"

type SidebarContext = {
  state: "expanded" | "collapsed"
  open: boolean
  setOpen: (open: boolean) => void
  openMobile: boolean
  setOpenMobile: (open: boolean) => void
  isMobile: boolean
  toggleSidebar: () => void
}

const SidebarContext = React.createContext<SidebarContext | null>(null)

function useSidebar() {
  const context = React.useContext(SidebarContext)
  if (!context) {
    throw new Error("useSidebar must be used within a SidebarProvider.")
  }

return context
}

const SidebarProvider = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div"> & {
    defaultOpen?: boolean
    open?: boolean
    onOpenChange?: (open: boolean) => void
  }
>(
  (
    {
      defaultOpen = true,
      open: openProp,
      onOpenChange: setOpenProp,
      className,
      style,
      children,
      ...props
    },
    ref
  ) => {
    const isMobile = useIsMobile()
    const [openMobile, setOpenMobile] = React.useState(false)

// This is the internal state of the sidebar.
    // We use openProp and setOpenProp for control from outside the component.
    const [_open, _setOpen] = React.useState(defaultOpen)
    const open = openProp ?? _open
    const setOpen = React.useCallback(
      (value: boolean | ((value: boolean) => boolean)) => {
        const openState = typeof value === "function" ? value(open) : value
        if (setOpenProp) {
          setOpenProp(openState)
        } else {
          _setOpen(openState)
        }

// This sets the cookie to keep the sidebar state.
        document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
      },
      [setOpenProp, open]
    )

// Helper to toggle the sidebar.
    const toggleSidebar = React.useCallback(() => {
      return isMobile
        ? setOpenMobile((open) => !open)
        : setOpen((open) => !open)
    }, [isMobile, setOpen, setOpenMobile])

// Adds a keyboard shortcut to toggle the sidebar.
    React.useEffect(() => {
      const handleKeyDown = (event: KeyboardEvent) => {
        if (
          event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
          (event.metaKey || event.ctrlKey)
        ) {
          event.preventDefault()
          toggleSidebar()
        }
      }

window.addEventListener("keydown", handleKeyDown)
      return () => window.removeEventListener("keydown", handleKeyDown)
    }, [toggleSidebar])

// We add a state so that we can do data-state="expanded" or "collapsed".
    // This makes it easier to style the sidebar with Tailwind classes.
    const state = open ? "expanded" : "collapsed"

const contextValue = React.useMemo<SidebarContext>(
      () => ({
        state,
        open,
        setOpen,
        isMobile,
        openMobile,
        setOpenMobile,
        toggleSidebar,
      }),
      [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
    )

return (
      <SidebarContext.Provider value={contextValue}>
        <TooltipProvider delayDuration={0}>
          <div
            style={
              {
                "--sidebar-width": SIDEBAR_WIDTH,
                "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
                ...style,
              } as React.CSSProperties
            }
            className={cn(
              "group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar",
              className
            )}
            ref={ref}
            {...props}
          >
            {children}
          </div>
        </TooltipProvider>
      </SidebarContext.Provider>
    )
  }
)
SidebarProvider.displayName = "SidebarProvider"

const Sidebar = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div"> & {
    side?: "left" | "right"
    variant?: "sidebar" | "floating" | "inset"
    collapsible?: "offcanvas" | "icon" | "none"
  }
>(
  (
    {
      side = "left",
      variant = "sidebar",
      collapsible = "offcanvas",
      className,
      children,
      ...props
    },
    ref
  ) => {
    const { isMobile, state, openMobile, setOpenMobile } = useSidebar()

if (collapsible === "none") {
      return (
        <div
          className={cn(
            "flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground",
            className
          )}
          ref={ref}
          {...props}
        >
          {children}
        </div>
      )
    }

if (isMobile) {
      return (
        <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
          <SheetContent
            data-sidebar="sidebar"
            data-mobile="true"
            className="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
            style={
              {
                "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
              } as React.CSSProperties
            }
            side={side}
          >
            <div className="flex h-full w-full flex-col">{children}</div>
          </SheetContent>
        </Sheet>
      )
    }

return (
      <div
        ref={ref}
        className="group peer hidden md:block text-sidebar-foreground"
        data-state={state}
        data-collapsible={state === "collapsed" ? collapsible : ""}
        data-variant={variant}
        data-side={side}
   </article></body></html>