"use client";

import { useState } from "react";

type FormState = {
  nickname: string;
  gender: string;
  city: string;
  occupation: string;
  education: string;
  wechat: string;
  phone: string;
  intro: string;
};

const OCCUPATIONS = [
  "自由职业者",
  "远程工程师",
  "设计师",
  "内容创作者",
  "创业者",
  "其他",
] as const;

const EDUCATIONS = ["高中", "大专", "本科", "硕士", "博士"] as const;

const initialForm: FormState = {
  nickname: "",
  gender: "",
  city: "",
  occupation: "",
  education: "",
  wechat: "",
  phone: "",
  intro: "",
};

export default function JoinPage() {
  const [form, setForm] = useState<FormState>(initialForm);

  const updateField = (field: keyof FormState, value: string) => {
    setForm((prev) => ({ ...prev, [field]: value }));
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!form.nickname.trim()) {
      alert("请填写昵称");
      return;
    }
    if (!form.wechat.trim()) {
      alert("请填写微信号");
      return;
    }
    alert("提交成功！我们将通过微信联系你。");
    setForm(initialForm);
  };

  return (
    <div className="min-h-screen bg-[#fafafa]">
      {/* Top Section: Gradient Hero */}
      <section className="relative overflow-hidden bg-gradient-to-br from-orange-400 via-orange-500 to-rose-500 px-4 pt-12 pb-16 sm:pt-16 sm:pb-20">
        <div className="mx-auto max-w-2xl text-center">
          <h1 className="text-3xl font-bold tracking-tight text-white drop-shadow-sm sm:text-4xl md:text-5xl">
            加入游牧中国社区
          </h1>
          <p className="mt-3 text-base text-white/95 sm:text-lg md:text-xl">
            填写信息加入全球华人数字游民社群
          </p>
        </div>
      </section>

      {/* Form Card */}
      <section className="relative z-10 mx-auto -mt-8 max-w-lg px-4 pb-12 sm:-mt-10 sm:px-6">
        <div className="rounded-2xl bg-white p-6 shadow-lg sm:p-8">
          <form onSubmit={handleSubmit} className="space-y-5">
            {/* 昵称 */}
            <div>
              <label
                htmlFor="nickname"
                className="mb-1.5 block text-sm font-medium text-gray-700"
              >
                昵称 <span className="text-[#ff4d4f]">*</span>
              </label>
              <input
                id="nickname"
                type="text"
                value={form.nickname}
                onChange={(e) => updateField("nickname", e.target.value)}
                required
                placeholder="请输入你的昵称"
                className="w-full rounded-xl border border-gray-200 px-4 py-3 text-gray-900 placeholder-gray-400 transition-colors focus:border-[#ff4d4f] focus:outline-none focus:ring-2 focus:ring-[#ff4d4f]/20"
              />
            </div>

            {/* 性别 */}
            <div>
              <label className="mb-2 block text-sm font-medium text-gray-700">
                性别
              </label>
              <div className="flex gap-6">
                {["男", "女", "其他"].map((g) => (
                  <label
                    key={g}
                    className="flex cursor-pointer items-center gap-2"
                  >
                    <input
                      type="radio"
                      name="gender"
                      value={g}
                      checked={form.gender === g}
                      onChange={(e) => updateField("gender", e.target.value)}
                      className="h-4 w-4 border-gray-300 text-[#ff4d4f] focus:ring-[#ff4d4f]/20"
                    />
                    <span className="text-sm text-gray-700">{g}</span>
                  </label>
                ))}
              </div>
            </div>

            {/* 当前所在城市 */}
            <div>
              <label
                htmlFor="city"
                className="mb-1.5 block text-sm font-medium text-gray-700"
              >
                当前所在城市
              </label>
              <input
                id="city"
                type="text"
                value={form.city}
                onChange={(e) => updateField("city", e.target.value)}
                placeholder="如：清迈、曼谷、大理"
                className="w-full rounded-xl border border-gray-200 px-4 py-3 text-gray-900 placeholder-gray-400 transition-colors focus:border-[#ff4d4f] focus:outline-none focus:ring-2 focus:ring-[#ff4d4f]/20"
              />
            </div>

            {/* 职业 */}
            <div>
              <label
                htmlFor="occupation"
                className="mb-1.5 block text-sm font-medium text-gray-700"
              >
                职业
              </label>
              <select
                id="occupation"
                value={form.occupation}
                onChange={(e) => updateField("occupation", e.target.value)}
                className="w-full rounded-xl border border-gray-200 px-4 py-3 text-gray-900 transition-colors focus:border-[#ff4d4f] focus:outline-none focus:ring-2 focus:ring-[#ff4d4f]/20"
              >
                <option value="">请选择职业</option>
                {OCCUPATIONS.map((o) => (
                  <option key={o} value={o}>
                    {o}
                  </option>
                ))}
              </select>
            </div>

            {/* 学历 */}
            <div>
              <label
                htmlFor="education"
                className="mb-1.5 block text-sm font-medium text-gray-700"
              >
                学历
              </label>
              <select
                id="education"
                value={form.education}
                onChange={(e) => updateField("education", e.target.value)}
                className="w-full rounded-xl border border-gray-200 px-4 py-3 text-gray-900 transition-colors focus:border-[#ff4d4f] focus:outline-none focus:ring-2 focus:ring-[#ff4d4f]/20"
              >
                <option value="">请选择学历</option>
                {EDUCATIONS.map((e) => (
                  <option key={e} value={e}>
                    {e}
                  </option>
                ))}
              </select>
            </div>

            {/* 微信号 */}
            <div>
              <label
                htmlFor="wechat"
                className="mb-1.5 block text-sm font-medium text-gray-700"
              >
                微信号 <span className="text-[#ff4d4f]">*</span>
              </label>
              <input
                id="wechat"
                type="text"
                value={form.wechat}
                onChange={(e) => updateField("wechat", e.target.value)}
                required
                placeholder="用于联系你加入社群"
                className="w-full rounded-xl border border-gray-200 px-4 py-3 text-gray-900 placeholder-gray-400 transition-colors focus:border-[#ff4d4f] focus:outline-none focus:ring-2 focus:ring-[#ff4d4f]/20"
              />
            </div>

            {/* 手机号 */}
            <div>
              <label
                htmlFor="phone"
                className="mb-1.5 block text-sm font-medium text-gray-700"
              >
                手机号
              </label>
              <div className="flex rounded-xl border border-gray-200 bg-white transition-colors focus-within:border-[#ff4d4f] focus-within:ring-2 focus-within:ring-[#ff4d4f]/20">
                <span className="flex items-center border-r border-gray-200 px-4 py-3 text-sm text-gray-500">
                  +86
                </span>
                <input
                  id="phone"
                  type="tel"
                  value={form.phone}
                  onChange={(e) => updateField("phone", e.target.value)}
                  placeholder="选填"
                  className="flex-1 rounded-r-xl border-0 px-4 py-3 text-gray-900 placeholder-gray-400 focus:ring-0"
                />
              </div>
            </div>

            {/* 简单介绍自己 */}
            <div>
              <label
                htmlFor="intro"
                className="mb-1.5 block text-sm font-medium text-gray-700"
              >
                简单介绍自己
              </label>
              <textarea
                id="intro"
                rows={3}
                value={form.intro}
                onChange={(e) => updateField("intro", e.target.value)}
                placeholder="简单介绍一下你的背景、兴趣或加入原因..."
                className="w-full resize-none rounded-xl border border-gray-200 px-4 py-3 text-gray-900 placeholder-gray-400 transition-colors focus:border-[#ff4d4f] focus:outline-none focus:ring-2 focus:ring-[#ff4d4f]/20"
              />
            </div>

            {/* Submit */}
            <div className="pt-2">
              <button
                type="submit"
                className="w-full rounded-xl bg-[#ff4d4f] px-4 py-3.5 font-semibold text-white transition-colors hover:bg-[#e64547] active:bg-[#cc3d3f]"
              >
                提交申请 →
              </button>
              <p className="mt-3 text-center text-xs text-gray-500">
                提交后，我们会在24小时内通过微信联系你
              </p>
            </div>
          </form>
        </div>
      </section>

      {/* Bottom: Trust Indicators */}
      <section className="border-t border-gray-200 bg-white px-4 py-10">
        <div className="mx-auto flex max-w-lg flex-wrap items-center justify-center gap-8 sm:gap-12">
          <div className="flex items-center gap-2">
            <span className="text-2xl font-bold text-gray-900">2,860+</span>
            <span className="text-sm text-gray-600">成员</span>
          </div>
          <div className="flex items-center gap-2">
            <span className="text-2xl font-bold text-gray-900">30+</span>
            <span className="text-sm text-gray-600">城市</span>
          </div>
          <div className="flex items-center gap-2">
            <span className="text-2xl font-bold text-gray-900">每月 8+</span>
            <span className="text-sm text-gray-600">聚会</span>
          </div>
        </div>
      </section>
    </div>
  );
}