import { CheckCircle2, Cloud, Database, Lightbulb, Search, TrendingUp } from 'lucide-react';

import { useEffect, useState } from 'react';

interface SyncProgressTimelineProps {
  /** Timestamp (ms) when sync started, used for cosmetic stage progression */
  startedAt: number;
}

interface Stage {
  label: string;
  description: string;
  icon: typeof Cloud;
  thresholdSeconds: number;
}

const STAGES: Stage[] = [
  {
    label: 'Connecting to Google',
    description: 'Authenticating and establishing connection',
    icon: Cloud,
    thresholdSeconds: 0,
  },
  {
    label: 'Importing search data',
    description: 'Pulling clicks, impressions, and rankings',
    icon: Database,
    thresholdSeconds: 10,
  },
  {
    label: 'Preparing your analysis',
    description: 'Organizing data for insights',
    icon: Search,
    thresholdSeconds: 90,
  },
];

/**
 * Cosmetic 3-stage progress timeline shown during GSC sync wait.
 * Stages are purely time-based (no backend signals needed).
 */
export default function SyncProgressTimeline({ startedAt }: SyncProgressTimelineProps) {
  const [elapsed, setElapsed] = useState(() => Math.floor((Date.now() - startedAt) / 1000));

  useEffect(() => {
    const interval = setInterval(() => {
      setElapsed(Math.floor((Date.now() - startedAt) / 1000));
    }, 1000);
    return () => clearInterval(interval);
  }, [startedAt]);

  // Determine current active stage index
  let activeIndex = 0;
  for (let i = STAGES.length - 1; i >= 0; i--) {
    if (elapsed >= STAGES[i].thresholdSeconds) {
      activeIndex = i;
      break;
    }
  }

  return (
    <div className="space-y-4">
      {/* Stage timeline */}
      <div className="space-y-3">
        {STAGES.map((stage, index) => {
          const Icon = stage.icon;
          const isComplete = index < activeIndex;
          const isActive = index === activeIndex;

          return (
            <div key={stage.label} className="flex items-start gap-3">
              <div className="flex flex-col items-center">
                <div
                  className={`flex h-7 w-7 shrink-0 items-center justify-center rounded-full ${
                    isComplete
                      ? 'bg-green-100 dark:bg-green-900/30'
                      : isActive
                        ? 'bg-primary/10'
                        : 'bg-muted'
                  }`}
                >
                  {isComplete ? (
                    <CheckCircle2 className="h-4 w-4 text-green-600 dark:text-green-400" />
                  ) : isActive ? (
                    <Icon className="h-4 w-4 text-primary animate-pulse" />
                  ) : (
                    <Icon className="h-4 w-4 text-muted-foreground/40" />
                  )}
                </div>
                {index < STAGES.length - 1 && (
                  <div
                    className={`w-px h-4 mt-1 ${isComplete ? 'bg-green-300 dark:bg-green-700' : 'bg-border'}`}
                  />
                )}
              </div>
              <div className="min-w-0 pt-0.5">
                <p
                  className={`text-sm font-medium ${
                    isComplete
                      ? 'text-green-700 dark:text-green-300'
                      : isActive
                        ? 'text-foreground'
                        : 'text-muted-foreground/60'
                  }`}
                >
                  {stage.label}
                </p>
                <p className="text-xs text-muted-foreground">{stage.description}</p>
              </div>
            </div>
          );
        })}
      </div>

      {/* What you'll get preview */}
      <div className="pt-2 border-t">
        <p className="text-xs font-medium text-muted-foreground mb-2">What we're preparing</p>
        <div className="grid gap-2 sm:grid-cols-3">
          <div className="flex items-center gap-2 rounded-lg border p-2.5 text-xs text-muted-foreground">
            <TrendingUp className="h-3.5 w-3.5 text-primary shrink-0" />
            <span>Winners &amp; losers detection</span>
          </div>
          <div className="flex items-center gap-2 rounded-lg border p-2.5 text-xs text-muted-foreground">
            <Search className="h-3.5 w-3.5 text-primary shrink-0" />
            <span>Keyword opportunity analysis</span>
          </div>
          <div className="flex items-center gap-2 rounded-lg border p-2.5 text-xs text-muted-foreground">
            <Lightbulb className="h-3.5 w-3.5 text-primary shrink-0" />
            <span>SEO recommendations</span>
          </div>
        </div>
      </div>

      <p className="text-xs text-muted-foreground">
        Typically takes 2-5 minutes. This page updates automatically.
      </p>
    </div>
  );
}