import { Input, Text, View } from "@tarojs/components";
import type { ConversationDraft, SuggestionDraft, ActivityDraft, MutualAidDraft } from "../types";
import { UI_TEXT } from "../constants";
import "./draft_form.scss";

interface SuggestionFormProps {
  draft: SuggestionDraft;
  onChange: (d: SuggestionDraft) => void;
}
export function SuggestionForm({ draft, onChange }: SuggestionFormProps) {
  return (
    <View className="draft-form">
      <View className="draft-form__header">
        <Text className="draft-form__label-pill">建言</Text>
        <Text className="draft-form__title">建言草稿</Text>
      </View>
      <View className="draft-form__field">
        <Text className="draft-form__label">标题</Text>
        <Input className="draft-form__input" value={draft.title || ""} placeholder="输入建言标题" onInput={(e) => onChange({ ...draft, title: String(e.detail.value || "") })} />
      </View>
      <View className="draft-form__field">
        <Text className="draft-form__label">摘要</Text>
        <Input className="draft-form__input" value={draft.summary || ""} placeholder="输入建言摘要" onInput={(e) => onChange({ ...draft, summary: String(e.detail.value || "") })} />
      </View>
      <View className="draft-form__field">
        <Text className="draft-form__label">正文</Text>
        <Input className="draft-form__input draft-form__input--textarea" value={draft.body || ""} placeholder="输入建言正文" onInput={(e) => onChange({ ...draft, body: String(e.detail.value || "") })} />
      </View>
      {draft.branchName && (
        <View className="draft-form__field">
          <Text className="draft-form__label">分会</Text>
          <Text className="draft-form__value">{draft.branchName}</Text>
        </View>
      )}
    </View>
  );
}

interface ActivityFormProps {
  draft: ActivityDraft;
  onChange: (d: ActivityDraft) => void;
}
export function ActivityForm({ draft, onChange }: ActivityFormProps) {
  return (
    <View className="draft-form">
      <View className="draft-form__header">
        <Text className="draft-form__label-pill">活动</Text>
        <Text className="draft-form__title">活动草稿</Text>
      </View>
      <View className="draft-form__field">
        <Text className="draft-form__label">活动标题</Text>
        <Input className="draft-form__input" value={draft.title || ""} placeholder="输入活动标题" onInput={(e) => onChange({ ...draft, title: String(e.detail.value || "") })} />
      </View>
      <View className="draft-form__field">
        <Text className="draft-form__label">活动简介</Text>
        <Input className="draft-form__input" value={draft.description || ""} placeholder="输入活动简介" onInput={(e) => onChange({ ...draft, description: String(e.detail.value || "") })} />
      </View>
      <View className="draft-form__row">
        <View className="draft-form__field draft-form__field--half">
          <Text className="draft-form__label">开始时间</Text>
          <Input className="draft-form__input" value={draft.startsAt || ""} placeholder="如：2026-06-01 09:00" onInput={(e) => onChange({ ...draft, startsAt: String(e.detail.value || "") })} />
        </View>
        <View className="draft-form__field draft-form__field--half">
          <Text className="draft-form__label">结束时间</Text>
          <Input className="draft-form__input" value={draft.endsAt || ""} placeholder="如：2026-06-01 17:00" onInput={(e) => onChange({ ...draft, endsAt: String(e.detail.value || "") })} />
        </View>
      </View>
      <View className="draft-form__field">
        <Text className="draft-form__label">活动地点</Text>
        <Input className="draft-form__input" value={draft.location || ""} placeholder="输入活动地点" onInput={(e) => onChange({ ...draft, location: String(e.detail.value || "") })} />
      </View>
      <View className="draft-form__row">
        <View className="draft-form__field draft-form__field--half">
          <Text className="draft-form__label">人数上限</Text>
          <Input className="draft-form__input" type="number" value={draft.capacity ? String(draft.capacity) : ""} placeholder="不限" onInput={(e) => onChange({ ...draft, capacity: Number(e.detail.value) || undefined })} />
        </View>
        <View className="draft-form__field draft-form__field--half">
          <Text className="draft-form__label">报名截止</Text>
          <Input className="draft-form__input" value={draft.registerDeadline || ""} placeholder="截止日期" onInput={(e) => onChange({ ...draft, registerDeadline: String(e.detail.value || "") })} />
        </View>
      </View>
      {draft.branchName && (
        <View className="draft-form__field">
          <Text className="draft-form__label">分会</Text>
          <Text className="draft-form__value">{draft.branchName}</Text>
        </View>
      )}
    </View>
  );
}

interface MutualAidFormProps {
  draft: MutualAidDraft;
  onChange: (d: MutualAidDraft) => void;
}
export function MutualAidForm({ draft, onChange }: MutualAidFormProps) {
  return (
    <View className="draft-form">
      <View className="draft-form__header">
        <Text className="draft-form__label-pill">互助</Text>
        <Text className="draft-form__title">互助草稿</Text>
      </View>
      <View className="draft-form__field">
        <Text className="draft-form__label">类型</Text>
        <Text className="draft-form__value">{draft.postType === "resource" ? "供给资源" : "需求资源"}</Text>
      </View>
      <View className="draft-form__field">
        <Text className="draft-form__label">标题</Text>
        <Input className="draft-form__input" value={draft.title || ""} placeholder="输入互助标题" onInput={(e) => onChange({ ...draft, title: String(e.detail.value || "") })} />
      </View>
      <View className="draft-form__field">
        <Text className="draft-form__label">详情描述</Text>
        <Input className="draft-form__input" value={draft.description || ""} placeholder="输入详情描述" onInput={(e) => onChange({ ...draft, description: String(e.detail.value || "") })} />
      </View>
      <View className="draft-form__row">
        <View className="draft-form__field draft-form__field--half">
          <Text className="draft-form__label">联系电话</Text>
          <Input className="draft-form__input" type="number" value={draft.contactPhone || ""} placeholder="手机号" onInput={(e) => onChange({ ...draft, contactPhone: String(e.detail.value || "") })} />
        </View>
        <View className="draft-form__field draft-form__field--half">
          <Text className="draft-form__label">微信号</Text>
          <Input className="draft-form__input" value={draft.contactWechat || ""} placeholder="微信号" onInput={(e) => onChange({ ...draft, contactWechat: String(e.detail.value || "") })} />
        </View>
      </View>
      <View className="draft-form__field">
        <Text className="draft-form__label">标签</Text>
        <Input className="draft-form__input" value={draft.tagsText || ""} placeholder="多个标签用逗号分隔" onInput={(e) => onChange({ ...draft, tagsText: String(e.detail.value || "") })} />
      </View>
    </View>
  );
}
