'use client';

import KindChip from '@/app/components/ui/marketplace/kind-chip.jsx';
import KindBadge from '@/app/components/ui/marketplace/kind-badge.jsx';
import RiskDot from '@/app/components/ui/marketplace/risk-dot.jsx';
import InstallToggle from '@/app/components/ui/marketplace/install-toggle.jsx';
import ConnectionCard from './connection-card.jsx';
import WorkflowCard from './workflow-card.jsx';

/**
 * Single marketplace card — works for tool, skill, bundle, agent, and connection kinds.
 * Pure presentational; install behaviour is delegated to the action prop.
 *
 * Bundle cards render the toggle as disabled with a "Phase 2" affordance — the
 * onBundleClick prop opens the informational modal. Connection cards delegate
 * to <ConnectionCard> which replaces the install toggle with a Configure button.
 *
 * @param {{
 *   item: any,
 *   toggleAction: any,
 *   onBundleClick: () => void,
 *   onConnectionClick?: () => void,
 *   connectionStatus?: any,
 *   connectionPrefill?: { scope, project_id, agent_id }|null,
 *   currentKind?: string,
 * }} props
 */
export default function MarketplaceRow({ item, toggleAction, onBundleClick, onConnectionClick, connectionStatus, connectionPrefill, currentKind }) {
  const isTool = item.kind === 'tool';
  const isSkill = item.kind === 'skill';
  const isBundle = item.kind === 'bundle';
  const isAgent = item.kind === 'agent';
  const isConnection = item.kind === 'connection';
  const isWorkflow = item.kind === 'workflow';

  const installed = Boolean(item.installed);
  const available = Boolean(item.available);

  if (isConnection) {
    return (
      <ConnectionCard
        item={item}
        status={connectionStatus}
        prefillScope={connectionPrefill}
      />
    );
  }

  if (isWorkflow) {
    return (
      <WorkflowCard
        item={item}
        toggleAction={toggleAction}
        currentKind={currentKind}
      />
    );
  }

  return (
    <li className={`mkt-card kind-${item.kind} ${installed ? 'on' : ''}`}>
      <div className="mkt-card-head">
        <KindChip kind={item.kind} category={item.category} size={20} />
        <KindBadge kind={item.kind} />
        {isTool && item.tool ? (
          <RiskDot level={item.tool.risk_level} />
        ) : null}
      </div>

      <div className="mkt-card-body">
        <h3 className="mkt-card-title">{item.slug}</h3>
        <p className="mkt-card-desc">{item.description}</p>
      </div>

      <div className="mkt-card-meta">
        {isTool && item.tool ? (
          <>
            <span>Approval mode <b>{item.tool.approval_mode}</b></span>
            <span>Config <b>{item.tool.required_env?.length ? item.tool.required_env.join(' · ') : 'none'}</b></span>
          </>
        ) : null}
        {isSkill && item.skill ? (
          <>
            <span>Invocation <b>{item.skill.invocation}</b></span>
            <span>Author <b>{item.author}</b></span>
          </>
        ) : null}
        {isBundle && item.bundle ? (
          <>
            <span>Items <b>{item.bundle.published_count}</b></span>
            <span>By <b>{item.author}{item.bundle.license ? ` · ${item.bundle.license}` : ''}</b></span>
          </>
        ) : null}
        {isAgent && item.agent ? (
          <>
            <span>Role <b>{item.agent.role}</b></span>
            <span>Engine <b>{item.agent.engine_default}</b></span>
            <span>Installed <b>{item.install_count || 0}x</b></span>
          </>
        ) : null}
        {!isTool && item.risk_summary ? (
          <span>Risk <b>{item.risk_summary.length > 40 ? item.risk_summary.slice(0, 40) + '…' : item.risk_summary}</b></span>
        ) : null}
        {item.version ? <span>Version <b>{item.version}</b></span> : null}
      </div>

      <div className="mkt-card-foot">
        <span
          className={`mkt-availability ${
            installed ? 'installed' : !available ? 'warn' : ''
          }`}
        >
          {installed ? 'Installed' : isTool && !available ? 'Missing config' : 'Available'}
        </span>
        {isBundle ? (
          <button
            type="button"
            className="mkt-toggle"
            role="switch"
            aria-checked={false}
            aria-label={`Install ${item.slug} (Phase 2)`}
            onClick={onBundleClick}
          />
        ) : (
          <InstallToggle
            action={toggleAction}
            itemId={item.id}
            installed={installed}
            available={available}
            label={`${installed ? 'Uninstall' : 'Install'} ${item.slug}`}
            slugHint={item.slug}
            currentKind={currentKind}
          />
        )}
      </div>
    </li>
  );
}
