'use client';

import { useState, useEffect, useCallback } from 'react';
import { useParams, useRouter } from 'next/navigation';
import {
  ArrowLeft,
  Clock,
  MapPin,
  ExternalLink,
  Monitor,
  MessageCircle,
  FileText,
  Save,
  Loader2,
  Bug,
  Lightbulb,
  TrendingUp,
  HelpCircle,
  Trash2,
} from 'lucide-react';
import { useTranslation } from '@/hooks/useTranslation';
import { toast } from '@/lib/toast';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Textarea } from '@/components/ui/textarea';
import { PageState } from '@/components/common/feedback/PageState';
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
} from '@/components/ui/dialog';
import {
  getFeedbackDetail,
  updateFeedbackStatus,
  updateFeedback,
  deleteFeedback,
  AdminFeedback,
  FeedbackType,
  FeedbackStatus,
  FeedbackPriority,
  getFeedbackTypeLabel,
  getFeedbackStatusLabel,
  getFeedbackPriorityLabel,
  getFeedbackStatusColor,
  getFeedbackTypeColor,
  ApiClientError,
} from '@/services/api/feedback';

// 类型图标映射
const TYPE_ICONS = {
  [FeedbackType.BUG]: Bug,
  [FeedbackType.FEATURE]: Lightbulb,
  [FeedbackType.IMPROVEMENT]: TrendingUp,
  [FeedbackType.OTHER]: HelpCircle,
};

// 状态流转规则
const STATUS_TRANSITIONS: Record<FeedbackStatus, FeedbackStatus[]> = {
  [FeedbackStatus.PENDING]: [FeedbackStatus.IN_PROGRESS, FeedbackStatus.CLOSED],
  [FeedbackStatus.IN_PROGRESS]: [FeedbackStatus.RESOLVED, FeedbackStatus.CLOSED, FeedbackStatus.PENDING],
  [FeedbackStatus.RESOLVED]: [FeedbackStatus.CLOSED, FeedbackStatus.IN_PROGRESS],
  [FeedbackStatus.CLOSED]: [FeedbackStatus.PENDING],
};

/**
 * 反馈详情页面（管理员）
 */
