import React, { useId, useMemo, useState } from 'react'
import { X } from 'lucide-react'
import { Link } from 'react-router-dom'
import { getLocaleFromPathname, withLocalePath } from '../lib/i18n'

type PrivacyConsentModalProps = {
  open: boolean
  onClose: () => void
  onConfirm: (payload: { consentedAt: string; version: string }) => void
  locale: 'zh' | 'en'
}

const CONSENT_VERSION = '2026-01-01'

export const PrivacyConsentModal: React.FC<PrivacyConsentModalProps> = ({ open, onClose, onConfirm, locale }) => {
  const checkboxId = useId()
  const [agreed, setAgreed] = useState(false)

  const privacyPath = useMemo(() => withLocalePath(locale, '/privacy'), [locale])

  if (!open) return null

  return (
    <div className="fixed inset-0 z-[100]">
      <div className="absolute inset-0 bg-black/40" aria-hidden="true" onClick={onClose} />

      <div className="absolute inset-0 flex items-center justify-center p-4">
        <div
          role="dialog"
          aria-modal="true"
          aria-label={locale === 'en' ? 'Privacy consent' : '个人信息处理告知与同意'}
          className="w-full max-w-lg rounded-2xl bg-white shadow-xl border border-gray-100 overflow-hidden"
        >
          <div className="flex items-center justify-between px-6 py-4 border-b border-gray-100">
            <div>
              <div className="text-base font-semibold text-primary-dark">
                {locale === 'en' ? 'Privacy notice & consent' : '个人信息处理告知与同意'}
              </div>
              <div className="text-xs text-gray-500 mt-1">
                {locale === 'en' ? `Version: ${CONSENT_VERSION}` : `版本：${CONSENT_VERSION}`}
              </div>
            </div>
            <button
              type="button"
              onClick={onClose}
              className="w-9 h-9 inline-flex items-center justify-center rounded-lg text-gray-600 hover:bg-gray-50"
              aria-label={locale === 'en' ? 'Close' : '关闭'}
            >
              <X size={18} />
            </button>
          </div>

          <div className="px-6 py-5 space-y-4 text-sm text-gray-700 leading-relaxed">
            <p>
              {locale === 'en'
                ? 'To arrange a callback, we need to process your phone number and related inquiry information.'
                : '为安排专员回电沟通，我们需要处理你的手机号及与本次咨询相关的信息。'}
            </p>

            <div className="rounded-xl bg-background border border-gray-100 p-4 space-y-2">
              <div className="font-medium text-primary-dark">{locale === 'en' ? 'What we collect' : '收集信息范围'}</div>
              <ul className="list-disc pl-5 space-y-1 text-gray-700">
                <li>{locale === 'en' ? 'Phone number (required)' : '手机号（必填）'}</li>
                <li>{locale === 'en' ? 'Inquiry description (required)' : '咨询需求描述（必填）'}</li>
                <li>{locale === 'en' ? 'Name/company (optional)' : '姓名/公司（选填）'}</li>
              </ul>
            </div>

            <div className="rounded-xl bg-background border border-gray-100 p-4 space-y-2">
              <div className="font-medium text-primary-dark">{locale === 'en' ? 'Purpose & retention' : '使用目的与保存期限'}</div>
              <p className="text-gray-700">
                {locale === 'en'
                  ? 'Used only for contact and follow-up regarding this inquiry. Retention period follows necessary business processing requirements and applicable laws.'
                  : '仅用于与本次咨询相关的联系、答复与后续服务；保存期限以完成处理所必需的期限及法律法规要求为准。'}
              </p>
            </div>

            <p className="text-xs text-gray-500">
              {locale === 'en' ? 'For details, see ' : '更多信息请查看'}
              <Link to={privacyPath} className="text-primary hover:text-primary-light underline underline-offset-2">
                {locale === 'en' ? 'Privacy Policy' : '《隐私政策》'}
              </Link>
              {locale === 'en' ? '.' : '。'}
            </p>

            <label className="flex items-start gap-3 text-sm">
              <input
                id={checkboxId}
                type="checkbox"
                checked={agreed}
                onChange={(e) => setAgreed(e.target.checked)}
                className="mt-1 h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary"
              />
              <span>
                {locale === 'en'
                  ? 'I have read and agree to the privacy notice above and the Privacy Policy.'
                  : '我已阅读并同意以上告知内容及《隐私政策》。'}
              </span>
            </label>
          </div>

          <div className="px-6 py-4 border-t border-gray-100 flex items-center justify-end gap-3">
            <button
              type="button"
              onClick={onClose}
              className="px-4 py-2 rounded-xl text-sm font-medium text-gray-700 hover:bg-gray-50"
            >
              {locale === 'en' ? 'Cancel' : '取消'}
            </button>
            <button
              type="button"
              onClick={() => onConfirm({ consentedAt: new Date().toISOString(), version: CONSENT_VERSION })}
              disabled={!agreed}
              className={`px-4 py-2 rounded-xl text-sm font-medium text-white ${
                agreed ? 'bg-primary hover:bg-primary-light' : 'bg-gray-300 cursor-not-allowed'
              }`}
            >
              {locale === 'en' ? 'Agree & continue' : '同意并继续'}
            </button>
          </div>
        </div>
      </div>
    </div>
  )
}

export default PrivacyConsentModal
