import { useEffect, useId, useRef, useState } from 'react';
import {
  composeShareImage,
  copyText,
  shareClipboardText,
  detectSharePayloadMode,
  downloadShareImage,
  openShareSheet,
  shareFile,
  type ShareChannel,
  type ShareCapability,
  type ShareMetadata,
} from '../share';

export interface SharePanelTranslations {
  title: string;
  instagram: string;
  whatsapp: string;
  preparing: string;
  unavailable: string;
  downloadImage: string;
  downloaded: string;
  downloadedMessageCopied: string;
  downloadedCopyFailed: string;
  failed: string;
}

type ShareAction = 'prepare_asset' | 'open_share_sheet' | 'download_image' | 'copy_product_link';
type TelemetryOutcome = 'attempted' | 'asset_ready' | 'share_sheet_closed' | 'cancelled' | 'fallback_ready' | 'copied' | 'downloaded' | 'failed';

export interface ShareIntentProperties extends Record<string, unknown> {
  channel: ShareChannel;
  action: ShareAction;
  capability: ShareCapability;
  outcome: TelemetryOutcome;
  productId: string;
  variantId?: string;
  runId?: string;
}

interface Props {
  initiallyExpanded?: boolean;
  resultImage: string;
  productUrl: string | null;
  productName: string;
  brandName?: string | null;
  productImage?: string | null;
  productId: string;
  variantId?: string | null;
  runId?: string;
  t: SharePanelTranslations;
  onIntent: (properties: ShareIntentProperties) => void;
}



function InstagramIcon() {
  return (
    <span className="aisthetix-share__icon aisthetix-share__icon--instagram" aria-hidden="true">
      <svg viewBox="0 0 24 24" focusable="false">
        <rect x="3.25" y="3.25" width="17.5" height="17.5" rx="5.25" />
        <circle cx="12" cy="12" r="4.1" />
        <circle className="aisthetix-share__icon-dot" cx="17.45" cy="6.75" r="1.1" />
      </svg>
    </span>
  );
}

function WhatsAppIcon() {
  return (
    <span className="aisthetix-share__icon aisthetix-share__icon--whatsapp" aria-hidden="true">
      <svg viewBox="0 0 24 24" focusable="false">
        <path d="M20.4 11.7a8.35 8.35 0 0 1-12.34 7.34L3.5 20.5l1.48-4.4A8.35 8.35 0 1 1 20.4 11.7Z" />
        <path d="M8.1 7.4c.2-.45.43-.46.72-.47h.6c.2 0 .4.08.5.36l.72 1.76c.1.25.06.46-.1.67l-.57.72c-.17.2-.14.38-.02.58.72 1.22 1.73 2.2 2.97 2.88.2.11.38.13.55-.06l.8-.94c.2-.23.42-.26.68-.15l1.67.79c.27.13.43.2.47.32.05.12.05.7-.16 1.34-.2.65-1.2 1.2-1.67 1.28-.45.08-1.03.12-1.67-.08-.39-.12-.9-.29-1.55-.57a12.8 12.8 0 0 1-4.63-4.1c-.35-.48-.85-1.3-.85-2.19 0-.9.46-1.34.63-1.53Z" />
      </svg>
    </span>
  );
}

function DownloadIcon() {
  return (
    <span className="aisthetix-share__icon" aria-hidden="true">
      <svg viewBox="0 0 24 24" focusable="false">
        <path d="M12 3v12m0 0 5-5m-5 5-5-5M5 20h14" />
      </svg>
    </span>
  );
}

function ShareIcon() {
  return (
    <svg viewBox="0 0 24 24" focusable="false" aria-hidden="true">
      <circle cx="18" cy="5" r="2.5" />
      <circle cx="6" cy="12" r="2.5" />
      <circle cx="18" cy="19" r="2.5" />
      <path d="m8.2 10.8 7.6-4.5M8.2 13.2l7.6 4.5" />
    </svg>
  );
}

interface ShareOptionButtonProps {
  label: string;
  badge: string;
  icon: 'instagram' | 'whatsapp' | 'download';
  disabled: boolean;
  busy: boolean;
  onClick: () => void;
}

function ShareOptionButton({ label, badge, icon, disabled, busy, onClick }: ShareOptionButtonProps) {
  return (
    <button
      type="button"
      className="aisthetix-share__channel"
      aria-label={label}
      title={label}
      aria-busy={busy}
      disabled={disabled}
      onClick={onClick}
    >
      {icon === 'instagram' ? <InstagramIcon /> : icon === 'whatsapp' ? <WhatsAppIcon /> : <DownloadIcon />}
      <span className="aisthetix-share__badge" aria-hidden="true">{badge}</span>
    </button>
  );
}

