import { useState, useEffect } from 'react';
import PageMeta from '../../components/common/PageMeta';
import { useToast } from '../../components/ui/toast/ToastContainer';
import { fetchAPI } from '../../services/api';
import { PricingPlan } from '../../components/ui/pricing-table';
import PricingTable1 from '../../components/ui/pricing-table/pricing-table-1';

interface Plan {
  id: number;
  name: string;
  slug: string;
  price: string | number;
  billing_cycle: string;
  is_active: boolean;
  max_users: number;
  max_sites: number;
  max_keywords: number;
  max_clusters: number;
  max_content_ideas: number;
  monthly_word_count_limit: number;
  monthly_ai_credit_limit: number;
  monthly_image_count: number;
  daily_content_tasks: number;
  daily_ai_request_limit: number;
  daily_image_generation_limit: number;
  included_credits: number;
  image_model_choices: string[];
  features: string[];
}

interface PlanResponse {
  count: number;
  next: string | null;
  previous: string | null;
  results: Plan[];
}

// Helper function to format numbers with commas
const formatNumber = (num: number): string => {
  return num.toLocaleString();
};

// Helper function to format word count
const formatWordCount = (num: number): string => {
  if (num >= 1000000) {
    return `${(num / 1000000).toFixed(1)}M`;
  }
  if (num >= 1000) {
    return `${(num / 1000).toFixed(0)}K`;
  }
  return num.toString();
};

// Extract major features from plan data - SAME AS MARKETING PAGE
const extractFeatures = (plan: Plan): string[] => {
  const features: string[] = [];
  
  if (plan.max_sites) features.push(`${plan.max_sites === 999999 ? 'Unlimited' : plan.max_sites} Site${plan.max_sites > 1 ? 's' : ''}`);
  if (plan.max_users) features.push(`${plan.max_users} Team User${plan.max_users > 1 ? 's' : ''}`);
  if (plan.included_credits) features.push(`${formatNumber(plan.included_credits)} Monthly Credits`);
  if (plan.monthly_word_count_limit) features.push(`${formatWordCount(plan.monthly_word_count_limit)} Words/Month`);
  if (plan.max_clusters) features.push(`${plan.max_clusters} AI Keyword Clusters`);
  if (plan.max_content_ideas) features.push(`${formatNumber(plan.max_content_ideas)} Content Ideas`);
  if (plan.monthly_image_count) {
    // Try to split into basic/premium if data available, otherwise show total
    const basicImages = Math.floor(plan.monthly_image_count * 0.8);
    const premiumImages = Math.floor(plan.monthly_image_count * 0.2);
    features.push(`${formatNumber(basicImages)} Basic / ${formatNumber(premiumImages)} Premium Images`);
  }
  if (plan.daily_image_generation_limit) features.push(`${formatNumber(plan.daily_image_generation_limit)} Image Prompts`);

  return features;
};

// Transform Plan to PricingPlan
const transformPlanToPricingPlan = (plan: Plan, index: number, totalPlans: number): PricingPlan => {
  const monthlyPrice = typeof plan.price === 'number' ? plan.price : parseFloat(String(plan.price || 0));
  
  // Only highlight Growth plan (by slug)
  const highlighted = plan.slug.toLowerCase() === 'growth';

  return {
    id: plan.id,
    name: plan.name,
    monthlyPrice: monthlyPrice,
    price: monthlyPrice,
    period: '/month',
    description: getPlanDescription(plan),
    features: extractFeatures(plan),
    buttonText: monthlyPrice === 0 ? 'Free Trial' : 'Choose Plan',
    highlighted: highlighted,
  };
};

// Get plan description based on plan name or features
const getPlanDescription = (plan: Plan): string => {
  const slug = plan.slug.toLowerCase();
  const name = plan.name.toLowerCase();
  
  if (slug.includes('free') || name.includes('free')) {
    return 'Explore core features risk free';
  } else if (slug.includes('starter') || name.includes('starter')) {
    return 'Launch SEO workflows for small teams';
  } else if (slug.includes('growth') || name.includes('growth')) {
    return 'Scale content production with confidence';
  } else if (slug.includes('scale') || slug.includes('enterprise') || name.includes('scale') || name.includes('enterprise')) {
    return 'Enterprise power for high volume growth';
  }
  return 'Choose the perfect plan for your needs';
};

export default function Plans() {
  const toast = useToast();
  const [plans, setPlans] = useState<Plan[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    loadPlans();
  }, []);

  const loadPlans = async () => {
    try {
      setLoading(true);
      const response: PlanResponse = await fetchAPI('/v1/auth/plans/');
      // Filter only active plans and sort by price
      const activePlans = (response.results || [])
        .filter((plan) => plan.is_active)
        .sort((a, b) => {
          const priceA = typeof a.price === 'number' ? a.price : parseFloat(String(a.price || 0));
          const priceB = typeof b.price === 'number' ? b.price : parseFloat(String(b.price || 0));
          return priceA - priceB;
        });
      setPlans(activePlans);
    } catch (error: any) {
      toast.error(`Failed to load plans: ${error.message}`);
    } finally {
      setLoading(false);
    }
  };

  const handlePlanSelect = (plan: PricingPlan) => {
    console.log('Selected plan:', plan);
    // TODO: Implement plan selection/subscription logic
    toast.success(`Selected plan: ${plan.name}`);
  };

  const pricingPlans: PricingPlan[] = plans.map((plan, index) =>
    transformPlanToPricingPlan(plan, index, plans.length)
  );

  return (
    <div className="p-6">
      <PageMeta title="Plans" />
      <div className="mb-6">
        <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Plans</h1>
        <p className="text-gray-600 dark:text-gray-400 mt-1">
          Choose the perfect plan for your needs. All plans include our core features.
        </p>
      </div>

      {loading ? (
        <div className="flex items-center justify-center h-64">
          <div className="text-gray-500">Loading plans...</div>
        </div>
      ) : pricingPlans.length === 0 ? (
        <div className="flex items-center justify-center h-64">
          <div className="text-gray-500">No active plans available</div>
        </div>
      ) : (
        <>
          <PricingTable1
            title="Flexible Plans Tailored to Fit Your Unique Needs!"
            plans={pricingPlans}
            showToggle={true}
            onPlanSelect={handlePlanSelect}
          />
          
          {/* Future: Add "View All Features" section here */}
          <div className="mt-8 text-center">
            <p className="text-sm text-gray-500 dark:text-gray-400">
              Need more details? View all features and limits for each plan.
            </p>
            {/* TODO: Add expandable feature list component */}
          </div>
        </>
      )}
    </div>
  );
}
