import { useState, useEffect } from 'react';
import type { FeedDetail as FeedDetailType } from '@/api/types';
import { getFeedDetail } from '@/api/endpoints';
import { Badge } from '@/components/ui/Badge';
import { Spinner } from '@/components/ui/Spinner';
import { Button } from '@/components/ui/Button';
import { CommentTree } from './CommentTree';
import { formatNumber, formatTime } from '@/lib/formatters';

interface Props {
  feedId: string;
  xsecToken: string;
  onClose: () => void;
  onUserClick?: (userId: string, xsecToken: string) => void;
}

export function FeedDetail({ feedId, xsecToken, onClose, onUserClick }: Props) {
  const [detail, setDetail] = useState<FeedDetailType | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [currentImage, setCurrentImage] = useState(0);

  useEffect(() => {
    setLoading(true);
    setError(null);
    void getFeedDetail(feedId, xsecToken)
      .then((res) => {
        if (res.success && res.data) {
          setDetail(res.data);
        } else {
          setError(res.error?.message || 'Failed to load detail');
        }
      })
      .catch((err) => setError(err instanceof Error ? err.message : 'Error'))
      .finally(() => setLoading(false));
  }, [feedId, xsecToken]);

  return (
    <div className="fixed inset-0 z-50 flex">
      <div className="absolute inset-0 bg-black/60" onClick={onClose} />
      <div className="relative ml-auto w-full max-w-2xl bg-dark-card border-l border-dark-border overflow-y-auto">
        <div className="sticky top-0 bg-dark-card border-b border-dark-border px-5 py-3 flex items-center justify-between z-10">
          <h3 className="font-semibold truncate">Feed Detail</h3>
          <button onClick={onClose} className="text-dark-muted hover:text-dark-text text-xl">&times;</button>
        </div>

        {loading && (
          <div className="flex justify-center py-20"><Spinner size="lg" /></div>
        )}

        {error && (
          <div className="p-5 text-dark-danger">{error}</div>
        )}

        {detail && (
          <div className="p-5 space-y-5">
            {/* Images */}
            {detail.images.length > 0 && (
              <div>
                <div className="rounded-xl overflow-hidden bg-dark-bg">
                  <img
                    src={detail.images[currentImage]}
                    alt=""
                    className="w-full max-h-96 object-contain"
                  />
                </div>
                {detail.images.length > 1 && (
                  <div className="flex gap-2 mt-2 overflow-x-auto pb-1">
                    {detail.images.map((img, i) => (
                      <button
                        key={i}
                        onClick={() => setCurrentImage(i)}
                        className={`w-14 h-14 rounded-lg overflow-hidden shrink-0 border-2 ${
                          i === currentImage ? 'border-dark-accent' : 'border-transparent'
                        }`}
                      >
                        <img src={img} alt="" className="w-full h-full object-cover" />
                      </button>
                    ))}
                  </div>
                )}
              </div>
            )}

            {/* Video */}
            {detail.videoUrl && (
              <div className="rounded-xl overflow-hidden bg-dark-bg p-4">
                <Badge variant="info">Video Note</Badge>
                <p className="text-xs text-dark-muted mt-2 break-all">{detail.videoUrl}</p>
              </div>
            )}

            {/* Title & Content */}
            <div>
              <h2 className="text-xl font-bold mb-2">{detail.title}</h2>
              <p className="text-sm text-dark-text/80 whitespace-pre-wrap">{detail.description}</p>
            </div>

            {/* Tags */}
            {detail.tags.length > 0 && (
              <div className="flex flex-wrap gap-2">
                {detail.tags.map((tag) => (
                  <Badge key={tag} variant="info">#{tag}</Badge>
                ))}
              </div>
            )}

            {/* Stats */}
            <div className="grid grid-cols-4 gap-3">
              {[
                { label: 'Likes', value: detail.likeCount },
                { label: 'Collects', value: detail.collectCount },
                { label: 'Comments', value: detail.commentCount },
                { label: 'Shares', value: detail.shareCount },
              ].map((s) => (
                <div key={s.label} className="bg-dark-bg rounded-lg p-3 text-center">
                  <p className="text-lg font-bold">{formatNumber(s.value)}</p>
                  <p className="text-xs text-dark-muted">{s.label}</p>
                </div>
              ))}
            </div>

            {/* Author */}
            <div
              className="flex items-center gap-3 p-3 bg-dark-bg rounded-lg cursor-pointer hover:bg-dark-hover"
              onClick={() => onUserClick?.(detail.user.id, detail.xsecToken)}
            >
              {detail.user.avatar && (
                <img src={detail.user.avatar} alt="" className="w-10 h-10 rounded-full" />
              )}
              <div>
                <p className="text-sm font-medium">{detail.user.nickname}</p>
                <p className="text-xs text-dark-muted">{detail.ipLocation} · {formatTime(detail.createTime)}</p>
              </div>
            </div>

            {/* IDs for interaction */}
            <div className="bg-dark-bg rounded-lg p-3 text-xs space-y-1">
              <p><span className="text-dark-muted">Feed ID:</span> <code className="text-dark-accent">{detail.id}</code></p>
              <p><span className="text-dark-muted">xsec_token:</span> <code className="text-dark-accent">{detail.xsecToken}</code></p>
              <p><span className="text-dark-muted">User ID:</span> <code className="text-dark-accent">{detail.user.id}</code></p>
              <div className="flex gap-2 mt-2">
                <Button
                  size="sm"
                  variant="ghost"
                  onClick={() => void navigator.clipboard.writeText(detail.id)}
                >
                  Copy Feed ID
                </Button>
                <Button
                  size="sm"
                  variant="ghost"
                  onClick={() => void navigator.clipboard.writeText(detail.xsecToken)}
                >
                  Copy Token
                </Button>
              </div>
            </div>

            {/* Comments */}
            {detail.comments.length > 0 && (
              <div>
                <h3 className="text-sm font-semibold text-dark-muted uppercase tracking-wider mb-3">
                  Comments ({detail.comments.length})
                </h3>
                <CommentTree comments={detail.comments} />
              </div>
            )}
          </div>
        )}
      </div>
    </div>
  );
}