import { ArrowLeft, CheckCircle2, ImagePlus, Send, X } from 'lucide-react';
import { useRef, useState } from 'react';

import type { ProfileFeedbackEvidenceItemInput } from '../../../packages/shared/src/contracts/runtime';

const MIN_FEEDBACK_DESCRIPTION_LENGTH = 10;
const MAX_FEEDBACK_DESCRIPTION_LENGTH = 200;
const MAX_FEEDBACK_EVIDENCE_COUNT = 4;
const MAX_CONTACT_PHONE_LENGTH = 40;
const MAX_FEEDBACK_EVIDENCE_BYTES = 1_048_576;
const MAX_FEEDBACK_EVIDENCE_TOTAL_BYTES = 4_194_304;

export type PlatformFeedbackPayload = {
  description: string;
  contactPhone?: string | null;
  evidenceItems: ProfileFeedbackEvidenceItemInput[];
};

export type PlatformFeedbackViewProps = {
  onBack: () => void;
  onSubmit?: (payload: PlatformFeedbackPayload) => void | Promise<unknown>;
};

type EvidencePreview = {
  id: string;
  fileName: string;
  contentType: string;
  sizeBytes: number;
  dataUrl: string;
};

function buildEvidencePreviewId(file: File, index: number) {
  return `${file.name}:${file.size}:${file.lastModified}:${index}`;
}

function readFileAsDataUrl(file: File) {
  return new Promise<string>((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => {
      if (typeof reader.result === 'string') {
        resolve(reader.result);
      } else {
        reject(new Error('图片读取失败'));
      }
    };
    reader.onerror = () => reject(new Error('图片读取失败'));
    reader.readAsDataURL(file);
  });
}

