import { useMemo, useState } from 'react';
import { useCollapsibleGroups } from '../../hooks/useCollapsibleGroups';
import type {
  FeatureFilters,
  FeatureMeta,
  HexagonStatsResponse,
  PostcodeFeature,
} from '../../types';
import type { HexagonLocation } from '../../lib/external-search';
import { formatValue, formatFilterValue, calculateHistogramMean } from '../../lib/format';
import { groupFeaturesByCategory } from '../../lib/features';
import { STACKED_GROUPS, STACKED_ENUM_GROUPS } from '../../lib/consts';
import { DualHistogram, LoadingSkeleton } from './DualHistogram';
import EnumBarChart from './EnumBarChart';
import StackedBarChart from './StackedBarChart';
import StackedEnumChart from './StackedEnumChart';
import PriceHistoryChart from './PriceHistoryChart';
import ExternalSearchLinks from './ExternalSearchLinks';
import { InfoIcon, CloseIcon } from '../ui/icons';
import { CollapsibleGroupHeader } from '../ui/CollapsibleGroupHeader';
import { IconButton } from '../ui/IconButton';
import { FeatureInfoPopup } from '../ui/FeatureInfoPopup';
import { EmptyState } from '../ui/EmptyState';
import { FeatureLabel } from '../ui/FeatureLabel';
import AISummaryCard from './AISummaryCard';
import StreetViewEmbed from './StreetViewEmbed';
import HistogramLegend from './HistogramLegend';

interface AreaPaneProps {
  stats: HexagonStatsResponse | null;
  globalFeatures: FeatureMeta[];
  loading: boolean;
  hexagonId: string | null;
  isPostcode?: boolean;
  postcodeData?: PostcodeFeature | null;
  onViewProperties: () => void;
  onClose: () => void;
  hexagonLocation: HexagonLocation | null;
  filters: FeatureFilters;
  onNavigateToSource?: (slug: string, featureName: string) => void;
  aiSummary?: string;
  aiSummaryLoading?: boolean;
  aiSummaryError?: string | null;
}

