import React, { useState } from "react";
import { Folder, File, ChevronRight, ChevronDown, CheckCircle, Download, Settings, Palette, Zap, Database, Globe, Wifi, TestTube, CreditCard, Mail } from "lucide-react";

const RepositoryGeneratorForm = () => {
  const [formData, setFormData] = useState({
    framework: "",
    stateManagement: [],
    styling: [],
    uiLibrary: [],
    animation: [],
    database: [],
    deployment: [],
    apiDataFetching: [],
    testing: [],
    payment: [],
    emailing: [],
  });

  const [instructions, setInstructions] = useState("");
  const [isSubmitted, setIsSubmitted] = useState(false);
  const [showFileTree, setShowFileTree] = useState(false);
  const [expandedFolders, setExpandedFolders] = useState(new Set(["app", "components", "lib", "public"]));
  const [selectedFile, setSelectedFile] = useState(null);

  const categories = {
    framework: {
      label: "Framework",
      icon: Settings,
      options: ["Next.js", "Create React App", "Vite", "Astro"],
      type: "radio",
    },
    stateManagement: {
      label: "State Management",
      icon: Zap,
      options: ["Redux Toolkit", "Zustand", "Jotai", "Context API"],
      type: "checkbox",
    },
    styling: {
      label: "Styling",
      icon: Palette,
      options: ["Tailwind CSS", "Styled Components", "Emotion", "CSS Modules"],
      type: "checkbox",
    },
    uiLibrary: {
      label: "UI Library",
      icon: Palette,
      options: ["Shadcn/ui", "Material UI", "Mantine", "Ant Design"],
      type: "checkbox",
    },
    animation: {
      label: "Animation",
      icon: Zap,
      options: ["Framer Motion", "GSAP", "React Spring"],
      type: "checkbox",
    },
    database: {
      label: "Database",
      icon: Database,
      options: ["Firebase", "Supabase", "PlanetScale", "Neon"],
      type: "checkbox",
    },
    deployment: {
      label: "Deployment",
      icon: Globe,
      options: ["Vercel", "Netlify", "Railway", "Render"],
      type: "checkbox",
    },
    apiDataFetching: {
      label: "API Data Fetching",
      icon: Wifi,
      options: ["TanStack Query", "SWR", "Axios", "Native Fetch"],
      type: "checkbox",
    },
    testing: {
      label: "Testing",
      icon: TestTube,
      options: ["Jest", "Vitest", "Cypress", "Playwright"],
      type: "checkbox",
    },
    payment: {
      label: "Payment",
      icon: CreditCard,
      options: ["Stripe", "PayPal", "Razorpay", "Square"],
      type: "checkbox",
    },
    emailing: {
      label: "Email Services",
      icon: Mail,
      options: ["Resend", "SendGrid", "Mailgun", "Nodemailer"],
      type: "checkbox",
    },
  };

  const handleInputChange = (category, option, type) => {
    if (type === "radio") {
      setFormData((prev) => ({
        ...prev,
        [category]: option,
      }));
    } else {
      setFormData((prev) => ({
        ...prev,
        [category]: prev[category].includes(option)
          ? prev[category].filter((item) => item !== option)
          : [...prev[category], option],
      }));
    }
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    setIsSubmitted(true);
    setShowFileTree(true);
  
    // Here we would call the AI API to generate the repository
    console.log("Repository configuration:", formData);
    console.log("Instructions:", instructions);
  };

  return (
    <div className="p-10 max-w-6xl mx-auto">
      <form onSubmit={handleSubmit} className="space-y-6 border border-zinc-100 rounded-2xl shadow-lg">
        <div className="p-6 md:p-8">
          <div className="flex items-center gap-3 mb-6">
            <Settings className="w-5 h-5 text-black" />
            <h2 className="text-xl font-semibold text-gray-900">
              AI Repository Generator
            </h2>
          </div>
  
          <p className="text-gray-600 mb-8">
            Select your preferred technologies to generate a customized Next.js repository structure using AI.
          </p>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {Object.entries(categories).map(([categoryKey, category]) => {
              const IconComponent = category.icon;
              return (
                <div key={categoryKey} className="border border-gray-200 rounded-xl p-6">
                  <div className="flex items-center gap-3 mb-4">
                    <IconComponent className="w-5 h-5 text-black" />
                    <h3 className="font-semibold text-gray-900">{category.label}</h3>
                  </div>
  
                  <div className="space-y-3">
                    {category.options.map((option) => (
                      <label key={option} className="flex items-center gap-3 cursor-pointer">
                        <input
                          type={category.type}
                          name={categoryKey}
                          value={option}
                          checked={
                            category.type === "radio"
                              ? formData[categoryKey] === option
                              : formData[categoryKey].includes(option)
                          }
                          onChange={() => handleInputChange(categoryKey, option, category.type)}
                          className={`w-4 h-4 text-zinc-600 border-zinc-300 focus:ring-zinc-500 focus:ring-2 ${
                            category.type === "radio" ? "rounded-full" : "rounded"
                          }`}
                        />
                        <span className="text-sm text-gray-700">{option}</span>
                      </label>
                    ))}
                  </div>
                </div>
              );
            })}
          </div>

          <div className="mt-8 pt-6 border-t border-gray-200">
            <label className="block text-sm font-medium text-gray-700 mb-2">
              Additional Instructions
            </label>
            <textarea
              value={instructions}
              onChange={(e) => setInstructions(e.target.value)}
              rows={4}
              className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-black focus:outline-none focus:border-transparent transition-colors resize-none"
              placeholder="Provide any additional instructions or requirements for your repository..."
            />
          </div>

          <div className="mt-8 pt-6 border-t border-gray-200">
            <button
              type="submit"
              className="w-full bg-black text-white py-4 rounded-xl font-medium hover:bg-gray-800 transition-colors"
            >
              Generate Repository with AI
            </button>
          </div>
        </div>
      </form>
    </div>
  );
};

