'use client';

import { useState } from 'react';
import { RefreshCw, Calendar, Building2 } from 'lucide-react';
import type { DashboardConfig } from '@/lib/pipeline-types';
import { DashboardSection } from './DashboardSection';

interface DynamicDashboardProps {
  pipelineId: string;
  config: DashboardConfig;
  businessId?: string;
}

// Time range options
const TIME_RANGES = [
  { value: '7d', label: 'Last 7 days' },
  { value: '14d', label: 'Last 14 days' },
  { value: '30d', label: 'Last 30 days' },
  { value: '90d', label: 'Last 90 days' },
];

/**
 * Dynamic dashboard that renders from a DashboardConfig.
 *
 * This component:
 * - Renders sections based on the config
 * - Provides time range and business filters
 * - Handles global refresh
 */
export function DynamicDashboard({
  pipelineId,
  config,
  businessId: initialBusinessId,
}: DynamicDashboardProps) {
  const [timeRange, setTimeRange] = useState(config.default_time_range || '30d');
  const [businessId, setBusinessId] = useState(initialBusinessId);
  const [refreshKey, setRefreshKey] = useState(0);

  // Force refresh all widgets
  const handleRefresh = () => {
    setRefreshKey((prev) => prev + 1);
  };

  return (
    <div className="space-y-6">
      {/* Dashboard Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
            {config.title}
          </h1>
          {config.description && (
            <p className="text-gray-500 mt-1">{config.description}</p>
          )}
        </div>

        {/* Controls */}
        <div className="flex items-center space-x-3">
          {/* Business Filter (placeholder) */}
          {businessId && (
            <div className="flex items-center text-sm text-gray-600 dark:text-gray-400 bg-gray-100 dark:bg-gray-800 px-3 py-2 rounded-md">
              <Building2 className="w-4 h-4 mr-2" />
              <span className="truncate max-w-[150px]">{businessId}</span>
            </div>
          )}

          {/* Time Range Selector */}
          <div className="relative">
            <select
              value={timeRange}
              onChange={(e) => setTimeRange(e.target.value)}
              className="appearance-none bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md pl-9 pr-8 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
            >
              {TIME_RANGES.map((range) => (
                <option key={range.value} value={range.value}>
                  {range.label}
                </option>
              ))}
            </select>
            <Calendar className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" />
          </div>

          {/* Refresh Button */}
          <button
            onClick={handleRefresh}
            className="p-2 text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-md"
            title="Refresh all widgets"
          >
            <RefreshCw className="w-5 h-5" />
          </button>
        </div>
      </div>

      {/* Sections */}
      {config.sections.map((section) => (
        <DashboardSection
          key={`${section.id}-${refreshKey}`}
          section={section}
          pipelineId={pipelineId}
          businessId={businessId}
          timeRange={timeRange}
        />
      ))}
    </div>
  );
}