import { ChevronDown, ExternalLink } from 'lucide-react';

import { memo, useCallback, useState } from 'react';

import { Link } from '@inertiajs/react';

import GenerateDraftButton from '@/Components/Recommendations/GenerateDraftButton';
import StatusBadge from '@/Components/Recommendations/StatusBadge';
import StatusChangeModal from '@/Components/Recommendations/StatusChangeModal';
import MetricDelta from '@/Components/Shared/MetricDelta';
import { Badge } from '@/Components/ui/badge';
import { Button } from '@/Components/ui/button';
import { InfoTooltip } from '@/Components/ui/info-tooltip';
import { formatPercent, truncateUrl, formatNumber } from '@/lib/format';
import { cn } from '@/lib/utils';

interface Recommendation {
  id: number;
  page_url: string;
  action_type: string;
  impact_score: number;
  adjusted_impact_score?: number | null;
  confidence_score: number;
  title: string;
  reasoning: string;
  evidence: {
    clicks_before: number;
    clicks_after: number;
    delta_percent: number;
    position_before?: number;
    position_after?: number;
  };
  has_draft: boolean;
  latest_draft_id: number | null;
  lifecycle_status: string;
  roi_performance_multiplier?: number | null;
}

interface RecommendationCardProps {
  recommendation: Recommendation;
  siteId: number;
  aiAvailable: boolean;
  selected?: boolean;
  onToggleSelection?: () => void;
  analysisRunId?: number;
}

function getConfidenceLevel(score: number): string {
  if (score >= 67) return 'High';
  if (score >= 34) return 'Medium';
  return 'Low';
}

function getConfidenceBadgeVariant(score: number): 'default' | 'medium' | 'secondary' | 'outline' {
  if (score >= 67) return 'default';
  if (score >= 34) return 'secondary';
  return 'outline';
}

function barWidth(value: number, other: number): number {
  const max = Math.max(value, other, 1);
  return Math.round((value / max) * 100);
}

const ACTION_TYPE_CONFIG: Record<
  string,
  {
    label: string;
    variant: 'default' | 'medium' | 'secondary' | 'outline';
    description: string;
  }
> = {
  noindex: {
    label: 'Noindex',
    variant: 'medium',
    description:
      'This page is currently marked as noindex, preventing it from appearing in search results. Removing this tag will allow search engines to index and rank the page within 1–4 weeks.',
  },
  content_rewrite: {
    label: 'AI Draft',
    variant: 'default',
    description:
      'This page lost traffic due to thin or outdated content. Rewriting it with more depth and current information typically recovers rankings within 4–8 weeks.',
  },
  meta_tag_optimization: {
    label: 'Meta Tags',
    variant: 'secondary',
    description:
      'Optimizing your title and meta description improves click-through rates from search results. Well-crafted tags can increase organic traffic by 10–30% without changing rankings.',
  },
  internal_linking: {
    label: 'Internal Linking',
    variant: 'outline',
    description:
      'Adding internal links to this page helps search engines discover and rank it better, and keeps visitors engaged longer. This is one of the fastest, lowest-risk SEO improvements.',
  },
  thin_content: {
    label: 'Thin Content',
    variant: 'medium',
    description:
      'Search engines penalize pages with very little content. Expanding this page with useful information signals quality and authority in your topic area.',
  },
  cannibalization_consolidation: {
    label: 'Consolidate Cannibalization',
    variant: 'medium',
    description:
      'Multiple pages targeting the same keyword split your ranking potential. Consolidating them into one strong page concentrates authority and often recovers lost positions.',
  },
  light_refresh: {
    label: 'Light Refresh',
    variant: 'default',
    description:
      'Minor content updates signal to search engines that this page is actively maintained, which can help stabilize or improve rankings.',
  },
  section_refresh: {
    label: 'Section Refresh',
    variant: 'default',
    description:
      'Refreshing key sections (such as statistics, examples, or recommendations) keeps content accurate and competitive in search results.',
  },
  full_rewrite: {
    label: 'Full Rewrite',
    variant: 'default',
    description:
      'This page needs a comprehensive update to stay competitive. A full rewrite addressing current search intent and quality standards typically delivers significant ranking improvements.',
  },
  reposition_intent: {
    label: 'Reposition Intent',
    variant: 'secondary',
    description:
      "User search intent has shifted. Repositioning this page's angle to match what users are currently searching for can recover and grow traffic.",
  },
  eeat_improvement: {
    label: 'E-E-A-T Improvement',
    variant: 'secondary',
    description:
      'Search engines increasingly reward content with clear Experience, Expertise, Authority, and Trust signals. Adding these signals can meaningfully improve rankings for competitive topics.',
  },
  geo_improvement: {
    label: 'GEO Improvement',
    variant: 'outline',
    description:
      'Optimizing for AI and generative search engines (GEO) ensures your content is surfaced in AI-powered answers, a growing source of referral traffic.',
  },
};

