zeropost-tool/components/FromUrlModal.js

'use client';

/**
 * FromUrlModal — модальное окно «URL → черновик».
 * Props:
 *   open       — bool
 *   channelId  — number
 *   onClose()
 *   onApply({ content, imageUrl, title }) — вызывается с результатом
 */

import { useState } from 'react';
import { X, Link2, Loader2, Youtube, Globe, Send, AlertCircle } from 'lucide-react';

function detectSource(url) {
  try {
    const u = new URL(url);
    if (u.hostname.includes('youtube.com') || u.hostname.includes('youtu.be')) return 'youtube';
    if (u.hostname === 't.me') return 'telegram';
    return 'web';
  } catch { return 'web'; }
}

const SOURCE_ICONS = {
  youtube:  { Icon: Youtube, label: 'YouTube', color: 'text-red-400' },
  telegram: { Icon: Send,    label: 'Telegram', color: 'text-blue-400' },
  web:      { Icon: Globe,   label: 'Сайт',    color: 'text-text-mute' },
};

export default function FromUrlModal({ open, channelId, onClose, onApply }) {
  const [url,      setUrl]      = useState('');
  const [loading,  setLoading]  = useState(false);
  const [error,    setError]    = useState('');
  const [result,   setResult]   = useState(null);
  const [edited,   setEdited]   = useState('');

  if (!open) return null;

  const source = detectSource(url);
  const { Icon: SrcIcon, label: srcLabel, color: srcColor } = SOURCE_ICONS[source] || SOURCE_ICONS.web;

  async function generate() {
    if (!url.trim()) return;
    setLoading(true);
    setError('');
    setResult(null);
    try {
      const res = await fetch('/api/generate/from-url', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ channelId, url: url.trim() }),
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data.error || 'Ошибка генерации');
      setResult(data);
      setEdited(data.content);
    } catch (e) {
      setError(e.message);
    } finally {
      setLoading(false);
    }
  }

  function apply() {
    if (!edited.trim()) return;
    onApply({
      content:  edited,
      imageUrl: result?.imageUrl || null,
      title:    result?.title || '',
    });
    handleClose();
  }

  function handleClose() {
    setUrl('');
    setResult(null);
    setEdited('');
    setError('');
    onClose();
  }

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm">
      <div className="w-full max-w-lg rounded-2xl bg-surface border border-border shadow-2xl flex flex-col max-h-[90vh]">

        {/* Шапка */}
        <div className="flex items-center justify-between px-5 py-4 border-b border-border shrink-0">
          <h2 className="font-semibold flex items-center gap-2">
            <Link2 className="w-4 h-4 text-accent" />
            URL → черновик
          </h2>
          <button onClick={handleClose} className="btn-ghost p-1.5 rounded-lg">
            <X className="w-4 h-4" />
          </button>
        </div>

        {/* Контент */}
        <div className="flex flex-col gap-4 p-5 overflow-y-auto">

          {/* Инпут URL */}
          <div>
            <label className="label">Ссылка на статью, YouTube-видео или Telegram-пост</label>
            <div className="relative">
              <div className={`absolute left-3 top-1/2 -translate-y-1/2 ${srcColor}`}>
                <SrcIcon className="w-4 h-4" />
              </div>
              <input
                type="url"
                className="input pl-9 pr-3"
                placeholder="https://..."
                value={url}
                onChange={e => { setUrl(e.target.value); setResult(null); setError(''); }}
                disabled={loading}
                onKeyDown={e => e.key === 'Enter' && !loading && generate()}
              />
            </div>
            {url && (
              <p className="hint mt-1">Источник: {srcLabel}</p>
            )}
          </div>

          {/* Кнопка генерации */}
          {!result && (
            <button
              onClick={generate}
              disabled={loading || !url.trim()}
              className="btn-primary w-full"
            >
              {loading ? (
                <><Loader2 className="w-4 h-4 animate-spin" /> Читаю и генерирую…</>
              ) : (
                <><Link2 className="w-4 h-4" /> Сгенерировать пост</>
              )}
            </button>
          )}

          {/* Ошибка */}
          {error && (
            <div className="card p-3 text-sm text-red-400 flex items-center gap-2">
              <AlertCircle className="w-4 h-4 shrink-0" /> {error}
            </div>
          )}

          {/* Результат */}
          {result && (
            <>
              {result.title && (
                <div className="text-xs text-text-mute border-l-2 border-accent/40 pl-3 py-1">
                  Источник: {result.title}
                </div>
              )}

              <div>
                <label className="label">Черновик поста — отредактируй и применяй</label>
                <textarea
                  className="input min-h-[180px] text-sm leading-relaxed"
                  value={edited}
                  onChange={e => setEdited(e.target.value)}
                  autoFocus
                />
                <p className="hint">{edited.length} символов</p>
              </div>

              {result.imageUrl && (
                <div>
                  <label className="label">Обложка из источника</label>
                  <img
                    src={result.imageUrl}
                    alt=""
                    className="w-full rounded-lg max-h-40 object-cover"
                    referrerPolicy="no-referrer"
                    onError={e => { e.target.style.display = 'none'; }}
                  />
                </div>
              )}

              <div className="flex gap-2">
                <button onClick={apply} className="btn-primary flex-1">
                  Применить в редактор
                </button>
                <button onClick={() => { setResult(null); setEdited(''); }} className="btn-ghost">
                  Заново
                </button>
              </div>
            </>
          )}
        </div>
      </div>
    </div>
  );
}