import { useState } from 'react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Separator } from '@/components/ui/separator';
import { Save } from 'lucide-react';
import { AnalyticsSettingsForm } from './AnalyticsSettingsForm';
import { DataFeaturesSection } from './DataFeaturesSection';
import { ExportFormatsSection } from './ExportFormatsSection';
import { DataRetentionSection } from './DataRetentionSection';
import { toast } from 'sonner';

interface AnalyticsConfigData {
  defaultPeriod: string;
  refreshInterval: number;
  autoRefresh: boolean;
  realTimeUpdates: boolean;
  dataExport: boolean;
  exportFormats: string[];
  dataRetention: number;
}

export function AnalyticsConfig() {
  const [config, setConfig] = useState<AnalyticsConfigData>({
    defaultPeriod: 'This Month',
    refreshInterval: 5,
    autoRefresh: true,
    realTimeUpdates: true,
    dataExport: true,
    exportFormats: ['CSV', 'Excel', 'PDF'],
    dataRetention: 24
  });

  const handleSave = () => {
    // TODO: Implement API call to save configuration
    toast.success('Analytics configuration saved successfully');
  };

  const updateConfig = (updates: Partial<AnalyticsConfigData>) => {
    setConfig(prev => ({ ...prev, ...updates }));
  };

  return (
    <Card>
      <CardHeader>
        <CardTitle>Analytics & Reporting Configuration</CardTitle>
        <CardDescription>
          Configure default reporting periods, auto-refresh, export settings, and data retention
        </CardDescription>
      </CardHeader>
      <CardContent className="space-y-6">
        <AnalyticsSettingsForm
          defaultPeriod={config.defaultPeriod}
          refreshInterval={config.refreshInterval}
          onDefaultPeriodChange={(period) => updateConfig({ defaultPeriod: period })}
          onRefreshIntervalChange={(interval) => updateConfig({ refreshInterval: interval })}
        />

        <Separator />

        <DataFeaturesSection
          autoRefresh={config.autoRefresh}
          realTimeUpdates={config.realTimeUpdates}
          dataExport={config.dataExport}
          onAutoRefreshChange={(enabled) => updateConfig({ autoRefresh: enabled })}
          onRealTimeUpdatesChange={(enabled) => updateConfig({ realTimeUpdates: enabled })}
          onDataExportChange={(enabled) => updateConfig({ dataExport: enabled })}
        />

        <Separator />

        <ExportFormatsSection
          exportFormats={config.exportFormats}
          onExportFormatsChange={(formats) => updateConfig({ exportFormats: formats })}
        />

        <DataRetentionSection
          dataRetention={config.dataRetention}
          onDataRetentionChange={(months) => updateConfig({ dataRetention: months })}
        />

        <Button onClick={handleSave} className="bg-re-green hover:bg-re-green/90">
          <Save className="w-4 h-4 mr-2" />
          Save Analytics Configuration
        </Button>
      </CardContent>
    </Card>
  );
}