/**
 * Automation Dashboard Page
 * Main page for managing AI automation pipeline
 */
import React, { useState, useEffect } from 'react';
import { useToast } from '../../components/ui/toast/ToastContainer';
import { useSiteStore } from '../../store/siteStore';
import { automationService, AutomationRun, AutomationConfig, PipelineStage } from '../../services/automationService';
import StageCard from '../../components/Automation/StageCard';
import ActivityLog from '../../components/Automation/ActivityLog';
import ConfigModal from '../../components/Automation/ConfigModal';
import RunHistory from '../../components/Automation/RunHistory';
import PageMeta from '../../components/common/PageMeta';
import ComponentCard from '../../components/common/ComponentCard';
import DebugSiteSelector from '../../components/common/DebugSiteSelector';
import Button from '../../components/ui/button/Button';
import { BoltIcon } from '../../icons';

const STAGE_NAMES = [
  'Keywords → Clusters',
  'Clusters → Ideas',
  'Ideas → Tasks',
  'Tasks → Content',
  'Content → Image Prompts',
  'Image Prompts → Images',
  'Manual Review Gate',
];

const AutomationPage: React.FC = () => {
  const { activeSite } = useSiteStore();
  const toast = useToast();
  const [config, setConfig] = useState<AutomationConfig | null>(null);
  const [currentRun, setCurrentRun] = useState<AutomationRun | null>(null);
  const [pipelineOverview, setPipelineOverview] = useState<PipelineStage[]>([]);
  const [showConfigModal, setShowConfigModal] = useState(false);
  const [loading, setLoading] = useState(true);
  const [lastUpdated, setLastUpdated] = useState<Date>(new Date());
  const [estimate, setEstimate] = useState<{ estimated_credits: number; current_balance: number; sufficient: boolean } | null>(null);

  // Poll for current run updates
  useEffect(() => {
    if (!activeSite) return;

    loadData();

    // Poll every 5 seconds when run is active
    const interval = setInterval(() => {
      if (currentRun && (currentRun.status === 'running' || currentRun.status === 'paused')) {
        loadCurrentRun();
      } else {
        // Refresh pipeline overview when not running
        loadPipelineOverview();
      }
    }, 5000);

    return () => clearInterval(interval);
  }, [activeSite, currentRun?.status]);

  const loadData = async () => {
    if (!activeSite) return;

    try {
      setLoading(true);
      const [configData, runData, estimateData, pipelineData] = await Promise.all([
        automationService.getConfig(activeSite.id),
        automationService.getCurrentRun(activeSite.id),
        automationService.estimate(activeSite.id),
        automationService.getPipelineOverview(activeSite.id),
      ]);
      setConfig(configData);
      setCurrentRun(runData.run);
      setEstimate(estimateData);
      setPipelineOverview(pipelineData.stages);
      setLastUpdated(new Date());
    } catch (error: any) {
      toast.error('Failed to load automation data');
      console.error(error);
    } finally {
      setLoading(false);
    }
  };

  const loadCurrentRun = async () => {
    if (!activeSite) return;

    try {
      const data = await automationService.getCurrentRun(activeSite.id);
      setCurrentRun(data.run);
    } catch (error) {
      console.error('Failed to poll current run', error);
    }
  };

  const loadPipelineOverview = async () => {
    if (!activeSite) return;

    try {
      const data = await automationService.getPipelineOverview(activeSite.id);
      setPipelineOverview(data.stages);
    } catch (error) {
      console.error('Failed to poll pipeline overview', error);
    }
  };

  const handleRunNow = async () => {
    if (!activeSite) return;

    // Check credit balance
    if (estimate && !estimate.sufficient) {
      toast.error(`Insufficient credits. Need ~${estimate.estimated_credits}, you have ${estimate.current_balance}`);
      return;
    }

    try {
      const result = await automationService.runNow(activeSite.id);
      toast.success('Automation started');
      loadCurrentRun();
    } catch (error: any) {
      toast.error(error.response?.data?.error || 'Failed to start automation');
    }
  };

  const handlePause = async () => {
    if (!currentRun) return;

    try {
      await automationService.pause(currentRun.run_id);
      toast.success('Automation paused');
      loadCurrentRun();
    } catch (error) {
      toast.error('Failed to pause automation');
    }
  };

  const handleResume = async () => {
    if (!currentRun) return;

    try {
      await automationService.resume(currentRun.run_id);
      toast.success('Automation resumed');
      loadCurrentRun();
    } catch (error) {
      toast.error('Failed to resume automation');
    }
  };

  const handleSaveConfig = async (newConfig: Partial<AutomationConfig>) => {
    if (!activeSite) return;

    try {
      await automationService.updateConfig(activeSite.id, newConfig);
      toast.success('Configuration saved');
      setShowConfigModal(false);
      loadData();
    } catch (error) {
      toast.error('Failed to save configuration');
    }
  };

  if (loading) {
    return (
      <div className="flex items-center justify-center min-h-[60vh]">
        <div className="text-lg text-gray-600 dark:text-gray-400">Loading automation...</div>
      </div>
    );
  }

  if (!activeSite) {
    return (
      <div className="flex items-center justify-center min-h-[60vh]">
        <div className="text-lg text-gray-600 dark:text-gray-400">Please select a site to view automation</div>
      </div>
    );
  }

  return (
    <>
      <PageMeta
        title="AI Automation Pipeline | IGNY8"
        description="Automated content creation from keywords to published articles"
      />
      
      <div className="space-y-6">
        {/* Page Header with Site Selector (no sector) */}
        <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
          <div className="flex-1">
            <div className="flex items-center gap-3">
              <div className="flex items-center justify-center w-10 h-10 rounded-xl bg-purple-600 dark:bg-purple-500 flex-shrink-0">
                <BoltIcon className="text-white size-5" />
              </div>
              <h2 className="text-2xl font-bold text-gray-800 dark:text-white/90">AI Automation Pipeline</h2>
            </div>
            {activeSite && (
              <div className="flex items-center gap-3 mt-1">
                {lastUpdated && (
                  <p className="text-sm text-gray-500 dark:text-gray-400">
                    Last updated: {lastUpdated.toLocaleTimeString()}
                  </p>
                )}
                <span className="text-sm text-gray-400 dark:text-gray-600">•</span>
                <p className="text-sm font-medium text-gray-700 dark:text-gray-300">
                  Site: <span className="text-brand-600 dark:text-brand-400">{activeSite.name}</span>
                </p>
              </div>
            )}
          </div>
          
          <div className="flex items-center gap-3">
            <DebugSiteSelector />
          </div>
        </div>

        {/* Schedule Status Card */}
        {config && (
          <ComponentCard
            title="Schedule & Status"
            desc="Configure and monitor your automation schedule"
          >
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
              <div>
                <div className="text-sm text-gray-600 dark:text-gray-400">Status</div>
                <div className="font-semibold mt-1">
                  {config.is_enabled ? (
                    <span className="text-success-600 dark:text-success-400">● Enabled</span>
                  ) : (
                    <span className="text-gray-600 dark:text-gray-400">○ Disabled</span>
                  )}
                </div>
              </div>
              <div>
                <div className="text-sm text-gray-600 dark:text-gray-400">Schedule</div>
                <div className="font-semibold mt-1 capitalize">
                  {config.frequency} at {config.scheduled_time}
                </div>
              </div>
              <div>
                <div className="text-sm text-gray-600 dark:text-gray-400">Last Run</div>
                <div className="font-semibold mt-1">
                  {config.last_run_at
                    ? new Date(config.last_run_at).toLocaleString()
                    : 'Never'}
                </div>
              </div>
              <div>
                <div className="text-sm text-gray-600 dark:text-gray-400">Estimated Credits</div>
                <div className="font-semibold mt-1">
                  {estimate?.estimated_credits || 0} credits
                  {estimate && !estimate.sufficient && (
                    <span className="text-error-600 dark:text-error-400 ml-2">(Insufficient)</span>
                  )}
                </div>
              </div>
            </div>

            <div className="flex gap-3 mt-6">
              <Button
                onClick={() => setShowConfigModal(true)}
                variant="outline"
                tone="brand"
              >
                Configure
              </Button>
              {currentRun?.status === 'running' && (
                <Button
                  onClick={handlePause}
                  variant="primary"
                  tone="warning"
                >
                  Pause
                </Button>
              )}
              {currentRun?.status === 'paused' && (
                <Button
                  onClick={handleResume}
                  variant="primary"
                  tone="brand"
                >
                  Resume
                </Button>
              )}
              {!currentRun && (
                <Button
                  onClick={handleRunNow}
                  variant="primary"
                  tone="success"
                  disabled={!config?.is_enabled}
                >
                  Run Now
                </Button>
              )}
            </div>
          </ComponentCard>
        )}

        {/* Pipeline Overview - Always Visible */}
        <ComponentCard
          title="📊 Pipeline Overview"
          desc="Complete view of automation pipeline status and pending items"
        >
          <div className="mb-4 flex items-center justify-between">
            <div className="text-sm text-gray-600 dark:text-gray-400">
              {currentRun ? (
                <>
                  <span className="font-semibold text-brand-600 dark:text-brand-400">● Live Run Active</span> - Stage {currentRun.current_stage} of 7
                </>
              ) : (
                <>
                  <span className="font-semibold text-gray-700 dark:text-gray-300">Pipeline Status</span> - Ready to run
                </>
              )}
            </div>
            <div className="text-sm">
              {pipelineOverview.reduce((sum, stage) => sum + stage.pending, 0)} total items pending
            </div>
          </div>

          {/* Stage Cards Grid */}
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-7 gap-3">
            {STAGE_NAMES.map((name, index) => (
              <StageCard
                key={index}
                stageNumber={index + 1}
                stageName={name}
                currentStage={currentRun?.current_stage || 0}
                result={currentRun ? (currentRun[`stage_${index + 1}_result` as keyof AutomationRun] as any) : null}
                pipelineData={pipelineOverview[index]}
              />
            ))}
          </div>
        </ComponentCard>

        {/* Current Run Status */}
        {currentRun && (
          <ComponentCard
            title={`🔄 Current Run: ${currentRun.run_id}`}
            desc="Live automation progress and detailed results"
          >
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
              <div>
                <div className="text-sm text-gray-600 dark:text-gray-400">Status</div>
                <div className="font-semibold mt-1 capitalize">
                  {currentRun.status === 'running' && <span className="text-brand-600 dark:text-brand-400">● {currentRun.status}</span>}
                  {currentRun.status === 'paused' && <span className="text-warning-600 dark:text-warning-400">⏸ {currentRun.status}</span>}
                  {currentRun.status === 'completed' && <span className="text-success-600 dark:text-success-400">✓ {currentRun.status}</span>}
                  {currentRun.status === 'failed' && <span className="text-error-600 dark:text-error-400">✗ {currentRun.status}</span>}
                </div>
              </div>
              <div>
                <div className="text-sm text-gray-600 dark:text-gray-400">Current Stage</div>
                <div className="font-semibold mt-1">
                  Stage {currentRun.current_stage}: {STAGE_NAMES[currentRun.current_stage - 1]}
                </div>
              </div>
              <div>
                <div className="text-sm text-gray-600 dark:text-gray-400">Started</div>
                <div className="font-semibold mt-1">
                  {new Date(currentRun.started_at).toLocaleString()}
                </div>
              </div>
              <div>
                <div className="text-sm text-gray-600 dark:text-gray-400">Credits Used</div>
                <div className="font-semibold mt-1 text-purple-600 dark:text-purple-400">{currentRun.total_credits_used}</div>
              </div>
            </div>
          </ComponentCard>
        )}

        {/* Activity Log */}
        {currentRun && (
          <ActivityLog runId={currentRun.run_id} />
        )}

        {/* Run History */}
        <RunHistory siteId={activeSite.id} />

        {/* Config Modal */}
        {showConfigModal && config && (
          <ConfigModal
            config={config}
            onSave={handleSaveConfig}
            onCancel={() => setShowConfigModal(false)}
          />
        )}
      </div>
    </>
  );
};

export default AutomationPage;