export function SharePanel({ resultImage, productUrl, productName, brandName, productImage, productId, variantId, runId, t, onIntent, initiallyExpanded = false }: Props) {
  const menuId = useId();
  const copyEpoch = useRef(0);
  const [expanded, setExpanded] = useState(initiallyExpanded);
  const [asset, setAsset] = useState<File | null>(null);
  const [assetFailed, setAssetFailed] = useState(false);
  const [busy, setBusy] = useState<ShareChannel | null>(null);
  const [lastChannel, setLastChannel] = useState<ShareChannel>('instagram_feed');
  const [toast, setToast] = useState<{ message: string } | null>(null);
  useEffect(() => {
    if (!toast) return;
    const timer = setTimeout(() => setToast(null), 2500);
    return () => clearTimeout(timer);
  }, [toast]);

  const metadata: ShareMetadata = { itemName: productName, productUrl, brandName, productImage };

  useEffect(() => {
    let active = true;
    setAsset(null);
    setAssetFailed(false);
    setBusy(null);
    setToast(null);
    void (async () => {
      try {
        const card = await composeShareImage(resultImage, { itemName: productName, productUrl, brandName, productImage });
        if (!active) return;
        setAsset(shareFile(card));
      } catch {
        if (!active) return;
        setAssetFailed(true);
      }
    })();
    return () => { active = false; copyEpoch.current += 1; };
  }, [productImage, brandName, productName, productUrl, resultImage, t.preparing, t.unavailable]);

  const emit = (channel: ShareChannel, action: ShareAction, capability: ShareCapability, outcome: TelemetryOutcome) => {
    onIntent({ channel, action, capability, outcome, productId, ...(variantId ? { variantId } : {}), ...(runId ? { runId } : {}) });
  };

  const handleChannel = async (channel: ShareChannel) => {
    if (!asset) return;
    const epoch = ++copyEpoch.current;
    setBusy(channel); setLastChannel(channel); setToast(null);
    const showToast = (message: string) => {
      if (copyEpoch.current === epoch) setToast({ message });
    };
    try {
      const text = shareClipboardText(metadata, channel);
      const mode = detectSharePayloadMode(asset, metadata, navigator, channel);
      if (mode !== 'none') {
        // Start the best-effort clipboard write, but never await it before sharing.
        // The file is already prepared, so both calls remain in this tap's gesture.
        void copyText(text).then(copied => {
          emit(channel, 'copy_product_link', 'file_share', copied ? 'copied' : 'failed');
        });
        emit(channel, 'open_share_sheet', 'file_share', 'attempted');
        const result = await openShareSheet(asset, metadata, navigator, channel, channel === 'instagram_feed');
        emit(channel, 'open_share_sheet', result.capability, result.outcome);
        // Cancellation and successful sheet closure are silent. A native error
        // must not cause an unexpected download when file sharing is available.
        if (result.outcome === 'failed') showToast(t.failed);
      } else {
        downloadShareImage(asset);
        emit(channel, 'download_image', 'download_only', 'downloaded');
        const copied = await copyText(text);
        emit(channel, 'copy_product_link', copied ? 'download_clipboard' : 'download_only', copied ? 'copied' : 'failed');
        showToast(copied ? t.downloadedMessageCopied : t.downloadedCopyFailed);
      }
    } catch {
      emit(channel, 'download_image', 'unavailable', 'failed');
      showToast(t.failed);
    } finally { setBusy(null); }
  };
  const handleDownload = () => {
    if (!asset) return;
    try {
      downloadShareImage(asset);
      emit(lastChannel, 'download_image', 'download_only', 'downloaded');
      setToast({ message: t.downloaded });
    } catch {
      emit(lastChannel, 'download_image', 'unavailable', 'failed');
      setToast({ message: t.failed });
    }
  };
  const disabled = !asset || assetFailed || busy !== null;

  return (
    <section className="aisthetix-share" aria-label={t.title}>
      <button
        type="button"
        className="aisthetix-share__trigger"
        aria-label={t.title}
        title={t.title}
        aria-expanded={expanded}
        aria-controls={menuId}
        onClick={() => { setExpanded((current) => !current); setToast(null); copyEpoch.current += 1; }}
      >
        <ShareIcon />
      </button>
      {expanded ? (
        <div id={menuId} className="aisthetix-share__menu">
          <div className="aisthetix-share__channels">
            <ShareOptionButton label={t.instagram} badge={t.instagram} icon="instagram" disabled={disabled} busy={busy === 'instagram_feed'} onClick={() => void handleChannel('instagram_feed')} />
            <ShareOptionButton label={t.whatsapp} badge={t.whatsapp} icon="whatsapp" disabled={disabled} busy={busy === 'whatsapp_message'} onClick={() => void handleChannel('whatsapp_message')} />
            <ShareOptionButton label={t.downloadImage} badge={t.downloadImage} icon="download" disabled={disabled} busy={false} onClick={handleDownload} />
          </div>
          {!asset ? <p className="aisthetix-share__status" aria-live="polite">{assetFailed ? t.unavailable : t.preparing}</p> : null}
        </div>
      ) : null}
      {toast ? <p className="aisthetix-share__toast" role="status">{toast.message}</p> : null}
    </section>
  );
}