import { useState } from 'react'
import { Link } from '@inertiajs/react'
import * as Dialog from '@radix-ui/react-dialog'
import ComImageStatusTag from './ComImageStatusTag'

export default function ComImageShow({ path, image, can_edit, can_approve, isAdmin = false }) {
  const [isModalOpen, setIsModalOpen] = useState(false)

  return (
    <div className="bg-white shadow overflow-hidden sm:rounded-lg">
      <div className="px-4 py-5 sm:px-6 flex justify-between items-center">
        <div>
          <h1 className="text-2xl font-bold text-gray-900">{image.title}</h1>
          <p className="mt-1 max-w-2xl text-sm text-gray-500">
            由 {image.user.name} 在{' '}
            {new Date(image.created_at).toLocaleDateString()}{' '}上传
          </p>
        </div>
        <div className="flex space-x-2">
          {can_edit && (
            <Link
              href={`${path}/edit`}
              className="inline-flex items-center px-3 py-1.5 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
            >
              编辑
            </Link>
          )}
          {can_approve && image.status === 'pending' && (
            <>
              <Link
                href={`${path}/approve`}
                method="patch"
                as="button"
                className="inline-flex items-center px-3 py-1.5 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500"
              >
                批准
              </Link>
              <Link
                href={`${path}/reject`}
                method="patch"
                as="button"
                className="inline-flex items-center px-3 py-1.5 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
              >
                拒绝
              </Link>
            </>
          )}
          {can_approve && (
            <Link
              href={`${path}`}
              method="delete"
              as="button"
              className="inline-flex items-center px-3 py-1.5 border border-gray-300 text-sm font-medium rounded-md shadow-sm text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
              onClick={(e) => {
                if (!confirm('确定要删除这张图片吗？')) {
                  e.preventDefault()
                }
              }}
            >
              删除
            </Link>
          )}
        </div>
      </div>

      <div className="border-t border-gray-200">
        <div className="flex flex-col md:flex-row">
          <div className="md:w-2/3 p-4">
            <div className="relative pb-[75%]">
              <img
                src={image.file_url}
                alt={image.title}
                className="absolute h-full w-full object-contain cursor-pointer"
                onClick={() => setIsModalOpen(true)}
              />
            </div>
          </div>
          <div className="md:w-1/3 p-4 border-t md:border-t-0 md:border-l border-gray-200">
            <div className="mb-4">
              <h3 className="text-lg font-medium text-gray-900">审核状态</h3>
              <ComImageStatusTag image={image} />
            </div>

            <div className="mb-4">
              <h3 className="text-lg font-medium text-gray-900">标签</h3>
              <div className="mt-2 flex flex-wrap gap-1">
                {image.tags.length > 0 ? (
                  image.tags.map((tag) => (
                    <span
                      key={tag.id}
                      className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800"
                    >
                      {tag.name}
                    </span>
                  ))
                ) : (
                  <p className="text-sm text-gray-500">无标签</p>
                )}
              </div>
            </div>

            <div className="mb-4">
              <h3 className="text-lg font-medium text-gray-900">上传者</h3>
              <p className="text-sm text-gray-500">{image.user.name}</p>
              <p className="text-sm text-gray-500">
                {image.user.email_address}
              </p>
            </div>

            <div className="mb-4">
              <h3 className="text-lg font-medium text-gray-900">
                上传日期
              </h3>
              <p className="text-sm text-gray-500">
                {new Date(image.created_at).toLocaleDateString()}
              </p>
            </div>
          </div>
        </div>
      </div>

      {/* 全屏图片模态框 */}
      <Dialog.Root open={isModalOpen} onOpenChange={setIsModalOpen}>
        <Dialog.Portal>
          <Dialog.Overlay className="fixed inset-0 bg-black/50" />
          <Dialog.Content className="fixed inset-0 flex items-center justify-center">
            <div className="relative w-full h-full max-w-screen-xl max-h-screen p-4">
              <img
                src={image.file_url}
                alt={image.title}
                className="w-full h-full object-contain"
              />
              <Dialog.Close asChild>
                <button
                  className="absolute top-4 right-4 p-2 rounded-full bg-white/80 hover:bg-white text-gray-800"
                  aria-label="关闭"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    className="h-6 w-6"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={2}
                      d="M6 18L18 6M6 6l12 12"
                    />
                  </svg>
                </button>
              </Dialog.Close>
            </div>
          </Dialog.Content>
        </Dialog.Portal>
      </Dialog.Root>
    </div>
  )
}