import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import {
  ExternalLink,
  Star,
  Zap,
  CreditCard,
  MessageSquare,
  Code,
  BarChart,
  Mail,
  Cog,
} from 'lucide-react';
import { useState } from 'react';

export default function IntegrationsCategoryTabs() {
  const [activeTab, setActiveTab] = useState('payment');

  const categories = [
    { id: 'payment', name: 'Payment', icon: CreditCard, count: 12 },
    {
      id: 'communication',
      name: 'Communication',
      icon: MessageSquare,
      count: 8,
    },
    { id: 'development', name: 'Development', icon: Code, count: 15 },
    { id: 'analytics', name: 'Analytics', icon: BarChart, count: 7 },
    { id: 'marketing', name: 'Marketing', icon: Mail, count: 10 },
    { id: 'automation', name: 'Automation', icon: Cog, count: 9 },
  ];

  const integrationsData = {
    payment: [
      {
        name: 'Stripe',
        description:
          'Accept payments from customers worldwide with advanced fraud protection',
        logo: '/placeholder.svg',
        rating: 4.9,
        setupTime: '5 min',
        featured: true,
        pricing: '2.9% + 30¢',
        integrationLevel: 'Full',
      },
      {
        name: 'PayPal',
        description:
          'Trusted payment solution with buyer and seller protection worldwide',
        logo: '/placeholder.svg',
        rating: 4.7,
        setupTime: '3 min',
        featured: false,
        pricing: '2.9% + $0.30',
        integrationLevel: 'Full',
      },
      {
        name: 'Square',
        description:
          'Complete payment processing solution for online and in-person sales',
        logo: '/placeholder.svg',
        rating: 4.6,
        setupTime: '7 min',
        featured: false,
        pricing: '2.6% + 10¢',
        integrationLevel: 'Partial',
      },
    ],
    communication: [
      {
        name: 'Slack',
        description:
          'Team communication platform with channels, DMs, and integrations',
        logo: '/placeholder.svg',
        rating: 4.8,
        setupTime: '2 min',
        featured: true,
        pricing: 'Free - $12.50/user',
        integrationLevel: 'Full',
      },
      {
        name: 'Discord',
        description:
          'Voice, video, and text communication for communities and teams',
        logo: '/placeholder.svg',
        rating: 4.6,
        setupTime: '1 min',
        featured: false,
        pricing: 'Free - $9.99/user',
        integrationLevel: 'Partial',
      },
      {
        name: 'Microsoft Teams',
        description:
          'Integrated communication and collaboration platform by Microsoft',
        logo: '/placeholder.svg',
        rating: 4.4,
        setupTime: '5 min',
        featured: false,
        pricing: '$4 - $22/user',
        integrationLevel: 'Full',
      },
    ],
    development: [
      {
        name: 'GitHub',
        description:
          'Version control and collaboration platform for development teams',
        logo: '/placeholder.svg',
        rating: 4.9,
        setupTime: '3 min',
        featured: true,
        pricing: 'Free - $21/user',
        integrationLevel: 'Full',
      },
      {
        name: 'GitLab',
        description: 'Complete DevOps platform with Git repository management',
        logo: '/placeholder.svg',
        rating: 4.7,
        setupTime: '5 min',
        featured: false,
        pricing: 'Free - $99/user',
        integrationLevel: 'Full',
      },
      {
        name: 'Jira',
        description: 'Issue tracking and project management for agile teams',
        logo: '/placeholder.svg',
        rating: 4.3,
        setupTime: '10 min',
        featured: false,
        pricing: '$7 - $14/user',
        integrationLevel: 'Partial',
      },
    ],
    analytics: [
      {
        name: 'Google Analytics',
        description:
          'Web analytics service that tracks and reports website traffic',
        logo: '/placeholder.svg',
        rating: 4.5,
        setupTime: '5 min',
        featured: true,
        pricing: 'Free - $150k/year',
        integrationLevel: 'Full',
      },
      {
        name: 'Mixpanel',
        description:
          'Advanced analytics platform for mobile and web applications',
        logo: '/placeholder.svg',
        rating: 4.6,
        setupTime: '8 min',
        featured: false,
        pricing: 'Free - $833/month',
        integrationLevel: 'Full',
      },
    ],
    marketing: [
      {
        name: 'Mailchimp',
        description:
          'Email marketing automation and audience management platform',
        logo: '/placeholder.svg',
        rating: 4.6,
        setupTime: '7 min',
        featured: true,
        pricing: 'Free - $299/month',
        integrationLevel: 'Full',
      },
      {
        name: 'HubSpot',
        description: 'Inbound marketing, sales, and service software platform',
        logo: '/placeholder.svg',
        rating: 4.4,
        setupTime: '15 min',
        featured: false,
        pricing: 'Free - $3,200/month',
        integrationLevel: 'Full',
      },
    ],
    automation: [
      {
        name: 'Zapier',
        description: 'Connect your apps and automate workflows without coding',
        logo: '/placeholder.svg',
        rating: 4.5,
        setupTime: '5 min',
        featured: true,
        pricing: 'Free - $599/month',
        integrationLevel: 'Full',
      },
      {
        name: 'Make',
        description:
          'Visual platform for creating automated workflows and integrations',
        logo: '/placeholder.svg',
        rating: 4.3,
        setupTime: '10 min',
        featured: false,
        pricing: 'Free - $299/month',
        integrationLevel: 'Partial',
      },
    ],
  };

  const getIntegrationLevelColor = (level: string) => {
    switch (level) {
      case 'Full':
        return 'bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300';
      case 'Partial':
        return 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900 dark:text-yellow-300';
      default:
        return 'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300';
    }
  };

  return (
    <>
      {/* Integrations Category Tabs Section */}
      <div className="py-24 lg:py-32">
        <div className="container mx-auto px-4 md:px-6 2xl:max-w-[1400px]">
          {/* Header */}
          <div className="mx-auto max-w-3xl text-center">
            <Badge className="mb-4" variant="outline">
              <Zap className="mr-2 h-4 w-4" />
              61+ Integrations Across 6 Categories
            </Badge>
            <h2 className="text-3xl font-bold tracking-tight sm:text-4xl lg:text-5xl">
              Integrations by Category
            </h2>
            <p className="text-muted-foreground mt-6 text-lg">
              Discover integrations organized by category. From payments to
              analytics, find the perfect tools to enhance your workflow.
            </p>
          </div>

          {/* Tabs */}
          <div className="mt-16">
            <Tabs
              value={activeTab}
              onValueChange={setActiveTab}
              className="w-full"
            >
              {/* Mobile dropdown on small screens, tabs on larger screens */}
              <div className="flex justify-center">
                <TabsList className="grid h-auto w-full max-w-4xl grid-cols-2 gap-2 p-2 sm:grid-cols-3 lg:grid-cols-6">
                  {categories.map((category) => {
                    const Icon = category.icon;
                    return (
                      <TabsTrigger
                        key={category.id}
                        value={category.id}
                        className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground flex flex-col gap-1 p-3"
                      >
                        <Icon className="h-4 w-4" />
                        <span className="text-xs font-medium">
                          {category.name} ({category.count})
                        </span>
                      </TabsTrigger>
                    );
                  })}
                </TabsList>
              </div>

              {/* Tab Content */}
              {categories.map((category) => (
                <TabsContent
                  key={category.id}
                  value={category.id}
                  className="mt-12"
                >
                  <div className="mb-6 text-center">
                    <h3 className="text-2xl font-semibold">
                      {category.name} Integrations
                    </h3>
                    <p className="text-muted-foreground mt-2">
                      {category.count} integrations available in this category
                    </p>
                  </div>

                  <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
                    {integrationsData[
                      category.id as keyof typeof integrationsData
                    ]?.map((integration) => (
                      <Card
                        key={integration.name}
                        className="relative transition-all hover:shadow-lg"
                      >
                        {integration.featured && (
                          <Badge
                            className="absolute -top-2 left-4 z-10"
                            variant="default"
                          >
                            Featured
                          </Badge>
                        )}
                        <CardContent>
                          {/* Header */}
                          <div className="flex items-center justify-between">
                            <div className="flex items-center gap-3">
                              <div className="relative h-12 w-12 overflow-hidden rounded-lg">
                                <img
                                  src={integration.logo}
                                  alt={`${integration.name} logo`}
                                  className="object-cover"
                                />
                              </div>
                              <div>
                                <h3 className="font-semibold">
                                  {integration.name}
                                </h3>
                                <div className="flex items-center gap-1">
                                  <Star className="h-3 w-3 fill-yellow-400 text-yellow-400" />
                                  <span className="text-xs font-medium">
                                    {integration.rating}
                                  </span>
                                </div>
                              </div>
                            </div>
                            <Badge
                              className={`text-xs ${getIntegrationLevelColor(integration.integrationLevel)}`}
                            >
                              {integration.integrationLevel}
                            </Badge>
                          </div>

                          {/* Description */}
                          <p className="text-muted-foreground mt-4 text-sm">
                            {integration.description}
                          </p>

                          {/* Details */}
                          <div className="mt-4 space-y-2 text-sm">
                            <div className="flex justify-between">
                              <span className="text-muted-foreground">
                                Setup time:
                              </span>
                              <span className="font-medium">
                                {integration.setupTime}
                              </span>
                            </div>
                            <div className="flex justify-between">
                              <span className="text-muted-foreground">
                                Pricing:
                              </span>
                              <span className="font-medium">
                                {integration.pricing}
                              </span>
                            </div>
                          </div>

                          {/* Action Button */}
                          <div className="mt-6 flex gap-2">
                            <Button className="flex-1" size="sm">
                              Connect
                            </Button>
                            <Button variant="outline" size="sm">
                              <ExternalLink className="h-4 w-4" />
                            </Button>
                          </div>
                        </CardContent>
                      </Card>
                    ))}
                  </div>

                  {/* View More Button */}
                  <div className="mt-8 text-center">
                    <Button variant="outline">
                      View All {category.name} Integrations
                      <ExternalLink className="ml-2 h-4 w-4" />
                    </Button>
                  </div>
                </TabsContent>
              ))}
            </Tabs>
          </div>

          {/* Bottom CTA */}
          <div className="mt-16 text-center">
            <div className="mx-auto max-w-2xl">
              <h3 className="text-xl font-semibold">
                Need a Custom Integration?
              </h3>
              <p className="text-muted-foreground mt-2">
                Our team can build custom integrations tailored to your specific
                needs.
              </p>
              <div className="mt-6 flex flex-col gap-3 sm:flex-row sm:justify-center">
                <Button>Request Custom Integration</Button>
                <Button variant="outline">View Integration Guide</Button>
              </div>
            </div>
          </div>
        </div>
      </div>
      {/* End Integrations Category Tabs Section */}
    </>
  );
}