import React, { useState } from 'react';
import { Check, X, TrendingUp, Shield, Zap, DollarSign } from 'lucide-react';

const QuotationComparison = () => {
  const [activeTab, setActiveTab] = useState('custom');

  const customCoding = {
    title: "Custom LMS Development (Recommended)",
    subtitle: "Built from Scratch - Full Ownership & Control",
    phases: [
      {
        phase: "Phase 1",
        name: "Discovery, Planning & UI/UX Design",
        duration: "2 Weeks",
        cost: 100000,
        deliverables: [
          "Detailed requirement analysis & documentation",
          "Custom UI/UX wireframing specific to your brand",
          "Interactive design mockups for approval",
          "Technology stack finalization",
          "Project roadmap & milestone planning"
        ]
      },
      {
        phase: "Phase 2",
        name: "Core Platform Development",
        duration: "4-5 Weeks",
        cost: 200000,
        deliverables: [
          "Custom backend API architecture",
          "Secure database design (MySQL)",
          "Student & Instructor dashboards",
          "User authentication & role management",
          "Course builder with drag-and-drop interface",
          "Video upload & streaming infrastructure"
        ]
      },
      {
        phase: "Phase 3",
        name: "Advanced Features & Integration",
        duration: "2-3 Weeks",
        cost: 180000,
        deliverables: [
          "Advanced quiz engine (Multiple choice, True/False, Essay, Fill-in-blanks)",
          "Automated grading system",
          "Progress tracking & analytics dashboard",
          "Certificate generation system",
          "Payment gateway integration (Paystack/Flutterwave)",
          "Email notification system",
          "Admin super panel with full reporting"
        ]
      },
      {
        phase: "Phase 4",
        name: "Testing, Deployment & Training",
        duration: "1-2 Weeks",
        cost: 100000,
        deliverables: [
          "Comprehensive QA & bug fixing",
          "User acceptance testing (UAT)",
          "Server deployment & configuration",
          "SSL certificate installation",
          "Complete technical documentation",
          "Admin & instructor training (2 sessions)",
          "90-day post-launch support"
        ]
      }
    ],
    recurring: [
      { item: "Premium Cloud Hosting", cost: "30,000/month", annual: 360000 },
      { item: "Domain Name (.com)", cost: "15,000/year", annual: 15000 },
      { item: "SSL Certificate", cost: "Included", annual: 0 },
      { item: "Maintenance & Updates", cost: "40,000/month (Optional)", annual: 480000 }
    ],
    total: 580000,
    timeline: "8-10 Weeks"
  };

  const cmsOption = {
    title: "WordPress CMS with Tutor LMS Pro",
    subtitle: "Quick Setup - Template-Based Solution",
    phases: [
      {
        phase: "Phase 1",
        name: "Planning & Theme Selection",
        duration: "3-5 Days",
        cost: 50000,
        deliverables: [
          "Requirements gathering",
          "Premium theme selection & purchase",
          "Tutor LMS Pro license acquisition",
          "Hosting & domain setup"
        ]
      },
      {
        phase: "Phase 2",
        name: "WordPress & Plugin Installation",
        duration: "1 Week",
        cost: 80000,
        deliverables: [
          "WordPress installation & configuration",
          "Tutor LMS Pro setup",
          "Theme installation & basic customization",
          "Essential plugins installation (Security, SEO, Backup)",
          "User roles configuration"
        ]
      },
      {
        phase: "Phase 3",
        name: "Customization & Feature Setup",
        duration: "1-2 Weeks",
        cost: 120000,
        deliverables: [
          "Theme customization (colors, logo, branding)",
          "Quiz system configuration",
          "Payment gateway integration",
          "Email notification setup",
          "Certificate templates setup",
          "Sample course creation (2-3 templates)"
        ]
      },
      {
        phase: "Phase 4",
        name: "Testing & Training",
        duration: "3-5 Days",
        cost: 50000,
        deliverables: [
          "Functionality testing",
          "Mobile responsiveness check",
          "Admin training session",
          "Course creation tutorial",
          "Documentation handover"
        ]
      }
    ],
    recurring: [
      { item: "Shared Hosting (Suitable)", cost: "20,000/month", annual: 240000 },
      { item: "Domain Name (.com)", cost: "15,000/year", annual: 15000 },
      { item: "Tutor LMS Pro License", cost: "65,000/year", annual: 65000 },
      { item: "Premium Theme Updates", cost: "30,000/year", annual: 30000 },
      { item: "Security & Backup Plugins", cost: "25,000/year", annual: 25000 },
      { item: "Maintenance (Optional)", cost: "25,000/month", annual: 300000 }
    ],
    total: 300000,
    timeline: "3-4 Weeks"
  };

  const comparison = [
    {
      feature: "Development Time",
      custom: "8-10 weeks",
      cms: "3-4 weeks",
      winner: "cms"
    },
    {
      feature: "Initial Investment",
      custom: "₦580,000",
      cms: "₦300,000",
      winner: "cms"
    },
    {
      feature: "Full Code Ownership",
      custom: "Yes - 100% yours",
      cms: "No - Licensed plugins",
      winner: "custom"
    },
    {
      feature: "Customization Flexibility",
      custom: "Unlimited - Any feature",
      cms: "Limited to plugin capabilities",
      winner: "custom"
    },
    {
      feature: "Scalability",
      custom: "Highly scalable",
      cms: "Limited by WordPress",
      winner: "custom"
    },
    {
      feature: "Performance",
      custom: "Optimized & Fast",
      cms: "Slower (multiple plugins)",
      winner: "custom"
    },
    {
      feature: "Security",
      custom: "Custom security measures",
      cms: "Dependent on plugin updates",
      winner: "custom"
    },
    {
      feature: "Monthly Recurring Cost",
      custom: "₦30,000 (hosting only)",
      cms: "₦20,000-45,000",
      winner: "custom"
    },
    {
      feature: "Annual License Fees",
      custom: "₦0",
      cms: "₦95,000+ (plugins/themes)",
      winner: "custom"
    },
    {
      feature: "Future Feature Addition",
      custom: "Easy & cost-effective",
      cms: "Need new plugins (costly)",
      winner: "custom"
    },
    {
      feature: "Brand Uniqueness",
      custom: "100% unique design",
      cms: "Template-based (common)",
      winner: "custom"
    },
    {
      feature: "Technical Support",
      custom: "Direct from developer",
      cms: "Multiple vendors",
      winner: "custom"
    }
  ];

  const formatCurrency = (amount) => {
    return new Intl.NumberFormat('en-NG', {
      style: 'currency',
      currency: 'NGN',
      minimumFractionDigits: 0
    }).format(amount);
  };

  const activeData = activeTab === 'custom' ? customCoding : cmsOption;

  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 p-6">
      <div className="max-w-7xl mx-auto">
        {/* Header */}
        <div className="text-center mb-8">
          <h1 className="text-4xl font-bold text-gray-900 mb-2">LMS Development Quotation</h1>
          <p className="text-lg text-gray-600">Professional Comparison: Custom Coding vs CMS Solution</p>
          <p className="text-sm text-gray-500 mt-2">Prepared for: Aboriomoh Temidayo | By: TechEmpery</p>
        </div>

        {/* Tab Navigation */}
        <div className="flex gap-4 mb-8 bg-white p-2 rounded-lg shadow-md max-w-2xl mx-auto">
          <button
            onClick={() => setActiveTab('custom')}
            className={`flex-1 py-3 px-6 rounded-md font-semibold transition-all ${
              activeTab === 'custom'
                ? 'bg-indigo-600 text-white shadow-lg'
                : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
            }`}
          >
            Custom Development
          </button>
          <button
            onClick={() => setActiveTab('cms')}
            className={`flex-1 py-3 px-6 rounded-md font-semibold transition-all ${
              activeTab === 'cms'
                ? 'bg-green-600 text-white shadow-lg'
                : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
            }`}
          >
            WordPress CMS
          </button>
          <button
            onClick={() => setActiveTab('comparison')}
            className={`flex-1 py-3 px-6 rounded-md font-semibold transition-all ${
              activeTab === 'comparison'
                ? 'bg-purple-600 text-white shadow-lg'
                : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
            }`}
          >
            Side-by-Side
          </button>
        </div>

        {/* Content */}
        {activeTab !== 'comparison' ? (
          <div className="space-y-6">
            {/* Title Card */}
            <div className={`p-6 rounded-lg shadow-lg ${
              activeTab === 'custom' ? 'bg-indigo-600' : 'bg-green-600'
            } text-white`}>
              <h2 className="text-3xl font-bold mb-2">{activeData.title}</h2>
              <p className="text-lg opacity-90">{activeData.subtitle}</p>
              <div className="mt-4 flex gap-6">
                <div>
                  <p className="text-sm opacity-75">Total Investment</p>
                  <p className="text-3xl font-bold">{formatCurrency(activeData.total)}</p>
                </div>
                <div>
                  <p className="text-sm opacity-75">Timeline</p>
                  <p className="text-2xl font-semibold">{activeData.timeline}</p>
                </div>
              </div>
            </div>

            {/* Phases */}
            <div className="grid gap-6">
              {activeData.phases.map((phase, idx) => (
                <div key={idx} className="bg-white rounded-lg shadow-md p-6 hover:shadow-xl transition-shadow">
                  <div className="flex justify-between items-start mb-4">
                    <div>
                      <h3 className="text-xl font-bold text-gray-900">{phase.phase}: {phase.name}</h3>
                      <p className="text-sm text-gray-600 mt-1">Duration: {phase.duration}</p>
                    </div>
                    <div className="text-right">
                      <p className="text-2xl font-bold text-indigo-600">{formatCurrency(phase.cost)}</p>
                    </div>
                  </div>
                  <div className="space-y-2">
                    <p className="font-semibold text-gray-700">Deliverables:</p>
                    <ul className="space-y-1">
                      {phase.deliverables.map((item, i) => (
                        <li key={i} className="flex items-start gap-2 text-gray-700">
                          <Check className="w-5 h-5 text-green-500 flex-shrink-0 mt-0.5" />
                          <span>{item}</span>
                        </li>
                      ))}
                    </ul>
                  </div>
                </div>
              ))}
            </div>

            {/* Recurring Costs */}
            <div className="bg-white rounded-lg shadow-md p-6">
              <h3 className="text-2xl font-bold text-gray-900 mb-4">Annual Recurring Costs</h3>
              <div className="space-y-3">
                {activeData.recurring.map((item, idx) => (
                  <div key={idx} className="flex justify-between items-center py-3 border-b border-gray-200 last:border-0">
                    <div>
                      <p className="font-semibold text-gray-800">{item.item}</p>
                      <p className="text-sm text-gray-600">{item.cost}</p>
                    </div>
                    <p className="text-lg font-bold text-gray-900">
                      {item.annual > 0 ? formatCurrency(item.annual) : 'Free'}
                    </p>
                  </div>
                ))}
                <div className="pt-4 border-t-2 border-gray-300">
                  <div className="flex justify-between items-center">
                    <p className="text-xl font-bold text-gray-900">Total Year 1 (Setup + Recurring)</p>
                    <p className="text-2xl font-bold text-indigo-600">
                      {formatCurrency(activeData.total + activeData.recurring.reduce((sum, item) => sum + item.annual, 0))}
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        ) : (
          /* Comparison Table */
          <div className="bg-white rounded-lg shadow-xl overflow-hidden">
            <div className="bg-gradient-to-r from-purple-600 to-indigo-600 p-6 text-white">
              <h2 className="text-3xl font-bold mb-2">Feature-by-Feature Comparison</h2>
              <p className="text-lg opacity-90">Make an informed decision based on your priorities</p>
            </div>
            
            <div className="overflow-x-auto">
              <table className="w-full">
                <thead className="bg-gray-100">
                  <tr>
                    <th className="px-6 py-4 text-left text-sm font-bold text-gray-700">Feature</th>
                    <th className="px-6 py-4 text-left text-sm font-bold text-indigo-700">Custom Development</th>
                    <th className="px-6 py-4 text-left text-sm font-bold text-green-700">WordPress CMS</th>
                  </tr>
                </thead>
                <tbody>
                  {comparison.map((item, idx) => (
                    <tr key={idx} className="border-b border-gray-200 hover:bg-gray-50">
                      <td className="px-6 py-4 font-semibold text-gray-800">{item.feature}</td>
                      <td className={`px-6 py-4 ${item.winner === 'custom' ? 'bg-indigo-50 font-semibold' : ''}`}>
                        <div className="flex items-center gap-2">
                          {item.winner === 'custom' && <Check className="w-5 h-5 text-green-600" />}
                          <span>{item.custom}</span>
                        </div>
                      </td>
                      <td className={`px-6 py-4 ${item.winner === 'cms' ? 'bg-green-50 font-semibold' : ''}`}>
                        <div className="flex items-center gap-2">
                          {item.winner === 'cms' && <Check className="w-5 h-5 text-green-600" />}
                          <span>{item.cms}</span>
                        </div>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>

            {/* Recommendation Section */}
            <div className="bg-gradient-to-r from-indigo-600 to-purple-600 p-8 text-white">
              <h3 className="text-2xl font-bold mb-4 flex items-center gap-2">
                <TrendingUp className="w-6 h-6" />
                Professional Recommendation: Choose Custom Development
              </h3>
              
              <div className="grid md:grid-cols-2 gap-6 mt-6">
                <div className="bg-white bg-opacity-10 rounded-lg p-4">
                  <div className="flex items-center gap-2 mb-2">
                    <Shield className="w-5 h-5" />
                    <h4 className="font-bold">Long-Term Value</h4>
                  </div>
                  <p className="text-sm opacity-90">While CMS costs ₦280k less initially, custom development saves ₦95,000+ annually on license fees. Break-even in 3 years with superior features.</p>
                </div>

                <div className="bg-white bg-opacity-10 rounded-lg p-4">
                  <div className="flex items-center gap-2 mb-2">
                    <Zap className="w-5 h-5" />
                    <h4 className="font-bold">Scalability & Growth</h4>
                  </div>
                  <p className="text-sm opacity-90">Custom solution grows with your business. Add features without plugin limitations or additional licensing costs.</p>
                </div>

                <div className="bg-white bg-opacity-10 rounded-lg p-4">
                  <div className="flex items-center gap-2 mb-2">
                    <DollarSign className="w-5 h-5" />
                    <h4 className="font-bold">True Ownership</h4>
                  </div>
                  <p className="text-sm opacity-90">100% code ownership means no vendor lock-in. Sell, modify, or scale without restrictions or recurring license fees.</p>
                </div>

                <div className="bg-white bg-opacity-10 rounded-lg p-4">
                  <div className="flex items-center gap-2 mb-2">
                    <TrendingUp className="w-5 h-5" />
                    <h4 className="font-bold">Professional Brand Image</h4>
                  </div>
                  <p className="text-sm opacity-90">Unique, custom design sets you apart. WordPress themes are used by thousands, making your platform look generic.</p>
                </div>
              </div>

              <div className="mt-6 bg-yellow-500 bg-opacity-20 border-2 border-yellow-300 rounded-lg p-4">
                <p className="font-bold text-lg mb-2">Investment Comparison (5 Years):</p>
                <div className="flex justify-around text-center">
                  <div>
                    <p className="text-sm opacity-75">Custom Development</p>
                    <p className="text-2xl font-bold">₦2,380,000</p>
                    <p className="text-xs">(Setup + 5yr hosting)</p>
                  </div>
                  <div>
                    <p className="text-sm opacity-75">WordPress CMS</p>
                    <p className="text-2xl font-bold">₦2,675,000</p>
                    <p className="text-xs">(Setup + licenses + hosting)</p>
                  </div>
                </div>
                <p className="text-center mt-3 font-bold text-yellow-200">Custom saves ₦295,000 over 5 years + unlimited customization!</p>
              </div>
            </div>
          </div>
        )}

        {/* Footer */}
        <div className="mt-8 text-center text-gray-600 text-sm">
          <p>Contact: TechEmpery | Phone: 08130834858</p>
          <p className="mt-2">Valid for 30 days from date of issue</p>
        </div>
      </div>
    </div>
  );
};

export default QuotationComparison;