export default function AreaPane({
  stats,
  globalFeatures,
  loading,
  hexagonId,
  isPostcode = false,
  postcodeData,
  onViewProperties,
  onClose,
  hexagonLocation,
  filters,
  onNavigateToSource,
  aiSummary,
  aiSummaryLoading,
  aiSummaryError,
}: AreaPaneProps) {
  // For postcodes, use local data for count
  const propertyCount = isPostcode && postcodeData ? postcodeData.properties.count : stats?.count;
  const featureGroups = useMemo(() => groupFeaturesByCategory(globalFeatures), [globalFeatures]);
  const [infoFeature, setInfoFeature] = useState<FeatureMeta | null>(null);
  const [collapsedGroups, toggleGroup] = useCollapsibleGroups();
  const [aiSummaryExpanded, setAiSummaryExpanded] = useState(true);

  const numericByName = useMemo(() => {
    if (!stats) return new Map();
    return new Map(stats.numeric_features.map((feature) => [feature.name, feature]));
  }, [stats]);

  const enumByName = useMemo(() => {
    if (!stats) return new Map();
    return new Map(stats.enum_features.map((feature) => [feature.name, feature]));
  }, [stats]);

  const globalFeatureByName = useMemo(
    () => new Map(globalFeatures.map((f) => [f.name, f])),
    [globalFeatures]
  );

  if (!hexagonId) {
    return (
      <EmptyState
        icon={<InfoIcon className="w-8 h-8 text-warm-300 dark:text-warm-600" />}
        title="No area selected"
        description="Click a hexagon or postcode to view area statistics"
        centered
      />
    );
  }

  return (
    <div className="flex flex-col h-full">
      <div className="p-3 border-b border-warm-200 dark:border-navy-700">
        <div className="flex justify-between items-center">
          <div className="flex items-center gap-2">
            <div>
              <h2 className="text-sm font-semibold dark:text-warm-100">
                {isPostcode ? hexagonId : 'Area Statistics'}
              </h2>
              {isPostcode && (
                <span className="text-xs text-warm-500 dark:text-warm-400">Postcode</span>
              )}
            </div>
            {loading && stats && (
              <div className="w-3 h-3 border-2 border-teal-600 dark:border-teal-400 border-t-transparent rounded-full animate-spin" />
            )}
          </div>
          <IconButton onClick={onClose} title="Close">
            <CloseIcon />
          </IconButton>
        </div>
        {propertyCount != null && (
          <p className="text-sm text-warm-600 dark:text-warm-400 mt-1">
            {propertyCount.toLocaleString()} properties
          </p>
        )}
        {!isPostcode && stats && (
          <button
            onClick={onViewProperties}
            className="mt-2 w-full text-sm py-1.5 rounded bg-teal-600 hover:bg-teal-700 text-white font-medium"
          >
            View {stats.count.toLocaleString()} Properties
          </button>
        )}
      </div>

      {hexagonLocation && stats && (
        <ExternalSearchLinks location={hexagonLocation} filters={filters} />
      )}

      <div className="flex-1 overflow-y-auto">
        <AISummaryCard
          summary={aiSummary}
          loading={aiSummaryLoading}
          error={aiSummaryError}
          expanded={aiSummaryExpanded}
          onToggleExpanded={() => setAiSummaryExpanded(!aiSummaryExpanded)}
        />
        {loading && !stats ? (
          <LoadingSkeleton />
        ) : stats ? (
          <div>
            <HistogramLegend />
            {featureGroups.map((group) => {
              const hasData = group.features.some(
                (feature) => numericByName.has(feature.name) || enumByName.has(feature.name)
              );
              if (!hasData) return null;

              const stackedCharts = STACKED_GROUPS[group.name];
              const stackedEnumCharts = STACKED_ENUM_GROUPS[group.name];

              // Features that are part of a stacked enum config (rendered as compact charts)
              const stackedEnumFeatureNames = new Set(
                (stackedEnumCharts?.flatMap((c) =>
                  [c.feature, ...c.components].filter(Boolean)
                ) as string[]) ?? []
              );

              const isExpanded = !collapsedGroups.has(group.name);

              return (
                <div key={group.name}>
                  <CollapsibleGroupHeader
                    name={group.name}
                    expanded={isExpanded}
                    onToggle={() => toggleGroup(group.name)}
                    className="px-3 py-1.5 text-xs font-bold text-warm-500 bg-warm-50 dark:bg-warm-900 dark:text-warm-400 sticky top-0 hover:bg-warm-100 dark:hover:bg-warm-800"
                  />
                  {isExpanded && (
                    <div className="px-3 py-2 space-y-3">
                      {/* Price History in Property group */}
                      {group.name === 'Property' &&
                        stats.price_history &&
                        (() => {
                          // Only show chart if there are at least 2 unique years
                          const uniqueYears = new Set(
                            stats.price_history.map((p) => Math.floor(p.year))
                          );
                          return uniqueYears.size > 1;
                        })() && (
                          <div className="bg-warm-50 dark:bg-warm-800 rounded p-2">
                            <span className="text-xs text-warm-700 dark:text-warm-300">
                              Price History
                            </span>
                            <PriceHistoryChart points={stats.price_history} />
                          </div>
                        )}
                      {stackedCharts
                        ? // Render stacked charts for this group
                          stackedCharts.map((chart) => {
                            const segments = chart.components
                              .map((name) => ({
                                name,
                                value: numericByName.get(name)?.mean ?? 0,
                              }))
                              .filter((s) => s.value > 0);

                            // Use aggregate feature stats if available, otherwise sum components
                            const aggregateStats = chart.feature
                              ? numericByName.get(chart.feature)
                              : undefined;
                            const total = aggregateStats
                              ? aggregateStats.mean
                              : segments.reduce((sum, s) => sum + s.value, 0);

                            const featureMeta = chart.feature
                              ? globalFeatureByName.get(chart.feature)
                              : undefined;

                            if (total === 0) return null;

                            return (
                              <div
                                key={chart.label}
                                className="bg-warm-50 dark:bg-warm-800 rounded p-2"
                              >
                                <div className="flex justify-between items-baseline mb-1.5">
                                  {featureMeta ? (
                                    <FeatureLabel
                                      feature={{ ...featureMeta, name: chart.label }}
                                      onShowInfo={setInfoFeature}
                                      className="mr-2"
                                    />
                                  ) : (
                                    <span className="text-xs text-warm-700 dark:text-warm-300 truncate mr-2">
                                      {chart.label}
                                    </span>
                                  )}
                                  <span className="text-xs font-semibold text-teal-700 dark:text-teal-400 whitespace-nowrap">
                                    {formatValue(total)}
                                    {chart.unit ? ` ${chart.unit}` : ''}
                                  </span>
                                </div>
                                <StackedBarChart segments={segments} total={total} />
                              </div>
                            );
                          })
                        : // Default: render each feature individually (skip stacked enum features)
                          group.features
                            .filter((f) => !stackedEnumFeatureNames.has(f.name))
                            .map((feature) => {
                              const numericStats = numericByName.get(feature.name);
                              const enumStats = enumByName.get(feature.name);

                              if (numericStats) {
                                const globalFeature = globalFeatureByName.get(feature.name);
                                const globalHistogram = globalFeature?.histogram;
                                const globalMean = globalHistogram
                                  ? calculateHistogramMean(globalHistogram)
                                  : undefined;

                                return (
                                  <div
                                    key={feature.name}
                                    className="bg-warm-50 dark:bg-warm-800 rounded p-2"
                                  >
                                    <div className="flex justify-between items-baseline">
                                      <FeatureLabel
                                        feature={feature}
                                        onShowInfo={setInfoFeature}
                                        className="mr-2"
                                      />
                                      <span className="text-xs font-semibold text-teal-700 dark:text-teal-400 whitespace-nowrap">
                                        {formatValue(numericStats.mean, feature)}
                                      </span>
                                    </div>
                                    {numericStats.histogram &&
                                      (globalHistogram ? (
                                        <DualHistogram
                                          localCounts={numericStats.histogram.counts}
                                          globalCounts={globalHistogram.counts}
                                          p1={numericStats.histogram.p1}
                                          p99={numericStats.histogram.p99}
                                          globalMean={globalMean}
                                          formatLabel={formatFilterValue}
                                        />
                                      ) : (
                                        <DualHistogram
                                          localCounts={numericStats.histogram.counts}
                                          globalCounts={numericStats.histogram.counts}
                                          p1={numericStats.histogram.p1}
                                          p99={numericStats.histogram.p99}
                                          formatLabel={formatFilterValue}
                                        />
                                      ))}
                                  </div>
                                );
                              }

                              if (enumStats) {
                                return (
                                  <div
                                    key={feature.name}
                                    className="bg-warm-50 dark:bg-warm-800 rounded p-2"
                                  >
                                    <FeatureLabel feature={feature} onShowInfo={setInfoFeature} />
                                    <EnumBarChart counts={enumStats.counts} />
                                  </div>
                                );
                              }

                              return null;
                            })}
                      {/* Stacked enum charts */}
                      {stackedEnumCharts?.map((chart) => {
                        const featureMeta = chart.feature
                          ? globalFeatureByName.get(chart.feature)
                          : undefined;

                        // Single component: render as a stacked bar (like crime charts)
                        if (chart.components.length === 1) {
                          const stats = enumByName.get(chart.components[0]);
                          if (!stats) return null;

                          const segments = chart.valueOrder
                            .map((value) => ({ name: value, value: stats.counts[value] ?? 0 }))
                            .filter((s) => s.value > 0);
                          const total = segments.reduce((sum, s) => sum + s.value, 0);
                          if (total === 0) return null;

                          return (
                            <div
                              key={chart.label}
                              className="bg-warm-50 dark:bg-warm-800 rounded p-2"
                            >
                              <div className="flex justify-between items-baseline mb-1.5">
                                {featureMeta ? (
                                  <FeatureLabel
                                    feature={featureMeta}
                                    onShowInfo={setInfoFeature}
                                    className="mr-2"
                                  />
                                ) : (
                                  <span className="text-xs text-warm-700 dark:text-warm-300 truncate mr-2">
                                    {chart.label}
                                  </span>
                                )}
                                <span className="text-xs font-semibold text-teal-700 dark:text-teal-400 whitespace-nowrap">
                                  {total.toLocaleString()}
                                </span>
                              </div>
                              <StackedBarChart
                                segments={segments}
                                total={total}
                                colorMap={Object.fromEntries(
                                  chart.valueOrder.map((v, i) => [v, chart.valueColors[i]])
                                )}
                              />
                            </div>
                          );
                        }

                        // Multi-component: render as compact multi-row chart (like risk features)
                        const components = chart.components
                          .map((name) => {
                            const stats = enumByName.get(name);
                            return stats ? { label: name, stats } : null;
                          })
                          .filter((c): c is NonNullable<typeof c> => c !== null);

                        if (components.length === 0) return null;

                        return (
                          <div
                            key={chart.label}
                            className="bg-warm-50 dark:bg-warm-800 rounded p-2"
                          >
                            <div className="mb-1.5">
                              {featureMeta ? (
                                <FeatureLabel
                                  feature={{ ...featureMeta, name: chart.label }}
                                  onShowInfo={setInfoFeature}
                                />
                              ) : (
                                <span className="text-xs text-warm-700 dark:text-warm-300">
                                  {chart.label}
                                </span>
                              )}
                            </div>
                            <StackedEnumChart
                              components={components}
                              valueOrder={chart.valueOrder}
                              valueColors={chart.valueColors}
                            />
                          </div>
                        );
                      })}
                    </div>
                  )}
                </div>
              );
            })}
            {hexagonLocation && <StreetViewEmbed location={hexagonLocation} />}
          </div>
        ) : null}
      </div>

      {infoFeature && (
        <FeatureInfoPopup
          feature={infoFeature}
          onClose={() => setInfoFeature(null)}
          onNavigateToSource={onNavigateToSource}
        />
      )}
    </div>
  );
}