import { BookOpen, ExternalLink } from 'lucide-react';
import type { ChannelMeta } from '../../lib/channel-meta';

type ChannelInstructionsPanelProps = {
  meta: ChannelMeta;
  title: string;
  viewDocsLabel: string;
};

export default function ChannelInstructionsPanel({
  meta,
  title,
  viewDocsLabel,
}: ChannelInstructionsPanelProps) {
  const canOpenDocs = Boolean(meta.docsUrl);

  function openDocs(): void {
    if (!meta.docsUrl) return;

    try {
      if (window.electron?.openExternal) {
        window.electron.openExternal(meta.docsUrl);
        return;
      }
    } catch {
      // Fall back to window.open below.
    }

    window.open(meta.docsUrl, '_blank', 'noopener,noreferrer');
  }

  return (
    <section className="rounded-[28px] border border-black/10 bg-[#f7f3eb] px-8 py-7 shadow-[0_10px_30px_rgba(15,23,42,0.06)] dark:border-white/10 dark:bg-[#232327]">
      <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
        <div className="min-w-0">
          <h3 className="text-[18px] font-semibold text-[#171717] dark:text-[#f3f4f6]">
            {title}
          </h3>
          <p className="mt-3 max-w-3xl text-[15px] leading-7 text-[#667085] dark:text-gray-300">
            {meta.description}
          </p>
        </div>

        {canOpenDocs ? (
          <button
            type="button"
            className="inline-flex h-12 shrink-0 items-center gap-2 rounded-full border border-black/10 bg-[#fbf8f1] px-5 text-[15px] font-semibold text-[#1f2937] transition-colors hover:bg-black/5 dark:border-white/10 dark:bg-[#2a2a2f] dark:text-gray-100 dark:hover:bg-white/10"
            onClick={openDocs}
          >
            <BookOpen className="h-4 w-4" />
            <span>{viewDocsLabel}</span>
            <ExternalLink className="h-4 w-4" />
          </button>
        ) : null}
      </div>

      {meta.instructions.length > 0 ? (
        <ol className="mt-7 space-y-3 pl-7 text-[15px] leading-8 text-[#667085] dark:text-gray-300">
          {meta.instructions.map((instruction) => (
            <li key={instruction} className="list-decimal marker:font-semibold marker:text-[#4b5563] dark:marker:text-gray-300">
              {instruction}
            </li>
          ))}
        </ol>
      ) : null}
    </section>
  );
}