import React from 'react';
import { LuCheck, LuSparkles } from 'react-icons/lu';

import { resolveSetupStep } from '../../service/copilot/setup-steps';
import type {
  ICopilotQuestOverview,
  ICopilotSetupStep,
} from '../../service/copilot/copilot.interface';

import { cn } from './cn';
import { CopilotBadges } from './CopilotBadges';

/** Quick prompts shown under the home surface. */
const SUGGESTION_CHIPS: readonly string[] = [
  'What is my AI Readiness score?',
  'What does AI Visibility do?',
];

/**
 * The copilot home surface (shown on an empty thread): a proactive setup
 * tutorial when onboarding is incomplete, today's quests with points, and a
 * couple of quick prompts.
 *
 * @param props - Component props.
 * @param props.setupSteps - All setup steps with completion state.
 * @param props.questOverview - Quests, points, history.
 * @param props.onAsk - Send a chat message.
 * @return The home surface.
 */
export function CopilotHome({
  setupSteps,
  questOverview,
  onAsk,
}: {
  setupSteps: ICopilotSetupStep[];
  questOverview: ICopilotQuestOverview | null;
  onAsk: (text: string) => void;
}): React.ReactElement {
  const openQuests = questOverview?.open ?? [];
  const earnedPoints: number = questOverview?.earned_points ?? 0;
  const resolvedCount: number = questOverview?.resolved_count ?? 0;
  const setupIncomplete: boolean = setupSteps.some(step => !step.completed);
  // The single most impactful open quest, surfaced as a proactive banner once
  // onboarding is done (during setup the checklist takes priority).
  const nudge = questOverview?.nudge ?? null;

  return (
    <div className="space-y-5 pt-2">
      <p className="text-[15px] leading-relaxed text-gray-700">
        Hi, I&apos;m Recomaze Co-pilot.{' '}
        {setupIncomplete
          ? "Let's finish setting up Recomaze, step by step. I can do parts for you."
          : "Here's what we can work on today."}
      </p>

      {nudge && !setupIncomplete && (
        <button
          type="button"
          onClick={() => onAsk(`Help me: ${nudge.title}`)}
          className="flex w-full items-start gap-3 rounded-2xl border border-[#b7007c]/20 bg-gradient-to-br from-[#b7007c]/5 to-[#e0379f]/5 px-3.5 py-3 text-left transition hover:border-[#b7007c]/40 hover:from-[#b7007c]/10 hover:to-[#e0379f]/10"
        >
          <span className="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-xl bg-[#b7007c]/10">
            <LuSparkles className="h-4 w-4 text-[#b7007c]" />
          </span>
          <span className="flex min-w-0 flex-1 flex-col">
            <span className="flex items-center gap-2">
              <span className="text-xs font-semibold uppercase tracking-wide text-[#b7007c]">
                Recommended for you
              </span>
              <span className="rounded-full bg-[#b7007c]/10 px-2 text-[11px] font-semibold text-[#b7007c]">
                +{nudge.points}
              </span>
            </span>
            <span className="mt-0.5 text-sm font-medium text-gray-900">
              {nudge.title}
            </span>
            <span className="text-xs text-gray-500">{nudge.description}</span>
          </span>
        </button>
      )}

      {setupSteps.length > 0 && (
        <section>
          <h3 className="mb-2 text-xs font-semibold uppercase tracking-wide text-gray-500">
            Finish your setup
          </h3>
          <div className="space-y-2">
            {setupSteps.map((setupStep: ICopilotSetupStep, index: number) => {
              const step = resolveSetupStep(setupStep.name);

              return (
                <button
                  key={setupStep.name}
                  type="button"
                  disabled={setupStep.completed}
                  onClick={() =>
                    onAsk(
                      `Walk me through "${step.label}" - explain what it does and guide me step by step.`
                    )
                  }
                  className={cn(
                    'flex w-full items-center gap-3 rounded-xl border px-3 py-2.5 text-left transition',
                    setupStep.completed
                      ? 'border-gray-100 bg-gray-50'
                      : 'border-gray-200 hover:border-[#b7007c]/40 hover:bg-[#b7007c]/5'
                  )}
                >
                  <span
                    className={cn(
                      'flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-xs',
                      setupStep.completed
                        ? 'bg-[#b7007c]/10 text-[#b7007c]'
                        : 'border border-gray-300 text-gray-500'
                    )}
                  >
                    {setupStep.completed ? (
                      <LuCheck className="h-3.5 w-3.5" />
                    ) : (
                      index + 1
                    )}
                  </span>
                  <span
                    className={cn(
                      'text-sm',
                      setupStep.completed
                        ? 'text-gray-400 line-through'
                        : 'text-gray-800'
                    )}
                  >
                    {step.label}
                  </span>
                </button>
              );
            })}
          </div>
        </section>
      )}

      {openQuests.length > 0 && (
        <section>
          <div className="mb-2 flex items-center justify-between">
            <h3 className="text-xs font-semibold uppercase tracking-wide text-gray-500">
              Today&apos;s tasks
            </h3>
            <span className="text-xs text-gray-500">
              {earnedPoints} pts · {resolvedCount} done
            </span>
          </div>
          <div className="space-y-2">
            {openQuests.map(quest => (
              <button
                key={quest.quest_id}
                type="button"
                onClick={() => onAsk(`Help me: ${quest.title}`)}
                className="flex w-full items-start gap-3 rounded-xl border border-gray-200 px-3 py-2.5 text-left transition hover:border-[#b7007c]/40 hover:bg-[#b7007c]/5"
              >
                <span className="mt-0.5 flex h-5 shrink-0 items-center rounded-full bg-[#b7007c]/10 px-2 text-[11px] font-semibold text-[#b7007c]">
                  +{quest.points}
                </span>
                <span className="flex flex-col">
                  <span className="text-sm font-medium text-gray-900">
                    {quest.title}
                  </span>
                  <span className="text-xs text-gray-500">
                    {quest.description}
                  </span>
                </span>
              </button>
            ))}
          </div>
        </section>
      )}

      <CopilotBadges resolvedCount={resolvedCount} />

      <div className="flex flex-col gap-2">
        {SUGGESTION_CHIPS.map((chip: string) => (
          <button
            key={chip}
            type="button"
            onClick={() => onAsk(chip)}
            className="rounded-xl border border-gray-200 px-3 py-2 text-left text-sm text-gray-700 transition hover:border-[#b7007c]/40 hover:bg-[#b7007c]/5"
          >
            {chip}
          </button>
        ))}
      </div>
    </div>
  );
}