const ROI_BADGE_THRESHOLD = 0.1; // Deviations >= 10% from 1.0 trigger the badge

const RoiAdjustmentBadge = memo(({ multiplier }: { multiplier: number | null | undefined }) => {
  if (multiplier == null) return null;

  if (multiplier >= 1 + ROI_BADGE_THRESHOLD) {
    return (
      <div className="inline-flex items-center gap-0.5 mt-0.5">
        <span className="text-xs font-medium text-green-600 dark:text-green-400">↑ Boosted</span>
        <InfoTooltip
          content="Score adjusted based on past ROI from similar recommendations"
          side="top"
          iconClassName="h-3 w-3"
        />
      </div>
    );
  }

  if (multiplier <= 1 - ROI_BADGE_THRESHOLD) {
    return (
      <div className="inline-flex items-center gap-0.5 mt-0.5">
        <span className="text-xs font-medium text-orange-600 dark:text-orange-400">
          ↓ Suppressed
        </span>
        <InfoTooltip
          content="Score adjusted based on past ROI from similar recommendations"
          side="top"
          iconClassName="h-3 w-3"
        />
      </div>
    );
  }

  return null;
});
RoiAdjustmentBadge.displayName = 'RoiAdjustmentBadge';

const ActionTypeBadge = memo(({ type }: { type: string }) => {
  const config = ACTION_TYPE_CONFIG[type] ?? {
    label: type.replace(/_/g, ' '),
    variant: 'default' as const,
    description: '',
  };

  if (!config.description) {
    return <Badge variant={config.variant}>{config.label}</Badge>;
  }

  return (
    <div className="inline-flex items-center gap-2">
      <Badge variant={config.variant}>{config.label}</Badge>
      <InfoTooltip
        content={config.description}
        ariaLabel={`${config.label}: ${config.description}`}
        side="right"
        iconClassName="h-3.5 w-3.5"
      />
    </div>
  );
});
ActionTypeBadge.displayName = 'ActionTypeBadge';