export default RepositoryGeneratorForm;

import { GoogleGenAI } from "@google/genai";

const googleGenAIClient = new GoogleGenAI({
  model: "gemini-1.5-flash",
  apiKey: process.env.GOOGLE_GENAI_API_KEY,
});

export const generateCustomRepo = async (req, res) => {
  try {
    const { projectName, ...dependencyGraph } = req.body;
  
    res.setHeader("Content-Type", "text/event-stream");
    res.setHeader("Cache-Control", "no-cache");
    res.setHeader("Connection", "keep-alive");

    const sendEvent = (message) => {
      res.write(`data: ${JSON.stringify({ message })}\n\n`);
    };

    console.log("Initializing repository generation...");

    const systemPrompt = getCustomRepoGeneratorSystemPrompt(dependencyGraph);
    const messages = [
      new SystemMessage(systemPrompt),
      new HumanMessage(`Generate the code repository structure for the dependency graph: ${JSON.stringify(dependencyGraph, null, 2)}`),
    ];

    let gptResponse = "";
    let inputTokens = 0;
    let outputTokens = 0;

    try {
      const response = await googleGenAIClient.chats.create({
        model: "gemini-1.5-flash",
        messages: messages,
      });

      gptResponse = response.response.text();
      sendEvent(gptResponse);
  
      console.log(gptResponse, "gptResponse");
      console.log("Repository generated successfully.");

      // Calculate token usage for monitoring and optimization
      inputTokens = await Promise.all(
        messages.map((msg) => googleClient.getNumTokens(msg.content))
      ).then((tokens) => tokens.reduce((total, num) => total + num, 0));

      outputTokens = await googleClient.getNumTokens(gptResponse);
  
      console.log(`Input tokens: ${inputTokens}, Output tokens: ${outputTokens}`);

      res.end();
    } catch (validationError) {
      console.error("Error in generating custom repo:", validationError);
      res.end();
    }
  } catch (error) {
    console.error("Error in generating custom repo:", error);
    res.write(`data: ${JSON.stringify({ error: "Error in generating custom repo" })}\n\n`);
    res.end();
  }
};

