Choosing the Right Chart Type — The Decision Framework

'use client';

import { useState } from 'react';

export default function ChartSelector() {
  const [step, setStep] = useState(1);
  const [selections, setSelections] = useState({});
  const [recommendation, setRecommendation] = useState(null);

  const questions = {
    1: {
      question: "What do you want to show?",
      options: [
        { label: "Compare categories", value: "comparison", next: 2 },
        { label: "Show change over time", value: "trend", next: 3 },
        { label: "Show data distribution", value: "distribution", next: 4 },
        { label: "Show parts of a whole", value: "composition", next: 5 },
        { label: "Show relationship between variables", value: "relationship", next: 6 },
        { label: "Show geographic pattern", value: "geographic", next: 7 }
      ]
    },
    2: { // Comparison
      question: "How many categories?",
      options: [
        { label: "2-10 categories", value: "few", result: { chart: "Vertical Bar Chart", description: "Best for comparing few categories. Sort by value unless natural order exists (e.g., months).", example: "Revenue by Product Category (8 products)", code: "Use simple bar chart, sorted descending" } },
        { label: "10-25 categories", value: "medium", result: { chart: "Horizontal Bar Chart", description: "Horizontal bars handle many categories better — labels don't overlap and are easier to read.", example: "Sales Across 20 Cities", code: "Horizontal bar chart, sorted by value" } },
        { label: "Need to compare multiple metrics", value: "multi", result: { chart: "Grouped Bar Chart", description: "Shows 2-3 metrics side-by-side per category. Limit to 2-3 metrics max (more becomes unreadable).", example: "Revenue and Profit by Quarter", code: "Grouped bar chart with legend" } },
        { label: "Need to show parts + total", value: "stacked", result: { chart: "Stacked Bar Chart", description: "Shows composition AND allows comparison of totals across categories.", example: "Revenue by Region, broken down by Product Line", code: "Stacked bar chart (not 100%)" } }
      ]
    },
    3: { // Trend
      question: "How many time series?",
      options: [
        { label: "Single metric over time", value: "single", result: { chart: "Line Chart", description: "The standard for time series. Time on X-axis, metric on Y-axis. Add reference lines for context.", example: "Daily Active Users — Jan to Jun", code: "Single line with average reference line" } },
        { label: "2-5 metrics over time", value: "multi", result: { chart: "Multi-Line Chart", description: "Compare multiple trends. Use direct labeling (label lines, not legend). Max 5 lines before it becomes spaghetti.", example: "Revenue by Region Over Time", code: "Multiple lines with direct labels" } },
        { label: "Show composition over time", value: "composition", result: { chart: "Stacked Area Chart", description: "Shows both component trends AND total. Useful for revenue breakdown by product line.", example: "Revenue by Product Line (Q1-Q4)", code: "Stacked area chart with categories" } },
        { label: "Compare two time points", value: "slope", result: { chart: "Slope Chart", description: "Shows change from Point A to Point B. Great for before/after comparisons.", example: "Revenue by Region: Q1 2024 vs Q1 2025", code: "Slope chart connecting two time points" } }
      ]
    },
    4: { // Distribution
      question: "Single variable or compare groups?",
      options: [
        { label: "Single variable shape", value: "single", result: { chart: "Histogram", description: "Shows frequency distribution. Choose bin size carefully — too few bins lose detail, too many create noise.", example: "Customer Age Distribution", code: "Histogram with 15-20 bins" } },
        { label: "Compare distributions (2-5 groups)", value: "compare", result: { chart: "Box Plots (side-by-side)", description: "Shows median, quartiles, and outliers for each group. Great for comparing distributions.", example: "Order Value Distribution by City", code: "Box plots with groups on X-axis" } },
        { label: "Full distribution curve", value: "density", result: { chart: "Violin Plot or Density Plot", description: "Shows complete distribution shape (better than box plot for seeing bimodal/skewed data).", example: "Delivery Time Distribution Across Restaurants", code: "Violin plot or KDE" } }
      ]
    },
    5: { // Composition
      question: "How many parts?",
      options: [
        { label: "2-5 parts, simple message", value: "few", result: { chart: "Pie Chart", description: "Works ONLY for 2-5 categories with a clear dominant slice. Order slices by size. Avoid 3D.", example: "Market Share: Swiggy 45%, Zomato 35%, Others 20%", code: "Pie chart with 3 slices" } },
        { label: "5-10 parts or need precision", value: "medium", result: { chart: "Stacked Bar Chart", description: "Better than pie for comparison (length > angle). Shows exact values clearly.", example: "Revenue Composition by Quarter", code: "Stacked bar (not 100%) with values" } },
        { label: "10+ parts or hierarchical", value: "many", result: { chart: "Treemap", description: "Shows hierarchical part-to-whole. Box size = proportion. Works for many categories.", example: "Website Traffic by Source → Medium → Campaign", code: "Treemap with 2 levels" } },
        { label: "Composition across groups", value: "compare", result: { chart: "100% Stacked Bar Chart", description: "Normalizes each bar to 100% to compare composition (not absolute values).", example: "Customer Segment Mix by Region", code: "100% stacked bar chart" } }
      ]
    },
    6: { // Relationship
      question: "What type of relationship?",
      options: [
        { label: "Two continuous variables", value: "scatter", result: { chart: "Scatter Plot", description: "Shows correlation between X and Y. Add trendline to show direction. Use transparency if points overlap.", example: "Marketing Spend vs Revenue", code: "Scatter plot with trendline" } },
        { label: "Three variables (X, Y, size)", value: "bubble", result: { chart: "Bubble Chart", description: "Scatter plot + third variable as bubble size. Limit to 3 variables (more = unreadable).", example: "Price vs Rating (bubble = review count)", code: "Bubble chart with legend" } },
        { label: "Correlation matrix", value: "heatmap", result: { chart: "Correlation Heatmap", description: "Shows correlation coefficients for all variable pairs. Use diverging color scale (red-white-blue).", example: "Feature Correlation Matrix (8 variables)", code: "Heatmap with correlation coefficients" } },
        { label: "Flow between stages", value: "flow", result: { chart: "Sankey Diagram", description: "Shows flow/movement between categories. Width = volume. Good for user journeys, budget allocation.", example: "User Journey: Homepage → Product → Cart → Checkout", code: "Sankey diagram with flow widths" } }
      ]
    },
    7: { // Geographic
      question: "What's your data structure?",
      options: [
        { label: "Values by region/state", value: "regions", result: { chart: "Choropleth Map", description: "Color-code regions by value. Use sequential color scale (light to dark).", example: "Sales Density by State in India", code: "Filled map with color gradient" } },
        { label: "Point locations with values", value: "points", result: { chart: "Bubble Map", description: "Show locations as points, size = value. Good for store locations, customer density.", example: "Flipkart Warehouse Locations (bubble = capacity)", code: "Map with sized bubbles" } },
        { label: "Geography is just context", value: "context", result: { chart: "Bar Chart (sorted by region)", description: "If geography isn't the insight, use bar chart. Easier to compare values than on a map.", example: "Sales by State (bar chart)", code: "Horizontal bar chart, sorted" } }
      ]
    }
  };

  const handleSelection = (option) => {
    const newSelections = { ...selections, [step]: option.value };
    setSelections(newSelections);

    if (option.result) {
      setRecommendation(option.result);
      setStep('result');
    } else if (option.next) {
      setStep(option.next);
    }
  };

  const reset = () => {
    setStep(1);
    setSelections({});
    setRecommendation(null);
  };

  if (step === 'result' && recommendation) {
    return (
      <div className="max-w-3xl mx-auto p-8 bg-gradient-to-br from-teal-50 to-blue-50 rounded-xl border-2 border-teal-200">
        <div className="text-center mb-6">
          <div className="inline-flex items-center justify-center w-16 h-16 bg-teal-500 text-white rounded-full text-3xl mb-4">
            📊
          </div>
          <h2 className="text-3xl font-bold text-gray-900 mb-2">
            Recommended: {recommendation.chart}
          </h2>
        </div>

        <div className="bg-white rounded-lg p-6 shadow-md mb-6">
          <h3 className="font-semibold text-lg text-gray-900 mb-2">Why this chart?</h3>
          <p className="text-gray-700 leading-relaxed mb-4">{recommendation.description}</p>

          <h3 className="font-semibold text-lg text-gray-900 mb-2">Example use case:</h3>
          <p className="text-teal-700 font-medium mb-4">"{recommendation.example}"</p>

          <h3 className="font-semibold text-lg text-gray-900 mb-2">Implementation tip:</h3>
          <code className="block bg-gray-100 p-3 rounded text-sm text-gray-800">
            {recommendation.code}
          </code>
        </div>

        <button
          onClick={reset}
          className="w-full py-3 px-6 bg-teal-600 hover:bg-teal-700 text-white font-semibold rounded-lg transition-colors"
        >
          Choose Another Chart
        </button>
      </div>
    );
  }

  const currentQuestion = questions[step];

  return (
    <div className="max-w-3xl mx-auto p-8 bg-white rounded-xl border-2 border-gray-200">
      <div className="mb-8">
        <div className="flex items-center justify-between mb-4">
          <span className="text-sm font-semibold text-teal-600">
            Step {step} of {Object.keys(questions).length}
          </span>
          {step > 1 && (
            <button
              onClick={reset}
              className="text-sm text-gray-600 hover:text-gray-900 underline"
            >
              Start Over
            </button>
          )}
        </div>
        <h2 className="text-2xl font-bold text-gray-900">
          {currentQuestion.question}
        </h2>
      </div>

      <div className="space-y-3">
        {currentQuestion.options.map((option, index) => (
          <button
            key={index}
            onClick={() => handleSelection(option)}
            className="w-full text-left p-4 rounded-lg border-2 border-gray-200 hover:border-teal-500 hover:bg-teal-50 transition-all group"
          >
            <span className="text-lg font-medium text-gray-900 group-hover:text-teal-700">
              {option.label}
            </span>
          </button>
        ))}
      </div>
    </div>
  );
}