import React from 'react';
import { Link } from '@tanstack/react-router';
import { 
  Slack, 
  Discord, 
  Webhook, 
  Calendar, 
  Mail, 
  ArrowRight, 
  Lock 
} from 'lucide-react';

interface Integration {
  id: string;
  name: string;
  description: string;
  icon: React.ElementType;
  status: 'available' | 'coming-soon';
  link?: string;
}

const INTEGRATIONS: Integration[] = [
  {
    id: 'slack',
    name: 'Slack',
    description: 'Get notifications and updates directly in your Slack channels.',
    icon: Slack,
    status: 'coming-soon',
  },
  {
    id: 'discord',
    name: 'Discord',
    description: 'Connect your workspace to Discord for community alerts.',
    icon: Discord,
    status: 'coming-soon',
  },
  {
    id: 'webhooks',
    name: 'Webhooks',
    description: 'Send real-time data to any external URL via HTTP POST.',
    icon: Webhook,
    status: 'available',
    link: '/webhooks',
  },
  {
    id: 'calendar',
    name: 'Google Calendar',
    description: 'Sync your project deadlines and meetings with Google.',
    icon: Calendar,
    status: 'coming-soon',
  },
  {
    id: 'email',
    name: 'Email Notifications',
    description: 'Configure how and when you receive email alerts.',
    icon: Mail,
    status: 'available',
    link: '/settings',
  },
];

export default function IntegrationsPage() {
  return (
    <div className="max-w-6xl mx-auto p-6">
      <div className="mb-8">
        <h1 className="text-3xl font-bold text-slate-900 dark:text-white">Integrations</h1>
        <p className="text-slate-500 dark:text-slate-400 mt-2">
          Connect EmberClone with your favorite tools to automate your workflow.
        </p>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {INTEGRATIONS.map((integration) => {
          const Icon = integration.icon;
          const isComingSoon = integration.status === 'coming-soon';

          return (
            <div 
              key={integration.id}
              className="group relative p-6 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl transition-all duration-200 hover:shadow-lg hover:border-indigo-500 dark:hover:border-indigo-400"
            >
              <div className="flex items-start justify-between mb-4">
                <div className="p-3 bg-indigo-50 dark:bg-indigo-900/30 text-indigo-600 dark:text-indigo-400 rounded-lg">
                  <Icon size={24} />
                </div>
                {isComingSoon && (
                  <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-slate-100 text-slate-600 dark:bg-slate-700 dark:text-slate-400">
                    <Lock size={12} className="mr-1" />
                    Coming Soon
                  </span>
                )}
              </div>

              <h3 className="text-lg font-semibold text-slate-900 dark:text-white mb-2">
                {integration.name}
              </h3>
              <p className="text-sm text-slate-500 dark:text-slate-400 mb-6 min-h-[40px]">
                {integration.description}
              </p>

              {isComingSoon ? (
                <button 
                  disabled 
                  className="w-full py-2 px-4 bg-slate-100 dark:bg-slate-700 text-slate-400 dark:text-slate-500 rounded-lg text-sm font-medium cursor-not-allowed"
                >
                  Configure
                </button>
              ) : (
                <Link 
                  to={integration.link || '/'} 
                  className="flex items-center justify-center w-full py-2 px-4 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg text-sm font-medium transition-colors group"
                >
                  Configure
                  <ArrowRight size={16} className="ml-2 transition-transform group-hover:translate-x-1" />
                </Link>
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
}