export const getCustomRepoGeneratorSystemPrompt = (dependencyGraph) => `
You are a professional Next.js developer and repository architect. Generate a complete, production-ready Next.js project structure based on the provided dependencyGraph. Focus on creating a minimal but functional setup that developers can start coding with immediately.

IMPORTANT: Return ONLY raw JSON structure without markdown, code blocks, or backticks. Escape all special characters to ensure valid JSON.

Core Requirements:
1. Use Next.js 14 with App Router as the default framework
2. Include only essential files to get started quickly
3. Use latest stable package versions
4. Maximum directory depth: 3 levels for maintainability
5. Include comprehensive configuration files for all specified dependencies
6. Generate realistic, functional code for each file
7. Follow modern React and Next.js best practices
8. Ensure proper TypeScript support when applicable
9. Include proper error handling and loading states
10. Implement responsive design patterns

### Essential Files (Always Include):
- package.json: Core dependencies with proper versioning
- next.config.js: Optimized Next.js configuration
- .gitignore: Comprehensive gitignore for Next.js projects
- README.md: Detailed project setup and usage instructions
- .env.example: Environment variable templates with descriptions
- app/layout.tsx: Root layout with proper metadata and providers
- app/page.tsx: Home page with modern component patterns
- app/globals.css: Global styles with CSS custom properties

### Next.js App Router Structure:
- app/ directory with proper route organization
- layout.tsx files for nested layouts
- loading.tsx files for loading states
- error.tsx files for error boundaries
- not-found.tsx for 404 handling

### Technology-Specific Integrations:

#### Styling Integration:
- tailwindcss: Complete Tailwind setup with custom configuration, PostCSS config, and utility classes
- styled-components: Theme provider setup, global styles, and component examples
- emotion: Emotion configuration with theme provider and styled components
- css-modules: Modular CSS setup with proper naming conventions

#### UI Libraries:
- shadcn/ui: Complete shadcn setup with components directory, tailwind config, and example components
- material-ui: MUI theme provider, custom theme configuration, and component examples
- mantine: Mantine provider setup, theme customization, and component integration
- ant-design: Ant Design configuration, theme customization, and component usage

#### State Management:
- redux-toolkit: Complete Redux store setup with slices, middleware, and provider integration
- zustand: Store creation with TypeScript support and persistence
- jotai: Atom definitions with proper TypeScript typing and provider setup
- context-api: Context providers with proper TypeScript support and optimization

#### Database Integration:
- firebase: Complete Firebase configuration, Firestore setup, authentication integration
- supabase: Supabase client setup, database schema examples, authentication configuration
- planetscale: Database connection setup, Prisma integration, migration scripts
- neon: Neon database configuration, connection pooling, query examples

#### Authentication:
- firebase-auth: Complete authentication setup with providers, hooks, and protected routes
- supabase-auth: Authentication configuration, user management, and session handling
- next-auth: NextAuth.js setup with multiple providers and session management

#### Payment Integration:
- stripe: Complete Stripe integration with webhook handling, payment forms, and subscription management
- paypal: PayPal SDK integration, payment processing, and order management
- razorpay: Razorpay integration with payment gateway and order processing

#### Testing & Quality:
- jest: Jest configuration with React Testing Library, test utilities, and example tests
- vitest: Vitest setup with React testing utilities and configuration
- cypress: Cypress configuration with example E2E tests and commands
- playwright: Playwright setup with test configuration and example tests

#### Deployment & DevOps:
- vercel: Vercel configuration with environment variables and build optimization
- netlify: Netlify configuration with build settings and redirects
- docker: Dockerfile and docker-compose for containerized deployment

### Output Format Requirements:
{
  "name": "${dependencyGraph.projectName || 'nextjs-ai-generated-project'}",
  "type": "directory",
  "description": "AI-generated Next.js project with selected technologies",
  "children": [
    {
      "name": "package.json",
      "type": "file",
      "content": "{\\"name\\": \\"project-name\\", \\"scripts\\": {...}, \\"dependencies\\": {...}}"
    },
    {
      "name": "app",
      "type": "directory",
      "children": [...]
    }
  ]
}

### Validation Rules:
1. Pure JSON output without any markdown formatting
2. All file contents must be properly escaped strings
3. Include only technologies specified in dependencyGraph
4. Each file should contain functional, production-ready code
5. Configuration files must follow official documentation standards
6. Environment variables should be properly documented in .env.example
7. Include proper TypeScript types where applicable
8. Implement proper error handling and loading states
9. Follow accessibility best practices
10. Include comprehensive documentation and comments

Generate a clean, production-ready Next.js project structure that developers can immediately use with "npm install && npm run dev". The generated code should follow modern best practices, include proper error handling, and be fully functional out of the box.
`;

import { z } from "zod";

export const dependencyGraphSchema = z.object({
  projectName: z.string().optional(),
  framework: z.enum(["next.js", "create-react-app", "vite", "astro"]),
  styling: z.enum(["tailwindcss", "styled-components", "emotion", "css-modules"]),
  database: z.enum(["firebase", "supabase", "planetscale", "neon"]).optional(),
  uiLibrary: z.enum(["shadcn/ui", "material-ui", "mantine", "ant-design"]).optional(),
  stateManagement: z.enum(["redux-toolkit", "zustand", "jotai", "context-api"]).optional(),
  authentication: z.enum(["firebase-auth", "supabase-auth", "next-auth"]).optional(),
  payment: z.enum(["stripe", "paypal", "razorpay", "square"]).optional(),
  emailing: z.enum(["resend", "sendgrid", "mailgun", "nodemailer"]).optional(),
  testing: z.enum(["jest", "vitest", "cypress", "playwright"]).optional(),
  deployment: z.enum(["vercel", "netlify", "railway", "render"]).optional(),
  apiDataFetching: z.enum(["tanstack-query", "swr", "axios", "fetch"]).optional(),
  animation: z.enum(["framer-motion", "gsap", "react-spring"]).optional(),
  monitoring: z.enum(["sentry", "logrocket", "datadog"]).optional(),
  analytics: z.enum(["google-analytics", "mixpanel", "amplitude", "posthog"]).optional(),
  seo: z.enum(["next-seo", "react-helmet", "vercel-analytics"]).optional(),
  cms: z.enum(["sanity", "contentful", "strapi", "directus"]).optional(),
});

