import { useState, useEffect } from 'react'
import { useForm, usePage } from '@inertiajs/react'
import * as Form from '@radix-ui/react-form'
import TagSearchInput from '../TagSearchInput'

export default function ComImageEdit({ image, tags, path, isAdmin = false }) {
  // 初始化已有标签的ID字符串表示形式
  const initialTagIds = image.tags
    ? image.tags.map(tag => tag.id)
    : []
    
  const { data, setData, patch, processing } = useForm({
    title: image.title || '',
    tag_ids: initialTagIds, // 使用tag_ids而不是tags
  })

  const handleSubmit = (e) => {
    e.preventDefault()
    patch(path)
  }

  return (
    <div className="bg-white shadow overflow-hidden sm:rounded-lg">
      <div className="px-4 py-5 sm:px-6">
        <h1 className="text-2xl font-bold text-gray-900">编辑图片</h1>
        <p className="mt-1 max-w-2xl text-sm text-gray-500">
          更新图片信息
        </p>
      </div>
      <div className="border-t border-gray-200 px-4 py-5 sm:px-6">
        <div className="mb-6">
          <img
            src={image.file_url}
            alt={image.title}
            className="max-h-64 mx-auto object-contain"
          />
        </div>
        
        <Form.Root className="space-y-6" onSubmit={handleSubmit}>
          <Form.Field name="title" className="space-y-2">
            <Form.Label className="block text-sm font-medium text-gray-700">
              标题
            </Form.Label>
            <Form.Control asChild>
              <input
                type="text"
                name="title"
                value={data.title}
                onChange={(e) => setData('title', e.target.value)}
                className="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md"
                placeholder="输入标题"
              />
            </Form.Control>
            <Form.Message match="valueMissing" className="text-sm text-red-600">
              请输入标题
            </Form.Message>
          </Form.Field>

          <Form.Field name="tags" className="space-y-2">
            <Form.Label className="block text-sm font-medium text-gray-700">
              标签
            </Form.Label>
            <Form.Control asChild>
              <TagSearchInput
                value={data.tag_ids}
                onChange={(value) => setData('tag_ids', value)}
                allTags={tags}
                placeholder="点击搜索图标添加标签"
              />
            </Form.Control>
            <p className="text-xs text-gray-500">
              点击右侧搜索图标可按分类浏览标签
            </p>
          </Form.Field>

          <div className="flex justify-end space-x-3">
            <a
              href={path}
              className="inline-flex justify-center py-2 px-4 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
            >
              取消
            </a>
            <Form.Submit asChild>
              <button
                type="submit"
                disabled={processing}
                className="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50"
              >
                {processing ? '保存中...' : '保存'}
              </button>
            </Form.Submit>
          </div>
        </Form.Root>
      </div>
    </div>
  )
}