export default function FeedbackDetailPage() {
  const params = useParams();
  const router = useRouter();
  const { t, locale } = useTranslation();
  const feedbackId = params.id as string;

  // 状态
  const [feedback, setFeedback] = useState<AdminFeedback | null>(null);
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);

  // 编辑状态
  const [adminNote, setAdminNote] = useState('');
  const [adminReply, setAdminReply] = useState('');
  const [priority, setPriority] = useState<FeedbackPriority | ''>('');

  // 删除确认弹窗
  const [deleteModalOpen, setDeleteModalOpen] = useState(false);
  const [deleteLoading, setDeleteLoading] = useState(false);

  // 加载详情
  const loadFeedback = useCallback(async () => {
    try {
      setLoading(true);
      const result = await getFeedbackDetail(feedbackId);
      setFeedback(result);
      setAdminNote(result.adminNote || '');
      setAdminReply(result.adminReply || '');
      setPriority(result.priority || '');
    } catch (error) {
      if (error instanceof ApiClientError) {
        toast.error(error.message);
        if (error.isNotFound()) {
          setFeedback(null);
          return;
        }
      } else {
        toast.error(t.feedback?.error?.loadFailed || t.common?.loadFailed || 'Failed to load feedback');
      }
    } finally {
      setLoading(false);
    }
  }, [feedbackId, router, t]);

  useEffect(() => {
    loadFeedback();
  }, [loadFeedback]);

  // 更新状态
  const handleStatusChange = async (newStatus: FeedbackStatus) => {
    if (!feedback) return;

    try {
      await updateFeedbackStatus(feedbackId, { status: newStatus });
      toast.success(t.feedback?.admin?.updateStatusSuccess || t.common?.updateSuccess || 'Updated successfully');
      loadFeedback();
    } catch (error) {
      if (error instanceof ApiClientError) {
        toast.error(error.message);
      } else {
        toast.error(t.feedback?.error?.updateFailed || t.common?.updateFailed || 'Failed to update');
      }
    }
  };

  // 保存备注/回复/优先级
  const handleSave = async () => {
    if (!feedback) return;

    setSaving(true);
    try {
      await updateFeedback(feedbackId, {
        adminNote: adminNote || undefined,
        adminReply: adminReply || undefined,
        priority: priority || undefined,
      });
      toast.success(t.common?.saveSuccess || 'Saved successfully');
      loadFeedback();
    } catch (error) {
      if (error instanceof ApiClientError) {
        toast.error(error.message);
      } else {
        toast.error(t.feedback?.error?.updateFailed || t.common?.updateFailed || 'Failed to update');
      }
    } finally {
      setSaving(false);
    }
  };

  // 删除反馈
  const handleDelete = async () => {
    setDeleteLoading(true);
    try {
      await deleteFeedback(feedbackId);
      toast.success(t.feedback?.admin?.deleteSuccess || t.common?.deleteSuccess || 'Deleted successfully');
      router.push('/settings/feedback');
    } catch (error) {
      if (error instanceof ApiClientError) {
        toast.error(error.message);
      } else {
        toast.error(t.feedback?.error?.deleteFailed || t.common?.deleteFailed || 'Failed to delete');
      }
    } finally {
      setDeleteLoading(false);
    }
  };

  // 格式化时间
  const formatDate = (dateStr: string) => {
    const date = new Date(dateStr);
    const dateLocale = locale === 'zh' ? 'zh-CN' : 'en-US';
    return date.toLocaleDateString(dateLocale, {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit',
    });
  };

  if (loading) {
    return (
      <div
        className="min-h-screen bg-gray-50 flex items-center justify-center"
        data-testid="loading"
      >
        <div className="text-center">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto"></div>
          <p className="mt-4 text-gray-600">{t.common?.loading || 'Loading...'}</p>
        </div>
      </div>
    );
  }

  if (!feedback) {
    return (
      <div
        className="min-h-screen bg-gray-50 flex items-center justify-center"
        data-testid="empty-state"
      >
        <PageState
          variant="warning"
          title={t.feedback?.error?.notFound || t.common?.noData || 'Feedback not found'}
          actionLabel={t.feedback?.detail?.backToList || t.common?.backToList || 'Back to List'}
          onAction={() => router.push('/settings/feedback')}
          layout="center"
          className="mx-auto w-full max-w-2xl border-0 bg-transparent"
        />
      </div>
    );
  }

  const TypeIcon = TYPE_ICONS[feedback.type] || HelpCircle;
  const typeColor = getFeedbackTypeColor(feedback.type);
  const statusColor = getFeedbackStatusColor(feedback.status);
  const allowedTransitions = STATUS_TRANSITIONS[feedback.status] || [];

  return (
    <div className="min-h-screen bg-gray-50">
      {/* 头部 */}
      <div className="bg-white border-b border-gray-200 sticky top-0 z-10">
        <div className="max-w-6xl mx-auto px-6 py-4">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-4">
                <Button
                  variant="ghost"
                  size="sm"
                  onClick={() => router.push('/settings/feedback')}
                >
                  <ArrowLeft className="w-4 h-4 mr-2" />
                  {t.feedback?.detail?.backToList || t.common?.backToList || 'Back to List'}
                </Button>
              <div className="h-6 w-px bg-gray-200" />
              <div className="flex items-center gap-2">
                <div className={`p-1.5 rounded ${typeColor.bg}`}>
                  <TypeIcon className={`w-4 h-4 ${typeColor.text}`} />
                </div>
                <span className={`text-sm font-medium ${typeColor.text}`}>
                  {getFeedbackTypeLabel(feedback.type, t)}
                </span>
              </div>
            </div>
            <div className="flex items-center gap-3">
              <Button
                variant="outline"
                size="sm"
                className="text-red-600 hover:text-red-700 hover:bg-red-50"
                onClick={() => setDeleteModalOpen(true)}
              >
                <Trash2 className="w-4 h-4 mr-2" />
                {t.feedback?.admin?.delete || t.common?.delete || 'Delete'}
              </Button>
            </div>
          </div>
        </div>
      </div>

      <div className="max-w-6xl mx-auto px-6 py-6">
        <div className="grid grid-cols-3 gap-6">
          {/* 主内容区 */}
          <div className="col-span-2 space-y-6">
            {/* 反馈内容 */}
            <div
              className="bg-white rounded-lg border border-gray-200 p-6"
              data-testid="detail-card"
            >
              <h1 className="text-xl font-semibold text-gray-900 mb-4" data-testid="page-title">
                {feedback.title}
              </h1>
              <div className="prose prose-sm max-w-none text-gray-700 whitespace-pre-wrap">
                {feedback.content}
              </div>

              {/* 附件 */}
              {feedback.attachments && feedback.attachments.length > 0 && (
                <div className="mt-6 pt-6 border-t border-gray-100">
                  <h4 className="text-sm font-medium text-gray-700 mb-3 flex items-center gap-2">
                    <FileText className="w-4 h-4" />
                    {t.feedback?.detail?.attachmentsWithCount
                      ?.replace('{count}', String(feedback.attachments.length)) ||
                      `${t.feedback?.detail?.attachments || 'Attachments'} (${feedback.attachments.length})`}
                  </h4>
                  <div className="grid grid-cols-3 gap-3">
                    {feedback.attachments.map((url, index) => (
                      <a
                        key={index}
                        href={url}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="block rounded-lg border border-gray-200 overflow-hidden hover:border-blue-300 transition-colors"
                      >
                        <img
                          src={url}
                          alt={
                            t.feedback?.detail?.attachmentItem?.replace('{index}', String(index + 1)) ||
                            `Attachment ${index + 1}`
                          }
                          className="w-full aspect-video object-cover"
                        />
                      </a>
                    ))}
                  </div>
                </div>
              )}
            </div>

            {/* 管理员备注 */}
            <div className="bg-white rounded-lg border border-gray-200 p-6">
              <h3 className="text-sm font-medium text-gray-900 mb-3 flex items-center gap-2">
                <FileText className="w-4 h-4 text-gray-400" />
                {t.feedback?.admin?.adminNote || 'Internal Note'}
                <span className="text-xs text-gray-400 font-normal">
                  {t.feedback?.admin?.noteHint || 'Not visible to user'}
                </span>
              </h3>
              <Textarea
                value={adminNote}
                onChange={(e) => setAdminNote(e.target.value)}
                placeholder={t.feedback?.admin?.adminNotePlaceholder || 'Add internal note...'}
                rows={3}
                className="resize-none"
              />
            </div>

            {/* 管理员回复 */}
            <div className="bg-white rounded-lg border border-gray-200 p-6">
              <h3 className="text-sm font-medium text-gray-900 mb-3 flex items-center gap-2">
                <MessageCircle className="w-4 h-4 text-green-500" />
                {t.feedback?.admin?.adminReply || 'Reply to User'}
                <span className="text-xs text-gray-400 font-normal">
                  {t.feedback?.admin?.replyHint || 'Visible to user'}
                </span>
              </h3>
              <Textarea
                value={adminReply}
                onChange={(e) => setAdminReply(e.target.value)}
                placeholder={t.feedback?.admin?.adminReplyPlaceholder || 'Add reply...'}
                rows={4}
                className="resize-none"
              />
            </div>

            {/* 保存按钮 */}
            <div className="flex justify-end">
              <Button
                onClick={handleSave}
                disabled={saving}
                className="bg-blue-600 hover:bg-blue-700"
              >
                {saving ? (
                  <>
                    <Loader2 className="w-4 h-4 mr-2 animate-spin" />
                    {t.common?.saving || 'Saving...'}
                  </>
                ) : (
                  <>
                    <Save className="w-4 h-4 mr-2" />
                    {t.common?.saveChanges || t.common?.save || 'Save Changes'}
                  </>
                )}
              </Button>
            </div>
          </div>

          {/* 右侧信息栏 */}
          <div className="space-y-6">
            {/* 状态卡片 */}
            <div className="bg-white rounded-lg border border-gray-200 p-4">
              <h3 className="text-sm font-medium text-gray-900 mb-3">
                {t.common?.status || 'Status'}
              </h3>
              <div className="space-y-3">
                <Badge
                  className={`${statusColor.bg} ${statusColor.text} ${statusColor.border} border text-sm px-3 py-1`}
                  variant="outline"
                >
                  {getFeedbackStatusLabel(feedback.status, t)}
                </Badge>

                {/* 状态变更按钮 */}
                <div className="pt-3 border-t border-gray-100">
                  <p className="text-xs text-gray-500 mb-2">
                    {t.feedback?.admin?.changeStatus || 'Change Status'}
                  </p>
                  <div className="flex flex-wrap gap-2">
                    {allowedTransitions.map((status) => {
                      const color = getFeedbackStatusColor(status);
                      return (
                        <Button
                          key={status}
                          variant="outline"
                          size="sm"
                          className={`text-xs ${color.text} hover:${color.bg}`}
                          onClick={() => handleStatusChange(status)}
                        >
                          {getFeedbackStatusLabel(status, t)}
                        </Button>
                      );
                    })}
                  </div>
                </div>
              </div>
            </div>

            {/* 优先级卡片 */}
            <div className="bg-white rounded-lg border border-gray-200 p-4">
              <h3 className="text-sm font-medium text-gray-900 mb-3">
                {t.feedback?.admin?.priority || 'Priority'}
              </h3>
              <select
                value={priority}
                onChange={(e) => setPriority(e.target.value as FeedbackPriority | '')}
                className="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
              >
                <option value="">{t.feedback?.priorityUnset || 'Unset'}</option>
                <option value={FeedbackPriority.LOW}>
                  {getFeedbackPriorityLabel(FeedbackPriority.LOW, t)}
                </option>
                <option value={FeedbackPriority.MEDIUM}>
                  {getFeedbackPriorityLabel(FeedbackPriority.MEDIUM, t)}
                </option>
                <option value={FeedbackPriority.HIGH}>
                  {getFeedbackPriorityLabel(FeedbackPriority.HIGH, t)}
                </option>
                <option value={FeedbackPriority.URGENT}>
                  {getFeedbackPriorityLabel(FeedbackPriority.URGENT, t)}
                </option>
              </select>
            </div>

            {/* 提交人信息 */}
            <div className="bg-white rounded-lg border border-gray-200 p-4">
              <h3 className="text-sm font-medium text-gray-900 mb-3">
                {t.feedback?.detail?.submitter || t.common?.user || 'Submitter'}
              </h3>
              <div className="flex items-center gap-3">
                <div className="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-sm font-medium text-blue-600">
                  {feedback.user?.displayName?.[0] || 'U'}
                </div>
                <div>
                  <div className="text-sm font-medium text-gray-900">
                    {feedback.user?.displayName || '-'}
                  </div>
                  <div className="text-xs text-gray-500">
                    {feedback.user?.email || '-'}
                  </div>
                </div>
              </div>
              {feedback.user?.department && (
                <div className="mt-3 text-xs text-gray-500">
                  {t.feedback?.detail?.department || 'Department'}: {feedback.user.department.name}
                </div>
              )}
            </div>

            {/* 时间信息 */}
            <div className="bg-white rounded-lg border border-gray-200 p-4">
              <h3 className="text-sm font-medium text-gray-900 mb-3">
                {t.feedback?.detail?.timeInfo || t.common?.time || 'Time'}
              </h3>
              <div className="space-y-2 text-sm">
                <div className="flex justify-between text-gray-600">
                  <span className="flex items-center gap-1">
                    <Clock className="w-3.5 h-3.5" />
                    {t.feedback?.detail?.submitTime || t.common?.createdAt || 'Submit Time'}
                  </span>
                  <span>{formatDate(feedback.createdAt)}</span>
                </div>
                <div className="flex justify-between text-gray-600">
                  <span>{t.feedback?.detail?.updateTime || t.common?.updatedAt || 'Update Time'}</span>
                  <span>{formatDate(feedback.updatedAt)}</span>
                </div>
                {feedback.resolvedAt && (
                  <div className="flex justify-between text-green-600">
                    <span>{t.feedback?.detail?.resolveTime || 'Resolve Time'}</span>
                    <span>{formatDate(feedback.resolvedAt)}</span>
                  </div>
                )}
              </div>
            </div>

            {/* 技术信息 */}
            <div className="bg-white rounded-lg border border-gray-200 p-4">
              <h3 className="text-sm font-medium text-gray-900 mb-3">
                {t.feedback?.detail?.techInfo || 'Technical Info'}
              </h3>
              <div className="space-y-3 text-sm">
                <div>
                  <div className="flex items-center gap-1 text-gray-500 mb-1">
                    <MapPin className="w-3.5 h-3.5" />
                    {t.feedback?.detail?.region || 'Region'}
                  </div>
                  <div className="text-gray-900">{feedback.region}</div>
                </div>
                {feedback.pageUrl && (
                  <div>
                    <div className="flex items-center gap-1 text-gray-500 mb-1">
                      <ExternalLink className="w-3.5 h-3.5" />
                      {t.feedback?.detail?.pageUrl || 'Page URL'}
                    </div>
                    <div className="text-gray-900 text-xs break-all bg-gray-50 p-2 rounded">
                      {feedback.pageUrl}
                    </div>
                  </div>
                )}
                {feedback.userAgent && (
                  <div>
                    <div className="flex items-center gap-1 text-gray-500 mb-1">
                      <Monitor className="w-3.5 h-3.5" />
                      {t.feedback?.detail?.browser || 'Browser'}
                    </div>
                    <div className="text-gray-600 text-xs break-all bg-gray-50 p-2 rounded max-h-20 overflow-y-auto">
                      {feedback.userAgent}
                    </div>
                  </div>
                )}
              </div>
            </div>

            {/* 处理人 */}
            {feedback.assignee && (
              <div className="bg-white rounded-lg border border-gray-200 p-4">
                <h3 className="text-sm font-medium text-gray-900 mb-3">
                  {t.feedback?.admin?.assignee || 'Assignee'}
                </h3>
                <div className="flex items-center gap-3">
                  <div className="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center text-sm font-medium text-green-600">
                    {feedback.assignee.displayName?.[0] || 'A'}
                  </div>
                  <div className="text-sm text-gray-900">
                    {feedback.assignee.displayName}
                  </div>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>

      {/* 删除确认弹窗 */}
      <Dialog open={deleteModalOpen} onOpenChange={setDeleteModalOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>{t.feedback?.admin?.delete || t.common?.delete || 'Delete Feedback'}</DialogTitle>
            <DialogDescription>
              {t.feedback?.admin?.deleteConfirm || t.common?.confirmDelete || 'Are you sure you want to delete?'}
            </DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <Button variant="outline" onClick={() => setDeleteModalOpen(false)}>
              {t.common?.cancel || 'Cancel'}
            </Button>
            <Button variant="destructive" onClick={handleDelete} disabled={deleteLoading}>
              {deleteLoading
                ? t.common?.deleting || 'Deleting...'
                : t.common?.confirm || 'Confirm'}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}