'use client';
/* eslint-disable @next/next/no-img-element */

import { useCallback, useEffect, useState } from 'react';
import { ChevronDown, ImageUp, Loader2, Sparkles, Trash2 } from 'lucide-react';
import OGSocialPreview from './OGSocialPreview';
import { useToast } from './ToastProvider';
import { getResponseErrorTextWithRequestId } from '@/lib/api-client';

interface OGEditorProps {
  ogTitle?: string;
  ogDescription?: string;
  ogImage?: string;
  shortUrl?: string;
  mode: 'source' | 'custom';
  onModeChange: (mode: 'source' | 'custom') => void;
  onUploadStateChange?: (isUploading: boolean) => void;
  onChange?: (data: { ogTitle?: string; ogDescription?: string; ogImage?: string }) => void;
}

export default function OGEditor({
  ogTitle: initialTitle,
  ogDescription: initialDescription,
  ogImage: initialImage,
  shortUrl,
  mode,
  onModeChange,
  onUploadStateChange,
  onChange,
}: OGEditorProps) {
  const toast = useToast();
  const [isOpen, setIsOpen] = useState(false);
  const [isPreviewOpen, setIsPreviewOpen] = useState(false);
  const [ogTitle, setOgTitle] = useState(initialTitle || '');
  const [ogDescription, setOgDescription] = useState(initialDescription || '');
  const [ogImage, setOgImage] = useState(initialImage || '');
  const [isUploading, setIsUploading] = useState(false);
  const [selectedFileName, setSelectedFileName] = useState('');

  useEffect(() => {
    setOgTitle(initialTitle || '');
    setOgDescription(initialDescription || '');
    setOgImage(initialImage || '');
    setSelectedFileName('');
  }, [initialDescription, initialImage, initialTitle]);

  const previewImage = ogImage;

  const handleImageUpload = useCallback(async (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    if (!file) return;

    if (!file.type.startsWith('image/')) {
      toast.error('Пожалуйста, выберите изображение (PNG, JPG, GIF, WebP)');
      event.target.value = '';
      return;
    }

    const maxSize = 5 * 1024 * 1024;
    if (file.size > maxSize) {
      toast.error('Размер файла не должен превышать 5MB');
      event.target.value = '';
      return;
    }

    setSelectedFileName(file.name);
    setIsUploading(true);
    onUploadStateChange?.(true);

    try {
      const formData = new FormData();
      formData.append('image', file);

      const response = await fetch('/api/og-image', {
        method: 'POST',
        body: formData,
      });

      if (!response.ok) {
        throw new Error(await getResponseErrorTextWithRequestId(response, 'Ошибка загрузки'));
      }

      const data = await response.json() as { url?: string };
      if (!data.url) {
        throw new Error('URL изображения не получен');
      }

      setOgImage(data.url);
      onChange?.({ ogImage: data.url });
      setSelectedFileName('');
      toast.success('Изображение загружено');
    } catch (error) {
      setSelectedFileName('');
      const message = error instanceof Error
        ? error.message
        : 'Не удалось загрузить изображение. Попробуйте другой файл.';
      toast.error(message);
    } finally {
      setIsUploading(false);
      onUploadStateChange?.(false);
      event.target.value = '';
    }
  }, [onChange, onUploadStateChange, toast]);

  const handleTitleChange = (title: string) => {
    setOgTitle(title);
    onChange?.({ ogTitle: title });
  };

  const handleDescriptionChange = (description: string) => {
    setOgDescription(description);
    onChange?.({ ogDescription: description });
  };

  return (
    <div className="overflow-hidden rounded-2xl border border-white/10 bg-white/[0.02] backdrop-blur-md">
      <button
        type="button"
        onClick={() => setIsOpen((prev) => !prev)}
        className="flex w-full items-center justify-between px-4 py-3 transition-colors hover:bg-white/[0.04]"
      >
        <div className="flex items-center gap-3">
          <div className="flex h-8 w-8 items-center justify-center rounded-lg border border-violet-500/25 bg-violet-500/15 text-violet-300">
            <Sparkles className="h-4 w-4" />
          </div>
          <span className="text-sm font-medium text-white">OG для соцсетей</span>
        </div>
        <ChevronDown className={`h-4 w-4 text-gray-500 transition-transform duration-200 ${isOpen ? 'rotate-180' : ''}`} />
      </button>

      {isOpen ? (
        <div className="animate-slide-up space-y-4 border-t border-white/10 p-4">
          <div className="rounded-xl border border-white/10 bg-black/35 p-3">
            <p className="mb-3 text-sm font-medium text-gray-200">Режим OG</p>
            <div className="flex flex-col gap-2 sm:flex-row">
              <button
                type="button"
                onClick={() => onModeChange('source')}
                className={`rounded-lg border px-3 py-2 text-sm transition-colors ${
                  mode === 'source'
                    ? 'border-violet-500/40 bg-violet-500/15 text-violet-200'
                    : 'border-white/10 text-gray-300 hover:border-violet-500/25 hover:text-white'
                }`}
              >
                Из исходной ссылки
              </button>
              <button
                type="button"
                onClick={() => onModeChange('custom')}
                className={`rounded-lg border px-3 py-2 text-sm transition-colors ${
                  mode === 'custom'
                    ? 'border-violet-500/40 bg-violet-500/15 text-violet-200'
                    : 'border-white/10 text-gray-300 hover:border-violet-500/25 hover:text-white'
                }`}
              >
                Кастомный OG
              </button>
            </div>
          </div>

          {mode === 'source' ? (
            <div className="rounded-xl border border-white/10 bg-black/35 p-3 text-sm text-gray-400">
              Будут использоваться OG-метаданные целевой страницы. Кастомные поля отключены.
            </div>
          ) : (
            <>
              <div>
                <label className="mb-2 block text-sm font-medium text-gray-200">Картинка для соцсетей</label>
                <label className="flex cursor-pointer items-center justify-center gap-2 rounded-xl border border-white/10 bg-black/35 px-4 py-3 text-sm text-gray-300 transition-colors hover:border-violet-500/35 hover:text-violet-200">
                  {isUploading ? (
                    <>
                      <Loader2 className="h-4 w-4 animate-spin text-violet-300" />
                      Загрузка изображения...
                    </>
                  ) : (
                    <>
                      <ImageUp className="h-4 w-4" />
                      Загрузить изображение
                    </>
                  )}
                  <input
                    type="file"
                    accept="image/*"
                    onChange={handleImageUpload}
                    disabled={isUploading}
                    className="hidden"
                  />
                </label>
                <p className="mt-2 text-xs text-gray-500">
                  PNG, JPG, GIF, WebP (макс. 5MB)
                  {selectedFileName ? ` • ${selectedFileName}` : ''}
                </p>

                {previewImage ? (
                  <div className="relative mt-3 aspect-video w-full max-w-xs overflow-hidden rounded-xl border border-white/10 bg-black/45">
                    <img
                      src={previewImage}
                      alt="OG preview"
                      className="h-full w-full object-cover"
                    />
                    <button
                      type="button"
                      onClick={() => {
                        setOgImage('');
                        onChange?.({ ogImage: '' });
                      }}
                      className="absolute right-2 top-2 inline-flex h-8 w-8 items-center justify-center rounded-full border border-red-500/35 bg-black/75 text-red-200 transition-colors hover:bg-red-500/20"
                      aria-label="Удалить изображение"
                    >
                      <Trash2 className="h-4 w-4" />
                    </button>
                  </div>
                ) : null}
              </div>

              <div>
                <label className="mb-2 block text-sm font-medium text-gray-200">
                  Заголовок
                  <span className="ml-2 text-xs font-normal text-gray-500">({ogTitle.length}/60)</span>
                </label>
                <input
                  type="text"
                  value={ogTitle}
                  onChange={(event) => handleTitleChange(event.target.value.slice(0, 60))}
                  placeholder="Заголовок для соцсетей"
                  maxLength={60}
                  className="w-full rounded-xl border border-white/10 bg-black/35 px-3 py-2.5 text-sm text-gray-100 placeholder:text-gray-500 outline-none transition-colors focus:border-violet-500/40"
                />
              </div>

              <div>
                <label className="mb-2 block text-sm font-medium text-gray-200">
                  Описание
                  <span className="ml-2 text-xs font-normal text-gray-500">({ogDescription.length}/200)</span>
                </label>
                <textarea
                  value={ogDescription}
                  onChange={(event) => handleDescriptionChange(event.target.value.slice(0, 200))}
                  placeholder="Описание для соцсетей"
                  maxLength={200}
                  rows={3}
                  className="w-full resize-none rounded-xl border border-white/10 bg-black/35 px-3 py-2.5 text-sm text-gray-100 placeholder:text-gray-500 outline-none transition-colors focus:border-violet-500/40"
                />
              </div>

              {(ogTitle || ogDescription || previewImage || shortUrl) ? (
                <div>
                  <button
                    type="button"
                    onClick={() => setIsPreviewOpen((prev) => !prev)}
                    className="flex w-full items-center justify-between rounded-xl border border-white/10 bg-black/35 px-3 py-2 transition-colors hover:border-violet-500/25"
                  >
                    <span className="text-sm font-medium text-gray-200">Предпросмотр карточек</span>
                    <ChevronDown className={`h-4 w-4 text-gray-500 transition-transform ${isPreviewOpen ? 'rotate-180' : ''}`} />
                  </button>
                  {isPreviewOpen ? (
                    <div className="mt-3 space-y-4">
                      <OGSocialPreview
                        platform="telegram"
                        title={ogTitle}
                        description={ogDescription}
                        image={previewImage}
                        url={shortUrl}
                      />
                      <OGSocialPreview
                        platform="twitter"
                        title={ogTitle}
                        description={ogDescription}
                        image={previewImage}
                        url={shortUrl}
                      />
                      <OGSocialPreview
                        platform="facebook"
                        title={ogTitle}
                        description={ogDescription}
                        image={previewImage}
                        url={shortUrl}
                      />
                    </div>
                  ) : null}
                </div>
              ) : null}
            </>
          )}
        </div>
      ) : null}
    </div>
  );
}