"use client";

import { use, 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 {
  Cog,
  Database,
  Github,
  Globe,
  Server,
  Code2,
  ExternalLink,
  Plus,
  Loader2,
  CheckCircle2,
  Circle,
  Clock,
  Key,
  Zap,
} from "lucide-react";
import { Separator } from "@/components/ui/separator";
import Link from "next/link";
import { toast } from "sonner";
import { CollapsibleSidebar } from "@/components/ui/collapsible-sidebar";

interface WorkItem {
  id: string;
  title: string;
  path: string;
  status: "built" | "in_progress" | "missing";
  category: string;
  sessionsCount: number;
  commitsCount: number;
  estimatedCost?: number;
}

interface TechResource {
  id: string;
  name: string;
  type: "firebase" | "github" | "domain" | "api";
  status: "active" | "inactive";
  url?: string;
  lastUpdated?: string;
}

export default function TechPage({
  params,
}: {
  params: Promise<{ workspace: string; projectId: string }>;
}) {
  const { workspace, projectId } = use(params);
  const [workItems, setWorkItems] = useState<WorkItem[]>([]);
  const [resources, setResources] = useState<TechResource[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    loadTechData();
  }, [projectId]);

  const loadTechData = async () => {
    try {
      setLoading(true);
      const response = await fetch(`/api/projects/${projectId}/timeline-view`);
      
      if (response.ok) {
        const data = await response.json();
        // Filter for technical items only
        const techItems = data.workItems.filter((item: WorkItem) => 
          isTechnical(item)
        );
        setWorkItems(techItems);
      }

      // Mock resources data
      setResources([
        {
          id: "1",
          name: "Firebase Project",
          type: "firebase",
          status: "active",
          url: "https://console.firebase.google.com",
          lastUpdated: new Date().toISOString(),
        },
        {
          id: "2",
          name: "GitHub Repository",
          type: "github",
          status: "active",
          url: "https://github.com",
          lastUpdated: new Date().toISOString(),
        },
      ]);
    } catch (error) {
      console.error("Error loading tech data:", error);
      toast.error("Failed to load tech data");
    } finally {
      setLoading(false);
    }
  };

  const isTechnical = (item: WorkItem): boolean => {
    const path = item.path.toLowerCase();
    const title = item.title.toLowerCase();
    
    // APIs and backend
    if (path.startsWith('/api/')) return true;
    if (title.includes(' api') || title.includes('api ')) return true;
    
    // Auth infrastructure
    if (path.includes('oauth') && !path.includes('button') && !path.includes('signin')) return true;
    
    // System settings
    if (item.category === 'Settings' && title.includes('api')) return true;
    
    return false;
  };

  const getStatusIcon = (status: string) => {
    if (status === "built" || status === "active") return <CheckCircle2 className="h-4 w-4 text-green-600" />;
    if (status === "in_progress") return <Clock className="h-4 w-4 text-blue-600" />;
    return <Circle className="h-4 w-4 text-gray-400" />;
  };

  const getResourceIcon = (type: string) => {
    switch (type) {
      case "firebase":
        return <Zap className="h-5 w-5 text-orange-600" />;
      case "github":
        return <Github className="h-5 w-5 text-gray-900" />;
      case "domain":
        return <Globe className="h-5 w-5 text-blue-600" />;
      case "api":
        return <Code2 className="h-5 w-5 text-purple-600" />;
      default:
        return <Server className="h-5 w-5 text-gray-600" />;
    }
  };

  return (
    <div className="relative h-full w-full bg-background overflow-hidden flex">
      {/* Left Sidebar */}
      <CollapsibleSidebar>
        <div className="space-y-4">
          <div>
            <h3 className="text-sm font-semibold mb-2">Infrastructure</h3>
            <div className="space-y-2 text-xs">
              <div className="flex justify-between">
                <span className="text-muted-foreground">Resources</span>
                <span className="font-medium">{resources.length}</span>
              </div>
              <div className="flex justify-between">
                <span className="text-muted-foreground">Active</span>
                <span className="font-medium text-green-600">{resources.filter(r => r.status === 'active').length}</span>
              </div>
              <div className="flex justify-between">
                <span className="text-muted-foreground">Work Items</span>
                <span className="font-medium">{workItems.length}</span>
              </div>
            </div>
          </div>
        </div>
      </CollapsibleSidebar>

      {/* Main Content */}
      <div className="flex-1 flex flex-col overflow-hidden">
      {/* Header */}
      <div className="border-b bg-background p-4">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-4">
            <Cog className="h-6 w-6" />
            <div>
              <h1 className="text-xl font-bold">Tech Infrastructure</h1>
              <p className="text-sm text-muted-foreground">
                APIs, services, and technical resources
              </p>
            </div>
          </div>
          <Button className="gap-2">
            <Plus className="h-4 w-4" />
            Add Resource
          </Button>
        </div>
      </div>

      {/* Content */}
      <div className="flex-1 overflow-auto p-4 space-y-6">
        {loading ? (
          <div className="flex items-center justify-center h-64">
            <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
          </div>
        ) : (
          <>
            {/* Infrastructure Resources */}
            <div>
              <h2 className="text-lg font-semibold mb-4">Infrastructure Resources</h2>
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                {resources.map((resource) => (
                  <Card key={resource.id} className="hover:bg-accent/30 transition-colors">
                    <CardHeader className="pb-3">
                      <div className="flex items-start justify-between">
                        <div className="flex items-center gap-2">
                          {getResourceIcon(resource.type)}
                          <CardTitle className="text-base">{resource.name}</CardTitle>
                        </div>
                        {getStatusIcon(resource.status)}
                      </div>
                    </CardHeader>
                    <CardContent>
                      <div className="space-y-2">
                        <Badge variant="secondary" className="text-xs capitalize">
                          {resource.type}
                        </Badge>
                        {resource.lastUpdated && (
                          <p className="text-xs text-muted-foreground">
                            Updated {new Date(resource.lastUpdated).toLocaleDateString()}
                          </p>
                        )}
                        {resource.url && (
                          <Button
                            variant="outline"
                            size="sm"
                            className="w-full gap-2"
                            onClick={() => window.open(resource.url, "_blank")}
                          >
                            <ExternalLink className="h-3 w-3" />
                            Open Console
                          </Button>
                        )}
                      </div>
                    </CardContent>
                  </Card>
                ))}
              </div>
            </div>

            <Separator />

            {/* Technical Work Items */}
            <div>
              <div className="flex items-center justify-between mb-4">
                <h2 className="text-lg font-semibold">Technical Work Items</h2>
                <Badge variant="secondary">{workItems.length} items</Badge>
              </div>

              {workItems.length === 0 ? (
                <Card className="p-8 text-center">
                  <Code2 className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
                  <h3 className="text-lg font-semibold mb-2">No technical items yet</h3>
                  <p className="text-sm text-muted-foreground">
                    Technical items include APIs, services, and infrastructure
                  </p>
                </Card>
              ) : (
                <div className="space-y-3">
                  {workItems.map((item) => (
                    <Card key={item.id} className="p-4 hover:bg-accent/30 transition-colors">
                      <div className="flex items-start justify-between">
                        <div className="flex items-start gap-3 flex-1">
                          {getStatusIcon(item.status)}
                          
                          <div className="flex-1 space-y-2">
                            {/* Title and Status */}
                            <div className="flex items-center gap-2">
                              <h3 className="font-semibold">{item.title}</h3>
                              <Badge variant="outline" className="text-xs">
                                {item.status === "built" ? "Active" : item.status === "in_progress" ? "In Progress" : "Planned"}
                              </Badge>
                            </div>

                            {/* Path */}
                            <p className="text-sm text-muted-foreground font-mono">
                              {item.path}
                            </p>

                            {/* Stats */}
                            <div className="flex items-center gap-4 text-xs text-muted-foreground">
                              <span>{item.sessionsCount} sessions</span>
                              <span>•</span>
                              <span>{item.commitsCount} commits</span>
                              {item.estimatedCost && (
                                <>
                                  <span>•</span>
                                  <span>${item.estimatedCost.toFixed(2)}</span>
                                </>
                              )}
                            </div>
                          </div>
                        </div>

                        {/* Actions */}
                        <div className="flex items-center gap-2">
                          <Button
                            variant="outline"
                            size="sm"
                            onClick={() => toast.info("Documentation coming soon")}
                          >
                            <Database className="h-4 w-4" />
                          </Button>
                          
                          {item.path.startsWith('/api/') && (
                            <Button
                              variant="outline"
                              size="sm"
                              className="gap-2"
                              onClick={() => toast.info("API testing coming soon")}
                            >
                              <Code2 className="h-4 w-4" />
                              Test API
                            </Button>
                          )}
                        </div>
                      </div>
                    </Card>
                  ))}
                </div>
              )}
            </div>

            {/* Quick Links */}
            <div>
              <h2 className="text-lg font-semibold mb-4">Quick Links</h2>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                <Card className="p-4 hover:bg-accent/30 cursor-pointer transition-colors">
                  <Link href={`/${workspace}/keys`} className="flex items-center justify-between">
                    <div className="flex items-center gap-3">
                      <Key className="h-5 w-5 text-muted-foreground" />
                      <div>
                        <p className="font-medium">API Keys</p>
                        <p className="text-xs text-muted-foreground">Manage service credentials</p>
                      </div>
                    </div>
                    <ExternalLink className="h-4 w-4 text-muted-foreground" />
                  </Link>
                </Card>

                <Card className="p-4 hover:bg-accent/30 cursor-pointer transition-colors">
                  <a
                    href="https://console.firebase.google.com"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="flex items-center justify-between"
                  >
                    <div className="flex items-center gap-3">
                      <Zap className="h-5 w-5 text-orange-600" />
                      <div>
                        <p className="font-medium">Firebase Console</p>
                        <p className="text-xs text-muted-foreground">Manage database & hosting</p>
                      </div>
                    </div>
                    <ExternalLink className="h-4 w-4 text-muted-foreground" />
                  </a>
                </Card>

                <Card className="p-4 hover:bg-accent/30 cursor-pointer transition-colors">
                  <a
                    href="https://github.com"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="flex items-center justify-between"
                  >
                    <div className="flex items-center gap-3">
                      <Github className="h-5 w-5 text-gray-900" />
                      <div>
                        <p className="font-medium">GitHub</p>
                        <p className="text-xs text-muted-foreground">Code repository & CI/CD</p>
                      </div>
                    </div>
                    <ExternalLink className="h-4 w-4 text-muted-foreground" />
                  </a>
                </Card>

                <Card className="p-4 hover:bg-accent/30 cursor-pointer transition-colors">
                  <a
                    href="https://vercel.com"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="flex items-center justify-between"
                  >
                    <div className="flex items-center gap-3">
                      <Server className="h-5 w-5 text-muted-foreground" />
                      <div>
                        <p className="font-medium">Deployment</p>
                        <p className="text-xs text-muted-foreground">Production & preview deploys</p>
                      </div>
                    </div>
                    <ExternalLink className="h-4 w-4 text-muted-foreground" />
                  </a>
                </Card>
              </div>
            </div>
          </>
        )}
      </div>
      </div>
      {/* End Main Content */}
    </div>
  );
}