"use client";

import { useState } from "react";
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "./ui/card";
import { Button } from "./ui/button";
import { Input } from "./ui/input";
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "./ui/dialog";

// Define the Developer type
interface Developer {
  id: number;
  title: string;
  description: string;
  skills: string[];
  availability: "High" | "Medium" | "Low";
  minBudget: string;
  contractFee: string;
}

// Developer types data
const developerTypes: Developer[] = [
  {
    id: 1,
    title: "Web Developer",
    description: "Frontend, backend or full-stack developers specialized in web technologies",
    skills: ["React", "Angular", "Vue", "Node.js", "Django", "Ruby on Rails", "Laravel", "Express", "Flask", "PHP", "JavaScript", "TypeScript", "HTML", "CSS", "SASS", "LESS", "Bootstrap", "Tailwind CSS", "Material-UI", "Ant Design", "REST APIs", "GraphQL", "WebSockets", "OAuth", "JWT", "WebRTC", "PWA", "SEO", "Accessibility", "Performance", "Security"],
    availability: "High",
    minBudget: "Budget-friendly",
    contractFee: "Nominal"
  },
  {
    id: 2,
    title: "App Developer",
    description: "iOS and Android native or cross-platform mobile app developers",
    skills: ["Swift", "Kotlin", "React Native", "Flutter", "Xamarin", "Ionic", "PhoneGap", "Cordova", "NativeScript", "Appcelerator", "Java", "Objective-C", "Firebase", "Realm", "Core Data", "SQLite", "Push Notifications", "In-App Purchases", "ARKit", "Core ML", "Android Jetpack", "Material Design", "Google Play Services", "App Store Connect", "Google Play Console"],
    availability: "Medium",
    minBudget: "Limited",
    contractFee: "Modest"
  },
  {
    id: 3,
    title: "C/C++ Developer",
    description: "Systems programmers and embedded systems specialists",
    skills: ["C", "C++", "Embedded Systems", "Linux Kernel", "Real-time Systems", "RTOS", "Device Drivers", "Firmware", "Microcontrollers", "ARM", "AVR", "PIC", "Raspberry Pi", "Arduino", "BeagleBone", "Zephyr", "FreeRTOS", "VxWorks", "QNX", "Bare Metal"],
    availability: "Low",
    minBudget: "Increased",
    contractFee: "Considerable"
  },
  {
    id: 4,
    title: "Go Developer",
    description: "Backend and systems engineers specializing in Go language",
    skills: ["Go", "Microservices", "Docker", "Kubernetes", "API Development", "gRPC", "Protobuf", "WebSockets", "WebAssembly", "Concurrency", "Performance Tuning", "Module Building", "Error Handling", "Testing", "Security"],
    availability: "Medium",
    minBudget: "Boosted",
    contractFee: "Elevated"
  },
  {
    id: 5,
    title: "Machine Learning Engineer",
    description: "AI and ML specialists for implementing intelligent solutions",
    skills: ["Python", "TensorFlow", "PyTorch", "Data Science", "MLOps", "NLP", "Computer Vision", "Reinforcement Learning", "Time Series Analysis", "Anomaly Detection", "Recommendation Systems", "Predictive Modeling", "Deep Learning", "Fraud Detection", "Sentiment Analysis", "Speech Recognition", "Image Processing", "Object Detection", "Generative Models", "AutoML", "Image Recognition", "Text Classification", "Chatbots", "AI Ethics"],
    availability: "Low",
    minBudget: "Premium",
    contractFee: "Lavish"
  },
  {
    id: 6,
    title: "DevOps Engineer",
    description: "Specialists in CI/CD, cloud infrastructure, and deployment automation",
    skills: ["AWS", "Azure", "GCP", "Terraform", "Ansible", "Jenkins", "Docker", "Kubernetes", "GitOps", "Monitoring", "Logging", "Security", "Compliance", "Scalability", "Reliability", "Resilience", "Performance", "Cost Optimization", "Disaster Recovery", "Incident Response", "SRE"],
    availability: "Medium",
    minBudget: "Pricier",
    contractFee: "Substantial"
  }
];

