import React from 'react';
import { ClayCard } from './ClayCard';
import { Button } from './Button';
import {
  GraduationCap,
  Users,
  Calendar,
  FileText,
  ClipboardCheck,
  ExternalLink,
  Sparkles,
  Star,
  ArrowRight,
  Download,
  Video,
  BookOpen,
  Mic,
  Trophy,
  Target,
  TrendingUp,
  CalendarDays,
  Clock,
  MapPin
} from 'lucide-react';

interface MarketplaceProps {
  onQuizClick: () => void;
  calendlyCoachingLink?: string;
  calendlyTeamLink?: string;
}

export const Marketplace: React.FC<MarketplaceProps> = ({
  onQuizClick,
  calendlyCoachingLink = 'https://calendly.com',
  calendlyTeamLink = 'https://calendly.com',
}) => {
  const handleExternalLink = (url: string) => {
    window.open(url, '_blank', 'noopener,noreferrer');
  };

  return (
    <div className="max-w-5xl mx-auto py-10 px-4">
      {/* Header - Level 1 (subtle) since it's a page header */}
      <ClayCard elevation="subtle" className="mb-10 text-center">
        <div className="inline-flex items-center gap-2 px-4 py-2 bg-indigo-50 rounded-full text-indigo-600 text-sm font-medium mb-4">
          <Sparkles className="w-4 h-4" />
          Your Success Hub
        </div>
        <h1 className="text-3xl font-bold text-gray-800">Town Hall</h1>
        <p className="text-gray-500 mt-2 max-w-xl mx-auto">
          Resources, coaching, and opportunities to accelerate your commercial real estate success.
        </p>
      </ClayCard>

      {/* Main Action Cards */}
      <div className="grid gap-6 mb-10">
        {/* Get Coaching Card */}
        <ClayCard className="relative overflow-hidden">
          <div className="absolute top-0 right-0 w-64 h-64 bg-gradient-to-br from-indigo-100/50 to-purple-100/50 rounded-full -translate-y-1/2 translate-x-1/2" />
          <div className="relative flex flex-col md:flex-row gap-6 items-start md:items-center">
            <div className="bg-gradient-to-br from-indigo-500 to-purple-600 p-4 rounded-2xl text-white shadow-lg">
              <GraduationCap size={32} />
            </div>
            <div className="flex-1">
              <div className="flex items-center gap-2 mb-1">
                <h3 className="text-xl font-bold text-gray-800">Get Coaching</h3>
                <span className="px-2 py-0.5 bg-amber-100 text-amber-700 text-xs font-semibold rounded-full">Popular</span>
              </div>
              <p className="text-gray-500 text-sm mt-1">
                Work one-on-one with an expert coach to optimize your outreach strategy,
                improve your scripts, and close more deals faster.
              </p>
              <div className="flex flex-wrap gap-3 mt-3">
                <span className="flex items-center gap-1 text-xs text-gray-500">
                  <Target className="w-3 h-3" /> Strategy Sessions
                </span>
                <span className="flex items-center gap-1 text-xs text-gray-500">
                  <Mic className="w-3 h-3" /> Script Review
                </span>
                <span className="flex items-center gap-1 text-xs text-gray-500">
                  <TrendingUp className="w-3 h-3" /> Deal Analysis
                </span>
              </div>
            </div>
            <Button onClick={() => handleExternalLink(calendlyCoachingLink)}>
              Book a Session
              <ExternalLink size={16} />
            </Button>
          </div>
        </ClayCard>

        {/* Take the Quiz Card */}
        <ClayCard className="relative overflow-hidden">
          <div className="absolute top-0 right-0 w-64 h-64 bg-gradient-to-br from-purple-100/50 to-pink-100/50 rounded-full -translate-y-1/2 translate-x-1/2" />
          <div className="relative flex flex-col md:flex-row gap-6 items-start md:items-center">
            <div className="bg-gradient-to-br from-purple-500 to-pink-600 p-4 rounded-2xl text-white shadow-lg">
              <ClipboardCheck size={32} />
            </div>
            <div className="flex-1">
              <div className="flex items-center gap-2 mb-1">
                <h3 className="text-xl font-bold text-gray-800">Take the Performance Quiz</h3>
                <span className="px-2 py-0.5 bg-green-100 text-green-700 text-xs font-semibold rounded-full">Free</span>
              </div>
              <p className="text-gray-500 text-sm mt-1">
                Discover where you stand among your peers. Get personalized insights and
                actionable recommendations to level up your performance.
              </p>
              <div className="flex flex-wrap gap-3 mt-3">
                <span className="flex items-center gap-1 text-xs text-gray-500">
                  <Trophy className="w-3 h-3" /> Benchmarking
                </span>
                <span className="flex items-center gap-1 text-xs text-gray-500">
                  <Star className="w-3 h-3" /> Personalized Tips
                </span>
                <span className="flex items-center gap-1 text-xs text-gray-500">
                  <Clock className="w-3 h-3" /> 5 Minutes
                </span>
              </div>
            </div>
            <Button onClick={onQuizClick}>
              Start Quiz
              <ArrowRight size={16} />
            </Button>
          </div>
        </ClayCard>

        {/* Join Our Team Card */}
        <ClayCard className="relative overflow-hidden">
          <div className="absolute top-0 right-0 w-64 h-64 bg-gradient-to-br from-emerald-100/50 to-teal-100/50 rounded-full -translate-y-1/2 translate-x-1/2" />
          <div className="relative flex flex-col md:flex-row gap-6 items-start md:items-center">
            <div className="bg-gradient-to-br from-emerald-500 to-teal-600 p-4 rounded-2xl text-white shadow-lg">
              <Users size={32} />
            </div>
            <div className="flex-1">
              <h3 className="text-xl font-bold text-gray-800">Join Our Team</h3>
              <p className="text-gray-500 text-sm mt-1">
                Interested in becoming part of our growing team? We are always looking
                for talented individuals who share our passion for real estate success.
              </p>
              <div className="flex flex-wrap gap-3 mt-3">
                <span className="flex items-center gap-1 text-xs text-gray-500">
                  <Star className="w-3 h-3" /> Growth Opportunities
                </span>
                <span className="flex items-center gap-1 text-xs text-gray-500">
                  <Users className="w-3 h-3" /> Collaborative Culture
                </span>
              </div>
            </div>
            <Button
              variant="secondary"
              onClick={() => handleExternalLink(calendlyTeamLink)}
            >
              Learn More
              <ExternalLink size={16} />
            </Button>
          </div>
        </ClayCard>
      </div>

      {/* Two Column Layout for Events and Resources */}
      <div className="grid md:grid-cols-2 gap-6">
        {/* Upcoming Events Section */}
        <div>
          <div className="flex items-center gap-2 mb-4">
            <Calendar className="w-5 h-5 text-orange-600" />
            <h2 className="text-xl font-bold text-gray-800">Upcoming Events</h2>
          </div>
          <ClayCard className="h-full">
            <div className="flex items-center gap-4 mb-5">
              <div className="bg-gradient-to-br from-orange-400 to-red-500 p-3 rounded-xl text-white shadow-md">
                <CalendarDays size={24} />
              </div>
              <div>
                <h3 className="text-lg font-semibold text-gray-800">Workshops & Live Events</h3>
                <p className="text-gray-500 text-sm">Join our community events to learn and network.</p>
              </div>
            </div>

            {/* Empty State with Illustration */}
            <div className="bg-gradient-to-br from-orange-50 to-amber-50 rounded-2xl p-8 text-center border border-orange-100">
              <div className="w-20 h-20 mx-auto mb-4 bg-orange-100 rounded-full flex items-center justify-center">
                <Video className="w-10 h-10 text-orange-400" />
              </div>
              <h4 className="font-semibold text-gray-700 mb-1">No Events Scheduled</h4>
              <p className="text-gray-500 text-sm mb-4">
                Exciting workshops and networking events are coming soon!
              </p>
              <div className="flex flex-wrap justify-center gap-2 text-xs text-gray-500">
                <span className="px-3 py-1 bg-white rounded-full border border-gray-200">
                  Webinars
                </span>
                <span className="px-3 py-1 bg-white rounded-full border border-gray-200">
                  Q&A Sessions
                </span>
                <span className="px-3 py-1 bg-white rounded-full border border-gray-200">
                  Masterclasses
                </span>
              </div>
            </div>

            {/* Preview Event Card (Coming Soon) */}
            <div className="mt-4 p-4 bg-gray-50 rounded-xl border border-dashed border-gray-300 opacity-60">
              <div className="flex items-start gap-3">
                <div className="bg-gray-200 rounded-lg p-2 text-gray-500">
                  <Clock className="w-5 h-5" />
                </div>
                <div className="flex-1">
                  <p className="font-medium text-gray-600 text-sm">Coming Soon</p>
                  <p className="text-xs text-gray-400">Market Analysis Workshop</p>
                  <div className="flex items-center gap-2 mt-2 text-xs text-gray-400">
                    <MapPin className="w-3 h-3" /> Virtual Event
                  </div>
                </div>
              </div>
            </div>
          </ClayCard>
        </div>

        {/* Free Resources Section */}
        <div>
          <div className="flex items-center gap-2 mb-4">
            <FileText className="w-5 h-5 text-teal-600" />
            <h2 className="text-xl font-bold text-gray-800">Free Resources</h2>
          </div>
          <ClayCard className="h-full">
            <div className="flex items-center gap-4 mb-5">
              <div className="bg-gradient-to-br from-teal-400 to-cyan-500 p-3 rounded-xl text-white shadow-md">
                <BookOpen size={24} />
              </div>
              <div>
                <h3 className="text-lg font-semibold text-gray-800">Scripts, Guides & Templates</h3>
                <p className="text-gray-500 text-sm">Download free resources to boost your productivity.</p>
              </div>
            </div>

            {/* Empty State with Illustration */}
            <div className="bg-gradient-to-br from-teal-50 to-cyan-50 rounded-2xl p-8 text-center border border-teal-100">
              <div className="w-20 h-20 mx-auto mb-4 bg-teal-100 rounded-full flex items-center justify-center">
                <Download className="w-10 h-10 text-teal-400" />
              </div>
              <h4 className="font-semibold text-gray-700 mb-1">Resources Coming Soon</h4>
              <p className="text-gray-500 text-sm mb-4">
                We are preparing valuable templates and guides for you.
              </p>
              <div className="flex flex-wrap justify-center gap-2 text-xs text-gray-500">
                <span className="px-3 py-1 bg-white rounded-full border border-gray-200">
                  Cold Call Scripts
                </span>
                <span className="px-3 py-1 bg-white rounded-full border border-gray-200">
                  Email Templates
                </span>
                <span className="px-3 py-1 bg-white rounded-full border border-gray-200">
                  Deal Checklists
                </span>
              </div>
            </div>

            {/* Preview Resource Cards (Coming Soon) */}
            <div className="mt-4 grid grid-cols-2 gap-3">
              <div className="p-3 bg-gray-50 rounded-xl border border-dashed border-gray-300 opacity-60">
                <div className="w-8 h-8 bg-gray-200 rounded-lg flex items-center justify-center mb-2">
                  <FileText className="w-4 h-4 text-gray-500" />
                </div>
                <p className="font-medium text-gray-600 text-xs">LOI Template</p>
                <p className="text-xs text-gray-400">PDF</p>
              </div>
              <div className="p-3 bg-gray-50 rounded-xl border border-dashed border-gray-300 opacity-60">
                <div className="w-8 h-8 bg-gray-200 rounded-lg flex items-center justify-center mb-2">
                  <FileText className="w-4 h-4 text-gray-500" />
                </div>
                <p className="font-medium text-gray-600 text-xs">Call Scripts</p>
                <p className="text-xs text-gray-400">DOC</p>
              </div>
            </div>
          </ClayCard>
        </div>
      </div>
    </div>
  );
};