import React, { useMemo } from 'react';
import { ExternalLink, Check, Download, Power, ArrowRight } from 'lucide-react';

/**
 * Recommendation panel for the Deep Malware Cleaner plugin.
 *
 * Deliberately NOT styled as one of the feature cards above: malware scanning
 * is a separate plugin, so presenting it identically to Admin Safety Guard's
 * own features would imply it ships with this plugin. The wide layout, tinted
 * "companion plugin" header strip and explicit wording make the distinction
 * obvious at a glance.
 */
export default function CompanionPlugin() {
  const data = (typeof tpsaAdmin !== 'undefined' && tpsaAdmin.companion) || {};

  const {
    name = 'Deep Malware Cleaner',
    installed = false,
    active = false,
    dashboard_url: dashboardUrl = '',
    install_url: installUrl = '',
    plugins_url: pluginsUrl = '',
    wporg_url: wporgUrl = 'https://wordpress.org/plugins/deep-malware-cleaner/',
  } = data;

  const uid = useMemo(() => `cp-${Math.random().toString(36).slice(2, 9)}`, []);

  const capabilities = [
    'Scans core, plugin, theme and upload files',
    'Detects injected and obfuscated code',
    'Flags suspicious database content',
    'Removes and quarantines what it finds',
  ];

  // Primary action depends on whether the plugin is already there.
  let primary;
  if (active && dashboardUrl) {
    primary = {
      label: `Open ${name}`,
      href: dashboardUrl,
      external: false,
      Icon: ArrowRight,
    };
  } else if (installed && pluginsUrl) {
    primary = {
      label: 'Activate the plugin',
      href: pluginsUrl,
      external: false,
      Icon: Power,
    };
  } else if (installUrl) {
    primary = {
      label: 'Install free plugin',
      href: installUrl,
      external: false,
      Icon: Download,
    };
  } else {
    primary = {
      label: 'View on WordPress.org',
      href: wporgUrl,
      external: true,
      Icon: ExternalLink,
    };
  }

  const PrimaryIcon = primary.Icon;

  return (
    <div className={uid}>
      <section className="cp-panel" aria-labelledby={`${uid}-title`}>
        <header className="cp-ribbon">
          <span className="cp-ribbonText">
            Separate free plugin — not part of Admin Safety Guard
          </span>
          {active && (
            <span className="cp-installed">
              <Check className="cp-installedIcon" aria-hidden="true" />
              Installed &amp; active
            </span>
          )}
        </header>

        <div className="cp-body">
          <div className="cp-brand">
            <img
              className="cp-logo"
              src={`${tpsaAdmin.assets_url}/admin/img/dmc-128x128.jpg`}
              alt=""
              width="52"
              height="52"
              loading="lazy"
              decoding="async"
            />
          </div>

          <div className="cp-content">
            <h3 className="cp-title" id={`${uid}-title`}>
              {name}
            </h3>
            <p className="cp-lead">
              Malware scanning and cleanup are handled by our dedicated free
              plugin instead of being duplicated here, so you get a single,
              complete tool for the job rather than two partial ones.
            </p>

            <ul className="cp-list">
              {capabilities.map((item) => (
                <li key={item} className="cp-listItem">
                  <Check className="cp-check" aria-hidden="true" />
                  <span>{item}</span>
                </li>
              ))}
            </ul>

            <div className="cp-actions">
              <a
                className="cp-btn"
                href={primary.href}
                {...(primary.external
                  ? { target: '_blank', rel: 'noopener noreferrer' }
                  : {})}
              >
                {primary.label}
                <PrimaryIcon className="cp-btnIcon" aria-hidden="true" />
              </a>

              {/* Always offer the canonical listing as a secondary path. */}
              {!(primary.external && primary.href === wporgUrl) && (
                <a
                  className="cp-link"
                  href={wporgUrl}
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  View on WordPress.org
                  <ExternalLink className="cp-linkIcon" aria-hidden="true" />
                </a>
              )}
            </div>
          </div>
        </div>
      </section>

      <style>{`
        .${uid} .cp-panel{
          margin-top:28px;
          border:1px solid #e2e8f0;
          border-radius:16px;
          background:#fff;
          overflow:hidden;
        }

        /* Tinted strip states plainly that this is a different plugin. */
        .${uid} .cp-ribbon{
          display:flex;
          align-items:center;
          justify-content:space-between;
          flex-wrap:wrap;
          gap:8px;
          padding:10px 20px;
          background:#f8fafc;
          border-bottom:1px solid #e2e8f0;
        }
        .${uid} .cp-ribbonText{
          font-size:12px;
          font-weight:700;
          letter-spacing:.04em;
          text-transform:uppercase;
          color:#64748b;
        }
        .${uid} .cp-installed{
          display:inline-flex;
          align-items:center;
          gap:6px;
          white-space:nowrap;
          border-radius:999px;
          padding:5px 11px;
          background:#dcfce7;
          color:#15803d;
          font-size:12px;
          font-weight:700;
          line-height:1.2;
        }
        .${uid} .cp-installedIcon{ width:13px; height:13px; flex:0 0 auto; }

        .${uid} .cp-body{
          display:flex;
          align-items:flex-start;
          gap:20px;
          padding:24px;
        }

        .${uid} .cp-logo{
          display:block;
          width:52px;
          height:52px;
          flex:0 0 auto;
          border-radius:12px;
          border:1px solid #e2d8fb;
          background:#fff;
          object-fit:contain;
          padding:4px;
          box-sizing:border-box;
        }

        .${uid} .cp-content{ min-width:0; flex:1 1 auto; }

        .${uid} .cp-title{
          margin:0 0 6px 0;
          font-size:18px;
          font-weight:800;
          color:#0f172a;
          line-height:1.3;
        }
        .${uid} .cp-lead{
          margin:0 0 16px 0;
          font-size:13px;
          line-height:1.7;
          color:#64748b;
          max-width:70ch;
        }

        .${uid} .cp-list{
          list-style:none;
          margin:0 0 20px 0;
          padding:0;
          display:grid;
          grid-template-columns:1fr;
          gap:8px 20px;
        }
        @media (min-width:720px){
          .${uid} .cp-list{ grid-template-columns:repeat(2,minmax(0,1fr)); }
        }
        .${uid} .cp-listItem{
          display:flex;
          align-items:flex-start;
          gap:8px;
          font-size:13px;
          color:#334155;
          line-height:1.5;
        }
        .${uid} .cp-check{
          width:15px;
          height:15px;
          flex:0 0 auto;
          margin-top:2px;
          color:#16a34a;
        }

        .${uid} .cp-actions{
          display:flex;
          align-items:center;
          flex-wrap:wrap;
          gap:8px 18px;
        }

        .${uid} .cp-btn{
          display:inline-flex;
          align-items:center;
          gap:8px;
          border-radius:10px;
          padding:11px 20px;
          background:linear-gradient(90deg,#7c3aed,#ec4899);
          color:#fff !important;
          font-size:13px;
          font-weight:700;
          text-decoration:none;
          box-shadow:0 6px 16px rgba(124,58,237,.20);
          transition:transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
        }
        .${uid} .cp-btn:hover{
          transform:translateY(-1px);
          box-shadow:0 12px 24px rgba(124,58,237,.26);
          filter:brightness(1.03);
          color:#fff !important;
        }
        .${uid} .cp-btn:active{ transform:translateY(0); }
        .${uid} .cp-btn:focus{
          outline:2px solid #7c3aed;
          outline-offset:2px;
          box-shadow:none;
        }
        .${uid} .cp-btnIcon{ width:15px; height:15px; flex:0 0 auto; }

        .${uid} .cp-link{
          display:inline-flex;
          align-items:center;
          gap:6px;
          font-size:13px;
          font-weight:600;
          color:#7c3aed;
          text-decoration:none;
        }
        .${uid} .cp-link:hover{ text-decoration:underline; color:#6d28d9; }
        .${uid} .cp-linkIcon{ width:13px; height:13px; flex:0 0 auto; }

        @media (max-width:600px){
          .${uid} .cp-body{ flex-direction:column; gap:14px; padding:20px; }
        }
      `}</style>
    </div>
  );
}