export function PlatformFeedbackView({
  onBack,
  onSubmit,
}: PlatformFeedbackViewProps) {
  const evidenceInputRef = useRef<HTMLInputElement | null>(null);
  const [description, setDescription] = useState('');
  const [contactPhone, setContactPhone] = useState('');
  const [evidencePreviews, setEvidencePreviews] = useState<EvidencePreview[]>([]);
  const [error, setError] = useState<string | null>(null);
  const [notice, setNotice] = useState<string | null>(null);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [submitted, setSubmitted] = useState(false);

  const descriptionLength = description.length;

  const showTemporaryNotice = (message: string) => {
    setNotice(message);
    window.setTimeout(() => setNotice(null), 1600);
  };

  const updateDescription = (value: string) => {
    setDescription(value.slice(0, MAX_FEEDBACK_DESCRIPTION_LENGTH));
    setError(null);
    setSubmitted(false);
  };

  const updateContactPhone = (value: string) => {
    setContactPhone(value.slice(0, MAX_CONTACT_PHONE_LENGTH));
    setError(null);
    setSubmitted(false);
  };

  const openEvidencePicker = () => {
    evidenceInputRef.current?.click();
  };

  const addEvidenceFiles = (files: FileList | null) => {
    const selectedFiles = files ? Array.from(files) : [];
    if (evidenceInputRef.current) {
      evidenceInputRef.current.value = '';
    }
    if (selectedFiles.length === 0) {
      return;
    }

    if (selectedFiles.some((file) => !file.type.startsWith('image/'))) {
      setError('反馈凭证只支持图片类型');
      return;
    }
    const remainingCount = MAX_FEEDBACK_EVIDENCE_COUNT - evidencePreviews.length;
    if (remainingCount <= 0 || selectedFiles.length > remainingCount) {
      setError('最多上传四张凭证');
    }

    const nextFiles = selectedFiles.slice(0, Math.max(remainingCount, 0));
    if (nextFiles.length === 0) {
      return;
    }

    if (nextFiles.some((file) => file.size > MAX_FEEDBACK_EVIDENCE_BYTES)) {
      setError('单张反馈凭证不能超过 1MB');
      return;
    }
    const currentTotalBytes = evidencePreviews.reduce(
      (total, preview) => total + preview.sizeBytes,
      0,
    );
    const nextTotalBytes = nextFiles.reduce(
      (total, file) => total + file.size,
      currentTotalBytes,
    );
    if (nextTotalBytes > MAX_FEEDBACK_EVIDENCE_TOTAL_BYTES) {
      setError('反馈凭证总大小不能超过 4MB');
      return;
    }

    Promise.all(
      nextFiles.map(async (file, index) => ({
        id: buildEvidencePreviewId(file, evidencePreviews.length + index),
        fileName: file.name,
        contentType: file.type,
        sizeBytes: file.size,
        dataUrl: await readFileAsDataUrl(file),
      })),
    )
      .then((nextPreviews) => {
        setEvidencePreviews((currentPreviews) => [
          ...currentPreviews,
          ...nextPreviews,
        ]);
        setError(null);
        setSubmitted(false);
      })
      .catch((readError: unknown) => {
        setError(readError instanceof Error ? readError.message : '图片读取失败');
      });
  };

  const removeEvidencePreview = (id: string) => {
    setEvidencePreviews((currentPreviews) =>
      currentPreviews.filter((preview) => preview.id !== id),
    );
    setError(null);
    setSubmitted(false);
  };

  const submitFeedback = () => {
    if (isSubmitting) {
      return;
    }

    const trimmedDescription = description.trim();
    const trimmedContactPhone = contactPhone.trim();
    if (trimmedDescription.length < MIN_FEEDBACK_DESCRIPTION_LENGTH) {
      setError('请填写10个字以上的问题描述');
      setSubmitted(false);
      return;
    }
    if (trimmedDescription.length > MAX_FEEDBACK_DESCRIPTION_LENGTH) {
      setError('问题描述不能超过 200 字');
      setSubmitted(false);
      return;
    }
    if (trimmedContactPhone.length > MAX_CONTACT_PHONE_LENGTH) {
      setError('联系电话不能超过 40 字');
      setSubmitted(false);
      return;
    }
    if (evidencePreviews.length > MAX_FEEDBACK_EVIDENCE_COUNT) {
      setError('最多上传四张凭证');
      setSubmitted(false);
      return;
    }

    setIsSubmitting(true);
    setError(null);
    void Promise.resolve(
      onSubmit?.({
        description: trimmedDescription,
        contactPhone: trimmedContactPhone || null,
        evidenceItems: evidencePreviews.map((preview) => ({
          fileName: preview.fileName,
          contentType: preview.contentType,
          sizeBytes: preview.sizeBytes,
          dataUrl: preview.dataUrl,
        })),
      }),
    )
      .then(() => setSubmitted(true))
      .catch((submitError: unknown) => {
        setSubmitted(false);
        setError(submitError instanceof Error ? submitError.message : '提交失败');
      })
      .finally(() => setIsSubmitting(false));
  };

  return (
    <div className="platform-page-stage platform-remap-surface min-h-0 flex-1 overflow-y-auto text-[var(--platform-text-strong)]">
      <div className="mx-auto flex min-h-full w-full max-w-[30rem] flex-col px-4 pb-6 pt-4">
        <header className="flex shrink-0 items-center gap-3 pb-3">
          <button
            type="button"
            onClick={onBack}
            aria-label="返回我的页签"
            className="platform-button platform-button--ghost h-10 w-10 shrink-0 justify-center rounded-full p-0"
          >
            <ArrowLeft className="h-[1.125rem] w-[1.125rem]" />
          </button>
          <div className="min-w-0 text-base font-black text-[var(--platform-text-strong)]">
            帮助与反馈
          </div>
        </header>

        <main className="flex flex-1 flex-col gap-3">
          <div className="text-sm font-semibold text-[var(--platform-text-soft)]">
            反馈问题
          </div>

          <section className="platform-subpanel rounded-[1.2rem] px-4 py-4">
            <label
              htmlFor="profile-feedback-description"
              className="block text-base font-semibold text-[var(--platform-text-strong)]"
            >
              问题描述
            </label>
            <textarea
              id="profile-feedback-description"
              value={description}
              maxLength={MAX_FEEDBACK_DESCRIPTION_LENGTH}
              onChange={(event) => updateDescription(event.target.value)}
              placeholder="请填写10个字以上的问题描述以便我们提供更好的帮助，温馨提醒您请勿填写身份证号等个人隐私信息。"
              className="mt-3 min-h-[10.5rem] w-full resize-none border-0 bg-transparent text-sm leading-6 text-[var(--platform-text-strong)] outline-none placeholder:text-[var(--platform-text-soft)]"
            />
            <div className="text-right text-xs text-[var(--platform-text-soft)]">
              {descriptionLength}/{MAX_FEEDBACK_DESCRIPTION_LENGTH}
            </div>
          </section>

          <section className="platform-subpanel rounded-[1.2rem] px-4 py-4">
            <div className="text-base font-semibold text-[var(--platform-text-strong)]">
              上传凭证(提供问题截图)
            </div>
            <div className="mt-4 flex flex-wrap gap-3">
              {evidencePreviews.map((preview) => (
                <div
                  key={preview.id}
                  className="relative h-[5.75rem] w-[5.75rem] overflow-hidden rounded-xl border border-[var(--platform-subpanel-border)] bg-[var(--platform-input-fill)]"
                >
                  <img
                    src={preview.dataUrl}
                    alt="反馈凭证预览"
                    className="h-full w-full object-cover"
                  />
                  <button
                    type="button"
                    onClick={() => removeEvidencePreview(preview.id)}
                    aria-label="移除上传凭证"
                    className="absolute right-1 top-1 flex h-5 w-5 items-center justify-center rounded-full bg-black/55 text-white"
                  >
                    <X className="h-3 w-3" />
                  </button>
                </div>
              ))}
              {evidencePreviews.length < MAX_FEEDBACK_EVIDENCE_COUNT ? (
                <button
                  type="button"
                  onClick={openEvidencePicker}
                  className="flex h-[5.75rem] w-[5.75rem] flex-col items-center justify-center rounded-xl border border-dashed border-[var(--platform-subpanel-border)] bg-[var(--platform-input-fill)] text-[var(--platform-text-soft)] transition hover:border-[var(--platform-surface-hover-border)] hover:text-[var(--platform-text-strong)]"
                >
                  <ImagePlus className="h-6 w-6" />
                  <span className="mt-2 text-xs font-medium">上传凭证</span>
                  <span className="mt-0.5 text-[11px]">(最多四张)</span>
                </button>
              ) : null}
            </div>
            <input
              ref={evidenceInputRef}
              type="file"
              accept="image/*"
              multiple
              className="hidden"
              onChange={(event) => addEvidenceFiles(event.target.files)}
            />
          </section>

          <section className="platform-subpanel rounded-[1.2rem] px-4 py-4">
            <label
              htmlFor="profile-feedback-phone"
              className="block text-base font-semibold text-[var(--platform-text-strong)]"
            >
              联系电话
            </label>
            <input
              id="profile-feedback-phone"
              type="tel"
              value={contactPhone}
              maxLength={MAX_CONTACT_PHONE_LENGTH}
              onChange={(event) => updateContactPhone(event.target.value)}
              placeholder="选填，如您填写则将会同步开发者与您联系"
              className="mt-3 w-full border-0 bg-transparent text-sm leading-6 text-[var(--platform-text-strong)] outline-none placeholder:text-[var(--platform-text-soft)]"
            />
          </section>

          {error ? (
            <div className="rounded-[1.2rem] border border-[var(--platform-button-danger-border)] bg-[var(--platform-button-danger-fill)] px-4 py-3 text-sm font-medium text-[var(--platform-button-danger-text)]">
              {error}
            </div>
          ) : null}
          {submitted ? (
            <div className="flex items-center gap-2 rounded-[1.2rem] border border-[var(--platform-success-border)] bg-[var(--platform-success-bg)] px-4 py-3 text-sm font-medium text-[var(--platform-success-text)]">
              <CheckCircle2 className="h-4 w-4" />
              反馈已提交
            </div>
          ) : null}
          {notice ? (
            <div className="rounded-[1.2rem] border border-[var(--platform-cool-border)] bg-[var(--platform-cool-bg)] px-4 py-3 text-sm font-medium text-[var(--platform-cool-text)]">
              {notice}
            </div>
          ) : null}

          <button
            type="button"
            onClick={submitFeedback}
            disabled={isSubmitting}
            className="platform-button platform-button--primary mt-2 h-12 w-full justify-center text-base disabled:cursor-not-allowed disabled:opacity-60"
          >
            <Send className="h-4 w-4" />
            {isSubmitting ? '提交中' : '提交'}
          </button>

          <button
            type="button"
            onClick={() => showTemporaryNotice('反馈记录暂未开放')}
            className="self-center px-3 py-2 text-sm font-semibold text-[var(--platform-cool-text)]"
          >
            查看反馈与投诉记录
          </button>
        </main>
      </div>
    </div>
  );
}