import { useEffect, useRef, useState } from 'react';
import { Link2, Upload } from 'lucide-react';
import {
  Dialog,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Spinner } from '@/components/ui/spinner';
import { notify } from '@/lib/notify';
import { cn } from '@/lib/utils';
import { api } from '../api/client';
import type { FriendLinkApply } from '../api/types';
import { getCachedSiteBranding } from '../hooks/useSiteBranding';
import { resolveFriendLinkLogo } from '../utils/friendLink';
import FriendLinkSiteInfo from './FriendLinkSiteInfo';

type LinkPlacement = 'homepage' | 'custom';

interface Props {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  editApply?: FriendLinkApply | null;
  onSubmitted?: () => void;
}

/** 友链申请 / 修改弹窗 */
export default function FriendLinkApplyDialog({ open, onOpenChange, editApply, onSubmitted }: Props) {
  const [name, setName] = useState('');
  const [url, setUrl] = useState('');
  const [logo, setLogo] = useState('');
  const [linkPlacement, setLinkPlacement] = useState<LinkPlacement>('homepage');
  const [reciprocalPageURL, setReciprocalPageURL] = useState('');
  const [submitting, setSubmitting] = useState(false);
  const [uploadingLogo, setUploadingLogo] = useState(false);
  const fileRef = useRef<HTMLInputElement>(null);
  const isEdit = !!editApply?.id;

  const reset = () => {
    setName('');
    setUrl('');
    setLogo('');
    setLinkPlacement('homepage');
    setReciprocalPageURL('');
  };

  useEffect(() => {
    if (!open) return;
    if (editApply) {
      setName(editApply.name ?? '');
      setUrl(editApply.url ?? '');
      setLogo(editApply.logo ?? '');
      const onHomepage = editApply.link_on_homepage !== false;
      setLinkPlacement(onHomepage ? 'homepage' : 'custom');
      setReciprocalPageURL(onHomepage ? '' : (editApply.reciprocal_page_url ?? ''));
    } else {
      reset();
    }
  }, [open, editApply]);

  const handleOpenChange = (next: boolean) => {
    if (!next) reset();
    onOpenChange(next);
  };

  const uploadLogo = async (file: File | undefined) => {
    if (!file) return;
    setUploadingLogo(true);
    try {
      const r = await api.uploadFriendLinkLogo(file);
      setLogo(r.url);
      notify.success('LOGO 已上传');
    } catch (e: unknown) {
      notify.error(e instanceof Error ? e.message : '上传失败');
    } finally {
      setUploadingLogo(false);
      if (fileRef.current) fileRef.current.value = '';
    }
  };

  const submit = async () => {
    const trimmedName = name.trim();
    const trimmedURL = url.trim();
    const trimmedLogo = logo.trim();
    const trimmedReciprocal = reciprocalPageURL.trim();
    if (!trimmedName || !trimmedURL) {
      notify.warning('请填写网站名称与网站链接');
      return;
    }
    if (!/^https?:\/\//i.test(trimmedURL)) {
      notify.warning('网站链接需以 http:// 或 https:// 开头');
      return;
    }
    if (!trimmedLogo) {
      notify.warning('请填写或上传网站 LOGO');
      return;
    }
    if (linkPlacement === 'custom') {
      if (!trimmedReciprocal) {
        notify.warning('请填写添加本站链接的页面地址');
        return;
      }
      if (!/^https?:\/\//i.test(trimmedReciprocal)) {
        notify.warning('回链页地址需以 http:// 或 https:// 开头');
        return;
      }
    }

    const linkOnHomepage = linkPlacement === 'homepage';
    const body = {
      name: trimmedName,
      url: trimmedURL,
      logo: trimmedLogo,
      link_on_homepage: linkOnHomepage,
      reciprocal_page_url: linkOnHomepage ? trimmedURL : trimmedReciprocal,
    };

    setSubmitting(true);
    try {
      if (isEdit) {
        const r = await api.updateFriendLinkApply(editApply!.id, body);
        notify.success(
          editApply?.status === 'approved'
            ? `已更新并重新提交审核，友链已暂时从列表移除${r.message.includes('回链检测') ? '，回链检测将在后台进行' : ''}`
            : r.message,
        );
      } else {
        const r = await api.applyFriendLink(body);
        notify.success(r.message);
      }
      onSubmitted?.();
      handleOpenChange(false);
    } catch (e: unknown) {
      notify.error(e instanceof Error ? e.message : '提交失败');
    } finally {
      setSubmitting(false);
    }
  };

  const logoPreview = resolveFriendLinkLogo(logo.trim(), getCachedSiteBranding().site_url);

  return (
    <Dialog open={open} onOpenChange={handleOpenChange}>
      <DialogContent className="friend-link-apply-dialog sm:max-w-[560px]">
        <DialogHeader className="friend-link-apply-dialog__header">
          <DialogTitle>{isEdit ? '修改友链申请' : '申请本页友情链接'}</DialogTitle>
        </DialogHeader>

        <FriendLinkSiteInfo />

        <div className="friend-link-apply-form">
          <div className="friend-link-apply-field">
            <Label htmlFor="friend-link-name">网站名称</Label>
            <Input
              id="friend-link-name"
              value={name}
              onChange={e => setName(e.target.value)}
              placeholder="请输入您的网站名称"
              maxLength={32}
            />
          </div>
          <div className="friend-link-apply-field">
            <Label htmlFor="friend-link-url">网站链接</Label>
            <Input
              id="friend-link-url"
              value={url}
              onChange={e => setUrl(e.target.value)}
              placeholder="请输入您的网站地址（以 http 开头）"
              maxLength={512}
            />
          </div>
          <div className="friend-link-apply-field">
            <Label>本站链接放置位置</Label>
            <div className="friend-link-apply-placement" role="radiogroup" aria-label="本站链接放置位置">
              <button
                type="button"
                role="radio"
                aria-checked={linkPlacement === 'homepage'}
                className={cn(
                  'friend-link-apply-placement__option',
                  linkPlacement === 'homepage' && 'friend-link-apply-placement__option--active',
                )}
                onClick={() => setLinkPlacement('homepage')}
              >
                友链在我的网站首页
              </button>
              <button
                type="button"
                role="radio"
                aria-checked={linkPlacement === 'custom'}
                className={cn(
                  'friend-link-apply-placement__option',
                  linkPlacement === 'custom' && 'friend-link-apply-placement__option--active',
                )}
                onClick={() => setLinkPlacement('custom')}
              >
                友链在其它页面
              </button>
            </div>
          </div>
          {linkPlacement === 'custom' && (
            <div className="friend-link-apply-field">
              <Label htmlFor="friend-link-reciprocal">添加我方链接的页面地址</Label>
              <Input
                id="friend-link-reciprocal"
                value={reciprocalPageURL}
                onChange={e => setReciprocalPageURL(e.target.value)}
                placeholder="如：https://您的域名/link.htm"
                maxLength={512}
              />
              <p className="friend-link-apply-field__hint">
                请填写实际放置本站友链的页面，提交后将在后台检测该页面
              </p>
            </div>
          )}
          <div className="friend-link-apply-field">
            <Label htmlFor="friend-link-logo">填写或上传网站 LOGO</Label>
            <div className="friend-link-apply-logo-row">
              <div className="friend-link-apply-logo-preview" aria-label="LOGO 预览">
                {logoPreview ? (
                  <img src={logoPreview} alt="" loading="lazy" decoding="async" />
                ) : (
                  <span>预览</span>
                )}
              </div>
              <Input
                id="friend-link-logo"
                className="friend-link-apply-logo-input"
                value={logo}
                onChange={e => setLogo(e.target.value)}
                placeholder="LOGO 图片地址"
                maxLength={512}
              />
              <input
                ref={fileRef}
                type="file"
                accept="image/jpeg,image/png,image/gif,image/webp"
                className="sr-only"
                onChange={e => uploadLogo(e.target.files?.[0])}
              />
              <Button
                type="button"
                variant="outline"
                className="friend-link-apply-logo-upload"
                disabled={uploadingLogo}
                onClick={() => fileRef.current?.click()}
              >
                {uploadingLogo ? <Spinner size="sm" /> : <Upload size={15} aria-hidden />}
                上传
              </Button>
            </div>
          </div>
        </div>

        <DialogFooter className="friend-link-apply-dialog__footer">
          <p className="friend-link-apply-dialog__note">
            <Link2 size={14} aria-hidden />
            提交后立即返回，回链检测在后台进行，结果供管理员参考
          </p>
          <div className="friend-link-apply-dialog__actions">
            <Button type="button" variant="outline" onClick={() => handleOpenChange(false)}>
              取消
            </Button>
            <Button type="button" disabled={submitting || uploadingLogo} onClick={submit}>
              {submitting ? '提交中…' : isEdit ? '保存并提交' : '提交申请'}
            </Button>
          </div>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}