/**
 * 侧边栏面板组件
 * 插件的主操作界面，固定在浏览器右上角
 * 包含：职位信息卡片、自动填写按钮、简历管理、填写进度等功能区域
 */

import { useState, useEffect } from "react"
import { getCookieValue } from "~utils/cookie"
import { getCustomizeResume } from "~api/aiApi"
import { handleAutoFillCommon } from "~handlers/handleAutoFillCommon"
import type { MatchedFormField, ResumeData, JobInfo } from "~lib/types"
import "./SidebarPanel.scss"

/** 侧边栏面板的 Props */
interface SidebarPanelProps {
  /** 当前标签页的来源链接 */
  sourceUrl: string
  /** 岗位信息（由 sidebar 层查询后传入） */
  jobInfo: JobInfo | null
  /** 关闭面板的回调函数 */
  onClose: () => void
}

export function SidebarPanel({ sourceUrl, jobInfo, onClose }: SidebarPanelProps) {
  /** 是否已登录（有 Token） */
  const [isLoggedIn, setIsLoggedIn] = useState<boolean | null>(null)
  /** 是否正在执行自动填写 */
  const [filling, setFilling] = useState(false)
  /** 页面语言类型：中文 / 英文 */
  const [pageLang, setPageLang] = useState<"zh" | "en">("zh")
  /** 是否为职位申请表单页面 */
  const [isFormPage, setIsFormPage] = useState(false)
  /** 匹配到的表单字段列表 */
  const [formFields, setFormFields] = useState<MatchedFormField[]>([])
  /** 当前使用的简历数据 */
  const [resumeData, setResumeData] = useState<ResumeData | null>(null)

  /** 页面加载时检查 Token，有岗位信息则查询定制简历 */
  useEffect(() => {
    getCookieValue("Token").then((token) => {
      console.log("[OfferPie] SidebarPanel 获取到的 Token:", token)
      setIsLoggedIn(!!token)

      // 有 Token 且有岗位 ID 时，查询定制简历
      if (token && jobInfo?.id) {
        getCustomizeResume(jobInfo.id).then((resumeRes: any) => {
          console.log("[OfferPie] 定制简历数据:", resumeRes)
          // 接口返回的 resume 字段映射为 main
          const mappedData: ResumeData = {
            main: resumeRes.resume || {},
            education: resumeRes.education || [],
            work: resumeRes.work || [],
            internship: resumeRes.internship || [],
            project: resumeRes.project || [],
            competition: resumeRes.competition || [],
          }
          setResumeData(mappedData)
        }).catch((err) => {
          console.warn("[OfferPie] 查询定制简历失败:", err)
        })
      }
    })
  }, [jobInfo?.id])

  /**
   * 自动填写按钮点击处理
   * 内部根据条件判断走 handlers/ 下具体哪个处理文件：
   *   - handleAutoFillCommon：通用模式（当前默认）
   *   - 后续特殊网站会在此处加条件分支（如根据 domain 或 jobInfo 来源判断）
   */
  const handleAutoFill = async () => {
    setFilling(true)
    try {
      const fillResult = await handleAutoFillCommon({ resumeData, jobInfo })
      setPageLang(fillResult.lang)
      setIsFormPage(fillResult.isFormPage)
      if (fillResult.resumeData) setResumeData(fillResult.resumeData)
      setFormFields(fillResult.formFields)
    } catch (e) {
      console.error("OfferPie: 自动填写异常", e)
    }
    setTimeout(() => setFilling(false), 1000)
  }

  return (
    <div className="op-container">
      {/* 顶部操作栏：关闭按钮始终显示，反馈和设置仅登录后显示 */}
      <div className="op-header">
        {isLoggedIn && <span className="op-header-link">反馈</span>}
        {/*{isLoggedIn && <span className="op-header-link">设置</span>}*/}
        <button className="op-close-btn" onClick={onClose}>
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
            <circle cx="12" cy="12" r="10" />
            <path d="M9 12h6M12 9l3 3-3 3" />
          </svg>
        </button>
      </div>

      {/* 插件标题 */}
      <div className="op-title">大学生求职助手</div>

      {/* 未登录状态：显示登录提示 */}
      {!isLoggedIn && isLoggedIn !== null && (
        <div className="op-login-prompt">
          <p className="op-login-text">请先前往 Offer派 官网进行登录</p>
          <button
            className="op-login-btn"
            onClick={() => {
              onClose()
              window.open("http://localhost:5173/jobs", "_blank")
            }}
          >
            前往 Offer派
          </button>
        </div>
      )}

      {/* 已登录状态：显示完整功能 */}
      {isLoggedIn && (
        <>
          {/* 职位信息卡片 */}
          <div className="op-job-card">
            <div className="op-job-icon">
              {jobInfo?.companyLogoUrl ? (
                <img src={jobInfo.companyLogoUrl} alt="logo" style={{ width: 40, height: 40, borderRadius: 10, objectFit: "cover" }} />
              ) : (
                <svg width="20" height="20" viewBox="0 0 24 24" fill="#666">
                  <rect x="3" y="3" width="7" height="7" rx="1" />
                  <rect x="14" y="3" width="7" height="7" rx="1" />
                  <rect x="3" y="14" width="7" height="7" rx="1" />
                  <rect x="14" y="14" width="7" height="7" rx="1" />
                </svg>
              )}
            </div>
            <div className="op-job-info">
              <div className="op-job-title">{jobInfo?.title || "未匹配到岗位信息"}</div>
              <div className="op-job-meta">
                {jobInfo
                  ? [jobInfo.regionName, jobInfo.companyShortName || jobInfo.companyName, jobInfo.companyType]
                      .filter(Boolean)
                      .join(" · ") || "—"
                  : "当前页面暂未关联岗位"}
              </div>
            </div>
            {jobInfo?.matchScore != null && (
              <div className="op-match-score">
                <svg width="48" height="48" viewBox="0 0 48 48">
                  <circle cx="24" cy="24" r="20" fill="none" stroke="#f0f0f0" strokeWidth="3" />
                  <circle cx="24" cy="24" r="20" fill="none" stroke="#000" strokeWidth="3"
                    strokeDasharray={`${(jobInfo.matchScore) / 100 * 2 * Math.PI * 20} ${2 * Math.PI * 20}`}
                    strokeLinecap="round" transform="rotate(-90 24 24)" />
                  <text x="24" y="26" textAnchor="middle" fontSize="13" fontWeight="700" fill="#000">
                    {jobInfo.matchScore}%
                  </text>
                </svg>
              </div>
            )}
          </div>

          {/* 自动填写按钮 */}
          <button className="op-autofill-btn" onClick={handleAutoFill} disabled={filling}>
            {filling ? "分析中..." : "自动填写"}
          </button>

          {/* 使用次数信息 */}
          <div className="op-credits-row">
            <span className="op-credits-text">剩余4次</span>
            <span className="op-credits-link">立即获得无限次数</span>
          </div>

          {/* 简历区域 */}
          <div className="op-section-label">简历</div>
          <div className="op-resume-card">
            <div className="op-resume-avatar">
              {resumeData?.main?.name ? resumeData.main.name.charAt(0) : "—"}
            </div>
            <div className="op-resume-info">
              <span className="op-resume-name">
                {resumeData?.main?.name || "暂无简历"}
              </span>
              {resumeData && <span className="op-resume-tag">默认</span>}
            </div>
            {/* <span className="op-resume-change">更改</span> */}
          </div>

          {/* 针对性优化简历按钮 */}
          <button className="op-optimize-btn">针对性优化简历</button>

          {/* 填写进度区域 */}
          <div className="op-progress-row">
            <span className="op-progress-label">填写进度</span>
            <span className="op-progress-value">50%</span>
          </div>
          <div className="op-progress-bar-bg">
            <div className="op-progress-bar-fill" />
          </div>
        </>
      )}
    </div>
  )
}