import { ArrowRight, Download, RotateCcw } from 'lucide-preact';
import { COPY } from './copy.js';

/**
 * La derecha cuando hay resultado (el antes y después va a la izquierda).
 *
 * Decisiones de la owner: después del resultado, SOLO la descarga y el CTA a
 * /estimate. Sin «ajustar», «probar otro diseño» ni «subir otra foto». «Start
 * again» existe únicamente en la vista del visitante que vuelve (`returning`): se
 * lo deja más difícil a propósito.
 *
 * @param {{
 *   downloadUrl: string,
 *   estimateUrl: string,
 *   returning: boolean,
 *   saved: boolean,
 *   onStartAgain: () => void,
 *   headingRef: any,
 * }} props
 */
export default function ResultPanel({
  downloadUrl,
  estimateUrl,
  returning,
  saved,
  onStartAgain,
  headingRef,
}) {
  return (
    <div class="ai-scroll h-full overflow-y-auto">
      <div class="mx-auto flex min-h-full max-w-xl flex-col justify-center px-5 py-8 sm:px-8 lg:px-12 lg:py-12">
        <h2
          ref={headingRef}
          tabIndex={-1}
          class="font-serif text-[1.8rem] leading-tight text-fg outline-none sm:text-[2rem]"
        >
          {returning ? COPY.result.savedTitle : COPY.result.title}
        </h2>
        <p class="mt-3 text-base leading-relaxed font-light text-muted">{COPY.result.compare}</p>
        <p class="mt-4 text-sm leading-relaxed text-muted-2">{COPY.result.disclaimer}</p>
        {!saved && <p class="mt-4 text-sm text-honey">{COPY.storageUnavailable}</p>}

        <div class="mt-10 flex flex-wrap items-center gap-3">
          <a href={estimateUrl} class="btn btn-primary">
            {COPY.actions.estimate}
            <ArrowRight class="size-4" aria-hidden="true" />
          </a>
          <a href={downloadUrl} download class="btn btn-muted">
            <Download class="size-4" aria-hidden="true" />
            {COPY.actions.download}
          </a>
        </div>

        {returning && (
          <div class="mt-10 border-t border-line/60 pt-6">
            <button
              type="button"
              onClick={onStartAgain}
              class="flex cursor-pointer items-center gap-2 text-sm text-fg underline underline-offset-4 transition-colors hover:text-honey"
            >
              <RotateCcw class="size-4" aria-hidden="true" />
              {COPY.actions.startAgain}
            </button>
            <p class="mt-2 text-xs text-muted-2">{COPY.result.startAgainHint}</p>
          </div>
        )}
      </div>
    </div>
  );
}