// Example of AI-generated Redux store configuration
import { configureStore } from '@reduxjs/toolkit';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import { combineReducers } from '@reduxjs/toolkit';
import authSlice from './slices/authSlice';
import userSlice from './slices/userSlice';
import { api } from './api/apiSlice';

const persistConfig = {
  key: 'root',
  storage,
  whitelist: ['auth', 'user'],
};

const rootReducer = combineReducers({
  auth: authSlice,
  user: userSlice,
  [api.reducerPath]: api.reducer,
});

const persistedReducer = persistReducer(persistConfig, rootReducer);

export const store = configureStore({
  reducer: persistedReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: ['persist/PERSIST', 'persist/REHYDRATE'],
      },
    }).concat(api.middleware),
  devTools: process.env.NODE_ENV !== 'production',
});

export const persistor = persistStore(store);
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

import { streamText } from "ai";
import { createGoogleGenerativeAI } from "@ai-sdk/google";

const googleClient = createGoogleGenerativeAI({
  apiKey: process.env.NEXT_PUBLIC_GOOGLE_API_KEY,
});

const generateRepositorySystemPrompt = () => {
  return `You are an expert Next.js developer and repository generator. Your task is to generate a complete Next.js repository structure based on the user's technology selections.

IMPORTANT RULES:
1. Always respond with valid JSON structure
2. Never start with \`\`\` or any markdown formatting
3. The response must be a valid JSON object
4. Include all necessary files for a Next.js project
5. Generate realistic, functional code for each file
6. Consider the selected technologies when generating dependencies and configurations

RESPONSE FORMAT:
{
  "files": [
    {
      "name": "filename.ext",
      "path": "relative/path/to/file",
      "content": "file content here"
    }
  ],
  "packageJson": {
    "dependencies": {},
    "devDependencies": {}
  },
  "description": "Brief description of the generated repository"
}

Generate appropriate configurations, dependencies, and code based on the selected technologies.`;
};

export default async function handler(req, res) {
  if (req.method !== "POST") {
    return res.status(405).json({ error: "Method Not Allowed" });
  }

  try {
    const { formData, instructions } = req.body;

    if (!formData) {
      return res.status(400).json({ error: "Form data is required" });
    }

    const prompt = `Generate a Next.js repository with the following technology selections:

Framework: ${formData.framework}
State Management: ${formData.stateManagement.join(", ") || "None"}
Styling: ${formData.styling.join(", ") || "None"}
UI Library: ${formData.uiLibrary.join(", ") || "None"}
Animation: ${formData.animation.join(", ") || "None"}
Database: ${formData.database.join(", ") || "None"}
Deployment: ${formData.deployment.join(", ") || "None"}
API Data Fetching: ${formData.apiDataFetching.join(", ") || "None"}
Testing: ${formData.testing.join(", ") || "None"}
Payment: ${formData.payment.join(", ") || "None"}
Emailing: ${formData.emailing.join(", ") || "None"}

Additional Instructions: ${instructions || "None"}

Please generate a complete Next.js repository structure with all necessary files, configurations, and dependencies based on these selections.`;

    const result = await streamText({
      model: googleClient("gemini-1.5-flash"),
      messages: [
        {
          role: "system",
          content: generateRepositorySystemPrompt(),
        },
        {
          role: "user",
          content: prompt,
        },
      ],
      temperature: 0.7,
      streamProtocol: true,
    });

    try {
      for await (const chunk of result.textStream) {
        res.write(chunk);
      }

      try {
        res.end();
      } catch (error) {
        console.error("Error processing response:", error);
        res.status(500).json({
          error: "Invalid JSON response from AI",
          details: error.message,
        });
      }
    } catch (streamError) {
      console.error("Streaming error:", streamError);
      res.status(500).json({
        error: "Streaming error",
        details: streamError.message,
      });
    }
  } catch (error) {
    console.error("API Error:", error);
    return res.status(500).json({
      error: "Internal Server Error",
      details: error.message,
    });
  }
}