import { formatNumber } from '@/lib/format';
import { cn } from '@/lib/utils';

interface RoiTrackerMockupProps {
  className?: string;
}

interface TimelineRowProps {
  label: string;
  clicks: number;
  percentage: number;
}

/**
 * TimelineRow Component
 *
 * A single timeline row showing day label, progress bar, and click recovery.
 */
function TimelineRow({ label, clicks, percentage }: TimelineRowProps) {
  return (
    <div className="space-y-1.5">
      <div className="flex items-center justify-between text-sm">
        <span className="font-medium text-foreground">{label}</span>
        <span className="text-sm font-semibold text-green-600 dark:text-green-400">
          +{formatNumber(clicks)}
        </span>
      </div>
      <div className="w-full bg-muted rounded-full h-3 overflow-hidden">
        <div
          className="h-full bg-gradient-to-r from-green-500 to-green-600 dark:from-green-600 dark:to-green-700 transition-all"
          style={{ width: `${percentage}%` }}
        />
      </div>
    </div>
  );
}

/**
 * RoiTrackerMockup Component
 *
 * A visual mockup of ROI tracking showing timeline rows with click recovery
 * and a total summary at the bottom.
 */
export function RoiTrackerMockup({ className = '' }: RoiTrackerMockupProps) {
  return (
    <div className={cn('rounded-lg border bg-card p-6 space-y-6', className)}>
      {/* Header */}
      <div className="space-y-1">
        <h3 className="text-lg font-bold text-foreground">
          ROI Tracking — <span className="font-mono text-primary">/best-seo-plugins</span>
        </h3>
        <p className="text-xs text-muted-foreground">Since recommendation applied (March 5)</p>
      </div>

      {/* Timeline rows */}
      <div className="space-y-4">
        <TimelineRow label="Day 7" clicks={47} percentage={4.3} />
        <TimelineRow label="Day 14" clicks={186} percentage={17} />
        <TimelineRow label="Day 30" clicks={512} percentage={46.7} />
        <TimelineRow label="Day 90" clicks={1097} percentage={100} />
      </div>

      {/* Divider */}
      <div className="h-px bg-border" />

      {/* Total Summary */}
      <div className="space-y-1">
        <p className="text-sm text-muted-foreground">Total clicks recovered</p>
        <p className="text-3xl font-bold text-green-600 dark:text-green-400">+1,097</p>
        <p className="text-xs text-muted-foreground">
          Projected to continue growing as content ages
        </p>
      </div>
    </div>
  );
}

/**
 * ManualRoiMockup Component
 *
 * A visual mockup showing the manual, confused approach to ROI tracking.
 * Used for before/after comparison to show the pain of manual tracking.
 */
export function ManualRoiMockup({ className = '' }: ManualRoiMockupProps) {
  return (
    <div className={cn('rounded-lg border border-destructive/30 bg-destructive/5 p-6', className)}>
      {/* Header */}
      <div className="space-y-1 mb-6">
        <h3 className="text-lg font-bold text-foreground">ROI Tracking — Manual</h3>
        <p className="text-xs text-muted-foreground">Without RankWiz</p>
      </div>

      {/* Confused content area */}
      <div className="space-y-4">
        {/* CSV Icon + Shrug */}
        <div className="flex items-center gap-4">
          <div className="flex-shrink-0">
            <div className="w-12 h-16 border border-muted bg-muted/30 rounded flex items-center justify-center">
              <span className="text-xs font-semibold text-muted-foreground">CSV</span>
            </div>
          </div>
          <div>
            <p className="text-2xl font-bold text-destructive/60 mb-1">¯\_(ツ)_/¯</p>
            <p className="text-sm text-destructive/70 italic">
              I&apos;ve got a spreadsheet with traffic data...
            </p>
          </div>
        </div>

        {/* Confused questions */}
        <div className="space-y-2 pt-2 border-t border-destructive/20">
          <p className="text-xs text-destructive/60 italic">Did my change help?</p>
          <p className="text-xs text-destructive/60 italic">Was it seasonal variation?</p>
          <p className="text-xs text-destructive/60 italic">
            How do I factor in other changes?
          </p>
          <p className="text-xs text-destructive/60 italic">Is it worth the effort?</p>
        </div>

        {/* Disconnect statement */}
        <div className="mt-4 p-3 bg-destructive/10 rounded border border-destructive/20">
          <p className="text-xs text-destructive font-medium">
            No way to track impact vs. your specific recommendations.
          </p>
        </div>
      </div>
    </div>
  );
}

interface ManualRoiMockupProps {
  className?: string;
}