MotionWebStudio/lib/promptGenerator.ts

import { ProductPackage } from '../types';

export interface PromptResult {
  title: string;
  content: string;
  tags: string[];
}

export const generateOrderPrompts = (order: any): PromptResult[] => {
  const pkg = order.package || 'Pro Web';
  const details = order.details || {};
  
  // Helper to safely get data
  const get = (val: any, fallback = 'Not specified') => val || fallback;
  const getArr = (val: any[]) => (val && val.length > 0 ? val.join(', ') : 'None selected');

  // Common Context for all prompts
  const commonContext = `
PROJECT CONTEXT:
- Client Name: ${get(details.name)}
- Company: ${get(details.company)}
- Business Description: ${get(details.description)}
- Target Audience: ${get(details.targetAudience)}
- Primary Color: ${get(details.primaryColor)}
- Secondary Color: ${get(details.secondaryColor)}
- Desired Style: ${getArr(details.style)}
- Goals: ${getArr(details.goals)}
- Domain: ${get(details.domainName, 'TBD')}

TECHNICAL STANDARDS:
- Language: Hungarian (Magyar)
- Framework: React with Next.js (App Router)
- Styling: Tailwind CSS
- Icons: Lucide React
- Code Style: Clean, component-based, exportable code.
- Backend: Supabase (if needed for features).
`;

  // 1. SIMPLE LANDING PAGE STRATEGY
  if (pkg === 'Landing Page' || pkg === 'Start') {
    return [{
      title: 'Landing Page Website Generator Prompt',
      tags: ['Single Page', 'Conversion', 'UI/UX'],
      content: `
Act as a world-class Frontend Engineer and UI/UX Designer.
Your task is to create a high-conversion, single-page Landing Website in Hungarian.

${commonContext}

INSTRUCTIONS:
1. Create a single-file React component (or a clean component structure) for a Landing Page.
2. Structure:
   - Hero Section: High impact, using the business description.
   - About/Introduction: Based on the client's description.
   - Services/Features: Highlight the features requested.
   - Call to Action (CTA): Strong focus on the client's goals (e.g., ${getArr(details.goals)}).
   - Contact Section: Include a functional looking form and placeholders for Phone/Email (${get(details.email)}).
3. Design:
   - Use the primary color (${get(details.primaryColor)}) for main actions and accents.
   - Use the requested style (${getArr(details.style)}) to determine font choices and spacing.
4. Content:
   - Write all visible text in Hungarian.
   - Use persuasive, marketing-oriented copy.

OUTPUT:
Provide the full React code using Tailwind CSS.
`
    }];
  }

  // 2. COMPLEX SITE STRATEGY (Pro Business / Enterprise)
  const prompts: PromptResult[] = [];

  // Prompt 1: Main Structure
  prompts.push({
    title: 'Phase 1: Core Structure & Homepage',
    tags: ['Architecture', 'Layout', 'Homepage'],
    content: `
Act as a Senior Full-Stack Developer.
We are building a Multi-Page Website in Hungarian using Next.js App Router and Tailwind CSS.

${commonContext}

TASK:
Generate the core application structure and the Homepage.

REQUIREMENTS:
1. **Layout & Navigation**: 
   - Create a responsive Navbar including links for requested pages: ${getArr(details.content)}.
   - Create a professional Footer with company info and links.
   - Define \`app/layout.tsx\` with font setup (Inter/Roboto).
2. **Homepage Design**:
   - Create a modern, section-based homepage reflecting the brand identity.
   - Hero Section: Engaging headline based on "${get(details.description)}".
   - Key Value Proposition sections.
   - Use the primary color (${get(details.primaryColor)}) effectively.
3. **Routing**:
   - Setup the directory structure for Next.js App Router.

OUTPUT:
- \`app/layout.tsx\`
- \`components/Navbar.tsx\`
- \`components/Footer.tsx\`
- \`app/page.tsx\` (Homepage content)
`
  });

  // Prompt 2: Subpages
  if (details.content && details.content.length > 0) {
    prompts.push({
      title: 'Phase 2: Standard Subpages',
      tags: ['Content', 'Static Pages'],
      content: `
Act as a Frontend Specialist.
Continuing from the previous website structure, generate the specific subpages requested by the client.

${commonContext}

PAGES TO GENERATE:
${getArr(details.content)}

INSTRUCTIONS:
1. **Content Generation**: For each page, generate realistic Hungarian content based on the business description: "${get(details.description)}".
2. **Design**: Ensure consistent styling with the Homepage (Tailwind CSS).
3. **Specifics**:
   - If "Rólunk" (About): Tell the company story.
   - If "Szolgáltatások" (Services): Grid layout of offerings.
   - If "Kapcsolat" (Contact): Contact details and map placeholder.

OUTPUT:
Provide the code for the page components (e.g., \`app/rolunk/page.tsx\`, \`app/szolgaltatasok/page.tsx\`).
`
    });
  }

  // Prompts 3+: Individual Features (One prompt per feature)
  if (details.features && details.features.length > 0) {
    details.features.forEach((feature: string, index: number) => {
      let featurePromptContent = '';
      let featureTitle = `Phase 3.${index + 1}: Feature - ${feature}`;
      let featureTags = ['Feature', 'Logic'];

      switch (feature) {
        case 'Kapcsolatfelvételi űrlap':
          featurePromptContent = `
TASK: Implement a fully functional **Contact Form**.
REQUIREMENTS:
1. Create a \`ContactForm\` component with Name, Email, Phone, Message fields.
2. Form Validation (Zod or simple HTML5).
3. Backend: Define a Supabase table \`messages\` to store submissions.
4. Logic: Create a server action or API route to handle the submission to Supabase.
`;
          break;
        
        case 'Időpontfoglalás rendszer':
          featurePromptContent = `
TASK: Implement an **Appointment Booking System**.
REQUIREMENTS:
1. Database: Define a Supabase schema for \`appointments\` and \`available_slots\`.
2. UI: Create a calendar or slot picker component.
3. Logic: Allow users to select a time and book it. Handle availability checks.
`;
          break;

        case 'Hírlevél-feliratkozás':
          featurePromptContent = `
TASK: Implement a **Newsletter Subscription** feature.
REQUIREMENTS:
1. UI: A clean input field and subscribe button (Footer or dedicated section).
2. Backend: Define a Supabase table \`subscribers\`.
3. Logic: Handle the submission and prevent duplicate emails.
`;
          break;

        case 'Webshop / fizetési lehetőség':
          featurePromptContent = `
TASK: Implement core **E-commerce / Webshop** functionality.
REQUIREMENTS:
1. Database: Define tables for \`products\` and \`orders\`.
2. UI: Create a Product Listing component and a Product Detail page.
3. State: Implement a simple Cart context.
4. Checkout: Create a basic checkout form structure (mock payment integration is fine for now, or setup Stripe logic).
`;
          featureTags.push('E-commerce');
          break;

        case 'Blog / hírek':
          featurePromptContent = `
TASK: Implement a **Blog / News** section.
REQUIREMENTS:
1. Database: Define a \`posts\` table (title, slug, content, image, date).
2. UI: Create a Blog Index page (grid of cards) and a Blog Post layout.
3. Logic: Fetch data from Supabase to render posts dynamically.
`;
          featureTags.push('CMS');
          break;

        case 'Többnyelvűség':
          featurePromptContent = `
TASK: Implement **Multi-language Support (i18n)**.
REQUIREMENTS:
1. Setup a localization strategy (e.g., using URL path prefixes /en, /hu or a context provider).
2. Create a dictionary file for translations.
3. Add a language switcher component to the Navbar.
`;
          break;

        case 'Képgaléria / videógaléria':
          featurePromptContent = `
TASK: Implement a **Media Gallery**.
REQUIREMENTS:
1. UI: Create a responsive masonry or grid layout for images/videos.
2. Functionality: Implement a Lightbox (modal) view when clicking an image.
3. Data: Define a data structure (array) for the gallery items.
`;
          break;

        case 'Google Térkép integráció':
          featurePromptContent = `
TASK: Implement **Google Maps Integration**.
REQUIREMENTS:
1. Create a \`MapComponent\`.
2. Integrate an embed iframe or use a React Google Maps library.
3. Place a marker at the company's location.
`;
          break;

        case 'Chat gomb (Messenger / WhatsApp)':
          featurePromptContent = `
TASK: Implement a **Floating Chat Widget**.
REQUIREMENTS:
1. UI: A fixed button in the bottom-right corner.
2. Interaction: On click, either open a modal or redirect to WhatsApp/Messenger API links.
3. Styling: Make it unobtrusive but visible.
`;
          break;

        default:
          featurePromptContent = `
TASK: Implement the requested feature: **${feature}**.
REQUIREMENTS:
1. Analyze the requirement based on the project context.
2. Create necessary UI components.
3. Define backend logic or database schema if data persistence is needed.
`;
          break;
      }

      prompts.push({
        title: featureTitle,
        tags: featureTags,
        content: `
Act as a Full-Stack Developer.
You are adding a specific feature to the existing Next.js + Supabase project.

${commonContext}

${featurePromptContent}

OUTPUT:
- React Components
- Supabase SQL Definitions (if applicable)
- Integration instructions
`
      });
    });
  }

  return prompts;
};

export const generateDownloadContent = (order: any, prompts: PromptResult[]): string => {
  const header = `
==============================================================================
MOTIONWEB - AI PROMPT PACKAGE
==============================================================================
Order ID: ${order.displayId}
Client: ${order.customer}
Date: ${new Date().toLocaleDateString()}
Package: ${order.package}
==============================================================================

`;

  const body = prompts.map((p, i) => `
------------------------------------------------------------------------------
PROMPT ${i + 1}: ${p.title.toUpperCase()}
Tags: [${p.tags.join(', ')}]
------------------------------------------------------------------------------

${p.content.trim()}

`).join('\n\n');

  return header + body;
};