export default function HireHumanDeveloper() {
  const [selectedType, setSelectedType] = useState<Developer | null>(null);
  const [searchTerm, setSearchTerm] = useState("");
  const [dialogOpen, setDialogOpen] = useState(false);

  // Filter developers based on search term
  const filteredDevelopers = developerTypes.filter(dev =>
    dev.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
    dev.description.toLowerCase().includes(searchTerm.toLowerCase()) ||
    dev.skills.some(skill => skill.toLowerCase().includes(searchTerm.toLowerCase()))
  );

  return (
    <div className="container mx-auto px-4 py-12">
      <h1 className="text-center text-3xl sm:text-4xl font-bold text-[#6d9e37] mb-3 sm:mb-4">Hire a Human Developer</h1>
      <p className="text-center text-lg sm:text-xl max-w-3xl mx-auto text-neutral-300 mb-10">
        Connect with skilled developers across various technologies and specialties
      </p>

      {/* Search and Filter */}
      <div className="mb-8">
        <div className="max-w-md mx-auto">
          <Input
            type="text"
            placeholder="Search by technology, skill, or type..."
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
            className="mb-4"
          />
        </div>
      </div>

      {/* Developer Types Grid */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {filteredDevelopers.map((developer) => (
          <Card key={developer.id} className="hover:shadow-md transition">
            <CardHeader>
              <CardTitle>{developer.title}</CardTitle>
              <CardDescription>{developer.description}</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="mb-4">
                <h4 className="text-sm font-semibold mb-2 text-neutral-300">Key Skills:</h4>
                <div className="flex flex-wrap gap-2">
                  {developer.skills.map((skill, index) => (
                    <span
                      key={index}
                      className="inline-block bg-neutral-300 text-zinc-800 text-xs px-2 py-1 rounded"
                    >
                      {skill}
                    </span>
                  ))}
                </div>
              </div>
              <div className="space-y-2 text-sm">
                <div className="flex justify-between">
                  <span className="text-zinc-500">Availability:</span>
                  <span className={`font-medium ${
                    developer.availability === "High" ? "text-green-600" :
                    developer.availability === "Medium" ? "text-amber-600" : "text-red-600"
                  }`}>
                    {developer.availability}
                  </span>
                </div>
                <div className="flex justify-between">
                  <span className="text-zinc-500">Starting at:</span>
                  <span className="font-medium">{developer.minBudget}</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-zinc-500">Contract Fee:</span>
                  <span className="font-medium">{developer.contractFee}</span>
                </div>
              </div>
            </CardContent>
            <CardFooter>
              <Button
                className="w-full"
                onClick={() => {
                  setSelectedType(developer);
                  setDialogOpen(true);
                }}
              >
                Hire Developer
              </Button>
            </CardFooter>
          </Card>
        ))}
      </div>

      {/* Developer Details Dialog */}
      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
        <DialogContent className="sm:max-w-md">
          {selectedType && (
            <>
              <DialogHeader>
                <DialogTitle>{selectedType.title} Details</DialogTitle>
                <DialogDescription>
                  Review the details and proceed to hire
                </DialogDescription>
              </DialogHeader>

              <div className="space-y-4 py-4">
                <div>
                  <h4 className="text-sm font-semibold mb-1 text-neutral-950">Overview:</h4>
                  <p className="text-neutral-400">{selectedType.description}</p>
                </div>

                <div>
                  <h4 className="text-sm font-semibold mb-1 text-neutral-950">Specialized Skills:</h4>
                  <div className="flex flex-wrap gap-2">
                    {selectedType.skills.map((skill, index) => (
                      <span
                        key={index}
                        className="inline-block bg-zinc-100 text-zinc-800 text-xs px-2 py-1 rounded"
                      >
                        {skill}
                      </span>
                    ))}
                  </div>
                </div>

                <div className="grid grid-cols-2 gap-4">
                  <div>
                    <h4 className="text-sm font-semibold mb-1 text-neutral-950">Availability:</h4>
                    <p className={`font-medium ${
                      selectedType.availability === "High" ? "text-green-600" :
                      selectedType.availability === "Medium" ? "text-amber-600" : "text-red-600"
                    }`}>
                      {selectedType.availability}
                    </p>
                  </div>
                  <div>
                    <h4 className="text-sm font-semibold mb-1 text-neutral-950">Minimum Budget:</h4>
                    <p className="font-medium text-neutral-950">{selectedType.minBudget}</p>
                  </div>
                  <div>
                    <h4 className="text-sm font-semibold mb-1 text-neutral-950">Contract Fee:</h4>
                    <p className="font-medium text-neutral-950">{selectedType.contractFee}</p>
                  </div>
                  <div>
                    <h4 className="text-sm font-semibold mb-1 text-neutral-950">Usual Turnaround:</h4>
                    <p className="font-medium text-neutral-950">1-3 weeks</p>
                  </div>
                </div>
              </div>

              <DialogFooter>
                <Button type="button" variant="outline" onClick={() => setDialogOpen(false)}>
                  Cancel
                </Button>
                <Button type="button">
                  Proceed to Hire
                </Button>
              </DialogFooter>
            </>
          )}
        </DialogContent>
      </Dialog>

      {/* Additional Information */}
      <div className="mt-16 bg-neutral-800 p-8 rounded-lg">
        <h2 className="text-2xl font-bold mb-4 text-[#6d9e37]">Why Hire Our Human Developers?</h2>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          <div>
            <h3 className="text-lg font-semibold mb-2 text-[#6d9e37]">Vetted Experts</h3>
            <p className="text-[#fff]">
              All our developers go through a rigorous vetting process to ensure top-quality talent.
            </p>
          </div>
          <div>
            <h3 className="text-lg font-semibold mb-2 text-[#6d9e37]">Flexible Engagement</h3>
            <p className="text-[#fff]">
              Hire on hourly, project-based, or long-term contracts based on your needs.
            </p>
          </div>
          <div>
            <h3 className="text-lg font-semibold mb-2 text-[#6d9e37]">Satisfaction Guarantee</h3>
            <p className="text-[#fff]">
              Not satisfied with the talent? We'll match you with another developer at no extra cost.
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}