import React, { useState } from 'react';
import { Plug, Rss, Copy, Check } from 'lucide-react';

/** MCP sunucusu + RSS besleme kartı (API & Webhooks sekmesi). */
export const McpRssKarti = () => {
  const origin = typeof window !== 'undefined' ? window.location.origin : 'https://ihaleist.com';
  const url = `${origin}/mcp`;
  const anahtar = 'ih_live_ANAHTARINIZ';
  const [kopya, setKopya] = useState(null);
  const kopyala = async (k, t) => { try { await navigator.clipboard.writeText(t); setKopya(k); setTimeout(() => setKopya(null), 1500); } catch { /* yok */ } };
  const ornekler = [
    { k: 'cc', ad: 'Claude Code', not: 'terminalde tek komut', kod: `claude mcp add --transport http ihaleist ${url} --header "Authorization: Bearer ${anahtar}"` },
    { k: 'cursor', ad: 'Cursor / Windsurf', not: '.cursor/mcp.json', kod: JSON.stringify({ mcpServers: { ihaleist: { url, headers: { Authorization: `Bearer ${anahtar}` } } } }, null, 2) },
    { k: 'desktop', ad: 'Claude Desktop', not: 'claude_desktop_config.json (mcp-remote)', kod: JSON.stringify({ mcpServers: { ihaleist: { command: 'npx', args: ['-y', 'mcp-remote', url, '--header', `Authorization: Bearer ${anahtar}`] } } }, null, 2) },
  ];
  const rss = `${origin}/api/feeds/tenders.rss?key=${anahtar}&il=İstanbul&q=eldiven`;
  return (
    <div className="bg-white rounded-2xl border border-slate-200 shadow-xs p-5 space-y-4">
      <div className="border-b border-slate-100 pb-3">
        <h3 className="font-extrabold text-sm text-slate-900 flex items-center gap-2"><Plug className="w-4 h-4 text-violet-600" /> MCP Sunucusu — yapay zekâ araçlarınıza İhaleist'i bağlayın</h3>
        <p className="text-[11px] text-slate-500 mt-1">Claude Code, Cursor, Claude Desktop gibi MCP destekli araçlar İhaleist'i doğrudan sorgular: <code>search_tenders</code>, <code>get_tender</code>, <code>search_results</code>, <code>search_items</code>, <code>upcoming_deadlines</code>. Yukarıdaki API anahtarınızı kullanır.</p>
      </div>
      {ornekler.map((o) => (
        <div key={o.k} className="space-y-1">
          <div className="flex items-center justify-between">
            <p className="text-xs font-bold text-slate-800">{o.ad} <span className="font-normal text-slate-500">— {o.not}</span></p>
            <button onClick={() => kopyala(o.k, o.kod)} className="text-[11px] flex items-center gap-1 border border-slate-200 rounded-lg px-2 py-1 hover:bg-slate-50">{kopya === o.k ? <Check className="w-3 h-3 text-emerald-600" /> : <Copy className="w-3 h-3" />} Kopyala</button>
          </div>
          <pre className="overflow-x-auto rounded-lg bg-slate-900 text-slate-100 p-2 text-[11px]">{o.kod}</pre>
        </div>
      ))}
      <div className="border-t border-slate-100 pt-3 space-y-1">
        <div className="flex items-center justify-between">
          <p className="text-xs font-bold text-slate-800 flex items-center gap-1"><Rss className="w-3.5 h-3.5 text-orange-500" /> RSS beslemesi <span className="font-normal text-slate-500">— Feedly, Outlook, Slack RSS, n8n… (il, sektor, q filtreleri)</span></p>
          <button onClick={() => kopyala('rss', rss)} className="text-[11px] flex items-center gap-1 border border-slate-200 rounded-lg px-2 py-1 hover:bg-slate-50">{kopya === 'rss' ? <Check className="w-3 h-3 text-emerald-600" /> : <Copy className="w-3 h-3" />} Kopyala</button>
        </div>
        <pre className="overflow-x-auto rounded-lg bg-slate-900 text-slate-100 p-2 text-[11px]">{rss}</pre>
        <p className="text-[11px] text-slate-500">Sonuç ilanları beslemesi anahtarsız: <code>{origin}/api/feeds/sonuc.rss</code> (firma, idare, il filtreleri). Anahtarı <code>ih_live_ANAHTARINIZ</code> yerine yazın.</p>
      </div>
    </div>
  );
};