'use client'

import Image from 'next/image'
import { useEffect, useMemo, useState } from 'react'
import type {
  WorkReviewProject,
  WorkReviewReview,
  WorkReviewRole,
  WorkReviewVersion,
} from '@/types/work-review'
import { WorkReviewImageGallery } from './WorkReviewImageGallery'
import { WorkReviewDecisionBadge, WorkReviewStatusBadge } from './WorkReviewStatusBadge'

function formatDateOnly(value: string) {
  const raw = String(value || '')
  const datePart = raw.match(/^\d{4}-\d{2}-\d{2}/)?.[0]
  return datePart || '-'
}

function formatDateTime(value?: string | null) {
  if (!value) return '-'
  const date = new Date(value)
  if (Number.isNaN(date.getTime())) return '-'
  return new Intl.DateTimeFormat('zh-CN', {
    timeZone: 'Asia/Shanghai',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    hour12: false,
  }).format(date)
}

function proxyImageUrl(value: string) {
  if (!/^https?:\/\//i.test(value)) return value
  try {
    const parsed = new URL(value)
    if (['s3.jiansun.vip', 's3.yydd.ai', 's3.1080p.hk'].includes(parsed.hostname.toLowerCase())) {
      return `/api/proxy-media?url=${encodeURIComponent(value)}`
    }
  } catch {
    // 使用原地址。
  }
  return value
}

function getVersionReview(version: WorkReviewVersion, role: WorkReviewRole) {
  return version.reviews.find((review) => review.reviewerRole === role) || null
}

function ReviewProgress({
  project,
  version,
}: {
  project: WorkReviewProject
  version: WorkReviewVersion
}) {
  const roles: Array<{ role: WorkReviewRole; label: string; name: string }> = [
    { role: 'manager', label: '主管', name: project.manager.name },
    { role: 'final_reviewer', label: '元泽', name: project.finalReviewer.name },
  ]

  return (
    <div className="flex flex-wrap items-center gap-x-4 gap-y-1.5">
      {roles.map((item) => {
        const review = getVersionReview(version, item.role)
        return (
          <span key={item.role} className="inline-flex items-center gap-1.5 text-[11px] font-semibold text-[#667085]" title={item.name}>
            <span className={`h-2 w-2 rounded-full ${review ? 'bg-[#149447]' : 'bg-[#d6dce5]'}`} />
            {item.label}{review ? '已评' : '待评'}
          </span>
        )
      })}
    </div>
  )
}

export function WorkReviewProjectCard({
  project,
  expanded,
  onToggle,
  onResubmit,
  onReview,
}: {
  project: WorkReviewProject
  expanded: boolean
  onToggle: () => void
  onResubmit: () => void
  onReview: (version: WorkReviewVersion, role: WorkReviewRole) => void
}) {
  const latestVersion = project.versions[0]
  const [selectedVersionId, setSelectedVersionId] = useState(latestVersion?.id || '')

  useEffect(() => {
    if (!project.versions.some((version) => version.id === selectedVersionId)) {
      setSelectedVersionId(project.versions[0]?.id || '')
    }
  }, [project.versions, selectedVersionId])

  const selectedVersion = useMemo(
    () => project.versions.find((version) => version.id === selectedVersionId) || latestVersion,
    [latestVersion, project.versions, selectedVersionId],
  )
  const cover = latestVersion?.imageGroups?.[0]?.previewUrl || latestVersion?.imageUrls?.[0] || ''
  const isLatestSelected = selectedVersion?.id === latestVersion?.id

  if (!latestVersion || !selectedVersion) return null

  return (
    <article
      id={`work-review-project-${project.id}`}
      className={`overflow-hidden rounded-xl border bg-white transition-shadow ${
        expanded ? 'border-[#9ebeff] shadow-[0_14px_38px_rgba(20,52,102,0.10)]' : 'border-[#e1e7ef] hover:shadow-[0_8px_24px_rgba(15,23,42,0.07)]'
      }`}
    >
      <button
        type="button"
        onClick={onToggle}
        aria-expanded={expanded}
        className="grid w-full gap-4 p-4 text-left sm:grid-cols-[132px_minmax(0,1fr)_auto] sm:items-center"
      >
        <div className="relative aspect-[4/3] overflow-hidden rounded-lg border border-[#e5eaf1] bg-[#f2f4f7] sm:h-[92px] sm:w-[132px]">
          {cover ? (
            <Image
              src={proxyImageUrl(cover)}
              alt={project.title}
              fill
              unoptimized
              className="object-cover object-top"
            />
          ) : (
            <span className="flex h-full items-center justify-center text-[12px] font-semibold text-[#98a2b3]">暂无图片</span>
          )}
          <span className="absolute bottom-2 right-2 rounded-full bg-black/65 px-2 py-0.5 text-[10px] font-bold text-white">
            V{project.latestVersion}
          </span>
        </div>

        <div className="min-w-0">
          <div className="flex flex-wrap items-center gap-2">
            <h2 className="min-w-0 truncate text-[17px] font-bold text-[#101828]">{project.title}</h2>
            <WorkReviewStatusBadge status={project.status} />
          </div>
          {project.description && (
            <p className="mt-1.5 line-clamp-2 text-[12px] font-medium leading-5 text-[#667085]">{project.description}</p>
          )}
          <div className="mt-2 flex flex-wrap items-center gap-x-4 gap-y-1 text-[11px] font-medium text-[#7b8494]">
            <span>提交人：{project.submitter.name}</span>
            <span>作品日期：{formatDateOnly(project.workDate)}</span>
            <span>最近提交：{formatDateTime(latestVersion.submittedAt)}</span>
          </div>
          <div className="mt-2">
            <ReviewProgress project={project} version={latestVersion} />
          </div>
        </div>

        <span className={`hidden h-9 w-9 items-center justify-center rounded-full bg-[#f2f4f7] text-[18px] text-[#667085] transition-transform sm:flex ${
          expanded ? 'rotate-180' : ''
        }`}>
          ⌄
        </span>
      </button>

      {expanded && (
        <div className="border-t border-[#e5eaf1] bg-[#fbfcfe] px-4 py-5 sm:px-5">
          <div className="grid gap-5 lg:grid-cols-[170px_minmax(0,1fr)]">
            <aside>
              <div className="mb-2 text-[11px] font-bold uppercase tracking-[0.08em] text-[#7b8494]">版本记录</div>
              <div className="flex gap-2 overflow-x-auto pb-1 lg:grid lg:overflow-visible">
                {project.versions.map((version, index) => {
                  const active = version.id === selectedVersion.id
                  return (
                    <button
                      key={version.id}
                      type="button"
                      onClick={() => setSelectedVersionId(version.id)}
                      className={`min-w-[142px] rounded-lg border px-3 py-2.5 text-left transition-colors lg:min-w-0 ${
                        active
                          ? 'border-[#0050cb] bg-[#eef5ff]'
                          : 'border-[#dfe5ee] bg-white hover:border-[#abc7ef]'
                      }`}
                    >
                      <div className="flex items-center justify-between gap-2">
                        <span className={`text-[13px] font-bold ${active ? 'text-[#0050cb]' : 'text-[#344054]'}`}>V{version.version}</span>
                        {index === 0 && <span className="text-[9px] font-bold text-[#0050cb]">最新</span>}
                      </div>
                      <div className="mt-1 text-[10px] text-[#7b8494]">{formatDateTime(version.submittedAt)}</div>
                      <div className="mt-2"><WorkReviewStatusBadge status={version.status} compact /></div>
                    </button>
                  )
                })}
              </div>
            </aside>

            <div className="min-w-0">
              <div className="mb-4 flex flex-wrap items-start justify-between gap-3">
                <div>
                  <div className="flex items-center gap-2">
                    <h3 className="text-[17px] font-bold text-[#101828]">V{selectedVersion.version} 作品内容</h3>
                    {!isLatestSelected && <span className="text-[11px] font-semibold text-[#7b8494]">历史版本 · 只读</span>}
                  </div>
                  <p className="mt-1 text-[11px] font-medium text-[#7b8494]">
                    提交于 {formatDateTime(selectedVersion.submittedAt)}
                    {selectedVersion.completedAt ? ` · 评审完成于 ${formatDateTime(selectedVersion.completedAt)}` : ''}
                  </p>
                </div>
                {isLatestSelected && project.permissions.canResubmit && (
                  <button
                    type="button"
                    onClick={onResubmit}
                    className="min-h-9 rounded bg-[#0050cb] px-3.5 text-[12px] font-bold text-white hover:bg-[#003fa3]"
                  >
                    提交新版本
                  </button>
                )}
              </div>

              {selectedVersion.submissionNote && (
                <div className="mb-4 rounded-lg border-l-2 border-[#8aafff] bg-[#f5f8ff] px-3 py-2.5">
                  <div className="text-[11px] font-bold text-[#526173]">本次提交说明</div>
                  <p className="mt-1 whitespace-pre-wrap text-[12px] font-medium leading-5 text-[#667085]">{selectedVersion.submissionNote}</p>
                </div>
              )}

              <WorkReviewImageGallery
                groups={selectedVersion.imageGroups || []}
                imageUrls={selectedVersion.imageUrls || []}
              />

              <div className="mt-6">
                <div className="mb-3 flex items-center justify-between gap-3">
                  <h3 className="text-[15px] font-bold text-[#101828]">双评审意见</h3>
                  <ReviewProgress project={project} version={selectedVersion} />
                </div>
                <div className="grid gap-3 xl:grid-cols-2">
                  <ReviewPanel
                    label="直属主管评审"
                    reviewerName={project.manager.name}
                    review={getVersionReview(selectedVersion, 'manager')}
                    canReview={Boolean(
                      isLatestSelected
                      && project.permissions.pendingReviewRoles.includes('manager')
                    )}
                    onReview={() => onReview(selectedVersion, 'manager')}
                  />
                  <ReviewPanel
                    label="元泽评审"
                    reviewerName={project.finalReviewer.name}
                    review={getVersionReview(selectedVersion, 'final_reviewer')}
                    canReview={Boolean(
                      isLatestSelected
                      && project.permissions.pendingReviewRoles.includes('final_reviewer')
                    )}
                    onReview={() => onReview(selectedVersion, 'final_reviewer')}
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      )}
    </article>
  )
}

function ReviewPanel({
  label,
  reviewerName,
  review,
  canReview,
  onReview,
}: {
  label: string
  reviewerName: string
  review: WorkReviewReview | null
  canReview: boolean
  onReview: () => void
}) {
  return (
    <section className={`rounded-xl border bg-white p-4 ${
      review ? 'border-[#dce5ef]' : canReview ? 'border-[#9ebeff]' : 'border-[#e1e7ef]'
    }`}>
      <div className="flex items-start justify-between gap-3">
        <div className="min-w-0">
          <h4 className="text-[14px] font-bold text-[#101828]">{label}</h4>
          <div className="mt-0.5 truncate text-[11px] font-medium text-[#7b8494]">{review?.reviewerName || reviewerName}</div>
        </div>
        {review ? (
          <WorkReviewDecisionBadge decision={review.decision} />
        ) : (
          <span className="inline-flex rounded-full bg-[#f2f4f7] px-2 py-0.5 text-[11px] font-bold text-[#667085]">待评审</span>
        )}
      </div>

      {review ? (
        <div className="mt-4 space-y-3">
          {(review.imageComments || []).map((item) => (
            <div key={item.imageId || item.imageIndex} className="rounded-lg bg-[#f7f9fc] px-3 py-2.5">
              <div className="flex items-center justify-between gap-3">
                <div className="truncate text-[11px] font-bold text-[#344054]">
                  图 {item.imageIndex + 1}{item.sourceName ? ` · ${item.sourceName}` : ''}
                </div>
                <WorkReviewDecisionBadge decision={item.decision} />
              </div>
              <p className="mt-1.5 whitespace-pre-wrap text-[12px] font-medium leading-5 text-[#526173]">{item.comment}</p>
            </div>
          ))}
          {review.generalComment && (
            <div className="border-t border-[#e5eaf1] pt-3">
              <div className="text-[11px] font-bold text-[#7b8494]">总体意见</div>
              <p className="mt-1 whitespace-pre-wrap text-[12px] font-medium leading-5 text-[#526173]">{review.generalComment}</p>
            </div>
          )}
          <div className="text-right text-[10px] font-medium text-[#98a2b3]">提交于 {formatDateTime(review.reviewedAt)}</div>
        </div>
      ) : (
        <div className="mt-4 rounded-lg border border-dashed border-[#d7dde7] bg-[#fafbfc] px-3 py-6 text-center">
          <p className="text-[12px] font-semibold text-[#7b8494]">
            {canReview ? '当前版本等待你填写逐图评审建议' : '等待评审人提交'}
          </p>
          {canReview && (
            <button
              type="button"
              onClick={onReview}
              className="mt-3 min-h-9 rounded bg-[#0050cb] px-4 text-[12px] font-bold text-white hover:bg-[#003fa3]"
            >
              开始评审
            </button>
          )}
        </div>
      )}
    </section>
  )
}