"use client";

import { useState } from "react";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Github, Sparkles, Check } from "lucide-react";
import { toast } from "sonner";
import { CursorIcon } from "@/components/icons/custom-icons";

interface ConnectSourcesModalProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  projectId: string;
}

// Mock connection states - these would come from your database in production
const useConnectionStates = () => {
  const [connections, setConnections] = useState({
    vibn: false,
    chatgpt: false,
    github: false,
    v0: false,
  });

  return { connections, setConnections };
};

export function ConnectSourcesModal({
  open,
  onOpenChange,
  projectId,
}: ConnectSourcesModalProps) {
  const { connections, setConnections } = useConnectionStates();

  const handleConnect = async (source: "vibn" | "chatgpt" | "github" | "v0") => {
    // Mock connection logic - replace with actual OAuth/API integration
    const sourceName = source === "vibn" ? "Vib'n Extension" : source === "chatgpt" ? "ChatGPT" : source === "github" ? "GitHub" : "v0";
    toast.success(`Connecting to ${sourceName}...`);
    
    // Simulate connection delay
    setTimeout(() => {
      setConnections((prev) => ({ ...prev, [source]: true }));
      toast.success(`${sourceName} connected successfully!`);
    }, 1000);
  };

  const handleDisconnect = (source: "vibn" | "chatgpt" | "github" | "v0") => {
    const sourceName = source === "vibn" ? "Vib'n Extension" : source === "chatgpt" ? "ChatGPT" : source === "github" ? "GitHub" : "v0";
    setConnections((prev) => ({ ...prev, [source]: false }));
    toast.success(`${sourceName} disconnected`);
  };

  const sources = [
    {
      id: "vibn" as const,
      name: "Vib'n Extension",
      description: "Connect the Vib'n extension with Cursor for seamless development tracking",
      icon: CursorIcon,
      color: "text-foreground",
      bgColor: "bg-primary/10",
    },
    {
      id: "chatgpt" as const,
      name: "ChatGPT",
      description: "Connect your ChatGPT project for AI-powered insights and context",
      icon: Sparkles,
      color: "text-green-500",
      bgColor: "bg-green-500/10",
    },
    {
      id: "github" as const,
      name: "GitHub",
      description: "Sync your repository to track code changes and generate screens",
      icon: Github,
      color: "text-foreground",
      bgColor: "bg-foreground/10",
    },
    {
      id: "v0" as const,
      name: "v0",
      description: "Connect v0 to generate and iterate on UI designs",
      icon: Sparkles,
      color: "text-blue-500",
      bgColor: "bg-blue-500/10",
    },
  ];

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-2xl">
        <DialogHeader>
          <DialogTitle>Connect Sources</DialogTitle>
          <DialogDescription>
            Connect external sources to enhance your product development workflow
          </DialogDescription>
        </DialogHeader>

        <div className="space-y-3 mt-4">
          {sources.map((source) => {
            const Icon = source.icon;
            const isConnected = connections[source.id];

            return (
              <Card key={source.id} className={isConnected ? "border-primary" : ""}>
                <CardContent className="p-4">
                  <div className="flex items-start gap-4">
                    <div className={`p-2.5 rounded-lg ${source.bgColor} shrink-0`}>
                      <Icon className={`h-5 w-5 ${source.color}`} />
                    </div>
                    
                    <div className="flex-1 min-w-0">
                      <div className="flex items-center gap-2 mb-1">
                        <h3 className="font-semibold text-sm">{source.name}</h3>
                        {isConnected && (
                          <div className="flex items-center gap-1 text-xs text-green-600 bg-green-500/10 px-2 py-0.5 rounded-full">
                            <Check className="h-3 w-3" />
                            Connected
                          </div>
                        )}
                      </div>
                      <p className="text-sm text-muted-foreground">
                        {source.description}
                      </p>
                    </div>

                    <div className="shrink-0">
                      {isConnected ? (
                        <Button
                          variant="outline"
                          size="sm"
                          onClick={() => handleDisconnect(source.id)}
                        >
                          Disconnect
                        </Button>
                      ) : (
                        <Button
                          size="sm"
                          onClick={() => handleConnect(source.id)}
                        >
                          Connect
                        </Button>
                      )}
                    </div>
                  </div>
                </CardContent>
              </Card>
            );
          })}
        </div>
      </DialogContent>
    </Dialog>
  );
}