function RecommendationCard({
  recommendation,
  siteId,
  aiAvailable,
  selected = false,
  onToggleSelection,
  analysisRunId,
}: RecommendationCardProps) {
  const [evidenceOpen, setEvidenceOpen] = useState(false);
  const [statusModalOpen, setStatusModalOpen] = useState(false);

  const toggleEvidence = useCallback(() => {
    setEvidenceOpen((prev) => !prev);
  }, []);

  const evidenceId = `evidence-${recommendation.id}`;

  return (
    <div
      className={cn(
        'rounded-lg border bg-card p-4 transition-all duration-200',
        selected && 'ring-2 ring-primary border-primary',
        onToggleSelection &&
          'hover:border-primary/50 hover:shadow-md hover:shadow-primary/10 cursor-pointer',
      )}
    >
      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between sm:gap-4">
        <div className="flex items-start gap-3 min-w-0">
          {onToggleSelection && (
            <input
              type="checkbox"
              checked={selected}
              onChange={onToggleSelection}
              className="mt-1 h-4 w-4 cursor-pointer rounded border-input text-primary focus:ring-2 focus:ring-ring focus:ring-offset-2"
              aria-label={`Select recommendation: ${recommendation.title}`}
            />
          )}
          <div className="flex flex-col gap-2">
            <ActionTypeBadge type={recommendation.action_type} />
            <StatusBadge status={recommendation.lifecycle_status} />
          </div>
          <div className="min-w-0">
            <p className="font-medium">{recommendation.title}</p>
            <a
              href={recommendation.page_url}
              target="_blank"
              rel="noopener noreferrer"
              className="inline-flex items-center gap-1 text-xs text-muted-foreground hover:text-primary hover:underline mt-0.5 max-w-full"
              title="Opens in a new window"
            >
              <span className="truncate">{truncateUrl(recommendation.page_url, 60)}</span>
              <ExternalLink className="h-3 w-3 shrink-0" aria-hidden="true" />
              <span className="sr-only"> (opens in new tab)</span>
            </a>
            <p className="text-sm text-muted-foreground mt-1 line-clamp-2">
              {recommendation.reasoning}
            </p>
          </div>
        </div>
        <div className="flex items-center gap-4 sm:shrink-0">
          <div className="text-right">
            <p className="text-xl font-semibold">
              {Math.round(recommendation.adjusted_impact_score ?? recommendation.impact_score)}
            </p>
            <p className="text-xs text-muted-foreground">Impact</p>
            <RoiAdjustmentBadge multiplier={recommendation.roi_performance_multiplier} />
          </div>
          <div className="text-right">
            <div className="inline-flex items-center gap-1 mb-1">
              <Badge variant={getConfidenceBadgeVariant(recommendation.confidence_score)}>
                {getConfidenceLevel(recommendation.confidence_score)}
              </Badge>
              <InfoTooltip
                content="Confidence: How certain we are this recommendation will improve your traffic (based on data analysis). Low (0-33%), Medium (34-66%), High (67-100%)"
                side="top"
                iconClassName="h-3 w-3"
              />
            </div>
            <p className="text-xs text-muted-foreground">
              {formatPercent(recommendation.confidence_score / 100, 0)}
            </p>
          </div>
          <div className="flex flex-col gap-2">
            <Button variant="outline" size="sm" onClick={() => setStatusModalOpen(true)}>
              Change Status
            </Button>
            {recommendation.action_type === 'content_rewrite' &&
              (recommendation.has_draft ? (
                <Button variant="outline" size="sm" asChild>
                  <Link href={route('ai-drafts.show', [siteId, recommendation.latest_draft_id])}>
                    View Draft
                  </Link>
                </Button>
              ) : (
                <GenerateDraftButton
                  siteId={siteId}
                  recommendationId={recommendation.id}
                  aiAvailable={aiAvailable}
                />
              ))}
            {analysisRunId && (
              <Button variant="ghost" size="sm" asChild>
                <Link href={route('analyze.index', siteId)}>View in analysis</Link>
              </Button>
            )}
          </div>
        </div>
      </div>

      <button
        type="button"
        aria-expanded={evidenceOpen}
        aria-controls={evidenceId}
        onClick={toggleEvidence}
        className="mt-3 text-sm text-muted-foreground cursor-pointer hover:text-foreground flex items-center gap-1"
      >
        <ChevronDown
          className={cn('h-3 w-3 transition-transform duration-200', evidenceOpen && 'rotate-180')}
        />
        View evidence
      </button>
      <div
        id={evidenceId}
        className={cn(
          'grid transition-all duration-200 ease-in-out',
          evidenceOpen ? 'grid-rows-[1fr] opacity-100 mt-2' : 'grid-rows-[0fr] opacity-0',
        )}
      >
        <div className="overflow-hidden">
          <div className="space-y-3 text-sm">
            <div>
              <div className="flex items-center justify-between mb-1">
                <span className="text-muted-foreground">Clicks</span>
                <MetricDelta value={recommendation.evidence.delta_percent} format="percent" />
              </div>
              <div className="flex items-center gap-2">
                <span className="w-12 text-right text-muted-foreground tabular-nums">
                  {formatNumber(recommendation.evidence.clicks_before)}
                </span>
                <div
                  className="flex-1 flex items-center gap-1 h-4"
                  role="img"
                  aria-label={`Clicks changed from ${recommendation.evidence.clicks_before} to ${recommendation.evidence.clicks_after}`}
                >
                  <div
                    className="h-full rounded-sm bg-muted-foreground/30"
                    style={{
                      width: `${barWidth(recommendation.evidence.clicks_before, recommendation.evidence.clicks_after)}%`,
                    }}
                  />
                  <div
                    className={cn(
                      'h-full rounded-sm',
                      recommendation.evidence.delta_percent >= 0
                        ? 'bg-emerald-500 dark:bg-emerald-400' /* semantic: success */
                        : 'bg-red-500 dark:bg-red-400' /* semantic: danger */,
                    )}
                    style={{
                      width: `${barWidth(recommendation.evidence.clicks_after, recommendation.evidence.clicks_before)}%`,
                    }}
                  />
                </div>
                <span className="w-12 text-right tabular-nums">
                  {formatNumber(recommendation.evidence.clicks_after)}
                </span>
              </div>
            </div>

            {recommendation.evidence.position_before !== undefined && (
              <div className="flex items-center justify-between">
                <span className="text-muted-foreground">Position</span>
                <span className="tabular-nums">
                  {recommendation.evidence.position_before}
                  <span className="mx-1 text-muted-foreground">&rarr;</span>
                  {recommendation.evidence.position_after}
                </span>
              </div>
            )}
          </div>
        </div>
      </div>

      <StatusChangeModal
        open={statusModalOpen}
        onOpenChange={setStatusModalOpen}
        siteId={siteId}
        recommendationId={recommendation.id}
        currentStatus={recommendation.lifecycle_status}
      />
    </div>
  );
}

export default memo(RecommendationCard);