vibn-frontend/components/ai/project-config-generator.tsx

"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { Download, Search, CheckCircle2, FileText } from "lucide-react";
import { toast } from "sonner";

interface ProjectConfigGeneratorProps {
  projectId: string;
  projectName: string;
}

export function ProjectConfigGenerator({ projectId, projectName }: ProjectConfigGeneratorProps) {
  const [showDialog, setShowDialog] = useState(false);
  const [searching, setSearching] = useState(false);
  const [fileFound, setFileFound] = useState<boolean | null>(null);

  const vibnConfig = {
    projectId,
    projectName,
    version: "1.0",
  };

  const configContent = JSON.stringify(vibnConfig, null, 2);

  const handleSearchFile = async () => {
    setSearching(true);
    setFileFound(null);
    
    try {
      // Prompt user to select the .vibn file
      const input = document.createElement('input');
      input.type = 'file';
      input.accept = '.vibn,.json';
      
      input.onchange = async (e: any) => {
        const file = e.target?.files?.[0];
        if (!file) {
          setSearching(false);
          return;
        }
        
        try {
          const text = await file.text();
          const config = JSON.parse(text);
          
          if (config.projectId === projectId) {
            setFileFound(true);
            toast.success("File verified!", {
              description: "Your .vibn file is correctly configured for this project",
            });
          } else {
            setFileFound(false);
            toast.error("Project ID mismatch", {
              description: "This .vibn file is for a different project",
            });
          }
        } catch (error) {
          setFileFound(false);
          toast.error("Invalid file", {
            description: "Could not read or parse the .vibn file",
          });
        }
        
        setSearching(false);
      };
      
      input.click();
    } catch (error) {
      toast.error("Failed to search for file");
      setSearching(false);
    }
  };

  const handleDownload = () => {
    const blob = new Blob([configContent], { type: "application/json" });
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = ".vibn";
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
    toast.success("Configuration downloaded!", {
      description: "Save it to your project root and restart Cursor",
    });
  };

  return (
    <>
      <Button
        variant="outline"
        className="w-full justify-start h-auto py-2 px-3"
        onClick={() => setShowDialog(true)}
      >
        <FileText className="h-4 w-4 mr-2 flex-shrink-0" />
        <span className="text-xs">Link Workspace</span>
      </Button>

      <Dialog open={showDialog} onOpenChange={setShowDialog}>
        <DialogContent className="max-w-lg">
          <DialogHeader>
            <DialogTitle className="flex items-center gap-2">
              <FileText className="h-5 w-5" />
              Link Your Workspace
            </DialogTitle>
            <DialogDescription>
              Add a <code className="text-xs bg-muted px-1 py-0.5 rounded">.vibn</code> file to your project root so the Cursor extension automatically tracks sessions.
            </DialogDescription>
          </DialogHeader>

          <div className="space-y-4">
            {/* Primary Action */}
            <Button onClick={handleDownload} className="w-full" size="lg">
              <Download className="h-5 w-5 mr-2" />
              Download .vibn
            </Button>

            {/* Instructions */}
            <div className="text-sm space-y-3 bg-muted/50 p-3 rounded-md">
              <p className="font-medium">Setup Steps:</p>
              <ol className="text-xs text-muted-foreground space-y-1 list-decimal ml-4">
                <li>Download the file above</li>
                <li>Save it to your project root as <code className="bg-background px-1 rounded">.vibn</code></li>
                <li>Commit and push to GitHub</li>
                <li>Extension will auto-link sessions to this project</li>
              </ol>
            </div>

            {/* Verification */}
            <div className="pt-2 space-y-2">
              <Button 
                onClick={handleSearchFile} 
                variant="outline" 
                className="w-full" 
                size="sm"
                disabled={searching}
              >
                {searching ? (
                  <>
                    <Search className="h-4 w-4 mr-2 animate-spin" />
                    Verifying...
                  </>
                ) : fileFound === true ? (
                  <>
                    <CheckCircle2 className="h-4 w-4 mr-2 text-green-600" />
                    ✓ File Found
                  </>
                ) : (
                  <>
                    <Search className="h-4 w-4 mr-2" />
                    Verify File Added
                  </>
                )}
              </Button>
              {fileFound === false && (
                <p className="text-xs text-red-600 text-center">File not found or incorrect projectId</p>
              )}
              {fileFound === true && (
                <p className="text-xs text-green-600 text-center">Ready! Push to GitHub and you're all set.</p>
              )}
            </div>
          </div>
        </DialogContent>
      </Dialog>
    </>
  );
}