import { Eye } from "lucide-react";
import type { OverlayPreviewProps, OverlaySettingsProps } from "./types";
import { useOverlayPreviewModel } from "./hooks/useOverlayPreviewModel";
import { useOverlaySettingsModel } from "./hooks/useOverlaySettingsModel";

export function OverlaySettings({
  canShowOverlay,
  onShowOverlay,
}: OverlaySettingsProps) {
  const {
    handleShowOverlay,
    eyebrow,
    title,
    statusHeadline,
    statusText,
    buttonLabel,
    buttonTitle,
  } = useOverlaySettingsModel({ onShowOverlay });

  return (
    <section className="panel">
      <div className="panel-heading">
        <div>
          <p className="eyebrow">{eyebrow}</p>
          <h2>{title}</h2>
        </div>
        <Eye size={20} />
      </div>
      <div className="overlay-settings">
        <div className="overlay-settings-copy">
          <strong>{statusHeadline}</strong>
          <span>{statusText}</span>
        </div>
        <button
          className="primary-button"
          onClick={handleShowOverlay}
          disabled={!canShowOverlay}
          title={canShowOverlay ? buttonTitle : "Overlay benoetigt die Electron-Bridge."}
        >
          <Eye size={16} />
          {buttonLabel}
        </button>
      </div>
    </section>
  );
}

export function OverlayPreview({ snapshot }: OverlayPreviewProps) {
  const {
    artifactName,
    artifactSlotLine,
    artifactSubstatsText,
    artifactMainStat,
    characterNames,
    scoreText,
    metaClassName,
    metaIcon,
    metaLabel,
    reason,
    hasArtifact,
  } = useOverlayPreviewModel({ snapshot });

  return (
    <div className="overlay-root">
      <div className="overlay-card">
        <div className="overlay-card-head">
          <div>
            <p className="eyebrow">Reward scan</p>
            <h2>{artifactName}</h2>
          </div>
          <strong>{scoreText}</strong>
        </div>
        <div className={metaClassName}>
          {metaIcon}
          {metaLabel}
        </div>
        {hasArtifact ? (
          <div className="overlay-artifact-mini">
            <span>{artifactSlotLine}</span>
            <strong>{artifactMainStat}</strong>
            <small>{artifactSubstatsText}</small>
          </div>
        ) : null}
        <div className="overlay-character-list">
          {characterNames.map((name) => (
            <span key={name}>{name}</span>
          ))}
        </div>
        <p>{reason}</p>
      </div>
    </div>
  );
}
