a3:I[903690,["/chat-static/_next/static/immutable/chunks/2dv44dxappuuk.js","/chat-static/_next/static/immutable/chunks/1oa3bat8-m8-8.js","/chat-static/_next/static/immutable/chunks/3hhljswb3xr61.js","/chat-static/_next/static/immutable/chunks/0r3s70ucno8tj.js","/chat-static/_next/static/immutable/chunks/047caungpv2oe.js","/chat-static/_next/static/immutable/chunks/0ur16xcze8_1h.js","/chat-static/_next/static/immutable/chunks/37c0b4etzd24w.js","/chat-static/_next/static/immutable/chunks/17anht-a4gnim.js","/chat-static/_next/static/immutable/chunks/30wqhens5cioe.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/39d5rx2m7s5ra.js","/chat-static/_next/static/immutable/chunks/1pywt1h873bd3.js","/chat-static/_next/static/immutable/chunks/3h47h0tu6ra94.js","/chat-static/_next/static/immutable/chunks/3py7oec8qvsc4.js","/chat-static/_next/static/immutable/chunks/1nfwdr83o8uz6.js","/chat-static/_next/static/immutable/chunks/124-9p7b20n8-.js","/chat-static/_next/static/immutable/chunks/3i83l5x0zfxvu.js","/chat-static/_next/static/immutable/chunks/03sr8-zctjh6i.js","/chat-static/_next/static/immutable/chunks/0f2nmau4qedmf.js","/chat-static/_next/static/immutable/chunks/3ms522oj0w1q6.js","/chat-static/_next/static/immutable/chunks/1eb1rdocf1tga.js","/chat-static/_next/static/immutable/chunks/33g364dont6bc.js","/chat-static/_next/static/immutable/chunks/02yydb8nw8axw.js","/chat-static/_next/static/immutable/chunks/2dfjxmcoo1tp2.js","/chat-static/_next/static/immutable/chunks/1juzrssbfor2n.js","/chat-static/_next/static/immutable/chunks/3_zne-oxp3ex8.js","/chat-static/_next/static/immutable/chunks/3r6d4w8uj6sbf.js","/chat-static/_next/static/immutable/chunks/0j-1w-w1bwtmq.js","/chat-static/_next/static/immutable/chunks/22zcd0a4pqnpj.js","/chat-static/_next/static/immutable/chunks/1w8d3y23yrgcx.js","/chat-static/_next/static/immutable/chunks/0ffu4on7pnel3.js","/chat-static/_next/static/immutable/chunks/010_gl05brgju.js","/chat-static/_next/static/immutable/chunks/2-ea-d4zcky46.js","/chat-static/_next/static/immutable/chunks/1313h03o0y7tq.js","/chat-static/_next/static/immutable/chunks/0-u2qi7_ipvhl.js","/chat-static/_next/static/immutable/chunks/0l--bazl3wxtg.js","/chat-static/_next/static/immutable/chunks/1_w1a0k3s_k4l.js","/chat-static/_next/static/immutable/chunks/2btv83pt9ymj7.js","/chat-static/_next/static/immutable/chunks/14xmhcwc5tega.js","/chat-static/_next/static/immutable/chunks/43u74n7ep_04-.js","/chat-static/_next/static/immutable/chunks/23pqwf8g6d7y_.js","/chat-static/_next/static/immutable/chunks/390wp66z9uy53.js","/chat-static/_next/static/immutable/chunks/22fm17k3ppj96.js","/chat-static/_next/static/immutable/chunks/0wa14r29vk-50.js","/chat-static/_next/static/immutable/chunks/3af4iuglo00u7.js","/chat-static/_next/static/immutable/chunks/2nsejysme7n9p.js","/chat-static/_next/static/immutable/chunks/3ua-hupun3u5v.js","/chat-static/_next/static/immutable/chunks/16np61ungf97_.js","/chat-static/_next/static/immutable/chunks/0fgd-m5aeb97-.js","/chat-static/_next/static/immutable/chunks/1dyan6tyb3vqy.js","/chat-static/_next/static/immutable/chunks/0ilzxtsq9fh87.js"],"ExplicitChatIdProvider"] a4:I[838238,["/chat-static/_next/static/immutable/chunks/2dv44dxappuuk.js","/chat-static/_next/static/immutable/chunks/1oa3bat8-m8-8.js","/chat-static/_next/static/immutable/chunks/3hhljswb3xr61.js","/chat-static/_next/static/immutable/chunks/0r3s70ucno8tj.js","/chat-static/_next/static/immutable/chunks/047caungpv2oe.js","/chat-static/_next/static/immutable/chunks/0ur16xcze8_1h.js","/chat-static/_next/static/immutable/chunks/37c0b4etzd24w.js","/chat-static/_next/static/immutable/chunks/17anht-a4gnim.js","/chat-static/_next/static/immutable/chunks/30wqhens5cioe.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/39d5rx2m7s5ra.js","/chat-static/_next/static/immutable/chunks/1pywt1h873bd3.js","/chat-static/_next/static/immutable/chunks/3h47h0tu6ra94.js","/chat-static/_next/static/immutable/chunks/3py7oec8qvsc4.js","/chat-static/_next/static/immutable/chunks/1nfwdr83o8uz6.js","/chat-static/_next/static/immutable/chunks/124-9p7b20n8-.js","/chat-static/_next/static/immutable/chunks/3i83l5x0zfxvu.js","/chat-static/_next/static/immutable/chunks/03sr8-zctjh6i.js","/chat-static/_next/static/immutable/chunks/0f2nmau4qedmf.js","/chat-static/_next/static/immutable/chunks/3ms522oj0w1q6.js","/chat-static/_next/static/immutable/chunks/1eb1rdocf1tga.js","/chat-static/_next/static/immutable/chunks/33g364dont6bc.js","/chat-static/_next/static/immutable/chunks/02yydb8nw8axw.js","/chat-static/_next/static/immutable/chunks/2dfjxmcoo1tp2.js","/chat-static/_next/static/immutable/chunks/1juzrssbfor2n.js","/chat-static/_next/static/immutable/chunks/3_zne-oxp3ex8.js","/chat-static/_next/static/immutable/chunks/3r6d4w8uj6sbf.js","/chat-static/_next/static/immutable/chunks/0j-1w-w1bwtmq.js","/chat-static/_next/static/immutable/chunks/22zcd0a4pqnpj.js","/chat-static/_next/static/immutable/chunks/1w8d3y23yrgcx.js","/chat-static/_next/static/immutable/chunks/0ffu4on7pnel3.js","/chat-static/_next/static/immutable/chunks/010_gl05brgju.js","/chat-static/_next/static/immutable/chunks/2-ea-d4zcky46.js","/chat-static/_next/static/immutable/chunks/1313h03o0y7tq.js","/chat-static/_next/static/immutable/chunks/0-u2qi7_ipvhl.js","/chat-static/_next/static/immutable/chunks/0l--bazl3wxtg.js","/chat-static/_next/static/immutable/chunks/1_w1a0k3s_k4l.js","/chat-static/_next/static/immutable/chunks/2btv83pt9ymj7.js","/chat-static/_next/static/immutable/chunks/14xmhcwc5tega.js","/chat-static/_next/static/immutable/chunks/43u74n7ep_04-.js","/chat-static/_next/static/immutable/chunks/23pqwf8g6d7y_.js","/chat-static/_next/static/immutable/chunks/390wp66z9uy53.js","/chat-static/_next/static/immutable/chunks/22fm17k3ppj96.js","/chat-static/_next/static/immutable/chunks/0wa14r29vk-50.js","/chat-static/_next/static/immutable/chunks/3af4iuglo00u7.js","/chat-static/_next/static/immutable/chunks/2nsejysme7n9p.js","/chat-static/_next/static/immutable/chunks/3ua-hupun3u5v.js","/chat-static/_next/static/immutable/chunks/16np61ungf97_.js","/chat-static/_next/static/immutable/chunks/0fgd-m5aeb97-.js","/chat-static/_next/static/immutable/chunks/1dyan6tyb3vqy.js","/chat-static/_next/static/immutable/chunks/0ilzxtsq9fh87.js"],"SWRDataProvider"] a6:[] a7:[["b_z2OJ2b34Lb9",null],["b_hNESnljr6WJ",null],["b_rZgUD5DYWFA",null],["b_ZBLrjH63wyy",null],["b_QO9P7vZpDOj",null],["b_ivSL5BQE1E2",null],["b_61Uh6vWMG0h",null],["b_laZZW5thuFu",null],["b_MJeadJ8lRCb",null]] a8:[["b_z2OJ2b34Lb9",{"templateVersionId":null,"templateCanonId":null}],["b_hNESnljr6WJ",{"templateVersionId":null,"templateCanonId":null}],["b_rZgUD5DYWFA",{"templateVersionId":null,"templateCanonId":null}],["b_ZBLrjH63wyy",{"templateVersionId":null,"templateCanonId":null}],["b_QO9P7vZpDOj",{"templateVersionId":null,"templateCanonId":null}],["b_ivSL5BQE1E2",{"templateVersionId":null,"templateCanonId":null}],["b_61Uh6vWMG0h",{"templateVersionId":null,"templateCanonId":null}],["b_laZZW5thuFu",{"templateVersionId":null,"templateCanonId":null}],["b_MJeadJ8lRCb",{"templateVersionId":null,"templateCanonId":null}]] a9:[["b_qaHX6Pb1yej","$D2025-11-19T11:42:53.267Z"],["b_L5zHgEdf1NB","$D2025-11-19T11:44:25.993Z"],["b_fd3Y7JLWRMr","$D2025-11-19T11:44:55.069Z"],["b_h9u2xRhr6Ay","$D2025-11-19T11:45:12.398Z"],["b_hMnipk5PkDu","$D2025-11-19T11:45:24.848Z"],["b_wu3FW9BVIOJ","$D2025-11-19T11:55:31.422Z"],["b_etNAeg5WH6K","$D2025-11-19T11:56:22.214Z"],["b_obKfX3K3awF","$D2025-11-19T11:57:32.325Z"],["b_FxE67J0ktob","$D2025-11-19T11:58:51.188Z"],["b_mjU5Lj70fZu","$D2025-11-19T12:00:00.335Z"],["b_5VE5SRpzGh6","$D2025-11-19T12:10:45.563Z"],["b_xKiQOGsrrBk","$D2025-11-19T12:14:16.464Z"],["b_OfD3xjVTqaA","$D2025-11-19T12:15:03.010Z"],["b_ju6X4AKTc09","$D2025-11-19T12:15:48.808Z"],["b_jY2xH0G4IqV","$D2025-11-19T12:19:32.634Z"],["b_gcnXkc8WyEa","$D2025-11-19T12:19:45.041Z"],["b_nNGg86cKNva","$D2025-11-19T12:19:59.130Z"],["b_t7HTqZkAILq","$D2025-11-19T22:22:01.298Z"],["b_NMSMds4scs2","$D2025-11-19T22:22:58.915Z"],["b_mBuWYRGaMXy","$D2025-11-19T22:23:34.241Z"],["b_Vc9Zx918x27","$D2025-11-19T22:24:01.126Z"],["b_GYL2cFd1xB0","$D2025-11-20T01:59:11.342Z"],["b_39XYu4yR5ui","$D2025-11-20T01:59:32.921Z"],["b_zfvmUAsVBul","$D2025-11-20T02:00:03.575Z"],["b_TTCBa4DqfvE","$D2025-11-20T02:00:28.145Z"],["b_kKe5q51OaDG","$D2025-11-20T02:01:04.136Z"],["b_FL9l6Xueb3a","$D2025-11-20T02:59:14.206Z"],["b_nsttDfkARSU","$D2025-11-20T02:59:30.989Z"],["b_l9okiIkmAWc","$D2025-11-20T02:59:56.494Z"],["b_U4nv3a5xeXZ","$D2025-11-20T03:00:14.618Z"],["b_SBgTqwvHKh4","$D2025-11-20T03:00:47.779Z"],["b_DZYBePHRbuU","$D2025-11-20T03:01:53.801Z"],["b_RHnCEThkFr7","$D2025-11-20T03:13:20.337Z"],["b_FKk8FxxVloZ","$D2025-11-20T03:13:37.610Z"],["b_2A1rDKUeZR6","$D2025-11-21T08:28:12.196Z"],["b_7N5h7V01yPM","$D2025-11-21T08:46:02.411Z"],["b_TbNJHAFcleo","$D2025-11-21T08:50:36.280Z"],["b_VZGLh2AUTPg","$D2025-11-22T03:52:57.101Z"],["b_18uaCO3khjH","$D2025-11-22T05:27:11.015Z"],["b_UsLypXgpu2W","$D2025-11-22T05:33:13.281Z"],["b_bcNMJcGuF6D","$D2025-11-22T05:37:01.850Z"],["b_ZniXCHWUYJW","$D2025-11-22T05:38:41.545Z"],["b_SqxHYOdBhug","$D2025-11-22T07:29:28.183Z"],["b_hiklwR9oQ2M","$D2025-11-22T07:40:19.235Z"],["b_cKhutBB9XH8","$D2025-11-22T07:50:08.819Z"],["b_21icYfZZoOP","$D2025-11-22T07:55:22.045Z"],["b_r5WRADJvUbQ","$D2025-11-24T03:48:38.421Z"],["b_NkEcpRiDQrm","$D2025-11-24T03:56:39.422Z"],["b_eBYRCbJsT05","$D2025-11-24T04:24:38.893Z"],["b_naxHgt7VkSZ","$D2025-11-24T04:26:44.570Z"],["b_zaSGvRqXWiR","$D2025-11-24T04:30:19.743Z"],["b_kGICUFNQkGL","$D2025-11-24T04:33:33.785Z"],["b_Dz0iXADpBN3","$D2025-11-24T04:55:39.202Z"],["b_dPniENbc5Ec","$D2025-11-24T04:56:52.737Z"],["b_mJ0ydXJb4y0","$D2025-11-24T05:03:53.741Z"],["b_Bgk9yrWYB8j","$D2025-11-24T05:04:49.979Z"],["b_rk2iYE4Vw2m","$D2025-11-24T05:05:53.454Z"],["b_dLlFwYlvGfE","$D2025-11-24T05:07:13.552Z"],["b_uoErnwpxmRb","$D2025-11-24T05:14:03.334Z"],["b_NR1hps9ZMVL","$D2025-11-24T05:15:26.596Z"],["b_cuqYTgfO22B","$D2025-11-24T05:23:39.951Z"],["b_u0ctIPADUub","$D2025-11-24T05:24:35.831Z"],["b_jebJ9zmIBDL","$D2025-11-24T08:45:24.499Z"],["b_Ezvccxn7poK","$D2025-11-24T08:46:32.261Z"],["b_ONmyVmROzXX","$D2025-11-24T08:48:03.716Z"],["b_64cZyq6YdC0","$D2025-11-24T08:48:39.964Z"],["b_HNfcZagHSc8","$D2025-11-24T08:50:43.112Z"],["b_38lUr11Kx2I","$D2025-11-25T02:28:33.123Z"],["b_vwLb0kfyGzB","$D2025-11-25T02:39:42.497Z"],["b_VFTxZGMpdic","$D2025-11-25T02:47:08.295Z"],["b_E8AFyCfW0kf","$D2025-11-25T03:40:09.356Z"],["b_CW5PyznFlHw","$D2025-11-25T07:28:47.037Z"],["b_JWcqBoD0UV9","$D2025-11-28T10:59:26.066Z"],["b_4IUs6HBLlNj","$D2025-11-28T10:59:51.709Z"],["b_tWQO9fd7Fas","$D2025-11-28T11:00:04.879Z"],["b_FujRl1ldTuW","$D2025-11-28T11:04:05.036Z"],["b_VjfNFMQjRTM","$D2025-12-01T06:11:33.906Z"],["b_WCxi0tyYxID","$D2025-12-01T11:25:36.061Z"],["b_d4DhI8vzz8a","$D2025-12-01T11:32:56.356Z"],["b_OJ3JBRe6tQI","$D2025-12-01T11:42:32.650Z"],["b_V8F3oXt7z3x","$D2025-12-01T11:42:44.867Z"],["b_bKD99DfUkLh","$D2025-12-01T11:46:50.825Z"],["b_jM06W7bshos","$D2025-12-01T11:57:43.370Z"],["b_cAk2BmkqXfZ","$D2025-12-01T12:02:04.655Z"],["b_nD6dHRCfyS0","$D2025-12-01T12:08:47.845Z"],["b_2VwyEBb71VE","$D2025-12-01T12:09:12.758Z"],["b_nJWxClEPr5y","$D2025-12-01T12:11:29.103Z"],["b_ldFUuJY9xDO","$D2025-12-01T12:17:07.081Z"],["b_wUHQxFM1Dp1","$D2025-12-01T12:22:48.732Z"],["b_SPLBOHEBxL7","$D2025-12-01T12:26:08.865Z"],["b_NnS7gR92bN0","$D2025-12-01T12:26:40.218Z"],["b_wu1WZ715XGW","$D2025-12-01T12:28:33.380Z"],["b_odeFnQPCnZv","$D2025-12-01T12:33:29.568Z"],["b_SyTIDy1d3p7","$D2025-12-01T12:35:23.961Z"],["b_iCCO5rtvfh8","$D2025-12-01T12:37:47.871Z"],["b_I9q2R0oiMiX","$D2025-12-01T12:44:49.779Z"],["b_3GkuF1vGEuB","$D2025-12-01T12:48:33.949Z"],["b_HmLKcb7x5JJ","$D2025-12-01T12:50:20.512Z"],["b_Uq9CNyDIU5W","$D2025-12-01T12:57:24.316Z"],["b_9BYLARthP5N","$D2025-12-01T13:06:08.906Z"],["b_SyfzbTntNdl","$D2025-12-01T13:08:25.460Z"],["b_ESIxLh23kK3","$D2025-12-01T13:10:19.755Z"],["b_bwaZnpWrEXJ","$D2025-12-01T13:11:06.371Z"],["b_sTYye5nWNWH","$D2025-12-01T13:14:37.462Z"],["b_dN6RABobskF","$D2025-12-03T14:38:41.346Z"],["b_ywHNM5ej16G","$D2025-12-03T14:44:42.163Z"],["b_VSDVmvUPDR0","$D2025-12-03T14:45:05.719Z"],["b_8GUCkRWRqZW","$D2025-12-03T14:53:26.335Z"],["b_2vcDet4trAq","$D2025-12-03T14:58:40.319Z"],["b_IOAhZwZBCB1","$D2025-12-03T15:03:42.512Z"],["b_hLJv0u40cKj","$D2025-12-19T09:34:58.702Z"],["b_KlasybNmFUZ","$D2025-12-19T10:03:43.467Z"],["b_5imMR2TgwIg","$D2026-01-04T04:19:35.404Z"],["b_2omZqkeBwIm","$D2026-01-04T04:23:00.028Z"],["b_hQiQshoNQKX","$D2026-01-04T04:27:08.036Z"],["b_TUe79poG7lZ","$D2026-01-04T04:28:17.946Z"],["b_jsbqlCWmYZQ","$D2026-01-04T04:30:39.082Z"],["b_GViZS9XO5LW","$D2026-01-04T04:35:24.360Z"],["b_z7DM5iGhMk5","$D2026-01-04T04:37:08.478Z"],["b_aN6Ri0y6apo","$D2026-01-04T04:38:33.876Z"],["b_BQ5O9zJb52q","$D2026-01-04T04:50:15.951Z"],["b_RGqNm6bcuAJ","$D2026-01-04T04:54:54.715Z"],["b_cQfwllK7oF2","$D2026-01-04T04:55:27.416Z"],["b_RrxR6vmGpug","$D2026-01-04T04:56:01.809Z"],["b_9mDdv7rrfN5","$D2026-01-04T04:59:51.316Z"],["b_FKCm18wyCxR","$D2026-01-04T05:00:24.396Z"],["b_6L26iJxmaV2","$D2026-01-04T05:01:17.755Z"],["b_z2OJ2b34Lb9","$D2026-01-04T08:42:18.328Z"],["b_hNESnljr6WJ","$D2026-01-05T03:14:36.363Z"],["b_rZgUD5DYWFA","$D2026-01-05T03:24:08.690Z"],["b_ZBLrjH63wyy","$D2026-01-05T03:25:20.816Z"],["b_QO9P7vZpDOj","$D2026-01-05T03:26:22.274Z"],["b_ivSL5BQE1E2","$D2026-01-05T03:27:07.518Z"],["b_61Uh6vWMG0h","$D2026-01-05T03:27:51.185Z"],["b_laZZW5thuFu","$D2026-01-05T03:28:31.882Z"],["b_MJeadJ8lRCb","$D2026-01-05T03:29:18.364Z"]] aa:[["b_z2OJ2b34Lb9",false],["b_hNESnljr6WJ",false],["b_rZgUD5DYWFA",false],["b_ZBLrjH63wyy",false],["b_QO9P7vZpDOj",false],["b_ivSL5BQE1E2",false],["b_61Uh6vWMG0h",false],["b_laZZW5thuFu",false],["b_MJeadJ8lRCb",false]] ab:[["b_z2OJ2b34Lb9","$undefined"],["b_hNESnljr6WJ","$undefined"],["b_rZgUD5DYWFA","$undefined"],["b_ZBLrjH63wyy","$undefined"],["b_QO9P7vZpDOj","$undefined"],["b_ivSL5BQE1E2","$undefined"],["b_61Uh6vWMG0h","$undefined"],["b_laZZW5thuFu","$undefined"],["b_MJeadJ8lRCb","$undefined"]] ac:[["b_z2OJ2b34Lb9",null],["b_hNESnljr6WJ",null],["b_rZgUD5DYWFA",null],["b_ZBLrjH63wyy",null],["b_QO9P7vZpDOj",null],["b_ivSL5BQE1E2",null],["b_61Uh6vWMG0h",null],["b_laZZW5thuFu",null],["b_MJeadJ8lRCb",null]] ad:[["b_z2OJ2b34Lb9",true],["b_hNESnljr6WJ",true],["b_rZgUD5DYWFA",true],["b_ZBLrjH63wyy",true],["b_QO9P7vZpDOj",true],["b_ivSL5BQE1E2",true],["b_61Uh6vWMG0h",true],["b_laZZW5thuFu",true],["b_MJeadJ8lRCb",true]] ae:[["b_z2OJ2b34Lb9",true],["b_hNESnljr6WJ",true],["b_rZgUD5DYWFA",true],["b_ZBLrjH63wyy",true],["b_QO9P7vZpDOj",true],["b_ivSL5BQE1E2",true],["b_61Uh6vWMG0h",true],["b_laZZW5thuFu",true],["b_MJeadJ8lRCb",true]] af:[] b0:Tb90a1,[V0_FILE]typescriptreact:file="lib/utils.ts" isMerged="true" import { type ClassValue, clsx } from "clsx"; import { twMerge } from "tailwind-merge"; export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } [V0_FILE]jpg:file="public/esports-tournament-stadium-neon-lights-crowd.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/esports-tournament-stadium-neon-lights-crowd-gdQl9m0IlfTUKTbpKjJEAzqc9tX3RL.jpg" isMerged="true" [V0_FILE]png:file="public/esports-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/esports-logo-VFpyengLA4BoqhA4tHAII5EzEtJcJg.png" isMerged="true" [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.3", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.76", "framer-motion": "12.23.24", "crypto": "1.0.1", "dexie": "4.2.1" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]jpg:file="public/esports-gamer-girl-streaming-vertical.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/esports-gamer-girl-streaming-vertical-Oj9Qpv4PjloA0oQlPd4hTs9MgzbbsG.jpg" isMerged="true" [V0_FILE]png:file="public/diverse-avatars.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/diverse-avatars-K1qVYge2trPWCNm6kkjY04d7LcErVe.png" isMerged="true" [V0_FILE]jpg:file="public/avatar-3d-style.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/avatar-3d-style-oI5N8eXwBYqcDZkQcvY9imPuCTSGMh.jpg" isMerged="true" [V0_FILE]typescriptreact:file="app/pitch-deck/page.tsx" isMerged="true" "use client"; import { useState } from "react"; import { ChevronLeft, ChevronRight, TrendingUp, Users, Target, Zap, Award, DollarSign } from 'lucide-react'; import { motion, AnimatePresence } from "framer-motion"; import { cn } from "@/lib/utils"; // Slide Data based on the Business Plan const slides = [ { id: 1, title: "玩值电竞", subtitle: "专注打造比体育明星价值高10倍的电竞俱乐部", content: (

玩值电竞

让游戏玩家在电竞世界中
玩得有价值

), bg: "bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-blue-900/20 via-background to-background" }, { id: 2, title: "市场痛点与机会", subtitle: "电竞IP价值飞轮", content: (

超级中台运营模式

搭建数字化生态体系，总部直接赋能门店及员工，实现粉丝资产数字化评估。

), bg: "bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-purple-900/20 via-background to-background" }, { id: 3, title: "商业模式", subtitle: "全方位价值变现体系", content: (

), bg: "bg-[radial-gradient(ellipse_at_bottom_left,_var(--tw-gradient-stops))] from-pink-900/20 via-background to-background" }, { id: 4, title: "核心优势", subtitle: "为什么选择玩值电竞？", content: (

3个

稳定内容赋能

让你拥有3个AI员工：客服、企划、财务

18年

服务沉淀

深耕电竞行业，标准化的管理系统

3位

一体赋能

内容 + AI + 服务，全方位支持

), bg: "bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-blue-900/20 via-background to-background" }, { id: 5, title: "未来愿景", subtitle: "构建全球领先的电竞生态平台", content: (

玩值电竞

链接粉丝与游戏明星，让游戏玩家在电竞世界中玩得有价值。

赋能超级个体，助力其发展壮大，共同推动电竞产业发展。

), bg: "bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-green-900/20 via-background to-background" } ]; export default function PitchDeckPage() { const [currentSlide, setCurrentSlide] = useState(0); const nextSlide = () => { setCurrentSlide((prev) => (prev + 1) % slides.length); }; const prevSlide = () => { setCurrentSlide((prev) => (prev - 1 + slides.length) % slides.length); }; return (

{/* Background Effects */}

{/* Header */}

Business Plan 2025

{currentSlide + 1} / {slides.length}

{/* Slide Content */}

{slides[currentSlide].title} {slides[currentSlide].subtitle}

{slides[currentSlide].content}

{/* Controls */}

{slides.map((_, i) => (

))}

); } // Helper Components for Slides function Badge({ text }: { text: string }) { return ( {text} ); } function Card({ icon: Icon, title, desc }: { icon: any, title: string, desc: string }) { return (

{title}

{desc}

); } function ListItem({ number, title, desc }: { number: string, title: string, desc: string }) { return (

{number}

{title}

{desc}

); } [V0_FILE]png:file="public/diverse-group-avatars.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/diverse-group-avatars-j6vmB0vnVQjZRhHPLJdZ09AGwygUih.png" isMerged="true" [V0_FILE]png:file="public/abstract-geometric-shapes.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/abstract-geometric-shapes-kZodpXGM31YV1OwpENLkB4vSYvBL4Y.png" isMerged="true" [V0_FILE]jpg:file="public/lol.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/lol-A9ZyNnqEmB5CMYqC6tXD1wTZvx8frd.jpg" isMerged="true" [V0_FILE]typescriptreact:file="app/moments/[id]/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" // Convert to client component import { Heart, MessageCircle, Share2, Gift, ArrowLeft, Send, BookOpen } from 'lucide-react'; import Image from "next/image"; import Link from "next/link"; import { toast } from "@/hooks/use-toast"; // Import toast // Mock data - in a real app this would come from an API based on params.id const momentData = { id: 1, user: "GM-远洋", avatar: "/gamer-girl-headphones.jpg", desc: "可惜不是你喜欢的甜妹音 😷 #电竞少女 #英雄联盟 #日常", video: "/esports-gamer-girl-streaming-vertical.jpg", likes: "1.2w", comments: 458, isLive: true, hasCourse: true, courseId: "101", courseTitle: "打野进阶课：从入门到王者", commentsList: [ { user: "User1", text: "声音好听！", time: "1m ago" }, { user: "User2", text: "求BGM", time: "5m ago" }, { user: "User3", text: "这波操作666", time: "10m ago" }, ] }; export default function MomentDetailPage({ params }: { params: { id: string } }) { const handleLike = () => toast({ title: "点赞成功", description: "已添加到我喜欢的视频" }); const handleShare = () => toast({ title: "分享成功", description: "链接已复制到剪贴板" }); const handleGift = () => toast({ title: "礼物发送成功", description: "主播已收到您的心意" }); return (

{/* Header */}

{momentData.user}

{/* Video Area */}

{/* Right Sidebar Actions */}

{/* Bottom Info */}

{/* Course Link */} {momentData.hasCourse && (

同款课程

{momentData.courseTitle}

去学习

)}

@{momentData.user}

{momentData.desc}

{/* Comment Input Mock */}

说点什么...

); } [V0_FILE]typescriptreact:file="app/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/my-courses/page.tsx" isMerged="true" "use client" import { ArrowLeft, PlayCircle, Clock, BookOpen } from "lucide-react" import { useRouter } from "next/navigation" import Image from "next/image" import { Button } from "@/components/ui/button" import { useAppContext } from "@/components/providers/app-provider" export default function MyCoursesPage() { const router = useRouter() const { orders } = useAppContext() // Filter orders for courses (assuming type 'product' or specific title match for now as mock) // In a real app, we'd have a specific 'course' type const courses = orders.filter((o) => o.title.includes("课程") || o.title.includes("教学")) return (

我的课程

{courses.length > 0 ? ( courses.map((course, i) => (

{course.title}

45分钟 3/12节

)) ) : (

暂无课程

)}

) } [V0_FILE]typescriptreact:file="app/orders/page.tsx" isEdit="true" isMerged="true" "use client" import { ArrowLeft, ShoppingBag, Clock, CheckCircle2, XCircle, RotateCcw } from "lucide-react" import { useRouter } from "next/navigation" import Image from "next/image" import { useAppContext } from "@/components/providers/app-provider" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Button } from "@/components/ui/button" import Link from "next/link" export default function OrdersPage() { const router = useRouter() const { orders } = useAppContext() const getStatusColor = (status: string) => { switch (status) { case "completed": return "text-green-500" case "pending": return "text-yellow-500" case "cancelled": return "text-red-500" case "refunded": return "text-blue-500" default: return "text-foreground/50" } } const getStatusIcon = (status: string) => { switch (status) { case "completed": return case "pending": return case "cancelled": return case "refunded": return default: return null } } const getStatusText = (status: string) => { switch (status) { case "completed": return "已完成" case "pending": return "进行中" case "cancelled": return "已取消" case "refunded": return "已退款" default: return status } } const getTypeText = (type: string) => { switch (type) { case "service": return "陪玩服务" case "product": return "商城商品" case "course": return "课程购买" case "hotel": return "酒店预订" case "cafe": return "网咖抢座" case "recharge": return "充值订单" case "pawn": return "账号典当" default: return "其他" } } const displayOrders = orders.filter((o) => o.type !== "recharge") return (

订单中心

全部服务商品预订

{["all", "service", "product", "hotel"].map((tab) => ( {displayOrders.filter( (o) => tab === "all" || o.type === tab || (tab === "hotel" && (o.type === "hotel" || o.type === "cafe")), ).length > 0 ? ( displayOrders .filter( (o) => tab === "all" || o.type === tab || (tab === "hotel" && (o.type === "hotel" || o.type === "cafe")), ) .map((order, i) => (

{order.date} {getTypeText(order.type)}

{getStatusIcon(order.status)} {getStatusText(order.status)}

{order.title}

订单号: {order.orderNo || order.id}

数量: 1

{order.price} 币

)) ) : (

暂无订单

)} ))}

) } [V0_FILE]typescriptreact:file="app/creator/apply/page.tsx" isMerged="true" "use client" import type React from "react" import { ArrowLeft, Star, Upload, CheckCircle2 } from "lucide-react" import { useRouter } from "next/navigation" import { Button } from "@/components/ui/button" import { toast } from "@/hooks/use-toast" import { useState } from "react" export default function ApplyCreatorPage() { const router = useRouter() const [formData, setFormData] = useState({ realName: "", phone: "", game: "", rank: "", experience: "", price: "", }) const handleSubmit = (e: React.FormEvent) => { e.preventDefault() toast({ title: "申请已提交", description: "我们会在3个工作日内审核您的申请", }) setTimeout(() => router.push("/profile"), 1500) } return (

{/* Header */}

申请大神

{/* Info Banner */}

成为大神，开启副业

通过审核后，您可以在平台接单陪玩、开设课程、直播带货，月入过万不是梦！

{/* Benefits */}

{[ { icon: "💰", label: "高额收益", desc: "自由定价" }, { icon: "🎯", label: "精准匹配", desc: "智能推荐" }, { icon: "🛡️", label: "平台保障", desc: "安全可靠" }, ].map((item, i) => (

{item.icon}

{item.label}

{item.desc}

))}

{/* Application Form */}

基本信息

真实姓名 setFormData({ ...formData, realName: e.target.value })} className="w-full px-3 py-2 rounded-lg bg-white/5 border border-white/10 text-sm focus:border-primary focus:outline-none" placeholder="请输入真实姓名" />

联系电话 setFormData({ ...formData, phone: e.target.value })} className="w-full px-3 py-2 rounded-lg bg-white/5 border border-white/10 text-sm focus:border-primary focus:outline-none" placeholder="请输入手机号" />

擅长游戏

游戏段位 setFormData({ ...formData, rank: e.target.value })} className="w-full px-3 py-2 rounded-lg bg-white/5 border border-white/10 text-sm focus:border-primary focus:outline-none" placeholder="如：王者100星、传奇" />

从业经验

setFormData({ ...formData, experience: e.target.value })}
                  className="w-full px-3 py-2 rounded-lg bg-white/5 border border-white/10 text-sm focus:border-primary focus:outline-none resize-none"
                  rows={3}
                  placeholder="简单介绍您的游戏经历和成就"
                />
              </div>

<div>
                <label className="text-xs text-white/60 mb-1 block">期望价格（币/局）</label>
                <input
                  type="number"
                  required
                  value={formData.price}
                  onChange={(e) => setFormData({ ...formData, price: e.target.value })}
                  className="w-full px-3 py-2 rounded-lg bg-white/5 border border-white/10 text-sm focus:border-primary focus:outline-none"
                  placeholder="建议30-200币/局"
                />
              </div>
            </div>
          </div>

<div className="glass-card p-4 rounded-xl">
            <h3 className="font-bold text-sm mb-3 flex items-center gap-2">
              <Upload size={16} className="text-blue-400" />
              上传证明材料
            </h3>
            <div className="border-2 border-dashed border-white/10 rounded-lg p-6 text-center hover:border-primary/50 transition-colors cursor-pointer">
              <Upload className="mx-auto mb-2 text-white/40" size={32} />
              <p className="text-xs text-white/60">点击上传游戏截图或段位证明</p>
              <p className="text-[10px] text-white/40 mt-1">支持 JPG、PNG 格式，最大 5MB</p>
            </div>
          </div>

<p className="text-xs text-white/40 text-center leading-relaxed">
            提交申请即表示您同意《大神服务协议》和《平台规则》
          </p>
        </form>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/messages/page.tsx" isEdit="true" isMerged="true"
"use client"

import { ArrowLeft, Bell, MoreHorizontal, MessageCircle, Users } from "lucide-react"
import Link from "next/link"
import Image from "next/image"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

export default function MessagesPage() {
  const messages = [
    {
      id: 1,
      user: "GM-远洋",
      avatar: "/streamer-1.jpg",
      content: "大神，今晚有空带我上分吗？",
      time: "10:30",
      unread: 2,
      type: "chat",
    },
    {
      id: 2,
      user: "系统通知",
      avatar: "/esports-logo.png",
      content: "您的陪玩申请已通过审核，快去接单吧！",
      time: "昨天",
      unread: 0,
      type: "system",
    },
    {
      id: 3,
      user: "小柠檬",
      avatar: "/cp-avatar-2.jpg",
      content: "谢谢你的礼物！下次一起玩呀~",
      time: "昨天",
      unread: 0,
      type: "chat",
    },
    {
      id: 4,
      user: "车队助手",
      avatar: "/esports-team-logo.jpg",
      content: "您申请加入的【王者荣耀五排车队】已同意",
      time: "前天",
      unread: 1,
      type: "system",
    },
    {
      id: 5,
      user: "电竞酒店客服",
      avatar: "/hotel-icon.jpg",
      content: "您预订的电竞双人房已确认，期待您的光临~",
      time: "3天前",
      unread: 0,
      type: "system",
    },
    {
      id: 6,
      user: "梦之队·队长",
      avatar: "/streamer-3.jpg",
      content: "欢迎加入我们的战队！有空一起训练",
      time: "3天前",
      unread: 0,
      type: "chat",
    },
  ]

return (
    <div className="min-h-screen bg-background pb-20">
      {/* Header */}
      <header className="sticky top-0 z-40 glass px-4 py-3 flex items-center justify-between">
        <div className="flex items-center gap-4">
          <Link href="/" className="p-2 -ml-2 rounded-full hover:bg-white/10 transition-colors">
            <ArrowLeft size={20} />
          </Link>
          <h1 className="font-bold text-lg">消息中心</h1>
        </div>
        <button className="p-2 rounded-full hover:bg-white/10 transition-colors">
          <MoreHorizontal size={20} />
        </button>
      </header>

<TabsContent value="chat" className="mt-4 px-4 space-y-2">
          {messages
            .filter((m) => m.type === "chat")
            .map((msg) => (
              <Link
                key={msg.id}
                href={`/chat/${msg.id}`}
                className="flex items-center gap-3 p-3 rounded-xl hover:bg-white/5 transition-colors cursor-pointer"
              >
                <div className="relative">
                  <div className="w-12 h-12 rounded-full overflow-hidden border border-white/10 relative">
                    <Image src={msg.avatar || "/placeholder.svg"} alt={msg.user} fill className="object-cover" />
                  </div>
                  {msg.unread > 0 && (
                    <div className="absolute -top-1 -right-1 w-5 h-5 bg-red-500 rounded-full flex items-center justify-center text-[10px] font-bold border-2 border-background">
                      {msg.unread}
                    </div>
                  )}
                </div>
                <div className="flex-1 min-w-0">
                  <div className="flex items-center justify-between mb-1">
                    <h3 className="font-bold text-sm">{msg.user}</h3>
                    <span className="text-xs text-white/40">{msg.time}</span>
                  </div>
                  <p className="text-xs text-white/60 truncate">{msg.content}</p>
                </div>
              </Link>
            ))}
        </TabsContent>

<TabsContent value="notification" className="mt-4 px-4 space-y-2">
          {messages
            .filter((m) => m.type === "system")
            .map((msg) => (
              <div
                key={msg.id}
                className="flex items-center gap-3 p-3 rounded-xl hover:bg-white/5 transition-colors cursor-pointer"
              >
                <div className="w-12 h-12 rounded-full bg-primary/20 flex items-center justify-center border border-primary/30 relative overflow-hidden">
                  <Image src={msg.avatar || "/placeholder.svg"} alt={msg.user} fill className="object-cover" />
                </div>
                <div className="flex-1 min-w-0">
                  <div className="flex items-center justify-between mb-1">
                    <h3 className="font-bold text-sm">{msg.user}</h3>
                    <span className="text-xs text-white/40">{msg.time}</span>
                  </div>
                  <p className="text-xs text-white/60 truncate">{msg.content}</p>
                </div>
                {msg.unread > 0 && <div className="w-2 h-2 bg-red-500 rounded-full" />}
              </div>
            ))}
        </TabsContent>
      </Tabs>

<div className="px-4 mt-6">
        <h3 className="text-sm font-bold mb-3 text-white/80">快捷入口</h3>
        <div className="grid grid-cols-4 gap-4">
          <Link href="/guild" className="flex flex-col items-center gap-2">
            <div className="w-12 h-12 rounded-full bg-blue-500/20 flex items-center justify-center">
              <Users size={20} className="text-blue-400" />
            </div>
            <span className="text-xs text-white/60">公会群聊</span>
          </Link>
          <Link href="/cp" className="flex flex-col items-center gap-2">
            <div className="w-12 h-12 rounded-full bg-pink-500/20 flex items-center justify-center">
              <MessageCircle size={20} className="text-pink-400" />
            </div>
            <span className="text-xs text-white/60">CP聊天</span>
          </Link>
          <Link href="/coach" className="flex flex-col items-center gap-2">
            <div className="w-12 h-12 rounded-full bg-green-500/20 flex items-center justify-center">
              <MessageCircle size={20} className="text-green-400" />
            </div>
            <span className="text-xs text-white/60">陪练私信</span>
          </Link>
          <Link href="/star/1" className="flex flex-col items-center gap-2">
            <div className="w-12 h-12 rounded-full bg-purple-500/20 flex items-center justify-center">
              <MessageCircle size={20} className="text-purple-400" />
            </div>
            <span className="text-xs text-white/60">明星社群</span>
          </Link>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/moments/create/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { ChevronLeft, ImageIcon, Hash, MapPin, Smile } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Textarea } from "@/components/ui/textarea"
import { toast } from "@/hooks/use-toast"

export default function CreateMomentPage() {
  const router = useRouter()
  const [content, setContent] = useState("")

const handlePublish = () => {
    if (!content.trim()) {
      toast({ title: "内容不能为空", variant: "destructive" })
      return
    }
    toast({ title: "发布成功", description: "您的动态已发布" })
    setTimeout(() => router.back(), 1000)
  }

return (
    <div className="min-h-screen bg-background text-foreground pb-20">
      <header className="sticky top-0 z-10 bg-background/80 backdrop-blur-md px-4 py-3 flex items-center justify-between border-b border-white/5">
        <Button variant="ghost" size="icon" onClick={() => router.back()}>
          <ChevronLeft className="w-6 h-6" />
        </Button>
        <h1 className="font-bold text-lg">发布动态</h1>
        <Button size="sm" className="bg-primary hover:bg-primary/90 rounded-full px-4" onClick={handlePublish}>
          发布
        </Button>
      </header>

<div className="p-4 space-y-4">
        <Textarea
          placeholder="分享你的电竞生活..."
          className="min-h-[200px] bg-transparent border-none text-lg resize-none focus-visible:ring-0 p-0 placeholder:text-muted-foreground/50"
          value={content}
          onChange={(e) => setContent(e.target.value)}
        />

{/* Media Preview Area (Mock) */}
        <div className="grid grid-cols-3 gap-2">
          <div className="aspect-square rounded-xl bg-white/5 border border-white/10 flex flex-col items-center justify-center cursor-pointer hover:bg-white/10 transition-colors">
            <ImageIcon className="w-8 h-8 text-muted-foreground mb-2" />
            <span className="text-xs text-muted-foreground">添加图片/视频</span>
          </div>
        </div>

{/* Toolbar */}
        <div className="pt-4 border-t border-white/5 space-y-0">
          <Button variant="ghost" className="w-full justify-start gap-3 text-muted-foreground hover:text-white px-2">
            <Hash className="w-5 h-5" />
            <span>添加话题</span>
          </Button>
          <Button variant="ghost" className="w-full justify-start gap-3 text-muted-foreground hover:text-white px-2">
            <MapPin className="w-5 h-5" />
            <span>你在哪里</span>
          </Button>
          <Button variant="ghost" className="w-full justify-start gap-3 text-muted-foreground hover:text-white px-2">
            <Smile className="w-5 h-5" />
            <span>表情/动图</span>
          </Button>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/hotel/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/moments/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]jpg:file="public/esports-pro-gamer-male-jersey-confident.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/esports-pro-gamer-male-jersey-confident-Krt5mDf3HU8QRRtJDpakB1uOfBYXxr.jpg" isMerged="true"
[V0_FILE]jpg:file="public/abstract-energy.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/abstract-energy-CcbjspcS6qbJtEIfS5qwcvWhzvCxNV.jpg" isMerged="true"
[V0_FILE]png:file="public/esports-tournament.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/esports-tournament-AGRW8IR43EW4cOJu1nLNROLRQgOofd.png" isMerged="true"
[V0_FILE]jpg:file="public/gamer-girl-headphones.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/gamer-girl-headphones-eCbv1jHMZrgaS8gNFknoCJeCKEeuZF.jpg" isMerged="true"
[V0_FILE]jpg:file="public/female-streamer-vertical.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/female-streamer-vertical-VZ2ZnnPtyv55ic5RMjZpAU6rVMvy5a.jpg" isMerged="true"
[V0_FILE]jpg:file="public/cute-female-gamer.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/cute-female-gamer-QGh1xOOoQDtzFZuFjHrwxhuUcPFGLj.jpg" isMerged="true"
[V0_FILE]jpg:file="public/wow-gameplay.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/wow-gameplay-xhVc5S3vWX7hKLjKhtRl6Jv1e8096S.jpg" isMerged="true"
[V0_FILE]jpg:file="public/orc-warrior.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/orc-warrior-1gsu6UpBM9j49ws2CokyQbgjHN0Ntv.jpg" isMerged="true"
[V0_FILE]jpg:file="public/fps-gameplay-intense.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/fps-gameplay-intense-OWZlypyAo3kiV4kXVN1L0SE4jTc4Vr.jpg" isMerged="true"
[V0_FILE]jpg:file="public/tactical-gamer.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/tactical-gamer-M5B4WIu3PDMQOjXyrIYyaYYuNCyx6b.jpg" isMerged="true"
[V0_FILE]jpg:file="public/gamer-girl.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/gamer-girl-3wHUjtf3675H9246Vyk62NQzKuTscr.jpg" isMerged="true"
[V0_FILE]jpg:file="public/esports-streaming-vertical.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/esports-streaming-vertical-LdUmOnzsUzIaPjsu1jFWZ1p0tWgSZl.jpg" isMerged="true"
[V0_FILE]jpg:file="public/pro-gamer-male.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/pro-gamer-male-nAv5Z8LlLT14ywQwVMrqejZO3zUM8b.jpg" isMerged="true"
[V0_FILE]jpg:file="public/lol-gameplay-highlight.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/lol-gameplay-highlight-smnH1Z9JvmD1RKorY41CBvUr73OgpZ.jpg" isMerged="true"
[V0_FILE]jpg:file="public/wow-player.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/wow-player-OQracV52k3YQynIXkc4squ7bO69eap.jpg" isMerged="true"
[V0_FILE]jpg:file="public/esports-hotel-cyberpunk-room.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/esports-hotel-cyberpunk-room-7f5CeNH0TofyWPoAV4kEMjrEwXraF3.jpg" isMerged="true"
[V0_FILE]jpg:file="public/internet-cafe-luxury-interior.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/internet-cafe-luxury-interior-lxHokyFYk0akoQcNFGO4ZuNtHVZatg.jpg" isMerged="true"
[V0_FILE]jpg:file="public/gamer-avatar.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/gamer-avatar-H1SUET3RnXMcKd1XYQp2GDiADENKrZ.jpg" isMerged="true"
[V0_FILE]jpg:file="public/avatar-.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/avatar--QPvPQnQLwB2m0NNMYtZ89a0xl7qtP4.jpg" isMerged="true"
[V0_FILE]jpg:file="public/lol-gameplay.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/lol-gameplay-3jeW3DaOgmnZD9Da5z32lh6rlnyY6q.jpg" isMerged="true"
[V0_FILE]jpg:file="public/my-avatar.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/my-avatar-EToN7Vo3gQs22azzP9R3x6WNlSajfs.jpg" isMerged="true"
[V0_FILE]typescriptreact:file="components/layout/mobile-nav.tsx" isEdit="true" isMerged="true"
"use client"

import Link from "next/link"
import { usePathname } from "next/navigation"
import { Home, Radio, ShoppingBag, User, Globe } from "lucide-react"
import { cn } from "@/lib/utils"

export function MobileNav() {
  const pathname = usePathname()

const navItems = [
    { href: "/", icon: Home, label: "首页" },
    { href: "/moments", icon: Radio, label: "直播" },
    { href: "/planet", icon: Globe, label: "星球", isHighlight: true }, // Mark planet as highlight
    { href: "/mall", icon: ShoppingBag, label: "商城" },
    { href: "/profile", icon: User, label: "我的" },
  ]

return (
    <div className="fixed bottom-0 left-0 right-0 z-50 flex justify-center">
      <div className="w-full max-w-md glass border-t border-white/10 pb-safe">
        <nav className="flex items-center justify-around h-16 px-2">
          {navItems.map((item) => {
            const isActive = pathname === item.href
            const isPlanet = item.isHighlight

return (
              <Link
                key={item.href}
                href={item.href}
                className={cn(
                  "flex flex-col items-center justify-center w-full h-full space-y-1 transition-all duration-300 relative",
                  isActive ? "text-primary" : "text-muted-foreground hover:text-foreground",
                )}
              >
                <div
                  className={cn(
                    "relative p-1 rounded-xl transition-all",
                    isActive && "bg-primary/10",
                    isPlanet && "scale-125 -translate-y-1", // Planet is 25% larger and lifted
                  )}
                >
                  <item.icon
                    size={isPlanet ? 28 : 22} // Planet icon is larger
                    strokeWidth={isActive ? 2.5 : 2}
                    className={cn(isPlanet && "text-purple-400")} // Planet has unique purple color
                  />
                  {isActive && <span className="absolute inset-0 rounded-xl bg-primary/20 blur-lg animate-pulse" />}
                  {isPlanet && !isActive && <span className="absolute inset-0 rounded-xl bg-purple-400/10 blur-md" />}
                </div>
                <span
                  className={cn(
                    "text-[10px] font-medium",
                    isPlanet && "font-bold text-purple-400", // Planet label is bold and purple
                  )}
                >
                  {item.label}
                </span>
              </Link>
            )
          })}
        </nav>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dress-up/page.tsx" isEdit="true" isMerged="true"
"use client"

import { ArrowLeft, TrendingUp, ShoppingCart, Sparkles } from "lucide-react"
import { useRouter } from "next/navigation"
import Image from "next/image"
import { Button } from "@/components/ui/button"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { toast } from "@/hooks/use-toast"

export default function DressUpPage() {
  const router = useRouter()

const avatars = [
    { id: 1, name: "赛博朋克战士", price: 98, rarity: "传说", sales: 1205, image: "/avatar-cyberpunk.jpg" },
    { id: 2, name: "甜心电竞少女", price: 68, rarity: "稀有", sales: 3420, image: "/avatar-cute.jpg" },
    { id: 3, name: "暗影刺客", price: 128, rarity: "传说", sales: 856, image: "/avatar-assassin.jpg" },
    { id: 4, name: "机甲战神", price: 88, rarity: "史诗", sales: 2100, image: "/avatar-mecha.jpg" },
  ]

const decorations = [
    { id: 101, name: "星空边框", price: 38, type: "边框", image: "/frame-starry.jpg" },
    { id: 102, name: "炫光特效", price: 58, type: "特效", image: "/effect-neon.jpg" },
    { id: 103, name: "王者徽章", price: 48, type: "徽章", image: "/badge-gold.jpg" },
  ]

return (
    <div className="min-h-screen pb-24 bg-background">
      {/* Header */}
      <header className="sticky top-0 z-40 glass px-4 py-3 flex items-center gap-3">
        <button onClick={() => router.back()} className="p-2 -ml-2 hover:bg-white/5 rounded-lg transition-colors">
          <ArrowLeft size={20} />
        </button>
        <h1 className="font-bold text-lg">我的装扮</h1>
        <div className="ml-auto flex items-center gap-2 text-xs bg-white/5 px-3 py-1.5 rounded-full">
          <Sparkles size={14} className="text-yellow-400" />
          <span className="text-white/80">数字头像商城</span>
        </div>
      </header>

<div className="p-4">
        {/* Current Avatar Display */}
        <div className="glass-card p-6 rounded-2xl mb-6 text-center border border-primary/20">
          <div className="w-24 h-24 mx-auto mb-3 rounded-full border-4 border-primary p-1 relative">
            <Image src="/avatar-cyberpunk.jpg" alt="Current Avatar" fill className="rounded-full object-cover" />
            <div className="absolute -bottom-2 left-1/2 -translate-x-1/2 bg-primary text-[10px] px-2 py-0.5 rounded-full text-white font-bold">
              LV.8
            </div>
          </div>
          <h3 className="font-bold mb-1">当前形象</h3>
          <p className="text-xs text-white/50 mb-4">展示您的独特个性</p>
          <Button size="sm" variant="outline" className="border-white/20 hover:bg-white/5 bg-transparent">
            更换头像
          </Button>
        </div>

{/* Marketplace Tabs */}
        <Tabs defaultValue="avatar" className="w-full">
          <TabsList className="w-full bg-white/5 p-1 rounded-xl mb-4">
            <TabsTrigger value="avatar" className="flex-1 text-xs">
              数字头像
            </TabsTrigger>
            <TabsTrigger value="decoration" className="flex-1 text-xs">
              装饰道具
            </TabsTrigger>
            <TabsTrigger value="my" className="flex-1 text-xs">
              我的藏品
            </TabsTrigger>
          </TabsList>

<TabsContent value="avatar" className="space-y-3">
            <div className="flex items-center justify-between mb-3">
              <h3 className="font-bold text-sm">热门头像</h3>
              <button className="text-xs text-primary">
                查看全部 <TrendingUp size={12} className="inline ml-1" />
              </button>
            </div>
            <div className="grid grid-cols-2 gap-3">
              {avatars.map((avatar) => (
                <div
                  key={avatar.id}
                  className="glass-card p-3 rounded-xl hover:bg-white/10 transition-colors cursor-pointer"
                  onClick={() =>
                    toast({
                      title: "购买成功",
                      description: `已获得 ${avatar.name}，消费 ¥${avatar.price}`,
                    })
                  }
                >
                  <div className="relative w-full aspect-square rounded-lg overflow-hidden mb-2 bg-zinc-800">
                    <Image src={avatar.image || "/placeholder.svg"} alt={avatar.name} fill className="object-cover" />
                    <div className="absolute top-2 right-2 bg-yellow-500/90 text-black text-[9px] px-1.5 py-0.5 rounded font-bold">
                      {avatar.rarity}
                    </div>
                  </div>
                  <h4 className="font-bold text-sm mb-1 truncate">{avatar.name}</h4>
                  <div className="flex items-center justify-between text-xs">
                    <span className="text-white/50">{avatar.sales}人购买</span>
                    <span className="text-primary font-bold">¥{avatar.price}</span>
                  </div>
                  <Button size="sm" className="w-full mt-2 h-7 text-xs bg-primary hover:bg-primary/90">
                    <ShoppingCart size={12} className="mr-1" /> 购买
                  </Button>
                </div>
              ))}
            </div>
          </TabsContent>

<TabsContent value="decoration" className="space-y-3">
            <div className="grid gap-3">
              {decorations.map((item) => (
                <div
                  key={item.id}
                  className="glass-card p-3 rounded-xl flex items-center gap-3 hover:bg-white/10 transition-colors cursor-pointer"
                >
                  <div className="w-16 h-16 rounded-lg overflow-hidden bg-zinc-800 relative">
                    <Image src={item.image || "/placeholder.svg"} alt={item.name} fill className="object-cover" />
                  </div>
                  <div className="flex-1">
                    <h4 className="font-bold text-sm mb-1">{item.name}</h4>
                    <div className="flex items-center gap-2">
                      <span className="text-[10px] bg-white/10 px-2 py-0.5 rounded text-white/60">{item.type}</span>
                      <span className="text-primary font-bold text-sm">¥{item.price}</span>
                    </div>
                  </div>
                  <Button size="sm" className="h-8 text-xs">
                    购买
                  </Button>
                </div>
              ))}
            </div>
          </TabsContent>

<TabsContent value="my" className="text-center py-12">
            <Sparkles className="w-12 h-12 text-white/20 mx-auto mb-3" />
            <p className="text-sm text-white/40">暂无藏品</p>
            <p className="text-xs text-white/30 mt-1">购买数字头像和装扮后会显示在这里</p>
          </TabsContent>
        </Tabs>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/footprint/page.tsx" isMerged="true"
"use client"

import { ArrowLeft, MapPin, Clock, Star, Heart } from "lucide-react"
import { useRouter } from "next/navigation"
import Image from "next/image"

export default function FootprintPage() {
  const router = useRouter()

const history = [
    {
      date: "2025-01-20",
      type: "hotel",
      name: "玩值电竞酒店(旗舰店)",
      rating: 5,
      image: "esports hotel room",
    },
    {
      date: "2025-01-18",
      type: "match",
      name: "与GM-远洋的粉丝群匹配成功",
      detail: "在线聊天2小时",
    },
    {
      date: "2025-01-15",
      type: "purchase",
      name: "购买了王者荣耀皮肤",
      detail: "白龙吟",
    },
    {
      date: "2025-01-10",
      type: "cafe",
      name: "网鱼网咖(万达店)",
      rating: 4,
      image: "internet cafe",
    },
  ]

<div className="p-4">
        {/* Stats Overview */}
        <div className="grid grid-cols-3 gap-3 mb-6">
          <div className="glass-card p-3 rounded-xl text-center">
            <div className="text-2xl font-bold text-primary mb-1">12</div>
            <div className="text-xs text-white/50">总访问</div>
          </div>
          <div className="glass-card p-3 rounded-xl text-center">
            <div className="text-2xl font-bold text-green-500 mb-1">8</div>
            <div className="text-xs text-white/50">线下体验</div>
          </div>
          <div className="glass-card p-3 rounded-xl text-center">
            <div className="text-2xl font-bold text-yellow-500 mb-1">24</div>
            <div className="text-xs text-white/50">游戏局数</div>
          </div>
        </div>

{/* Timeline */}
        <div className="space-y-4">
          {history.map((item, i) => (
            <div key={i} className="flex gap-4">
              <div className="flex flex-col items-center">
                <div className="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center text-primary border-2 border-primary">
                  {item.type === "hotel" && <MapPin size={18} />}
                  {item.type === "match" && <Heart size={18} />}
                  {item.type === "purchase" && <Star size={18} />}
                  {item.type === "cafe" && <MapPin size={18} />}
                </div>
                {i < history.length - 1 && <div className="w-0.5 flex-1 bg-white/10 mt-2" />}
              </div>

<div className="flex-1 pb-4">
                <div className="glass-card p-3 rounded-xl">
                  <div className="flex items-start justify-between mb-2">
                    <div>
                      <h4 className="font-bold text-sm mb-1">{item.name}</h4>
                      {item.detail && <p className="text-xs text-white/50">{item.detail}</p>}
                      {item.rating && (
                        <div className="flex items-center gap-1 mt-1">
                          {Array.from({ length: item.rating }).map((_, j) => (
                            <Star key={j} size={12} fill="currentColor" className="text-yellow-400" />
                          ))}
                        </div>
                      )}
                    </div>
                    {item.image && (
                      <div className="w-14 h-14 rounded-lg overflow-hidden bg-zinc-800 relative flex-shrink-0">
                        <Image
                          src={`/.jpg?height=100&width=100&query=${item.image}`}
                          alt={item.name}
                          fill
                          className="object-cover"
                        />
                      </div>
                    )}
                  </div>
                  <div className="flex items-center gap-1 text-[10px] text-white/30">
                    <Clock size={10} />
                    {item.date}
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/coupons/page.tsx" isMerged="true"
"use client"

import { ArrowLeft, Ticket, Clock, ChevronRight } from "lucide-react"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

export default function CouponsPage() {
  const router = useRouter()

const coupons = [
    { id: 1, name: "电竞酒店满200减50", type: "酒店", discount: "50", condition: "满200可用", expires: "2025-02-28" },
    { id: 2, name: "网咖通用8折券", type: "网咖", discount: "8折", condition: "无门槛", expires: "2025-03-15" },
    { id: 3, name: "商城满100减20", type: "商城", discount: "20", condition: "满100可用", expires: "2025-02-20" },
  ]

<TabsContent value="available" className="space-y-3">
            {coupons.map((coupon) => (
              <div
                key={coupon.id}
                className="glass-card rounded-xl overflow-hidden border border-primary/20 hover:border-primary/40 transition-colors cursor-pointer"
              >
                <div className="flex">
                  <div className="w-28 bg-gradient-to-br from-primary to-purple-600 p-4 flex flex-col items-center justify-center text-white relative">
                    <Ticket className="absolute top-2 right-2 opacity-20" size={40} />
                    <div className="text-3xl font-bold z-10">
                      {coupon.discount.includes("折") ? coupon.discount : `¥${coupon.discount}`}
                    </div>
                    <div className="text-[10px] mt-1 z-10">{coupon.type}</div>
                  </div>
                  <div className="flex-1 p-3 flex flex-col justify-between">
                    <div>
                      <h4 className="font-bold text-sm mb-1">{coupon.name}</h4>
                      <p className="text-xs text-white/50">{coupon.condition}</p>
                    </div>
                    <div className="flex items-center justify-between">
                      <div className="flex items-center gap-1 text-[10px] text-white/30">
                        <Clock size={10} />
                        {coupon.expires}到期
                      </div>
                      <Button size="sm" className="h-6 text-[10px] px-3">
                        立即使用
                      </Button>
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </TabsContent>

<TabsContent value="used" className="text-center py-12">
            <Ticket className="w-12 h-12 text-white/20 mx-auto mb-3" />
            <p className="text-sm text-white/40">暂无已使用的卡券</p>
          </TabsContent>

<TabsContent value="expired" className="text-center py-12">
            <Ticket className="w-12 h-12 text-white/20 mx-auto mb-3" />
            <p className="text-sm text-white/40">暂无过期的卡券</p>
          </TabsContent>
        </Tabs>

{/* Get More Coupons CTA */}
        <div className="mt-6 glass-card p-4 rounded-xl border border-primary/20">
          <div className="flex items-center justify-between">
            <div>
              <h3 className="font-bold text-sm mb-1">领取更多优惠券</h3>
              <p className="text-xs text-white/50">每日签到可领取专属福利</p>
            </div>
            <Button
              size="sm"
              variant="outline"
              className="border-primary text-primary hover:bg-primary/10 bg-transparent"
            >
              去领取 <ChevronRight size={14} className="ml-1" />
            </Button>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]png:file="public/abstract-energy-pattern.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/abstract-energy-pattern-FDnCIPz2xaOxv3CslpweUu8z8jZWC8.png" isMerged="true"
[V0_FILE]jpg:file="public/esports-tournament-stadium.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/esports-tournament-stadium-VXvQ6fy3lp4r0mDm8HMAPXApRMG6YF.jpg" isMerged="true"
[V0_FILE]jpg:file="public/gaming-room-rgb.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/gaming-room-rgb-Ig4dUSJJS3lStx2uY0nCC9npqg34H7.jpg" isMerged="true"
[V0_FILE]png:file="public/gamer-avatar.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/gamer-avatar-vnJrXyGmbWftGySMdMsJXCWKnPc9Xr.png" isMerged="true"
[V0_FILE]png:file="public/esports-trophy.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/esports-trophy-tps5BBfeT9ZEj51wrxR3H5eQIDJMsp.png" isMerged="true"
[V0_FILE]png:file="public/current-user-avatar.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/current-user-avatar-GoU3NWCbEeCUVbDcWWMGDvCZkms6BY.png" isMerged="true"
[V0_FILE]jpg:file="public/abstract-esports-pattern.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/abstract-esports-pattern-5n1rAP7MkIE4ZIQZSpmBq1YabcSDeL.jpg" isMerged="true"
[V0_FILE]jpg:file="public/esports-live-stream-gameplay.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/esports-live-stream-gameplay-GR1zWoVg6QOwjhiTlcZAVUBuAiBh81.jpg" isMerged="true"
[V0_FILE]typescriptreact:file="app/zone/[id]/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import { ArrowLeft, Users, Trophy, Sword, Flame } from "lucide-react"
import Link from "next/link"
import Image from "next/image"

export default function ZonePage({ params }: { params: { id: string } }) {
  const games: Record<string, any> = {
    lol: { name: "英雄联盟", color: "blue", bg: "bg-blue-900", image: "league of legends map summoners rift" },
    val: { name: "无畏契约", color: "red", bg: "bg-red-900", image: "valorant agent neon futuristic" },
    hok: { name: "王者荣耀", color: "yellow", bg: "bg-yellow-900", image: "honor of kings hero battle" },
    csgo: { name: "CS:GO", color: "orange", bg: "bg-orange-900", image: "csgo dust2 map tactical" },
    wow: { name: "魔兽世界", color: "yellow", bg: "bg-stone-900", image: "world of warcraft azeroth landscape" },
  }

const game = games[params.id] || games.lol

return (
    <div className={`min-h-screen ${game.bg} text-white pb-24`}>
      {/* Header */}
      <div className="sticky top-0 z-40 p-4 flex items-center gap-4 bg-black/20 backdrop-blur-md">
        <Link href="/" className="p-2 bg-white/10 rounded-full hover:bg-white/20">
          <ArrowLeft size={20} />
        </Link>
        <h1 className="font-bold text-lg">{game.name}专区</h1>
      </div>

{/* Hero */}
      <div className="relative aspect-video w-full">
        <Image
          src={`/.jpg?key=zone-${params.id}&height=400&width=600&query=${game.image}`}
          alt={game.name}
          fill
          className="object-cover"
        />
        <div className="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent" />
        <div className="absolute bottom-4 left-4">
          <h2 className="text-2xl font-bold mb-2">{game.name}</h2>
          <div className="flex gap-2">
            <span className="px-2 py-1 bg-white/10 rounded text-xs backdrop-blur-md">热度 1205万</span>
            <span className="px-2 py-1 bg-white/10 rounded text-xs backdrop-blur-md">开黑 3.2万车队</span>
          </div>
        </div>
      </div>

{/* Quick Actions */}
      <div className="grid grid-cols-4 gap-2 p-4">
        <div className="bg-white/5 rounded-xl p-3 flex flex-col items-center gap-2">
          <Sword className="text-white/80" />
          <span className="text-xs">找车队</span>
        </div>
        <div className="bg-white/5 rounded-xl p-3 flex flex-col items-center gap-2">
          <Trophy className="text-white/80" />
          <span className="text-xs">打比赛</span>
        </div>
        <div className="bg-white/5 rounded-xl p-3 flex flex-col items-center gap-2">
          <Users className="text-white/80" />
          <span className="text-xs">找陪练</span>
        </div>
        <div className="bg-white/5 rounded-xl p-3 flex flex-col items-center gap-2">
          <Flame className="text-white/80" />
          <span className="text-xs">看直播</span>
        </div>
      </div>

{/* Content */}
      <div className="px-4 space-y-4">
        <h3 className="font-bold flex items-center gap-2">
          <div className={`w-1 h-4 bg-${game.color}-500 rounded-full`} />
          热门车队
        </h3>

{[1, 2, 3].map((i) => (
          <div key={i} className="bg-white/5 rounded-xl p-4 flex items-center gap-4">
            <div className="w-12 h-12 rounded-full bg-white/10 relative overflow-hidden">
              <Image
                src={`/.jpg?key=team-${i}&height=100&width=100&query=esports avatar ${game.name}`}
                alt="Avatar"
                fill
                className="object-cover"
              />
            </div>
            <div className="flex-1">
              <h4 className="font-bold text-sm">钻石冲分车队 缺1</h4>
              <p className="text-xs text-white/50">胜率队 | 只要狠人 | 连胜中</p>
            </div>
            <button className={`px-4 py-1.5 rounded-full bg-${game.color}-600 text-xs font-bold`}>申请</button>
          </div>
        ))}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/guild/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { ArrowLeft, Users, Trophy, Star, Crown, TrendingUp, MessageCircle } from "lucide-react"
import { useRouter } from "next/navigation"
import Image from "next/image"
import { Button } from "@/components/ui/button"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { toast } from "@/hooks/use-toast"

export default function GuildPage() {
  const router = useRouter()

const handleJoinGuild = (guildName: string) => {
    toast({
      title: "申请已发送",
      description: `您的加入申请已发送至${guildName}，请等待审核`,
    })
  }

<div className="p-4 space-y-6">
        {/* My Guild Status */}
        <div className="glass-card p-4 rounded-xl border-l-4 border-primary">
          <div className="flex items-center justify-between mb-3">
            <h3 className="font-bold text-sm">我的公会</h3>
            <span className="text-xs text-white/50">暂未加入</span>
          </div>
          <p className="text-xs text-white/60 mb-3">加入公会，享受更多福利和资源支持</p>
          <div className="grid grid-cols-3 gap-2 text-center">
            <div className="bg-white/5 rounded-lg p-2">
              <div className="text-xs font-bold text-primary">专属培训</div>
              <div className="text-[10px] text-white/50 mt-0.5">技能提升</div>
            </div>
            <div className="bg-white/5 rounded-lg p-2">
              <div className="text-xs font-bold text-secondary">优先接单</div>
              <div className="text-[10px] text-white/50 mt-0.5">更多机会</div>
            </div>
            <div className="bg-white/5 rounded-lg p-2">
              <div className="text-xs font-bold text-accent">收益分成</div>
              <div className="text-[10px] text-white/50 mt-0.5">额外奖励</div>
            </div>
          </div>
        </div>

{/* Guild Rankings */}
        <Tabs defaultValue="hot" className="w-full">
          <TabsList className="w-full bg-white/5 p-1 rounded-xl">
            <TabsTrigger value="hot" className="flex-1 text-xs">
              热门公会
            </TabsTrigger>
            <TabsTrigger value="new" className="flex-1 text-xs">
              新晋公会
            </TabsTrigger>
            <TabsTrigger value="top" className="flex-1 text-xs">
              排行榜
            </TabsTrigger>
          </TabsList>

<TabsContent value="hot" className="mt-4 space-y-3">
            {[
              {
                name: "东东电竞",
                level: 10,
                members: 1205,
                income: "月入50万+",
                tags: ["全能", "陪玩", "培训"],
                logo: "esports guild logo gold premium",
                rank: 1,
              },
              {
                name: "机枪电竞",
                level: 8,
                members: 680,
                income: "月入30万+",
                tags: ["LOL", "云顶", "代练"],
                logo: "esports guild logo red aggressive",
                rank: 2,
              },
              {
                name: "洲越电竞",
                level: 6,
                members: 320,
                income: "月入15万+",
                tags: ["三角洲", "无畏契约"],
                logo: "esports guild logo blue tactical",
                rank: 3,
              },
              {
                name: "星辰公会",
                level: 7,
                members: 450,
                income: "月入20万+",
                tags: ["王者", "吃鸡", "陪玩"],
                logo: "esports guild logo purple cosmic",
                rank: 4,
              },
            ].map((guild, i) => (
              <div key={i} className="glass-card p-4 rounded-xl hover:bg-white/5 transition-colors">
                <div className="flex items-start gap-3 mb-3">
                  <div className="relative">
                    <div className="w-16 h-16 rounded-lg bg-muted relative overflow-hidden">
                      <Image
                        src={`/guild-logo-${i}.jpg?height=100&width=100&query=${guild.logo}`}
                        alt={guild.name}
                        fill
                        className="object-cover"
                      />
                    </div>
                    {guild.rank <= 3 && (
                      <div className="absolute -top-1 -right-1 w-5 h-5 rounded-full bg-gradient-to-br from-yellow-400 to-orange-500 flex items-center justify-center text-[10px] font-bold">
                        {guild.rank}
                      </div>
                    )}
                  </div>

<div className="flex-1 min-w-0">
                    <div className="flex items-center gap-2 mb-1">
                      <h4 className="font-bold truncate">{guild.name}</h4>
                      <div className="flex items-center gap-1 px-1.5 py-0.5 rounded bg-primary/20 text-primary text-[10px]">
                        <Crown size={10} />
                        Lv.{guild.level}
                      </div>
                    </div>

<div className="flex items-center gap-3 text-xs text-white/50 mb-2">
                      <span className="flex items-center gap-1">
                        <Users size={12} />
                        {guild.members}人
                      </span>
                      <span className="flex items-center gap-1">
                        <TrendingUp size={12} />
                        {guild.income}
                      </span>
                    </div>

<div className="flex flex-wrap gap-1">
                      {guild.tags.map((tag, j) => (
                        <span key={j} className="px-2 py-0.5 rounded-full bg-white/5 text-[10px] text-white/60">
                          {tag}
                        </span>
                      ))}
                    </div>
                  </div>
                </div>

<div className="flex gap-2">
                  <Button
                    size="sm"
                    variant="outline"
                    className="flex-1 h-8 text-xs border-white/10 hover:bg-white/5 bg-transparent"
                    onClick={() => router.push(`/guild/${guild.name}`)}
                  >
                    <MessageCircle size={14} className="mr-1" />
                    了解详情
                  </Button>
                  <Button
                    size="sm"
                    className="flex-1 h-8 text-xs bg-primary hover:bg-primary/90"
                    onClick={() => handleJoinGuild(guild.name)}
                  >
                    <Star size={14} className="mr-1" />
                    申请加入
                  </Button>
                </div>
              </div>
            ))}
          </TabsContent>

<TabsContent value="new" className="mt-4">
            <div className="text-center py-12 text-white/40 text-sm">新晋公会列表开发中...</div>
          </TabsContent>

<TabsContent value="top" className="mt-4">
            <div className="text-center py-12 text-white/40 text-sm">公会排行榜开发中...</div>
          </TabsContent>
        </Tabs>

{/* Create Guild CTA */}
        <div className="glass-card p-4 rounded-xl bg-gradient-to-r from-primary/10 to-purple-500/10 border border-primary/20">
          <div className="flex items-center gap-3">
            <div className="w-12 h-12 rounded-full bg-primary/20 flex items-center justify-center shrink-0">
              <Trophy className="text-primary" size={24} />
            </div>
            <div className="flex-1">
              <h3 className="font-bold text-sm mb-1">创建自己的公会</h3>
              <p className="text-xs text-white/60">招募成员，共创辉煌</p>
            </div>
            <Button
              size="sm"
              className="bg-primary hover:bg-primary/90 h-8 text-xs"
              onClick={() => toast({ title: "即将开放", description: "公会创建功能正在开发中" })}
            >
              立即创建
            </Button>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]jpg:file="public/wow-bg.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/wow-bg-QT5ZXNrLdDbHssdBIdwdqGglNsyHzJ.jpg" isMerged="true"
[V0_FILE]jpg:file="public/club-logo-0.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true"
[V0_FILE]jpg:file="public/club-logo-1.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true"
[V0_FILE]jpg:file="public/club-logo-2.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true"
[V0_FILE]jpg:file="public/feed-live-1101.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true"
[V0_FILE]jpg:file="public/feed-live-1102.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/feed-live-1102-vonpFAgBB7ChgJsYQH30i4HoGQjR47.jpg" isMerged="true"
[V0_FILE]jpg:file="public/feed-live-1103.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/feed-live-1103-h43ZzPFvW0HyXUKKMrO5C9Cnij4vsH.jpg" isMerged="true"
[V0_FILE]jpg:file="public/feed-live-1104.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/feed-live-1104-RYpBt43BJcI8MOIFbqdVjM5twOb9kS.jpg" isMerged="true"
[V0_FILE]jpg:file="public/guild-logo-0.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/guild-logo-0-Ml8Jt6SnWv8aZEDuurH6LYyG6yTzgk.jpg" isMerged="true"
[V0_FILE]jpg:file="public/guild-logo-1.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/guild-logo-1-W6EVqN32lt0pexG7MIVPzZ1Gf4jGK2.jpg" isMerged="true"
[V0_FILE]jpg:file="public/guild-logo-2.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/guild-logo-2-DXtyJRjVdgRY8s7zdPd2mOT1rvTBSO.jpg" isMerged="true"
[V0_FILE]jpg:file="public/guild-logo-3.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/guild-logo-3-7AF6UNKVaJFooDxQ9AxcoOmk9kKXAu.jpg" isMerged="true"
[V0_FILE]typescriptreact:file="app/services/leveling/page.tsx" isEdit="true" isMerged="true"
"use client"

import { useRouter } from "next/navigation"
import { Star, Zap, Trophy } from "lucide-react"
import { Button } from "@/components/ui/button"
import { toast } from "@/hooks/use-toast"

export default function LevelingPage() {
  const router = useRouter()

const boosters = [
    { id: 1, title: "王者荣耀-荣耀王者直通车", price: 25, unit: "星", tags: ["极速", "金牌打手"], sales: 5000 },
    { id: 2, title: "LOL-钻石大师晋级赛", price: 88, unit: "局", tags: ["包赢", "职业退役"], sales: 1200 },
    { id: 3, title: "无畏契约-赋能战神代打", price: 50, unit: "胜场", tags: ["MVP", "直播"], sales: 800 },
    { id: 4, title: "原神-深渊满星/神瞳全收集", price: 10, unit: "层", tags: ["纯手工", "安全"], sales: 3000 },
  ]

<div className="p-4 space-y-4">
        {/* Banner */}
        <div className="relative w-full h-32 rounded-xl overflow-hidden bg-gradient-to-r from-orange-500 to-red-600 flex items-center px-6">
          <div className="relative z-10">
            <h2 className="text-xl font-bold text-white mb-1">代练通严选</h2>
            <p className="text-xs text-white/80">官方认证打手 · 保证金赔付 · 效率保障</p>
          </div>
          <Trophy className="absolute right-4 bottom-[-10px] text-white/20 w-24 h-24 rotate-12" />
        </div>

{/* Filters */}
        <div className="flex gap-2 overflow-x-auto no-scrollbar pb-2">
          {["全部", "王者荣耀", "英雄联盟", "无畏契约", "和平精英", "永劫无间"].map((tag, i) => (
            <button
              key={i}
              className={`whitespace-nowrap px-4 py-1.5 rounded-full text-xs font-medium ${i === 0 ? "bg-primary text-black" : "bg-white/5 text-white/60"}`}
            >
              {tag}
            </button>
          ))}
        </div>

{/* List */}
        <div className="grid gap-3">
          {boosters.map((item) => (
            <div
              key={item.id}
              className="glass-card p-4 rounded-xl flex justify-between items-center hover:bg-white/10 transition-colors"
              onClick={() => toast({ title: "下单成功", description: "打手将在5分钟内上号" })}
            >
              <div>
                <h3 className="font-bold text-sm mb-1">{item.title}</h3>
                <div className="flex gap-2 mb-2">
                  {item.tags.map((t, i) => (
                    <span
                      key={i}
                      className="text-[10px] px-1.5 py-0.5 rounded bg-white/5 text-white/50 border border-white/5"
                    >
                      {t}
                    </span>
                  ))}
                </div>
                <div className="flex items-center gap-3 text-xs text-white/40">
                  <span className="flex items-center gap-1">
                    <Zap size={12} className="text-yellow-500" /> 15分钟接单
                  </span>
                  <span className="flex items-center gap-1">
                    <Star size={12} className="text-primary" /> 销量 {item.sales}+
                  </span>
                </div>
              </div>
              <div className="text-right">
                <div className="text-lg font-bold text-primary">
                  ¥{item.price}
                  <span className="text-xs text-white/50 font-normal">/{item.unit}</span>
                </div>
                <Button size="sm" className="h-7 text-xs mt-1">
                  立即下单
                </Button>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/mall/courses/page.tsx" isEdit="true" isMerged="true"
"use client"
import { useRouter } from "next/navigation"
import Image from "next/image"
import { Play, Users } from "lucide-react"
import { Button } from "@/components/ui/button"
import { toast } from "@/hooks/use-toast"

export default function CoursesPage() {
  const router = useRouter()
  const courses = [
    { id: 1, title: "Faker 中单瑞兹教学", author: "Faker", price: 199, image: "/course-1.jpg", students: 12000 },
    { id: 2, title: "Uzi 下路对线细节", author: "Uzi", price: 199, image: "/course-2.jpg", students: 35000 },
    { id: 3, title: "TheShy 上单压制力", author: "TheShy", price: 159, image: "/course-3.jpg", students: 8900 },
    { id: 4, title: "10分钟学会云顶吃鸡", author: "云顶之弈", price: 49, image: "/course-4.jpg", students: 5000 },
  ]

return (
    <div className="min-h-screen pb-24 bg-background">
      <header className="sticky top-0 z-40 glass px-4 py-3 flex items-center gap-3">
        <button onClick={() => router.back()} className="text-white/70">
          返回
        </button>
        <h1 className="font-bold text-lg">同款课程</h1>
      </header>
      <div className="p-4 space-y-4">
        {courses.map((c) => (
          <div
            key={c.id}
            className="glass-card p-3 rounded-xl flex gap-3 cursor-pointer hover:bg-white/10"
            onClick={() => toast({ title: "购买成功", description: "课程已添加至学习中心" })}
          >
            <div className="relative w-32 aspect-video rounded-lg overflow-hidden shrink-0">
              <Image src={c.image || "/placeholder.svg"} alt={c.title} fill className="object-cover" />
              <div className="absolute inset-0 flex items-center justify-center bg-black/30">
                <Play size={24} className="text-white/80" />
              </div>
            </div>
            <div className="flex-1 flex flex-col justify-between">
              <h3 className="font-bold text-sm">{c.title}</h3>
              <div className="flex items-center gap-2 text-xs text-white/50">
                <span className="bg-white/10 px-1.5 py-0.5 rounded text-white/70">{c.author}</span>
                <span className="flex items-center gap-1">
                  <Users size={10} /> {c.students}
                </span>
              </div>
              <div className="flex items-center justify-between mt-1">
                <span className="text-primary font-bold">¥{c.price}</span>
                <Button size="sm" className="h-6 text-[10px]">
                  购买
                </Button>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}
[V0_FILE]jpg:file="public/avatar-1.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/avatar-1-CliQA79yLX2WlLpN5Rs69BQhe1amsK.jpg" isMerged="true"
[V0_FILE]jpg:file="public/avatar-2.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/avatar-2-RxnAfhWAgNQhTVjSHHI02EupTWyKJJ.jpg" isMerged="true"
[V0_FILE]jpg:file="public/avatar-3.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/avatar-3-ClkycKMrPoOgv2KsHy3SDELI6Dsp1K.jpg" isMerged="true"
[V0_FILE]jpg:file="public/avatar-4.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/avatar-4-NYY6jOB3AWvIhnZACOSnbOKCkeSEmt.jpg" isMerged="true"
[V0_FILE]jpg:file="public/avatar-5.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/avatar-5-QAAcvzVN0cIrOb0qjAEEViSTwrnYsd.jpg" isMerged="true"
[V0_FILE]jpg:file="public/avatar-6.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/avatar-6-n6eV6NiL09EO3vk79fJhYBneZD54iS.jpg" isMerged="true"
[V0_FILE]jpg:file="public/avatar-cyberpunk.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/avatar-cyberpunk-fcRgBmTXO6RwPpPswzZfxskj798txn.jpg" isMerged="true"
[V0_FILE]jpg:file="public/avatar-cute.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/avatar-cute-i0jlSZpF6nuWUfJaxM4j19sZSxrhUC.jpg" isMerged="true"
[V0_FILE]jpg:file="public/avatar-assassin.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/avatar-assassin-6hMgRwpL6R3pPOVrzM7v2rHQ8a9bQc.jpg" isMerged="true"
[V0_FILE]jpg:file="public/avatar-mecha.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/avatar-mecha-sHXkOjNBsuYK5E5OuyRhKLxZ91tuzl.jpg" isMerged="true"
[V0_FILE]jpg:file="public/frame-starry.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/frame-starry-4xnGhbZlVS6SYUMyN4v6w4nGQwYczL.jpg" isMerged="true"
[V0_FILE]jpg:file="public/effect-neon.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/effect-neon-XUR4JufWcA8X5En3kx7LeGDZkf0XBE.jpg" isMerged="true"
[V0_FILE]jpg:file="public/badge-gold.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/badge-gold-2xRGFAGZcfnnIHGjCzTIO5ATtF921Z.jpg" isMerged="true"
[V0_FILE]jpg:file="public/course-1.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true"
[V0_FILE]jpg:file="public/course-2.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true"
[V0_FILE]jpg:file="public/course-3.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true"
[V0_FILE]jpg:file="public/course-4.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true"
[V0_FILE]jpg:file="public/account-lol.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/account-lol-2VqItqoBJtCx4mKwbLLFgvswUXqNn4.jpg" isMerged="true"
[V0_FILE]jpg:file="public/account-val.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/account-val-SI1M95IFLz7djkEvGpDKvzzOumALQT.jpg" isMerged="true"
[V0_FILE]jpg:file="public/account-hok.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/account-hok-cZFI1CqRJvdjxnA9x7TEEj8iddPVtv.jpg" isMerged="true"
[V0_FILE]jpg:file="public/account-genshin.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/account-genshin-2hh07dKiss7CvYIxNwDCaGeYRzf7Ft.jpg" isMerged="true"
[V0_FILE]typescript:file="lib/data/game-data.ts" isEdit="true" isQuickEdit="true" isMerged="true"
export type GameConfig = {
  score: number
  versions?: Record<string, string[]> // Version -> Servers
  ranks?: Record<string, number>
}

export const GAME_DATA = {
  // Game Value Configuration
  games: {
    王者荣耀: {
      score: 30,
      versions: {
        全服通用: ["微信区", "QQ区"],
      },
      ranks: {
        荣耀王者: 10,
        最强王者: 8,
        至尊星耀: 5,
        永恒钻石: 3,
        尊贵铂金: 1,
        黄金及以下: 0,
      },
    },
    原神: {
      score: 30,
      versions: {
        全服通用: ["天空岛", "世界树"],
      },
      ranks: {
        "60级": 10,
        "55-59级": 8,
        "50-54级": 5,
        "45-49级": 3,
        "45级以下": 0,
      },
    },
    和平精英: {
      score: 25,
      versions: {
        全服通用: ["微信区", "QQ区"],
      },
      ranks: {
        无敌战神: 10,
        超级王牌: 8,
        荣耀皇冠: 5,
        不朽星钻: 3,
        星钻以下: 0,
      },
    },
    魔兽世界: {
      score: 30,
      versions: {
        亚服大地的裂变: ["伊弗斯", "瑪拉頓", "阿拉希盆地", "鱼人", "逐风者", "古雷曼格", "乌苏雷", "札里克"],
        亚服正式服: [
          "暗影之月",
          "众星之子",
          "地狱吼",
          "狂热之刃",
          "阿萨斯",
          "冰霜之刺",
          "米奈希尔",
          "血之谷",
          "夜空之歌",
          "巨龙之喉",
          "世界之树",
          "屠魔山谷",
          "水晶之刺",
        ],
        国服正式服: [
          "死亡之翼",
          "白银之手",
          "罗宁",
          "主宰之剑",
          "格瑞姆巴托",
          "安苏",
          "熊猫酒仙",
          "国王之谷",
          "燃烧之刃",
          "影之哀伤",
        ],
        国服怀旧服: [
          "哈霍兰",
          "奥罗",
          "匕首岭",
          "布鲁",
          "范克瑞斯",
          "席瓦莱恩",
          "碧玉矿洞",
          "寒脊山小径",
          "祈福",
          "灰烬使者",
        ],
      },
      ranks: {
        "角斗士/名人堂": 10,
        "高阶督军/大元帅": 8,
        "督军/元帅": 5,
        "统帅/将军": 3,
        普通: 0,
      },
    },
    英雄联盟: {
      score: 30,
      versions: {
        电信区: [
          "艾欧尼亚",
          "祖安",
          "诺克萨斯",
          "班德尔城",
          "皮城警备",
          "战争学院",
          "巨神峰",
          "雷瑟守备",
          "裁决之地",
          "黑色玫瑰",
          "暗影岛",
          "钢铁烈阳",
          "水晶之痕",
          "均衡教派",
          "影流",
          "守望之海",
          "征服之海",
          "卡拉曼达",
          "皮城警备",
        ],
        网通区: ["比尔吉沃特", "德玛西亚", "弗雷尔卓德", "无畏先锋", "恕瑞玛", "扭曲丛林", "巨龙之巢"],
      },
      ranks: {
        最强王者: 10,
        傲世宗师: 8,
        超凡大师: 6,
        璀璨钻石: 4,
        华贵铂金: 2,
        铂金以下: 0,
      },
    },
    无畏契约: {
      score: 25,
      versions: {
        国服: ["重庆", "南京", "天津", "广州"],
      },
      ranks: {
        赋能战魂: 10,
        神话: 8,
        超凡入圣: 6,
        钻石: 4,
        铂金: 2,
        铂金以下: 0,
      },
    },
    "CS:GO": {
      score: 25,
      versions: {
        国服: ["完美世界"],
      },
      ranks: {
        大地球: 10,
        小地球: 8,
        老鹰: 6,
        菊花: 4,
        AK: 2,
        AK以下: 0,
      },
    },
  } as Record<string, GameConfig>,

// Server Value Configuration
  server_scores: {
    热门服: 10, // Hot/New servers
    普通服: 8, // Normal servers
    鬼服: 5, // Low population
  } as Record<string, number>,

// Asset Weight Configuration
  asset_weights: {
    传说级: 1.5, // Legendary
    史诗级: 1.0, // Epic
    优质级: 0.5, // Rare
    普通级: 0.2, // Common
  } as Record<string, number>,

// Risk Control Coefficient
  correction_coeffs: {
    本人_无封号: 1.2,
    本人_有封号: 1.0,
    非本人_无封号: 0.8,
    非本人_有封号: 0.6,
    未实名: 0.7,
  } as Record<string, number>,

consumption_weights: {
    level1: 0, // 0-100
    level2: 1.05, // 100-500
    level3: 1.1, // 500-2000
    level4: 1.2, // 2000+
  } as Record<string, number>,

// Base multiplier for final valuation (converts score to currency)
  base_multiple: 100,
}
[V0_FILE]typescriptreact:file="app/mall/companion/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { useRouter } from "next/navigation"
import Image from "next/image"
import { Star, Play, Mic, Video, Gamepad2, GraduationCap } from "lucide-react"
import { Button } from "@/components/ui/button"
import { toast } from "@/hooks/use-toast"

export default function CompanionPage() {
  const router = useRouter()
  const [activeTab, setActiveTab] = useState("play") // play | learn

const games = [
    { name: "全部", id: "all" },
    { name: "英雄联盟", id: "lol" },
    { name: "王者荣耀", id: "hok" },
    { name: "无畏契约", id: "val" },
    { name: "和平精英", id: "pubg" },
    { name: "原神", id: "genshin" },
  ]
  const [activeGame, setActiveGame] = useState("all")

const companions = [
    {
      id: 1,
      name: "GM-远洋",
      title: "国服第一盲僧",
      price: 50,
      unit: "局",
      image: "/avatar-1.jpg",
      tags: ["技术流", "风趣", "职业退役"],
      game: "lol",
      rating: 5.0,
      orders: 1205,
      voice: true,
      video: true,
    },
    {
      id: 2,
      name: "七七",
      title: "甜美声优",
      price: 40,
      unit: "小时",
      image: "/avatar-5.jpg",
      tags: ["声优", "聊天", "辅助"],
      game: "hok",
      rating: 4.9,
      orders: 890,
      voice: true,
      video: false,
    },
    {
      id: 3,
      name: "卡若",
      title: "前职业选手",
      price: 80,
      unit: "局",
      image: "/avatar-2.jpg",
      tags: ["包赢", "教学", "高分局"],
      game: "lol",
      rating: 5.0,
      orders: 3400,
      voice: true,
      video: true,
    },
    {
      id: 4,
      name: "小柠檬",
      title: "人皮话多",
      price: 30,
      unit: "局",
      image: "/avatar-3.jpg",
      tags: ["娱乐", "开心", "相声"],
      game: "val",
      rating: 4.8,
      orders: 560,
      voice: true,
      video: false,
    },
    {
      id: 5,
      name: "大魔王",
      title: "中单法王",
      price: 100,
      unit: "局",
      image: "/avatar-6.jpg",
      tags: ["技术教学", "上分", "严肃"],
      game: "lol",
      rating: 5.0,
      orders: 8800,
      voice: true,
      video: true,
    },
    {
      id: 6,
      name: "阿伟",
      title: "绝地刚枪王",
      price: 60,
      unit: "小时",
      image: "/avatar-4.jpg",
      tags: ["带妹", "吃鸡", "指挥"],
      game: "pubg",
      rating: 4.9,
      orders: 1100,
      voice: true,
      video: false,
    },
  ]

const courses = [
    {
      id: 1,
      title: "中单瑞兹顶级教学",
      author: "Faker",
      price: 199,
      image: "/course-1.jpg",
      students: 12000,
      game: "lol",
    },
    {
      id: 2,
      title: "下路对线细节全解",
      author: "Uzi",
      price: 199,
      image: "/course-2.jpg",
      students: 35000,
      game: "lol",
    },
    {
      id: 3,
      title: "上单压制力养成",
      author: "TheShy",
      price: 159,
      image: "/course-3.jpg",
      students: 8900,
      game: "lol",
    },
    {
      id: 4,
      title: "瓦罗兰特特工教学",
      author: "康康",
      price: 99,
      image: "/course-4.jpg",
      students: 4500,
      game: "val",
    },
  ]

{/* Tabs */}
      <div className="px-4 mt-2">
        <div className="bg-white/5 p-1 rounded-xl flex">
          <button
            className={`flex-1 py-2 rounded-lg text-sm font-bold flex items-center justify-center gap-2 transition-all ${activeTab === "play" ? "bg-primary text-black shadow-lg shadow-primary/20" : "text-white/50 hover:text-white"}`}
            onClick={() => setActiveTab("play")}
          >
            <Gamepad2 size={16} />
            明星陪玩
          </button>
          <button
            className={`flex-1 py-2 rounded-lg text-sm font-bold flex items-center justify-center gap-2 transition-all ${activeTab === "learn" ? "bg-secondary text-white shadow-lg shadow-secondary/20" : "text-white/50 hover:text-white"}`}
            onClick={() => setActiveTab("learn")}
          >
            <GraduationCap size={16} />
            大师课程
          </button>
        </div>
      </div>

{/* Game Filter */}
      <div className="px-4 mt-4 overflow-x-auto no-scrollbar pb-2">
        <div className="flex gap-2">
          {games.map((g) => (
            <button
              key={g.id}
              onClick={() => setActiveGame(g.id)}
              className={`px-4 py-1.5 rounded-full text-xs font-bold whitespace-nowrap transition-colors ${activeGame === g.id ? "bg-white text-black" : "bg-white/5 text-white/50 hover:bg-white/10"}`}
            >
              {g.name}
            </button>
          ))}
        </div>
      </div>

{/* Content */}
      <div className="px-4 mt-2 space-y-4">
        {activeTab === "play" ? (
          <div className="grid gap-3">
            {companions
              .filter((c) => activeGame === "all" || c.game === activeGame)
              .map((c) => (
                <div
                  key={c.id}
                  className="glass-card p-3 rounded-xl flex gap-3 cursor-pointer hover:bg-white/5 transition-colors group"
                  onClick={() => router.push(`/live/${c.id}`)}
                >
                  <div className="relative w-24 h-24 rounded-lg overflow-hidden shrink-0">
                    <Image src={c.image || "/placeholder.svg"} alt={c.name} fill className="object-cover" />
                    <div className="absolute top-1 left-1 bg-black/60 backdrop-blur-sm px-1.5 py-0.5 rounded flex items-center gap-1 text-[10px] text-white font-bold">
                      <Star size={8} className="text-yellow-500 fill-yellow-500" />
                      {c.rating}
                    </div>
                  </div>
                  <div className="flex-1 flex flex-col justify-between py-0.5">
                    <div>
                      <div className="flex items-center justify-between">
                        <h3 className="font-bold text-sm flex items-center gap-1">
                          {c.name}
                          {c.voice && <Mic size={10} className="text-green-400" />}
                          {c.video && <Video size={10} className="text-blue-400" />}
                        </h3>
                        <span className="text-[10px] text-white/40">{c.orders}单</span>
                      </div>
                      <p className="text-xs text-primary font-medium mt-0.5">{c.title}</p>
                      <div className="flex flex-wrap gap-1 mt-1.5">
                        {c.tags.map((tag, i) => (
                          <span key={i} className="text-[10px] bg-white/5 px-1.5 py-0.5 rounded text-white/50">
                            {tag}
                          </span>
                        ))}
                      </div>
                    </div>
                    <div className="flex items-center justify-between mt-2">
                      <div className="flex items-end gap-1">
                        <span className="text-lg font-bold text-secondary">{c.price}</span>
                        <span className="text-xs text-white/50 mb-1">币/{c.unit}</span>
                      </div>
                      <Button
                        size="sm"
                        className="h-7 text-xs px-3 font-bold bg-white/10 hover:bg-primary hover:text-black"
                      >
                        立即下单
                      </Button>
                    </div>
                  </div>
                </div>
              ))}
          </div>
        ) : (
          <div className="grid gap-4">
            {courses
              .filter((c) => activeGame === "all" || c.game === activeGame)
              .map((c) => (
                <div
                  key={c.id}
                  className="glass-card p-0 rounded-xl overflow-hidden cursor-pointer group"
                  onClick={() => toast({ title: "购买成功", description: "课程已添加至学习中心" })}
                >
                  <div className="relative aspect-video">
                    <Image src={c.image || "/placeholder.svg"} alt={c.title} fill className="object-cover" />
                    <div className="absolute inset-0 bg-black/30 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                      <Play size={40} className="text-white fill-white" />
                    </div>
                    <div className="absolute bottom-2 left-2 px-2 py-1 bg-black/60 backdrop-blur-sm rounded text-[10px] font-bold">
                      {c.author} 亲授
                    </div>
                  </div>
                  <div className="p-3">
                    <h3 className="font-bold text-sm mb-1">{c.title}</h3>
                    <div className="flex items-center justify-between">
                      <span className="text-xs text-white/50">{c.students} 人已学</span>
                      <span className="text-primary font-bold">¥{c.price}</span>
                    </div>
                  </div>
                </div>
              ))}
          </div>
        )}
      </div>
    </div>
  )
}
[V0_FILE]jpg:file="public/account-icon-lol.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/account-icon-lol-y2PjpPOz5oYlch8T0ujtQ6ZYGI5eW4.jpg" isMerged="true"
[V0_FILE]jpg:file="public/account-icon-val.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/account-icon-val-nYUS6kQU7US6rH00n1R6d2SvSTYUyw.jpg" isMerged="true"
[V0_FILE]jpg:file="public/account-icon-hok.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/account-icon-hok-EWyjURhrwIeVwfk8d4S6XwTb4WWwfb.jpg" isMerged="true"
[V0_FILE]jpg:file="public/account-icon-gen.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true"
[V0_FILE]jpg:file="public/companion-cover-1.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true"
[V0_FILE]jpg:file="public/companion-cover-2.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true"
[V0_FILE]jpg:file="public/recharge-banner.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/recharge-banner-ARGN1sN8UVVYW0K9gJ1OVle7pJYoPf.jpg" isMerged="true"
[V0_FILE]typescript:file="lib/utils/account-evaluation.ts" isEdit="true" isQuickEdit="true" isMerged="true"
import { GAME_DATA } from "@/lib/data/game-data"

export type EvaluationInput = {
  gameName: string
  serverType: string // "热门服" | "普通服" | "鬼服"
  currentLevel: number
  maxLevel: number
  rankName: string

// Assets
  assetCounts: {
    legendary: number // 传说级
    epic: number // 史诗级
    rare: number // 优质级
    common: number // 普通级
  }

// Bonus
  registrationMonths: number
  rechargeAmount6Months: number
  mallConsumption?: number // Added mall consumption parameter

// Risk
  isRealNameVerified: boolean
  isRealNameOwner: boolean
  hasBanRecord: boolean
}

export type EvaluationResult = {
  totalScore: number
  valuation: number // Preliminary valuation
  loanAmount: number // Loan amount
  details: {
    baseScore: number
    assetScore: number
    bonusScore: number
    riskCoefficient: number
    consumptionMultiplier: number // Added consumption multiplier to result
  }
}

export function evaluateAccount(input: EvaluationInput): EvaluationResult {
  const gameConfig = GAME_DATA.games[input.gameName] || { score: 20, ranks: {} }

// 1. Base Value Score (Max 50)
  // Game Score (Max 30)
  const gameScore = gameConfig.score

// Server Score (Max 10)
  const serverScore = GAME_DATA.server_scores[input.serverType] || 8

// Level Score (Max 10)
  // Score = (Current / Max) * 10
  const levelRatio = Math.min(input.currentLevel / (input.maxLevel || 100), 1)
  const levelScore = Number.parseFloat((levelRatio * 10).toFixed(1))

const baseScore = gameScore + serverScore + levelScore

// 2. Core Asset Score (Max 30)
  // Asset Score = Sum(Count * Weight)
  // Cap count at 20 to avoid outliers as per requirements
  const getAssetScore = (count: number, weight: number) => Math.min(count, 20) * weight

const assetBaseScore =
    getAssetScore(input.assetCounts.legendary, GAME_DATA.asset_weights["传说级"]) +
    getAssetScore(input.assetCounts.epic, GAME_DATA.asset_weights["史诗级"]) +
    getAssetScore(input.assetCounts.rare, GAME_DATA.asset_weights["优质级"]) +
    getAssetScore(input.assetCounts.common, GAME_DATA.asset_weights["普通级"])

// Rank Bonus
  const rankBonus = gameConfig.ranks ? gameConfig.ranks[input.rankName] || 0 : 0

const coreAssetScore = Math.min(assetBaseScore + rankBonus, 30)

// 3. Bonus Score (Max 20)
  let timeScore = 0
  if (input.registrationMonths >= 25) timeScore = 10
  else if (input.registrationMonths >= 13) timeScore = 8
  else if (input.registrationMonths >= 7) timeScore = 5
  else timeScore = 3

// Recharge Amount (Max 10)
  // Score = min(Amount * 0.001, 10)
  const rechargeScore = Math.min(input.rechargeAmount6Months * 0.001, 10)

const bonusScore = timeScore + rechargeScore

// 4. Risk Correction Coefficient
  let riskKey = "未实名"
  if (input.isRealNameVerified) {
    if (input.isRealNameOwner) {
      riskKey = input.hasBanRecord ? "本人_有封号" : "本人_无封号"
    } else {
      riskKey = input.hasBanRecord ? "非本人_有封号" : "非本人_无封号"
    }
  }

const riskCoefficient = GAME_DATA.correction_coeffs[riskKey] || 0.7

let consumptionMultiplier = 1.0
  const consumption = input.mallConsumption || 0
  if (consumption >= 2000) {
    consumptionMultiplier = GAME_DATA.consumption_weights.level4
  } else if (consumption >= 500) {
    consumptionMultiplier = GAME_DATA.consumption_weights.level3
  } else if (consumption >= 100) {
    consumptionMultiplier = GAME_DATA.consumption_weights.level2
  } else {
    consumptionMultiplier = 1.0
  }

// Final Calculation
  const totalScore = Number.parseFloat(((baseScore + coreAssetScore + bonusScore) * riskCoefficient).toFixed(2))
  const valuation = Math.floor(totalScore * GAME_DATA.base_multiple)

let loanAmount = Math.floor(valuation * 0.6 * consumptionMultiplier)
  if (loanAmount < 500) {
    loanAmount = 0
  }

return {
    totalScore,
    valuation,
    loanAmount,
    details: {
      baseScore: Number.parseFloat(baseScore.toFixed(1)),
      assetScore: Number.parseFloat(coreAssetScore.toFixed(1)),
      bonusScore: Number.parseFloat(bonusScore.toFixed(1)),
      riskCoefficient,
      consumptionMultiplier, // Return multiplier for UI display
    },
  }
}
[V0_FILE]typescript:file="lib/data/game-cascade-data.ts" isMerged="true"
export type CascadeLevel = {
  value: string
  label: string
  children?: CascadeLevel[]
}

export type GameCascadeConfig = {
  productType: string // 商品类型
  regions: CascadeLevel[] // 游戏区
  attributes: {
    label: string
    type: "select" | "multiselect" | "input" | "slider"
    options?: string[]
    required?: boolean
  }[]
}

export const GAME_CASCADE_DATA: Record<string, GameCascadeConfig> = {
  三角洲行动: {
    productType: "账号",
    regions: [
      {
        value: "苹果",
        label: "苹果",
        children: [
          {
            value: "全区全服",
            label: "全区全服",
            children: [
              { value: "可二次", label: "可二次实名" },
              { value: "不可二次", label: "不可二次实名" },
            ],
          },
        ],
      },
      {
        value: "安卓",
        label: "安卓",
        children: [
          {
            value: "全区全服",
            label: "全区全服",
            children: [
              { value: "可二次", label: "可二次实名" },
              { value: "不可二次", label: "不可二次实名" },
            ],
          },
        ],
      },
      {
        value: "steam",
        label: "steam",
        children: [{ value: "全区全服", label: "全区全服" }],
      },
    ],
    attributes: [],
  },

梦幻西游畅玩服: {
    productType: "账号",
    regions: [
      {
        value: "畅玩服",
        label: "畅玩服",
        children: [
          { value: "建邺城", label: "建邺城" },
          { value: "龙拳", label: "龙拳" },
          { value: "横扫千军", label: "横扫千军" },
          { value: "龙卷雨击", label: "龙卷雨击" },
          { value: "纵横天下", label: "纵横天下" },
          { value: "紫气东来", label: "紫气东来" },
          { value: "无与伦比", label: "无与伦比" },
          { value: "紫禁之巅", label: "紫禁之巅" },
        ],
      },
    ],
    attributes: [
      {
        label: "门派",
        type: "select",
        options: [
          "大唐官府",
          "龙宫",
          "化生寺",
          "盘丝洞",
          "普陀山",
          "天宫",
          "女儿村",
          "五庄观",
          "方寸山",
          "魔王寨",
          "阴曹地府",
          "狮驼岭",
          "无",
        ],
        required: true,
      },
      {
        label: "角色性别",
        type: "select",
        options: ["男", "女"],
      },
      {
        label: "尊享权益",
        type: "select",
        options: ["超级绿通（2000元）", "高级绿通（540元）", "中级绿通（90元）", "无"],
      },
      {
        label: "整组号",
        type: "select",
        options: ["是", "否"],
      },
    ],
  },

坦克世界: {
    productType: "账号",
    regions: [
      {
        value: "360国服",
        label: "360国服",
      },
      {
        value: "其他服",
        label: "其他服",
      },
    ],
    attributes: [
      {
        label: "有无违规插件",
        type: "select",
        options: ["无", "有", "未查询未知"],
        required: true,
      },
      {
        label: "十级高级车辆",
        type: "multiselect",
        options: [
          "无",
          "VK7201",
          "07P(E)主战方案",
          "WT12",
          "777工程机动型",
          "260工程",
          "780工程",
          "T-22",
          "907工程",
          "268工程V型",
          "T95E6",
          "M60",
          "113BO",
          "WZ111QL",
          "齐天大圣",
          "121B",
          "T95酋长",
          "酋长MK.VI",
        ],
      },
      {
        label: "九级高级车辆",
        type: "multiselect",
        options: [
          "无",
          "50吨主战方案",
          "昆泽试验车",
          "T-55A",
          "07HK主战方案3型",
          "777工程II型",
          "283工程",
          "K-91II型",
          "AE一期",
          "1B概念车",
          "WZ114",
        ],
      },
      {
        label: "八级高级车辆",
        type: "multiselect",
        options: [
          "无",
          "59式",
          "黄金59式",
          "BZ-176",
          "703工程II型",
          "E-75TS",
          "IS-3A",
          "SU-130PM",
          "T-44-100",
          "超级潘兴",
          "天蝎",
          "克莱斯勒K",
        ],
      },
    ],
  },

穿越火线: {
    productType: "账号",
    regions: [
      {
        value: "电信",
        label: "电信",
        children: [
          { value: "安徽一区", label: "安徽一区" },
          { value: "福建一区", label: "福建一区" },
          { value: "广东一区", label: "广东一区" },
          { value: "广东二区", label: "广东二区" },
          { value: "湖北一区", label: "湖北一区" },
          { value: "江苏一区", label: "江苏一区" },
          { value: "上海一区", label: "上海一区" },
          { value: "四川一区", label: "四川一区" },
          { value: "浙江一区", label: "浙江一区" },
        ],
      },
      {
        value: "网通",
        label: "网通",
        children: [
          { value: "北京一区", label: "北京一区" },
          { value: "北京二区", label: "北京二区" },
          { value: "河南一区", label: "河南一区" },
          { value: "辽宁一区", label: "辽宁一区" },
          { value: "山东一区", label: "山东一区" },
        ],
      },
    ],
    attributes: [
      {
        label: "英雄武器",
        type: "select",
        options: ["无英雄武器", "1-5V", "6-10V", "11-20V", "20-30V", "30V以上"],
        required: true,
      },
      {
        label: "所属战区",
        type: "select",
        options: [
          "华北战区",
          "河南战区",
          "山东战区",
          "东北战区",
          "华中战区",
          "华南战区",
          "西部战区",
          "东部战区",
          "江苏战区",
        ],
      },
      {
        label: "排位级别",
        type: "select",
        options: ["无排位", "新锐", "精英", "专家", "大师", "宗师", "枪王", "枪王之王"],
      },
      {
        label: "实名修改",
        type: "select",
        options: ["可修改实名", "不可修改实名"],
      },
    ],
  },

王者荣耀: {
    productType: "账号",
    regions: [
      {
        value: "苹果",
        label: "苹果",
        children: [
          { value: "苹果QQ", label: "苹果QQ" },
          { value: "苹果微信", label: "苹果微信" },
        ],
      },
      {
        value: "安卓",
        label: "安卓",
        children: [
          { value: "安卓QQ", label: "安卓QQ" },
          { value: "安卓微信", label: "安卓微信" },
        ],
      },
    ],
    attributes: [
      {
        label: "防沉迷",
        type: "select",
        options: ["无防沉迷", "有防沉迷"],
        required: true,
      },
      {
        label: "实名修改",
        type: "select",
        options: ["可修改", "不可修改"],
        required: true,
      },
      {
        label: "荣耀水晶皮肤",
        type: "multiselect",
        options: [
          "倪克斯神谕-武则天",
          "九霄神辉-花木兰",
          "大秦宣太后-芈月",
          "鸣剑曳影-李白",
          "幻阙歌-貂蝉",
          "星空梦想-鲁班七号",
          "赤影疾锋-关羽",
          "天鹅之梦-小乔",
          "全息碎影-孙悟空",
          "银白咏叹调-铠",
        ],
      },
      {
        label: "传说皮肤",
        type: "multiselect",
        options: [
          "音你心动-小乔",
          "淬星耀世-赵云",
          "末日机甲-孙尚香",
          "天魔缭乱-吕布",
          "凤求凰-李白",
          "武圣-关羽",
          "仲夏夜之梦-貂蝉",
          "地狱火-孙悟空",
          "齐天大圣-孙悟空",
        ],
      },
    ],
  },

和平精英: {
    productType: "账号",
    regions: [
      {
        value: "安卓",
        label: "安卓",
        children: [{ value: "QQ", label: "QQ" }],
      },
      {
        value: "苹果",
        label: "苹果",
        children: [{ value: "微信", label: "微信" }],
      },
    ],
    attributes: [
      {
        label: "热门载具",
        type: "multiselect",
        options: [
          "阿斯顿·马丁DBS(红)",
          "阿斯顿·马丁DBX(橙)",
          "鬼马风驰",
          "海龙奔腾",
          "金龙耀世",
          "兰博基尼URUS(炫光金)",
          "玛莎拉蒂MC20(幻星粉)",
          "迈凯伦570S(炫冰蓝)",
          "特斯拉Cybertruck(镭光铂)",
          "焰龙咆哮",
        ],
      },
      {
        label: "热门枪械",
        type: "multiselect",
        options: [
          "AKM百合蜜语",
          "AKM-盖世英雄",
          "AWM花间之火",
          "AWM焰龙焚天",
          "GROZA焦糖拿铁",
          "Kar98K圣光天使",
          "M416风花雪月",
          "M416五爪金龙",
          "SCAR-L-纯梦嫁纱",
          "UMP45相思残雪",
        ],
      },
    ],
  },

原神: {
    productType: "账号",
    regions: [
      {
        value: "mihoyo服",
        label: "mihoyo服",
        children: [{ value: "天空服", label: "天空服" }],
      },
      {
        value: "B服",
        label: "B服",
        children: [{ value: "B服", label: "B服" }],
      },
      {
        value: "国际服",
        label: "国际服",
        children: [{ value: "国际服", label: "国际服" }],
      },
    ],
    attributes: [
      {
        label: "邮箱",
        type: "select",
        options: ["未绑定邮箱", "网易邮箱出售", "QQ邮箱", "字母Q邮箱", "其他邮箱", "邮箱不出售"],
        required: true,
      },
      {
        label: "邮箱实名",
        type: "select",
        options: ["已实名", "未实名"],
        required: true,
      },
      {
        label: "五星角色",
        type: "multiselect",
        options: [
          "林尼",
          "艾尔海森",
          "赛诺",
          "妮露",
          "纳西妲",
          "流浪者",
          "琴",
          "迪卢克",
          "七七",
          "莫娜",
          "刻晴",
          "钟离",
          "甘雨",
          "胡桃",
          "雷电将军",
          "枫原万叶",
          "神里绫华",
          "那维莱特",
          "芙宁娜",
        ],
      },
      {
        label: "五星武器",
        type: "multiselect",
        options: [
          "磐岩结绿",
          "猎人之径",
          "圣显之匙",
          "千夜浮梦",
          "风鹰剑",
          "天空之刃",
          "狼的末路",
          "护摩之杖",
          "雾切之回光",
          "薙草之稻光",
          "苍古自由之誓",
          "阿莫斯之弓",
        ],
      },
    ],
  },

穿越火线手游: {
    productType: "账号",
    regions: [
      {
        value: "安卓",
        label: "安卓",
        children: [
          { value: "安卓QQ", label: "安卓QQ" },
          { value: "安卓微信", label: "安卓微信" },
        ],
      },
      {
        value: "苹果",
        label: "苹果",
        children: [
          { value: "苹果QQ", label: "苹果QQ" },
          { value: "苹果微信", label: "苹果微信" },
        ],
      },
    ],
    attributes: [
      {
        label: "客户端",
        type: "select",
        options: ["全部", "苹果微信", "苹果QQ", "安卓微信", "安卓QQ", "全服通用"],
      },
      {
        label: "实名修改",
        type: "select",
        options: ["可修改", "不可修改"],
        required: true,
      },
    ],
  },

魔兽世界: {
    productType: "账号",
    regions: [
      {
        value: "亚服",
        label: "亚服",
        children: [
          {
            value: "大地的裂变",
            label: "大地的裂变",
            children: [
              { value: "伊弗斯", label: "伊弗斯" },
              { value: "瑪拉頓", label: "瑪拉頓" },
              { value: "阿拉希盆地", label: "阿拉希盆地" },
              { value: "鱼人", label: "鱼人" },
            ],
          },
          {
            value: "正式服",
            label: "正式服",
            children: [
              { value: "暗影之月", label: "暗影之月" },
              { value: "众星之子", label: "众星之子" },
              { value: "地狱吼", label: "地狱吼" },
              { value: "世界之树", label: "世界之树" },
            ],
          },
        ],
      },
      {
        value: "国服",
        label: "国服",
        children: [
          {
            value: "正式服",
            label: "正式服",
            children: [
              { value: "回音山", label: "回音山" },
              { value: "巨龙之吼", label: "巨龙之吼" },
              { value: "索瑞森", label: "索瑞森" },
              { value: "罗宁", label: "罗宁" },
            ],
          },
        ],
      },
    ],
    attributes: [],
  },
}
[V0_FILE]typescriptreact:file="components/account/dynamic-cascade-form.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Label } from "@/components/ui/label"
import { Input } from "@/components/ui/input"
import { Checkbox } from "@/components/ui/checkbox"
import { GAME_CASCADE_DATA } from "@/lib/data/game-cascade-data"

type DynamicCascadeFormProps = {
  gameName: string
  onDataChange: (data: Record<string, any>) => void
}

export function DynamicCascadeForm({ gameName, onDataChange }: DynamicCascadeFormProps) {
  const config = GAME_CASCADE_DATA[gameName]

const [selectedRegion, setSelectedRegion] = useState<string>("")
  const [selectedServer, setSelectedServer] = useState<string>("")
  const [selectedSubOption, setSelectedSubOption] = useState<string>("")
  const [attributeValues, setAttributeValues] = useState<Record<string, any>>({})

useEffect(() => {
    // Reset when game changes
    setSelectedRegion("")
    setSelectedServer("")
    setSelectedSubOption("")
    setAttributeValues({})
  }, [gameName])

useEffect(() => {
    // Notify parent of data changes
    onDataChange({
      region: selectedRegion,
      server: selectedServer,
      subOption: selectedSubOption,
      ...attributeValues,
    })
  }, [selectedRegion, selectedServer, selectedSubOption, attributeValues, onDataChange])

if (!config) {
    return <div className="text-gray-400 text-sm">该游戏暂无配置</div>
  }

const currentRegion = config.regions.find((r) => r.value === selectedRegion)
  const serverOptions = currentRegion?.children || []

const currentServer = serverOptions.find((s) => s.value === selectedServer)
  const subOptions = currentServer?.children || []

const handleAttributeChange = (label: string, value: any) => {
    setAttributeValues((prev) => ({ ...prev, [label]: value }))
  }

const handleMultiSelectChange = (label: string, option: string, checked: boolean) => {
    setAttributeValues((prev) => {
      const current = prev[label] || []
      if (checked) {
        return { ...prev, [label]: [...current, option] }
      } else {
        return { ...prev, [label]: current.filter((v: string) => v !== option) }
      }
    })
  }

return (
    <div className="space-y-5">
      {/* Region Selection */}
      {config.regions.length > 0 && (
        <div className="space-y-2">
          <Label className="text-gray-400">游戏区</Label>
          <Select
            value={selectedRegion}
            onValueChange={(v) => {
              setSelectedRegion(v)
              setSelectedServer("")
              setSelectedSubOption("")
            }}
          >
            <SelectTrigger className="bg-[#12121A] border-white/10 h-11 text-white focus:ring-1 focus:ring-blue-500">
              <SelectValue placeholder="选择游戏区" />
            </SelectTrigger>
            <SelectContent className="bg-[#1A1A2E] border-white/10 text-white">
              {config.regions.map((region) => (
                <SelectItem key={region.value} value={region.value}>
                  {region.label}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>
      )}

{/* Server Selection */}
      {serverOptions.length > 0 && (
        <div className="space-y-2">
          <Label className="text-gray-400">游戏服</Label>
          <Select
            value={selectedServer}
            onValueChange={(v) => {
              setSelectedServer(v)
              setSelectedSubOption("")
            }}
            disabled={!selectedRegion}
          >
            <SelectTrigger className="bg-[#12121A] border-white/10 h-11 text-white focus:ring-1 focus:ring-blue-500">
              <SelectValue placeholder="选择服务器" />
            </SelectTrigger>
            <SelectContent className="bg-[#1A1A2E] border-white/10 text-white max-h-[300px]">
              {serverOptions.map((server) => (
                <SelectItem key={server.value} value={server.value}>
                  {server.label}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>
      )}

{/* Sub Options */}
      {subOptions.length > 0 && (
        <div className="space-y-2">
          <Label className="text-gray-400">游戏属性</Label>
          <Select value={selectedSubOption} onValueChange={setSelectedSubOption} disabled={!selectedServer}>
            <SelectTrigger className="bg-[#12121A] border-white/10 h-11 text-white focus:ring-1 focus:ring-blue-500">
              <SelectValue placeholder="选择属性" />
            </SelectTrigger>
            <SelectContent className="bg-[#1A1A2E] border-white/10 text-white">
              {subOptions.map((option) => (
                <SelectItem key={option.value} value={option.value}>
                  {option.label}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>
      )}

{/* Dynamic Attributes */}
      {config.attributes.map((attr, index) => (
        <div key={index} className="space-y-2">
          <Label className="text-gray-400">
            {attr.label}
            {attr.required && <span className="text-red-400 ml-1">*</span>}
          </Label>

{attr.type === "select" && attr.options && (
            <Select
              value={attributeValues[attr.label] || ""}
              onValueChange={(v) => handleAttributeChange(attr.label, v)}
            >
              <SelectTrigger className="bg-[#12121A] border-white/10 h-11 text-white focus:ring-1 focus:ring-purple-500">
                <SelectValue placeholder={`选择${attr.label}`} />
              </SelectTrigger>
              <SelectContent className="bg-[#1A1A2E] border-white/10 text-white max-h-[300px]">
                {attr.options.map((option) => (
                  <SelectItem key={option} value={option}>
                    {option}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          )}

{attr.type === "multiselect" && attr.options && (
            <div className="bg-[#12121A] border border-white/10 rounded-lg p-4 max-h-[200px] overflow-y-auto space-y-2">
              {attr.options.slice(0, 20).map((option) => (
                <div key={option} className="flex items-center space-x-2">
                  <Checkbox
                    id={`${attr.label}-${option}`}
                    checked={(attributeValues[attr.label] || []).includes(option)}
                    onCheckedChange={(checked) => handleMultiSelectChange(attr.label, option, checked as boolean)}
                    className="border-white/20"
                  />
                  <label htmlFor={`${attr.label}-${option}`} className="text-sm text-gray-300 cursor-pointer">
                    {option}
                  </label>
                </div>
              ))}
              {attr.options.length > 20 && <div className="text-xs text-gray-500 text-center pt-2">显示前20项...</div>}
            </div>
          )}

{attr.type === "input" && (
            <Input
              value={attributeValues[attr.label] || ""}
              onChange={(e) => handleAttributeChange(attr.label, e.target.value)}
              placeholder={`输入${attr.label}`}
              className="bg-[#12121A] border-white/10 h-11 text-white focus:border-purple-500"
            />
          )}
        </div>
      ))}

{/* Screenshot Upload Hint */}
      <div className="bg-[#12121A] border border-blue-500/20 rounded-lg p-3 mt-4">
        <p className="text-xs text-blue-300 flex items-center gap-2">
          <span className="text-blue-500">📸</span>
          请准备游戏截图以便进行账号验证
        </p>
      </div>
    </div>
  )
}
[V0_FILE]jpg:file="public/gamer-profile-avatar.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/gamer-profile-avatar-COw1ajJNPI9IRiH3NWT68FZhAUYdxR.jpg" isMerged="true"
[V0_FILE]typescriptreact:file="app/events/today/page.tsx" isMerged="true"
"use client"

import { ArrowLeft, Clock, Users, Trophy, MapPin } from "lucide-react"
import { useRouter } from "next/navigation"
import Image from "next/image"
import Link from "next/link"

export default function TodayEventsPage() {
  const router = useRouter()

const events = [
    {
      id: 1,
      title: "2025 玩值杯全明星邀请赛",
      game: "英雄联盟",
      time: "20:00",
      status: "即将开始",
      teams: ["RNG", "EDG"],
      venue: "上海梅赛德斯奔驰中心",
      prize: "100万",
      viewers: "25.6w",
      image: "/tournament-event-today.jpg",
    },
    {
      id: 2,
      title: "王者荣耀职业联赛",
      game: "王者荣耀",
      time: "18:30",
      status: "直播中",
      teams: ["AG超玩会", "QGhappy"],
      venue: "线上赛",
      prize: "50万",
      viewers: "18.2w",
      image: "/tournament-event-today.jpg",
    },
  ]

return (
    <div className="min-h-screen pb-24 bg-background">
      <header className="sticky top-0 z-40 bg-[#0D0D15]/90 backdrop-blur-md border-b border-white/5 px-4 py-3 flex items-center gap-3">
        <button onClick={() => router.back()} className="p-1 hover:bg-white/10 rounded-full transition-colors">
          <ArrowLeft size={20} className="text-white" />
        </button>
        <h1 className="font-bold text-lg text-white">今日赛事</h1>
      </header>

<div className="p-4 space-y-4">
        {events.map((event) => (
          <Link
            key={event.id}
            href={`/events/${event.id}`}
            className="block bg-[#1A1A22] rounded-xl overflow-hidden border border-white/5 hover:border-primary/30 transition-all"
          >
            <div className="relative aspect-[16/9]">
              <Image src={event.image || "/placeholder.svg"} alt={event.title} fill className="object-cover" />
              <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-transparent to-transparent" />
              {event.status === "直播中" && (
                <div className="absolute top-3 left-3 flex items-center gap-1 bg-secondary/90 backdrop-blur-md px-2 py-1 rounded-md text-xs font-bold text-white animate-pulse">
                  <span className="w-2 h-2 rounded-full bg-white" />
                  {event.status}
                </div>
              )}
              <div className="absolute bottom-3 left-3 right-3">
                <h3 className="font-bold text-white mb-1">{event.title}</h3>
                <div className="flex items-center gap-2 text-xs text-white/70">
                  <Clock size={14} />
                  {event.time}
                  <Users size={14} className="ml-2" />
                  {event.viewers}
                </div>
              </div>
            </div>

<div className="p-4 space-y-3">
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-3">
                  <div className="text-center">
                    <div className="font-bold text-white">{event.teams[0]}</div>
                    <div className="text-xs text-white/50">战队</div>
                  </div>
                  <div className="text-primary font-bold">VS</div>
                  <div className="text-center">
                    <div className="font-bold text-white">{event.teams[1]}</div>
                    <div className="text-xs text-white/50">战队</div>
                  </div>
                </div>
                <div className="text-right">
                  <div className="flex items-center gap-1 text-yellow-500 text-sm font-bold">
                    <Trophy size={14} />
                    {event.prize}
                  </div>
                  <div className="text-xs text-white/50">奖金池</div>
                </div>
              </div>

<div className="flex items-center gap-2 text-xs text-white/50">
                <MapPin size={14} />
                {event.venue}
              </div>
            </div>
          </Link>
        ))}
      </div>
    </div>
  )
}
[V0_FILE]jpg:file="public/game-wow.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/game-wow-2lsabB7V75fa92RDoINvEMkwD6WznE.jpg" isMerged="true"
[V0_FILE]jpg:file="public/game-diablo.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/game-diablo-fQddYFDriEePLJIJnq5qmbY9tQ4v2m.jpg" isMerged="true"
[V0_FILE]jpg:file="public/game-hearthstone.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/game-hearthstone-4XRSOPynDDDOWEi8uUSrtgXxcy8DwT.jpg" isMerged="true"
[V0_FILE]jpg:file="public/game-overwatch.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/game-overwatch-qYstS6PdRpyT1h5w3qk7dmcIe3U2ez.jpg" isMerged="true"
[V0_FILE]jpg:file="public/product-keyboard.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/product-keyboard-a8EPEletr0IUnm2X2Qq9H5bjQxXYCx.jpg" isMerged="true"
[V0_FILE]jpg:file="public/product-mousepad.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/product-mousepad-JmzsKbjOZulTaRTUfixJBXM2BEhBel.jpg" isMerged="true"
[V0_FILE]jpg:file="public/product-headset.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/product-headset-7Rd4glj0JqwNJjiPa73E2HfyyIf98d.jpg" isMerged="true"
[V0_FILE]jpg:file="public/dress-witch-cat.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/dress-witch-cat-4wUUb5gaLHvbD9RiRmGexlijYTRG4T.jpg" isMerged="true"
[V0_FILE]jpg:file="public/dress-tropical.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true"
[V0_FILE]jpg:file="public/dress-angel.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true"
[V0_FILE]jpg:file="public/dress-dunhuang.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true"
[V0_FILE]jpg:file="public/dress-demon.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true"
[V0_FILE]jpg:file="public/dress-panda.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true"
[V0_FILE]jpg:file="public/user-avatar.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/user-avatar-AvcYAwu0M9V9OEyppqKaEJRDgVARU1.jpg" isMerged="true"
[V0_FILE]jpg:file="public/game-lol.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/game-lol-OZNUdrWIlocxNlnFwwY84ms8YMBYvP.jpg" isMerged="true"
[V0_FILE]jpg:file="public/game-hok.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/game-hok-tED972UEhxaupJVaMl5rHG7jVOOL82.jpg" isMerged="true"
[V0_FILE]jpg:file="public/tournament-event-today.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/tournament-event-today-5jEWPi0UuR6NPNXjgHTBuW1sDmjDrf.jpg" isMerged="true"
[V0_FILE]typescriptreact:file="app/booking/loading.tsx" isMerged="true"
export default function BookingLoading() {
  return (
    <div className="min-h-screen flex items-center justify-center bg-background">
      <div className="flex flex-col items-center gap-4">
        <div className="w-8 h-8 border-2 border-primary border-t-transparent rounded-full animate-spin" />
        <div className="text-white/50 text-sm">加载中...</div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/services/account/loading.tsx" isEdit="true" isMerged="true"
export default function AccountLoading() {
  return (
    <div className="min-h-screen flex items-center justify-center bg-background">
      <div className="flex flex-col items-center gap-4">
        <div className="w-8 h-8 border-2 border-primary border-t-transparent rounded-full animate-spin" />
        <div className="text-white/50 text-sm">加载中...</div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/live/[id]/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useRef } from "react"
import { useRouter } from "next/navigation"
import { ArrowLeft, Heart, Share2, Gift, Send, MoreHorizontal, Users, MessageCircle, ThumbsUp } from "lucide-react"
import Image from "next/image"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { toast } from "@/hooks/use-toast"
import { useAppContext } from "@/components/providers/app-provider"

export default function LiveRoomPage({ params }: { params: { id: string } }) {
  const router = useRouter()
  const { pay } = useAppContext()
  const [comment, setComment] = useState("")
  const [isFollowed, setIsFollowed] = useState(false)
  const [showCommunity, setShowCommunity] = useState(false)
  const [showGiftPanel, setShowGiftPanel] = useState(false)
  const [showSharePanel, setShowSharePanel] = useState(false)
  const [likeCount, setLikeCount] = useState(1258)
  const [isLiked, setIsLiked] = useState(false)
  const [floatingHearts, setFloatingHearts] = useState<{ id: number; x: number }[]>([])
  const [comments, setComments] = useState([
    { id: 1, level: 12, badge: "yellow", user: "小飞侠", text: "主播这波操作太细了！666" },
    { id: 2, level: 5, badge: "primary", user: "电竞迷", text: "求BGM" },
    { id: 3, level: 0, badge: "purple", user: "系统公告", text: "严禁违规发言，文明直播间", isSystem: true },
  ])
  const commentIdRef = useRef(4)

const gameBackgrounds: Record<string, string> = {
    "1": "/game-lol-bg.jpg",
    "2": "/game-valorant-bg.jpg",
    "3": "/game-pubg-bg.jpg",
    "4": "/game-pubg-bg.jpg",
    "5": "/game-genshin-bg.jpg",
    "6": "/game-lol-bg.jpg",
  }

const players = [
    {
      id: "1",
      name: "GM-远洋",
      avatar: "/streamer-1.jpg",
      title: "国服第一盲僧",
      fans: "46K",
      partyMembers: 1205,
      game: "英雄联盟",
    },
    {
      id: "2",
      name: "卡若",
      avatar: "/streamer-2.jpg",
      title: "职业战队退役",
      fans: "32K",
      partyMembers: 856,
      game: "无畏契约",
    },
    {
      id: "3",
      name: "小柠檬",
      avatar: "/streamer-3.jpg",
      title: "人皮话多",
      fans: "18K",
      partyMembers: 432,
      game: "和平精英",
    },
    {
      id: "4",
      name: "阿伟",
      avatar: "/streamer-4.jpg",
      title: "绝地求生刚枪王",
      fans: "25K",
      partyMembers: 678,
      game: "绝地求生",
    },
    {
      id: "5",
      name: "七七",
      avatar: "/streamer-5.jpg",
      title: "甜美声优",
      fans: "52K",
      partyMembers: 1502,
      game: "原神",
    },
    {
      id: "6",
      name: "大魔王",
      avatar: "/streamer-6.jpg",
      title: "中单法王",
      fans: "38K",
      partyMembers: 945,
      game: "英雄联盟",
    },
  ]

const gifts = [
    { id: 1, name: "棒棒糖", price: 10, icon: "🍭" },
    { id: 2, name: "玫瑰花", price: 52, icon: "🌹" },
    { id: 3, name: "告白气球", price: 520, icon: "🎈" },
    { id: 4, name: "跑车", price: 5000, icon: "🏎️" },
    { id: 5, name: "火箭", price: 10000, icon: "🚀" },
    { id: 6, name: "城堡", price: 50000, icon: "🏰" },
  ]

const currentPlayer = players.find((p) => p.id === params.id) || players[0]
  const backgroundImage = gameBackgrounds[params.id] || "/esports-live-stream-gameplay.jpg"

const handleLike = () => {
    setLikeCount((prev) => prev + 1)
    setIsLiked(true)
    // 添加飘心动画
    const newHeart = { id: Date.now(), x: Math.random() * 60 - 30 }
    setFloatingHearts((prev) => [...prev, newHeart])
    setTimeout(() => {
      setFloatingHearts((prev) => prev.filter((h) => h.id !== newHeart.id))
    }, 1500)
  }

const handleSendComment = () => {
    if (!comment.trim()) return
    const newComment = {
      id: commentIdRef.current++,
      level: Math.floor(Math.random() * 20) + 1,
      badge: ["yellow", "primary", "green", "blue"][Math.floor(Math.random() * 4)],
      user: "我",
      text: comment,
    }
    setComments((prev) => [...prev, newComment])
    setComment("")
    toast({ title: "评论成功", description: "你的评论已发送" })
  }

const handleSendGift = (gift: (typeof gifts)[0]) => {
    pay(gift.price, "diamonds", `送出${gift.name}`, "product")
    setShowGiftPanel(false)
    // 添加礼物弹幕
    const giftComment = {
      id: commentIdRef.current++,
      level: 0,
      badge: "pink",
      user: "我",
      text: `送出了 ${gift.icon} ${gift.name}`,
      isGift: true,
    }
    setComments((prev) => [...prev, giftComment])
  }

const handleShare = (platform: string) => {
    toast({
      title: "分享成功",
      description: `已分享到${platform}`,
    })
    setShowSharePanel(false)
  }

const handleJoinParty = () => {
    toast({
      title: "加入成功",
      description: `已加入 ${currentPlayer.name} 的粉丝派对群`,
    })
    setShowCommunity(false)
    setTimeout(() => {
      router.push(`/chat/${params.id}`)
    }, 1000)
  }

return (
    <div className="h-screen w-full bg-black relative overflow-hidden flex flex-col">
      {/* Background Live Stream */}
      <div className="absolute inset-0 z-0">
        <Image src={backgroundImage || "/placeholder.svg"} alt="Live" fill className="object-cover" priority />
        <div className="absolute inset-0 bg-gradient-to-b from-black/30 via-transparent to-black/60" />
      </div>

<div className="absolute bottom-24 right-4 z-30 pointer-events-none">
        {floatingHearts.map((heart) => (
          <div
            key={heart.id}
            className="absolute animate-float-up"
            style={{
              left: `${heart.x}px`,
              animation: "floatUp 1.5s ease-out forwards",
            }}
          >
            <Heart size={24} className="text-pink-500 fill-pink-500" />
          </div>
        ))}
      </div>

{/* Header */}
      <div className="relative z-20 pt-safe px-4 py-2 flex items-center justify-between">
        <div className="flex items-center gap-2 bg-black/20 backdrop-blur-md rounded-full p-1 pr-3">
          <button onClick={() => router.back()} className="p-1">
            <ArrowLeft size={20} className="text-white" />
          </button>
          <div className="flex items-center gap-2">
            <div className="w-8 h-8 rounded-full border border-white/20 overflow-hidden relative">
              <Image
                src={currentPlayer.avatar || "/placeholder.svg"}
                alt={currentPlayer.name}
                fill
                className="object-cover"
                sizes="32px"
              />
            </div>
            <div>
              <h3 className="text-xs font-bold text-white">{currentPlayer.name}</h3>
              <p className="text-[10px] text-white/70">12.5w观看 · {currentPlayer.game}</p>
            </div>
          </div>
          <button
            className={`ml-2 px-3 py-1 rounded-full text-xs font-bold transition-colors ${isFollowed ? "bg-white/10 text-white/50" : "bg-primary text-white"}`}
            onClick={() => setIsFollowed(!isFollowed)}
          >
            {isFollowed ? "已关注" : "关注"}
          </button>
        </div>

<div className="flex items-center gap-3">
          <div className="flex items-center gap-1 bg-black/20 backdrop-blur-md px-2 py-1 rounded-full">
            <ThumbsUp size={14} className="text-pink-400" />
            <span className="text-xs text-white">{likeCount}</span>
          </div>
          <div className="flex -space-x-2">
            {[1, 2, 3].map((i) => (
              <div key={i} className="w-8 h-8 rounded-full border border-white/10 overflow-hidden relative">
                <Image src={`/viewer-${i}.jpg`} alt="Viewer" fill className="object-cover" sizes="32px" />
              </div>
            ))}
          </div>
          <button className="w-8 h-8 rounded-full bg-black/20 backdrop-blur-md flex items-center justify-center">
            <MoreHorizontal size={18} className="text-white" />
          </button>
        </div>
      </div>

{/* Community Button */}
      <Dialog open={showCommunity} onOpenChange={setShowCommunity}>
        <DialogTrigger asChild>
          <button className="absolute right-4 top-1/3 z-30 flex flex-col items-center gap-1 bg-gradient-to-b from-primary/80 to-purple-600/80 backdrop-blur-md px-3 py-4 rounded-2xl border border-white/20 shadow-lg shadow-primary/30 hover:scale-105 transition-transform">
            <Users size={24} className="text-white" />
            <span className="text-[10px] text-white font-bold">粉丝群</span>
            <span className="text-[8px] text-white/70">{currentPlayer.partyMembers}</span>
          </button>
        </DialogTrigger>
        <DialogContent className="bg-zinc-900 border-white/10 text-white max-w-sm">
          <DialogHeader>
            <DialogTitle className="flex items-center gap-2">
              <MessageCircle className="text-primary" size={20} />
              {currentPlayer.name} 的派对群
            </DialogTitle>
          </DialogHeader>
          <div className="space-y-4 py-4">
            <div className="flex items-center gap-4 p-4 bg-white/5 rounded-xl border border-white/10">
              <div className="w-16 h-16 rounded-full overflow-hidden border-2 border-primary relative">
                <Image
                  src={currentPlayer.avatar || "/placeholder.svg"}
                  alt={currentPlayer.name}
                  fill
                  className="object-cover"
                  sizes="64px"
                />
              </div>
              <div className="flex-1">
                <h4 className="font-bold text-lg">{currentPlayer.name}</h4>
                <p className="text-xs text-white/60">{currentPlayer.title}</p>
                <div className="flex items-center gap-3 mt-2 text-xs text-white/50">
                  <span className="flex items-center gap-1">
                    <Heart size={12} className="text-pink-500" />
                    {currentPlayer.fans} 粉丝
                  </span>
                  <span className="flex items-center gap-1">
                    <Users size={12} className="text-blue-500" />
                    {currentPlayer.partyMembers} 群成员
                  </span>
                </div>
              </div>
            </div>

<div className="p-4 bg-gradient-to-r from-primary/10 to-purple-500/10 rounded-xl border border-primary/20">
              <h5 className="font-bold text-sm mb-2 flex items-center gap-2">
                <span className="w-2 h-2 rounded-full bg-green-500 animate-pulse" />
                派对正在进行中
              </h5>
              <p className="text-xs text-white/70 leading-relaxed">
                加入 {currentPlayer.name} 的专属粉丝派对群，与主播和其他粉丝实时互动、语音开黑、参与专属福利活动！
              </p>
            </div>

<Button
              onClick={handleJoinParty}
              className="w-full bg-gradient-to-r from-primary to-purple-600 hover:from-primary/90 hover:to-purple-600/90 font-bold"
            >
              <Users size={16} className="mr-2" />
              立即加入派对群
            </Button>
          </div>
        </DialogContent>
      </Dialog>

{/* Main Content Spacer */}
      <div className="flex-1" />

{/* Chat Area */}
      <div className="relative z-20 px-4 pb-2 space-y-2 max-h-[30vh] overflow-y-auto mask-image-t">
        {comments.map((c) => (
          <div key={c.id} className="flex items-start gap-2">
            {!c.isSystem && (
              <span
                className={`px-1.5 rounded text-[10px] font-bold mt-0.5 ${
                  c.badge === "yellow"
                    ? "bg-yellow-500/80 text-black"
                    : c.badge === "primary"
                      ? "bg-primary/80 text-white"
                      : c.badge === "purple"
                        ? "bg-purple-500/80 text-white"
                        : c.badge === "pink"
                          ? "bg-pink-500/80 text-white"
                          : "bg-green-500/80 text-white"
                }`}
              >
                LV.{c.level}
              </span>
            )}
            {c.isSystem ? (
              <span className="bg-purple-500/80 px-1.5 rounded text-[10px] font-bold text-white mt-0.5">管理员</span>
            ) : null}
            <p
              className={`text-sm ${c.isSystem ? "text-yellow-400 font-bold" : c.isGift ? "text-pink-400" : "text-white/90"}`}
            >
              <span className="text-blue-400 font-bold opacity-80">{c.user}:</span> {c.text}
            </p>
          </div>
        ))}
      </div>

{/* Bottom Actions */}
      <div className="relative z-20 px-4 pb-6 pt-2 flex items-center gap-3">
        <div className="flex-1 h-10 bg-black/40 backdrop-blur-md rounded-full flex items-center px-4 border border-white/10">
          <input
            type="text"
            placeholder="说点什么..."
            className="bg-transparent w-full text-sm text-white placeholder:text-white/50 outline-none"
            value={comment}
            onChange={(e) => setComment(e.target.value)}
            onKeyDown={(e) => e.key === "Enter" && handleSendComment()}
          />
          <button onClick={handleSendComment}>
            <Send size={18} className="text-white/50 hover:text-primary transition-colors" />
          </button>
        </div>

<Dialog open={showGiftPanel} onOpenChange={setShowGiftPanel}>
          <DialogTrigger asChild>
            <button className="p-2.5 rounded-full bg-black/40 backdrop-blur-md hover:bg-white/10 transition-colors">
              <Gift size={22} className="text-pink-500" />
            </button>
          </DialogTrigger>
          <DialogContent className="bg-zinc-900 border-white/10 text-white max-w-sm">
            <DialogHeader>
              <DialogTitle>送礼物给主播</DialogTitle>
            </DialogHeader>
            <div className="grid grid-cols-3 gap-3 py-4">
              {gifts.map((gift) => (
                <button
                  key={gift.id}
                  onClick={() => handleSendGift(gift)}
                  className="flex flex-col items-center gap-2 p-3 bg-white/5 rounded-xl hover:bg-white/10 transition-colors border border-white/5 hover:border-pink-500/30"
                >
                  <span className="text-3xl">{gift.icon}</span>
                  <span className="text-xs font-bold">{gift.name}</span>
                  <span className="text-[10px] text-pink-400">{gift.price} 钻石</span>
                </button>
              ))}
            </div>
          </DialogContent>
        </Dialog>

<Dialog open={showSharePanel} onOpenChange={setShowSharePanel}>
          <DialogTrigger asChild>
            <button className="p-2.5 rounded-full bg-black/40 backdrop-blur-md hover:bg-white/10 transition-colors">
              <Share2 size={22} className="text-white" />
            </button>
          </DialogTrigger>
          <DialogContent className="bg-zinc-900 border-white/10 text-white max-w-sm">
            <DialogHeader>
              <DialogTitle>分享直播间</DialogTitle>
            </DialogHeader>
            <div className="grid grid-cols-4 gap-4 py-4">
              {[
                { name: "微信", icon: "💬", color: "bg-green-500" },
                { name: "朋友圈", icon: "🌟", color: "bg-green-600" },
                { name: "QQ", icon: "🐧", color: "bg-blue-500" },
                { name: "微博", icon: "📢", color: "bg-red-500" },
              ].map((platform) => (
                <button
                  key={platform.name}
                  onClick={() => handleShare(platform.name)}
                  className="flex flex-col items-center gap-2"
                >
                  <div className={`w-12 h-12 rounded-full ${platform.color} flex items-center justify-center text-xl`}>
                    {platform.icon}
                  </div>
                  <span className="text-xs">{platform.name}</span>
                </button>
              ))}
            </div>
            <div className="flex items-center gap-2 p-3 bg-white/5 rounded-xl">
              <input
                type="text"
                value={`https://wanzhi.gg/live/${params.id}`}
                readOnly
                className="flex-1 bg-transparent text-xs text-white/70 outline-none"
              />
              <Button
                size="sm"
                variant="outline"
                className="h-7 text-xs bg-transparent"
                onClick={() => {
                  navigator.clipboard.writeText(`https://wanzhi.gg/live/${params.id}`)
                  toast({ title: "链接已复制" })
                }}
              >
                复制
              </Button>
            </div>
          </DialogContent>
        </Dialog>

export default function GearPage() {
  const router = useRouter()
  const products = [
    { id: 1, name: "罗技 G Pro X Superlight", price: 899, image: "/gear-mouse.jpg", tag: "职业首选", category: "鼠标" },
    { id: 2, name: "雷蛇 猎魂光蛛 V3", price: 1299, image: "/gear-keyboard.jpg", tag: "光轴科技", category: "键盘" },
    { id: 3, name: "卓威 XL2546K", price: 3499, image: "/gear-monitor.jpg", tag: "360Hz", category: "显示器" },
    { id: 4, name: "HyperX Cloud II", price: 599, image: "/gear-headset.jpg", tag: "7.1声道", category: "耳机" },
    { id: 5, name: "赛睿 QcK Heavy", price: 199, image: "/gear-mousepad.jpg", tag: "加厚版", category: "鼠标垫" },
    { id: 6, name: "电竞座椅 GT900", price: 1999, image: "/gear-chair.jpg", tag: "人体工学", category: "座椅" },
  ]

return (
    <div className="min-h-screen pb-24 bg-background">
      <header className="sticky top-0 z-40 glass px-4 py-3 flex items-center justify-between">
        <div className="flex items-center gap-3">
          <button onClick={() => router.back()} className="text-white/70 hover:text-white">
            <ArrowLeft size={20} />
          </button>
          <h1 className="font-bold text-lg">电竞外设</h1>
        </div>
        <Button variant="ghost" size="icon" className="rounded-full bg-white/5">
          <ShoppingCart size={18} />
        </Button>
      </header>

{/* 分类筛选 */}
      <div className="px-4 py-3 flex gap-2 overflow-x-auto no-scrollbar">
        {["全部", "鼠标", "键盘", "耳机", "显示器", "鼠标垫", "座椅"].map((cat, i) => (
          <button
            key={cat}
            className={`whitespace-nowrap text-xs font-bold px-4 py-2 rounded-full transition-colors ${
              i === 0 ? "bg-primary text-black" : "bg-white/5 text-white/60 hover:bg-white/10"
            }`}
          >
            {cat}
          </button>
        ))}
      </div>

<div className="p-4 grid grid-cols-2 gap-4">
        {products.map((p) => (
          <div
            key={p.id}
            className="glass-card rounded-xl overflow-hidden group cursor-pointer border border-white/5 hover:border-primary/30 transition-colors"
          >
            <div className="relative aspect-square bg-zinc-800">
              <Image
                src={p.image || "/placeholder.svg"}
                alt={p.name}
                fill
                className="object-cover group-hover:scale-105 transition-transform"
              />
              <div className="absolute top-2 left-2 bg-red-500 text-white text-[10px] px-2 py-0.5 rounded font-bold">
                {p.tag}
              </div>
              <div className="absolute top-2 right-2 bg-black/50 text-white/80 text-[10px] px-2 py-0.5 rounded">
                {p.category}
              </div>
            </div>
            <div className="p-3">
              <h3 className="font-bold text-sm text-white truncate mb-2">{p.name}</h3>
              <div className="flex items-center justify-between">
                <span className="text-primary font-bold">¥{p.price}</span>
                <Button
                  size="sm"
                  className="h-7 text-xs px-3"
                  onClick={(e) => {
                    e.stopPropagation()
                    toast({ title: "已加入购物车", description: p.name })
                  }}
                >
                  购买
                </Button>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}
[V0_FILE]jpg:file="public/gear-mouse.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/gear-mouse-bOmiW9qDDgyy48DO45z6zIIRuAIo4V.jpg" isMerged="true"
[V0_FILE]jpg:file="public/gear-keyboard.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/gear-keyboard-jRl0b7CWSJ7bZTaQq4D3hU6ERD5dLu.jpg" isMerged="true"
[V0_FILE]jpg:file="public/gear-monitor.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/gear-monitor-tmbBhg8iECdJedkfGsmJPqhNH1vRWs.jpg" isMerged="true"
[V0_FILE]jpg:file="public/gear-headset.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/gear-headset-egr1I5eEPQmpfeL8cT2moPQbZL3z2I.jpg" isMerged="true"
[V0_FILE]jpg:file="public/gear-mousepad.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/gear-mousepad-6Bt2lxSt4egUzefZQsjqBRppKzh7lk.jpg" isMerged="true"
[V0_FILE]jpg:file="public/gear-chair.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/gear-chair-rFcOh2IW7q2fvGPabG1yPV2mgETgM2.jpg" isMerged="true"
[V0_FILE]typescriptreact:file="app/mall/points/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { ArrowLeft, Gift, Zap, Share2, Flame, Search } from "lucide-react"
import Image from "next/image"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { toast } from "@/hooks/use-toast"

export default function PointCardsPage() {
  const router = useRouter()
  const [searchQuery, setSearchQuery] = useState("")
  const [selectedGame, setSelectedGame] = useState<string | null>(null)

const games = [
    { id: "wow", name: "魔兽世界", image: "/point-card-wow.jpg", discount: "9折", tag: "经典", category: "PC" },
    {
      id: "diablo",
      name: "暗黑破坏神4",
      image: "/point-card-diablo.jpg",
      discount: "85折",
      tag: "热卖",
      category: "PC",
    },
    {
      id: "hearthstone",
      name: "炉石传说",
      image: "/point-card-hearthstone.jpg",
      discount: "88折",
      tag: "新品",
      category: "全平台",
    },
    {
      id: "overwatch",
      name: "守望先锋2",
      image: "/point-card-overwatch.jpg",
      discount: "9折",
      tag: "",
      category: "PC",
    },
    { id: "lol", name: "英雄联盟", image: "/point-card-lol.jpg", discount: "95折", tag: "热门", category: "PC" },
    { id: "hok", name: "王者荣耀", image: "/point-card-hok.jpg", discount: "95折", tag: "热门", category: "手游" },
    { id: "pubg", name: "和平精英", image: "/point-card-pubg.jpg", discount: "92折", tag: "热门", category: "手游" },
    { id: "genshin", name: "原神", image: "/point-card-genshin.jpg", discount: "9折", tag: "热卖", category: "全平台" },
    {
      id: "valorant",
      name: "无畏契约",
      image: "/point-card-valorant.jpg",
      discount: "88折",
      tag: "新品",
      category: "PC",
    },
    {
      id: "fortnite",
      name: "堡垒之夜",
      image: "/point-card-fortnite.jpg",
      discount: "85折",
      tag: "",
      category: "全平台",
    },
    { id: "apex", name: "Apex英雄", image: "/point-card-apex.jpg", discount: "9折", tag: "", category: "全平台" },
    { id: "cs2", name: "CS2", image: "/point-card-cs2.jpg", discount: "95折", tag: "", category: "PC" },
  ]

const filteredGames = games.filter((game) => game.name.toLowerCase().includes(searchQuery.toLowerCase()))

const categories = ["全部", "PC", "手游", "全平台"]
  const [selectedCategory, setSelectedCategory] = useState("全部")

const displayGames =
    selectedCategory === "全部" ? filteredGames : filteredGames.filter((g) => g.category === selectedCategory)

const handlePurchase = (gameName: string, optionName: string, price: number) => {
    // Placeholder for payment logic
  }

return (
    <div className="min-h-screen pb-24 bg-background">
      {/* Header */}
      <header className="sticky top-0 z-40 glass px-4 py-3 flex items-center gap-3">
        <button onClick={() => router.back()} className="p-1">
          <ArrowLeft size={20} />
        </button>
        <h1 className="font-bold text-lg flex-1">游戏点卡补贴</h1>
        <div className="flex items-center gap-1 text-xs text-yellow-400">
          <Gift size={14} />
          主播专享
        </div>
      </header>

{/* Search */}
      <div className="px-4 mt-4">
        <div className="relative">
          <Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-white/40" />
          <Input
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            placeholder="搜索游戏..."
            className="pl-10 bg-white/5 border-white/10"
          />
        </div>
      </div>

{/* Promotion Banner */}
      <div className="px-4 mt-4">
        <div className="bg-gradient-to-r from-purple-600/30 to-blue-600/30 rounded-xl p-4 border border-purple-500/30">
          <div className="flex items-center gap-3">
            <div className="w-12 h-12 rounded-full bg-gradient-to-br from-purple-500 to-blue-500 flex items-center justify-center">
              <Zap size={24} className="text-white" />
            </div>
            <div className="flex-1">
              <h3 className="font-bold text-sm">主播分享返利计划</h3>
              <p className="text-[10px] text-white/60 mt-0.5">分享点卡链接给粉丝，每单返利高达20%</p>
            </div>
            <Button
              size="sm"
              className="bg-gradient-to-r from-purple-500 to-blue-500 h-8 text-xs"
              onClick={() => router.push("/creator/apply")}
            >
              立即入驻
            </Button>
          </div>
        </div>
      </div>

{/* Category Tabs */}
      <div className="px-4 mt-4 flex gap-2 overflow-x-auto no-scrollbar">
        {categories.map((cat) => (
          <Button
            key={cat}
            size="sm"
            variant={selectedCategory === cat ? "default" : "outline"}
            className={`flex-shrink-0 ${selectedCategory !== cat ? "bg-white/5 border-white/10" : ""}`}
            onClick={() => setSelectedCategory(cat)}
          >
            {cat}
          </Button>
        ))}
      </div>

{/* Game Cards Grid */}
      <div className="px-4 mt-6 space-y-4">
        <h3 className="font-bold text-sm flex items-center gap-2">
          <Flame size={16} className="text-orange-400" />
          热门游戏点卡 ({displayGames.length})
        </h3>

<div className="grid grid-cols-2 gap-3">
          {displayGames.map((game) => (
            <div
              key={game.id}
              className="bg-[#1A1A22] rounded-xl overflow-hidden border border-white/5 hover:border-primary/50 transition-all cursor-pointer active:scale-95"
              onClick={() => router.push(`/mall/points/${game.id}`)}
            >
              <div className="relative aspect-video">
                <Image src={game.image || "/placeholder.svg"} alt={game.name} fill className="object-cover" />
                <div className="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent" />
                {game.tag && (
                  <div className="absolute top-2 right-2 bg-secondary text-[8px] px-1.5 py-0.5 rounded font-bold">
                    {game.tag}
                  </div>
                )}
                <div className="absolute bottom-2 left-2">
                  <p className="font-bold text-sm">{game.name}</p>
                  <p className="text-[10px] text-white/60">{game.category}</p>
                </div>
                <div className="absolute bottom-2 right-2 bg-yellow-500/90 text-black text-xs font-bold px-2 py-0.5 rounded">
                  {game.discount}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>

{/* Share Floating Button */}
      <button
        className="fixed right-4 bottom-24 w-12 h-12 rounded-full bg-gradient-to-r from-purple-500 to-blue-500 flex items-center justify-center shadow-lg shadow-purple-500/30"
        onClick={() => toast({ title: "分享链接已复制", description: "分享给粉丝购买可获得返利" })}
      >
        <Share2 size={20} className="text-white" />
      </button>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/mall/points/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]jpg:file="public/point-card-wow.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/point-card-wow-4YcJn24tf9mYngEp4FuJiyeXk9ccQK.jpg" isMerged="true"
[V0_FILE]jpg:file="public/point-card-diablo.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/point-card-diablo-mlUfZmik6V5Oi9SAoc67fy9hTHXQPv.jpg" isMerged="true"
[V0_FILE]jpg:file="public/point-card-hearthstone.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/point-card-hearthstone-9wIuFBqgyJ5gpxX0AV8FlTTLSk8H7d.jpg" isMerged="true"
[V0_FILE]jpg:file="public/point-card-overwatch.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/point-card-overwatch-eZKsUtSLB7qkSNhjP5oBidfVkexy9w.jpg" isMerged="true"
[V0_FILE]jpg:file="public/point-card-lol.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/point-card-lol-2IdkbI11W1bhgaOPx4iq92oUPDsmxg.jpg" isMerged="true"
[V0_FILE]jpg:file="public/point-card-hok.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/point-card-hok-6Pri2ajiTMHG4AnZVcaVO9Es0UxN1q.jpg" isMerged="true"
[V0_FILE]jpg:file="public/point-card-pubg.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/point-card-pubg-vVxnmJ0x1QrzkSOJvQATqylz552TQf.jpg" isMerged="true"
[V0_FILE]jpg:file="public/point-card-genshin.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/point-card-genshin-Q2YYS1m1yrjDkHersuJLtaST2GRKMS.jpg" isMerged="true"
[V0_FILE]jpg:file="public/point-card-valorant.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/point-card-valorant-nFUGrEceXobUG2ymi4vp0JPPBnjEiO.jpg" isMerged="true"
[V0_FILE]jpg:file="public/point-card-fortnite.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/point-card-fortnite-QAPB11Ef0hqZ4LWy1861qX9XZNx52A.jpg" isMerged="true"
[V0_FILE]jpg:file="public/point-card-apex.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/point-card-apex-1VAculHvLMFrnA3lkjtFtPibgv7Dw2.jpg" isMerged="true"
[V0_FILE]jpg:file="public/point-card-cs2.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/point-card-cs2-HlV52lhbpJfba87Q4tduvaPZ7Pk1zZ.jpg" isMerged="true"
[V0_FILE]typescriptreact:file="components/home/star-player-section.tsx" isEdit="true" isMerged="true"
"use client"

const PLAYERS = [
  {
    id: "1",
    name: "GM-远洋",
    title: "国服第一盲僧",
    heat: "125.6w",
    fans: "46.8w",
    image: "/streamer-1.jpg",
    isLive: true,
    viewers: "12.5w",
    orders: 1205,
    rank: "最强王者",
    game: "英雄联盟",
    intro: "前职业选手，S9国服第一盲僧，擅长打野节奏带动，包教包会。人皮话多，心态极好，带你体验飞一般的感觉！",
  },
  {
    id: "2",
    name: "卡若",
    title: "职业战队退役",
    heat: "98.0w",
    fans: "32.0w",
    image: "/streamer-2.jpg",
    isLive: true,
    viewers: "8.2w",
    orders: 856,
    rank: "超凡入圣",
    game: "无畏契约",
    intro: "前职业战队选手，擅长FPS游戏。退役后专注于游戏教学，帮助数千玩家提升枪法技术。",
  },
  {
    id: "3",
    name: "小美",
    title: "全国冠军",
    heat: "145.0w",
    fans: "58.0w",
    image: "/streamer-3.jpg",
    isLive: true,
    viewers: "15.6w",
    orders: 2340,
    rank: "无敌战神",
    game: "和平精英",
    intro: "和平精英全国冠军，四指操作教学专家。声音甜美，教学耐心，深受玩家喜爱。",
  },
  {
    id: "4",
    name: "星辰",
    title: "原神攻略大神",
    heat: "210.0w",
    fans: "89.0w",
    image: "/streamer-4.jpg",
    isLive: false,
    viewers: "0",
    orders: 3450,
    rank: "深渊满星",
    game: "原神",
    intro: "原神深渊满星玩家，精通所有角色配队与圣遗物搭配，帮助无数玩家实现满星目标。",
  },
  {
    id: "5",
    name: "阿杰",
    title: "国服百星",
    heat: "320.0w",
    fans: "125.0w",
    image: "/streamer-5.jpg",
    isLive: true,
    viewers: "25.6w",
    orders: 4560,
    rank: "荣耀王者",
    game: "王者荣耀",
    intro: "王者荣耀国服百星玩家，擅长打野位，带飞无数玩家上王者。教学风格直接高效。",
  },
  {
    id: "6",
    name: "暗影",
    title: "首杀团队成员",
    heat: "75.0w",
    fans: "28.0w",
    image: "/streamer-6.jpg",
    isLive: false,
    viewers: "0",
    orders: 890,
    rank: "史诗钥石大师",
    game: "魔兽世界",
    intro: "魔兽世界首杀团队成员，拥有15年游戏经验。精通所有职业与团本机制。",
  },
]

export function StarPlayerSection() {
  return null
}

export { PLAYERS }
[V0_FILE]typescriptreact:file="app/guild/[id]/page.tsx" isEdit="true" isMerged="true"
"use client"

import { ArrowLeft, Users, Trophy, Star, Shield, CheckCircle2, MessageCircle } from "lucide-react"
import { useRouter } from "next/navigation"
import Image from "next/image"
import { Button } from "@/components/ui/button"
import { toast } from "@/hooks/use-toast"
import { useState } from "react"

const guildData: Record<string, any> = {
  "1": {
    name: "东东电竞",
    logo: "/esports-team-logo.jpg",
    cover: "/esports-tournament-stadium.jpg",
    level: 10,
    members: 1205,
    rank: 1,
    rating: 4.9,
    description: "国服顶尖路人王聚集地，专注高端局陪练与代练业务。月入百万不是梦，加入我们，成就电竞梦想！",
    benefits: [
      { title: "专属培训体系", desc: "王者荣耀/LOL职业教练一对一指导，快速提升技术", color: "border-primary" },
      { title: "优先派单特权", desc: "优质高价单优先派送，月收入提升50%", color: "border-secondary" },
      { title: "法律援助支持", desc: "专业律师团队，保障您的合法权益与收入", color: "border-accent" },
      { title: "线下基地入驻", desc: "杭州/上海5000平米电竞基地免费入住", color: "border-green-500" },
    ],
    requirements: [
      { label: "游戏段位", text: "王者荣耀荣耀王者50星以上 / LOL大师以上 / 无畏契约超凡入圣" },
      { label: "语音要求", text: "普通话标准，声音清晰，具备良好的沟通能力" },
      { label: "设备要求", text: "拥有专业的电竞设备（电脑/手机）和安静的直播/游戏环境" },
      { label: "在线时间", text: "每天稳定在线时长不低于4小时" },
    ],
  },
  "2": {
    name: "星耀公会",
    logo: "/esports-team-logo.jpg",
    cover: "/esports-tournament-stadium.jpg",
    level: 8,
    members: 856,
    rank: 3,
    rating: 4.7,
    description: "专注王者荣耀高端陪练，拥有多名国服百星大神。新人友好，带你快速上分！",
    benefits: [
      { title: "新人培训", desc: "针对新人的系统培训，快速上手接单", color: "border-primary" },
      { title: "稳定派单", desc: "每日稳定订单量，收入有保障", color: "border-secondary" },
      { title: "技术交流", desc: "每周技术分享会，持续提升实力", color: "border-accent" },
      { title: "福利活动", desc: "定期举办线上活动和抽奖", color: "border-green-500" },
    ],
    requirements: [
      { label: "游戏段位", text: "王者荣耀荣耀王者以上" },
      { label: "语音要求", text: "普通话标准，有耐心" },
      { label: "在线时间", text: "每天在线不低于3小时" },
    ],
  },
}

export default function GuildDetailPage({ params }: { params: { id: string } }) {
  const router = useRouter()
  const [isApplied, setIsApplied] = useState(false)

const guild = guildData[params.id] || guildData["1"]

const handleApply = () => {
    setIsApplied(true)
    toast({
      title: "申请已提交",
      description: "公会管理员将在24小时内审核您的申请",
    })
  }

return (
    <div className="min-h-screen bg-background pb-24 relative">
      {/* Hero Section */}
      <div className="h-48 relative">
        <Image src={guild.cover || "/placeholder.svg"} alt="Cover" fill className="object-cover" />
        <div className="absolute inset-0 bg-gradient-to-b from-transparent to-background" />
        <button
          onClick={() => router.back()}
          className="absolute top-safe left-4 p-2 rounded-full bg-black/20 backdrop-blur-md text-white z-10"
        >
          <ArrowLeft size={20} />
        </button>
      </div>

<div className="px-4 -mt-12 relative z-10">
        <div className="flex items-end justify-between mb-4">
          <div className="w-24 h-24 rounded-2xl border-4 border-background bg-muted relative overflow-hidden shadow-xl">
            <Image src={guild.logo || "/placeholder.svg"} alt="Logo" fill className="object-cover" />
          </div>
          <div className="flex gap-2 mb-2">
            <Button size="sm" variant="outline" className="h-8 text-xs gap-1 bg-transparent">
              <MessageCircle size={14} />
              咨询
            </Button>
            <Button
              size="sm"
              className={`h-8 text-xs gap-1 ${isApplied ? "bg-white/20 text-white/60" : "bg-primary"}`}
              onClick={handleApply}
              disabled={isApplied}
            >
              <CheckCircle2 size={14} />
              {isApplied ? "已申请" : "申请加入"}
            </Button>
          </div>
        </div>

<div className="mb-6">
          <div className="flex items-center gap-2 mb-1">
            <h1 className="text-2xl font-bold">{guild.name}</h1>
            <span className="px-2 py-0.5 rounded bg-yellow-500/20 text-yellow-400 text-[10px] border border-yellow-500/30 font-bold">
              LV.{guild.level} 顶级公会
            </span>
          </div>
          <p className="text-sm text-white/60 mb-3">{guild.description}</p>
          <div className="flex items-center gap-4 text-xs text-white/40">
            <span className="flex items-center gap-1">
              <Users size={12} />
              {guild.members.toLocaleString()} 成员
            </span>
            <span className="flex items-center gap-1">
              <Trophy size={12} />
              全区第 {guild.rank} 名
            </span>
            <span className="flex items-center gap-1">
              <Star size={12} />
              {guild.rating} 评分
            </span>
          </div>
        </div>

{/* Benefits */}
        <div className="space-y-4">
          <h3 className="font-bold text-base flex items-center gap-2">
            <Shield size={16} className="text-primary" />
            公会权益
          </h3>
          <div className="grid grid-cols-2 gap-3">
            {guild.benefits.map((benefit: any, i: number) => (
              <div key={i} className={`glass-card p-3 rounded-xl border-l-2 ${benefit.color}`}>
                <div className="text-sm font-bold mb-1">{benefit.title}</div>
                <div className="text-xs text-white/50">{benefit.desc}</div>
              </div>
            ))}
          </div>
        </div>

{/* Requirements */}
        <div className="space-y-4 mt-6">
          <h3 className="font-bold text-base flex items-center gap-2">
            <CheckCircle2 size={16} className="text-primary" />
            入驻要求
          </h3>
          <div className="glass-card p-4 rounded-xl space-y-3">
            {guild.requirements.map((req: any, i: number) => (
              <div key={i} className="flex items-start gap-3">
                <div className="w-1.5 h-1.5 rounded-full bg-primary mt-1.5" />
                <div className="flex-1 text-xs text-white/70">
                  <span className="text-white font-bold">{req.label}：</span>
                  {req.text}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]jpg:file="public/esports-team-logo.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/esports-team-logo-mbdyskPxIRIJHkwVont4znk92JO0r4.jpg" isMerged="true"
[V0_FILE]typescriptreact:file="app/cp/[id]/page.tsx" isEdit="true" isMerged="true"
"use client"

import {
  ArrowLeft,
  Heart,
  Star,
  MessageCircle,
  Shield,
  Trophy,
  Users,
  Gamepad2,
  Send,
  Phone,
  Video,
} from "lucide-react"
import { useRouter } from "next/navigation"
import Image from "next/image"
import { Button } from "@/components/ui/button"
import { toast } from "@/hooks/use-toast"
import { useState, use } from "react"

const CP_DATA: Record<
  string,
  {
    name: string
    gender: string
    age: number
    avatar: string
    cover: string
    games: { game: string; rank: string; role: string }[]
    voice: string
    bio: string
    tags: string[]
    friends: number
    matches: number
    online: boolean
  }
> = {
  "1": {
    name: "甜心辅助",
    gender: "女",
    age: 22,
    avatar: "/cp-avatar-1.jpg",
    cover: "/cp-cover-1.jpg",
    games: [
      { game: "王者荣耀", rank: "星耀I", role: "瑶、大乔、明世隐" },
      { game: "和平精英", rank: "无敌战神", role: "四排辅助位" },
    ],
    voice: "温柔甜美",
    bio: "喜欢玩辅助，找个靠谱的ADC一起开黑~",
    tags: ["声音好听", "技术不错", "温柔", "有耐心", "爱聊天"],
    friends: 68,
    matches: 385,
    online: true,
  },
  "2": {
    name: "职业打野",
    gender: "男",
    age: 24,
    avatar: "/cp-avatar-2.jpg",
    cover: "/cp-cover-2.jpg",
    games: [
      { game: "英雄联盟", rank: "大师", role: "打野位" },
      { game: "无畏契约", rank: "超凡入圣", role: "突破手" },
    ],
    voice: "成熟稳重",
    bio: "前职业选手，带你上分不是梦",
    tags: ["技术流", "有耐心", "幽默", "靠谱", "Carry"],
    friends: 156,
    matches: 1230,
    online: true,
  },
  "3": {
    name: "软萌小姐姐",
    gender: "女",
    age: 20,
    avatar: "/cp-avatar-3.jpg",
    cover: "/cp-cover-3.jpg",
    games: [
      { game: "王者荣耀", rank: "钻石II", role: "法师/辅助" },
      { game: "原神", rank: "56级", role: "休闲探索" },
    ],
    voice: "软萌可爱",
    bio: "游戏菜但是爱玩，找个不嫌弃的~",
    tags: ["萌妹子", "爱聊天", "佛系", "不坑", "快乐游戏"],
    friends: 42,
    matches: 198,
    online: false,
  },
  "4": {
    name: "中单刺客",
    gender: "男",
    age: 23,
    avatar: "/cp-avatar-4.jpg",
    cover: "/cp-cover-4.jpg",
    games: [{ game: "英雄联盟", rank: "王者", role: "中单刺客" }],
    voice: "阳光帅气",
    bio: "擅长刺客中单，带妹上分专业户",
    tags: ["Carry型", "稳定", "负责", "技术强", "有趣"],
    friends: 89,
    matches: 756,
    online: true,
  },
}

export default function CPDetailPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = use(params)
  const router = useRouter()
  const [isFollowing, setIsFollowing] = useState(false)
  const [showChat, setShowChat] = useState(false)
  const [message, setMessage] = useState("")
  const [messages, setMessages] = useState<{ from: string; text: string }[]>([])

const cp = CP_DATA[id] || CP_DATA["1"]

const handleFollow = () => {
    setIsFollowing(!isFollowing)
    toast({
      title: isFollowing ? "已取消关注" : "关注成功",
      description: isFollowing ? "" : `你已关注${cp.name}`,
    })
  }

const handleSendRequest = () => {
    setShowChat(true)
    setMessages([{ from: "system", text: `你已向${cp.name}发送了交友请求，对方已同意~` }])
  }

const handleSendMessage = () => {
    if (!message.trim()) return
    setMessages((prev) => [...prev, { from: "me", text: message }])
    setMessage("")
    // 模拟回复
    setTimeout(() => {
      setMessages((prev) => [...prev, { from: "cp", text: "好呀，一起开黑吧~" }])
    }, 1500)
  }

return (
    <div className="min-h-screen bg-background pb-24 relative">
      {/* Hero Section */}
      <div className="h-48 relative">
        <Image src={cp.cover || "/placeholder.svg"} alt="Cover" fill className="object-cover" />
        <div className="absolute inset-0 bg-gradient-to-b from-transparent to-background" />
        <button
          onClick={() => router.back()}
          className="absolute top-4 left-4 p-2 rounded-full bg-black/20 backdrop-blur-md text-white z-10"
        >
          <ArrowLeft size={20} />
        </button>
        {cp.online && (
          <div className="absolute top-4 right-4 px-3 py-1 rounded-full bg-green-500/20 border border-green-500/50 text-green-400 text-xs flex items-center gap-1">
            <div className="w-2 h-2 rounded-full bg-green-500 animate-pulse" />
            在线
          </div>
        )}
      </div>

<div className="px-4 -mt-12 relative z-10">
        <div className="flex items-end justify-between mb-4">
          <div className="w-24 h-24 rounded-2xl border-4 border-background bg-muted relative overflow-hidden shadow-xl">
            <Image src={cp.avatar || "/placeholder.svg"} alt="Avatar" fill className="object-cover" />
            {cp.online && (
              <div className="absolute bottom-0 right-0 w-5 h-5 rounded-full bg-green-500 border-2 border-background" />
            )}
          </div>
          <div className="flex gap-2 mb-2">
            <Button
              size="sm"
              variant="outline"
              className={`h-8 text-xs gap-1 bg-transparent ${isFollowing ? "border-white/20 text-white/60" : "border-pink-500/50 text-pink-400 hover:bg-pink-500/10"}`}
              onClick={handleFollow}
            >
              <Heart size={14} className={isFollowing ? "fill-current" : ""} />
              {isFollowing ? "已关注" : "关注"}
            </Button>
            <Button size="sm" className="h-8 text-xs bg-pink-500 gap-1 hover:bg-pink-600" onClick={handleSendRequest}>
              <MessageCircle size={14} />
              发送请求
            </Button>
          </div>
        </div>

<div className="mb-6">
          <div className="flex items-center gap-2 mb-1">
            <h1 className="text-2xl font-bold">{cp.name}</h1>
            <span
              className={`px-2 py-0.5 rounded text-[10px] border font-bold ${cp.gender === "女" ? "bg-pink-500/20 text-pink-400 border-pink-500/30" : "bg-blue-500/20 text-blue-400 border-blue-500/30"}`}
            >
              {cp.gender} · {cp.age}岁
            </span>
          </div>
          <p className="text-sm text-white/60 mb-3">{cp.bio}</p>
          <div className="flex items-center gap-4 text-xs text-white/40">
            <span className="flex items-center gap-1">
              <Star size={12} className="text-primary" />
              {cp.voice}
            </span>
            <span className="flex items-center gap-1">
              <Trophy size={12} className="text-accent" />
              {cp.matches} 场游戏
            </span>
            <span className="flex items-center gap-1">
              <Users size={12} className="text-secondary" />
              {cp.friends} 位好友
            </span>
          </div>
        </div>

{/* Games */}
        <div className="space-y-4 mb-6">
          <h3 className="font-bold text-sm flex items-center gap-2">
            <Gamepad2 size={16} className="text-primary" />
            擅长游戏
          </h3>
          <div className="grid grid-cols-2 gap-3">
            {cp.games.map((item, i) => (
              <div key={i} className="glass-card p-3 rounded-xl">
                <div className="font-bold text-sm mb-1">{item.game}</div>
                <div className="text-xs text-white/50">{item.rank}</div>
                <div className="text-xs text-primary mt-1">{item.role}</div>
              </div>
            ))}
          </div>
        </div>

{/* Tags */}
        <div className="space-y-4 mb-6">
          <h3 className="font-bold text-sm">个人标签</h3>
          <div className="flex flex-wrap gap-2">
            {cp.tags.map((tag, i) => (
              <span
                key={i}
                className="px-3 py-1.5 rounded-full bg-pink-500/10 border border-pink-500/30 text-xs text-pink-400"
              >
                {tag}
              </span>
            ))}
          </div>
        </div>

{/* Trust Badge */}
        <div className="glass-card p-4 rounded-xl bg-gradient-to-r from-pink-500/10 to-transparent border-l-4 border-pink-500">
          <div className="flex items-center gap-3">
            <Shield size={24} className="text-pink-500" />
            <div>
              <h4 className="font-bold text-sm">平台实名认证</h4>
              <p className="text-xs text-white/60">真实身份，安全交友</p>
            </div>
          </div>
        </div>
      </div>

{/* Chat Modal */}
      {showChat && (
        <div className="fixed inset-0 z-50 bg-background flex flex-col">
          <header className="glass px-4 py-3 flex items-center justify-between">
            <div className="flex items-center gap-3">
              <button onClick={() => setShowChat(false)} className="p-2 -ml-2">
                <ArrowLeft size={20} />
              </button>
              <div className="flex items-center gap-2">
                <div className="w-8 h-8 rounded-full bg-muted relative overflow-hidden">
                  <Image src={cp.avatar || "/placeholder.svg"} alt={cp.name} fill className="object-cover" />
                </div>
                <div>
                  <div className="font-bold text-sm">{cp.name}</div>
                  <div className="text-[10px] text-green-400">在线</div>
                </div>
              </div>
            </div>
            <div className="flex items-center gap-2">
              <button className="p-2 hover:bg-white/5 rounded-full">
                <Phone size={18} />
              </button>
              <button className="p-2 hover:bg-white/5 rounded-full">
                <Video size={18} />
              </button>
            </div>
          </header>

<div className="flex-1 overflow-y-auto p-4 space-y-3">
            {messages.map((msg, i) => (
              <div key={i} className={`flex ${msg.from === "me" ? "justify-end" : "justify-start"}`}>
                {msg.from === "system" ? (
                  <div className="text-xs text-white/40 text-center w-full py-2">{msg.text}</div>
                ) : (
                  <div
                    className={`max-w-[70%] px-4 py-2 rounded-2xl ${msg.from === "me" ? "bg-pink-500 text-white" : "bg-white/10 text-white"}`}
                  >
                    {msg.text}
                  </div>
                )}
              </div>
            ))}
          </div>

<div className="p-4 glass">
            <div className="flex items-center gap-2">
              <input
                type="text"
                value={message}
                onChange={(e) => setMessage(e.target.value)}
                placeholder="输入消息..."
                className="flex-1 bg-white/5 rounded-full px-4 py-2 text-sm outline-none"
                onKeyPress={(e) => e.key === "Enter" && handleSendMessage()}
              />
              <button onClick={handleSendMessage} className="p-2 bg-pink-500 rounded-full">
                <Send size={18} />
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/coach/[id]/page.tsx" isEdit="true" isMerged="true"
"use client"

import { ArrowLeft, Star, Trophy, Users, Shield, Gamepad2, Award, MessageCircle, Check } from "lucide-react"
import { useRouter } from "next/navigation"
import Image from "next/image"
import { Button } from "@/components/ui/button"
import { toast } from "@/hooks/use-toast"
import { useState, use } from "react"

const COACH_DATA: Record<
  string,
  {
    name: string
    title: string
    avatar: string
    cover: string
    games: string[]
    rank: string
    orders: number
    rating: number
    goodRate: string
    bio: string
    tags: string[]
    services: { name: string; price: number; desc: string; duration: string; hot?: boolean }[]
    online: boolean
  }
> = {
  "1": {
    name: "职业打野-小明",
    title: "前LPL职业选手",
    avatar: "/coach-avatar-1.jpg",
    cover: "/coach-cover-1.jpg",
    games: ["英雄联盟"],
    rank: "王者2000分",
    orders: 2456,
    rating: 4.9,
    goodRate: "98%",
    bio: "前LPL职业选手 · 国服第一打野 · 5年教学经验",
    tags: ["职业", "打野", "带飞", "耐心教学"],
    services: [
      { name: "单局陪练", price: 80, desc: "边玩边教，即时指导", duration: "1局" },
      { name: "5局套餐", price: 360, desc: "系统提升，优惠45元", duration: "5局", hot: true },
      { name: "10局特训", price: 650, desc: "深度培训，包上分", duration: "10局" },
    ],
    online: true,
  },
  "2": {
    name: "上分小助手",
    title: "国服路人王",
    avatar: "/coach-avatar-2.jpg",
    cover: "/coach-cover-2.jpg",
    games: ["王者荣耀", "和平精英"],
    rank: "荣耀王者100星",
    orders: 1823,
    rating: 4.8,
    goodRate: "97%",
    bio: "多区路人王 · 全英雄精通 · 上分效率高",
    tags: ["温柔", "耐心", "指导", "效率高"],
    services: [
      { name: "单局陪练", price: 50, desc: "轻松开黑", duration: "1局" },
      { name: "3局套餐", price: 135, desc: "连续开黑优惠", duration: "3局", hot: true },
      { name: "包天陪练", price: 300, desc: "全天候服务", duration: "不限局数" },
    ],
    online: true,
  },
  "3": {
    name: "FPS大神",
    title: "前职业选手",
    avatar: "/coach-avatar-3.jpg",
    cover: "/coach-cover-3.jpg",
    games: ["无畏契约", "三角洲行动"],
    rank: "超凡入圣",
    orders: 987,
    rating: 4.9,
    goodRate: "99%",
    bio: "FPS专业选手 · 精准枪法 · 战术意识强",
    tags: ["枪法", "意识", "专业", "战术指导"],
    services: [
      { name: "单局陪练", price: 100, desc: "职业级指导", duration: "1局" },
      { name: "技术特训", price: 450, desc: "系统提升枪法", duration: "5局", hot: true },
      { name: "冲分套餐", price: 800, desc: "保证上段", duration: "10局" },
    ],
    online: false,
  },
  "4": {
    name: "温柔陪练师",
    title: "全能型选手",
    avatar: "/coach-avatar-4.jpg",
    cover: "/coach-cover-4.jpg",
    games: ["王者荣耀", "英雄联盟"],
    rank: "多区王者",
    orders: 3201,
    rating: 5.0,
    goodRate: "100%",
    bio: "全能选手 · 声音好听 · 超级耐心",
    tags: ["声音好听", "技术强", "幽默", "好评如潮"],
    services: [
      { name: "欢乐开黑", price: 60, desc: "快乐游戏为主", duration: "1局" },
      { name: "技术提升", price: 270, desc: "边玩边学", duration: "5局", hot: true },
      { name: "专属陪练", price: 500, desc: "定制化服务", duration: "10局" },
    ],
    online: true,
  },
}

export default function CoachDetailPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = use(params)
  const router = useRouter()
  const [selectedService, setSelectedService] = useState<number | null>(null)
  const [isPaying, setIsPaying] = useState(false)

const coach = COACH_DATA[id] || COACH_DATA["1"]

const handleBook = () => {
    if (selectedService === null) {
      toast({
        title: "请选择服务",
        description: "请先选择一个陪练服务套餐",
        variant: "destructive",
      })
      return
    }
    setIsPaying(true)
  }

const handlePay = () => {
    toast({
      title: "支付成功",
      description: `已成功预约${coach.name}的${coach.services[selectedService!].name}`,
    })
    setIsPaying(false)
    router.push("/messages")
  }

return (
    <div className="min-h-screen bg-background pb-24 relative">
      {/* Hero Section */}
      <div className="h-48 relative">
        <Image src={coach.cover || "/placeholder.svg"} alt="Cover" fill className="object-cover" />
        <div className="absolute inset-0 bg-gradient-to-b from-transparent to-background" />
        <button
          onClick={() => router.back()}
          className="absolute top-4 left-4 p-2 rounded-full bg-black/20 backdrop-blur-md text-white z-10"
        >
          <ArrowLeft size={20} />
        </button>
      </div>

<div className="px-4 -mt-12 relative z-10">
        <div className="flex items-end justify-between mb-4">
          <div className="w-24 h-24 rounded-2xl border-4 border-background bg-muted relative overflow-hidden shadow-xl">
            <Image src={coach.avatar || "/placeholder.svg"} alt="Coach" fill className="object-cover" />
            {coach.online && (
              <div className="absolute bottom-0 right-0 w-5 h-5 rounded-full bg-green-500 border-2 border-background" />
            )}
          </div>
          <div className="flex gap-2 mb-2">
            <Button size="sm" variant="outline" className="h-8 text-xs gap-1 bg-transparent">
              <MessageCircle size={14} />
              咨询
            </Button>
            <Button size="sm" className="h-8 text-xs bg-green-500 gap-1 hover:bg-green-600" onClick={handleBook}>
              <Gamepad2 size={14} />
              立即预约
            </Button>
          </div>
        </div>

<div className="mb-6">
          <div className="flex items-center gap-2 mb-1">
            <h1 className="text-2xl font-bold">{coach.name}</h1>
            {coach.rating >= 4.9 && <Award className="text-yellow-400" size={20} />}
          </div>
          <p className="text-sm text-white/60 mb-3">{coach.bio}</p>
          <div className="flex items-center gap-4 text-xs text-white/40">
            <span className="flex items-center gap-1">
              <Star size={12} className="text-primary fill-primary" />
              {coach.rating} 评分
            </span>
            <span className="flex items-center gap-1">
              <Trophy size={12} className="text-accent" />
              {coach.orders} 订单
            </span>
            <span className="flex items-center gap-1">
              <Users size={12} className="text-secondary" />
              {coach.goodRate} 好评
            </span>
          </div>
        </div>

{/* Services */}
        <div className="space-y-4 mb-6">
          <h3 className="font-bold text-sm flex items-center gap-2">
            <Gamepad2 size={16} className="text-green-500" />
            服务项目
          </h3>
          <div className="space-y-3">
            {coach.services.map((service, i) => (
              <div
                key={i}
                className={`glass-card p-4 rounded-xl relative cursor-pointer transition-all ${selectedService === i ? "ring-2 ring-green-500 bg-green-500/10" : "hover:bg-white/5"}`}
                onClick={() => setSelectedService(i)}
              >
                {service.hot && (
                  <span className="absolute top-2 right-2 px-2 py-0.5 rounded-full bg-green-500/20 text-green-400 text-[10px] font-bold">
                    最热门
                  </span>
                )}
                {selectedService === i && (
                  <div className="absolute top-2 left-2 w-5 h-5 rounded-full bg-green-500 flex items-center justify-center">
                    <Check size={12} className="text-white" />
                  </div>
                )}
                <div className="flex items-center justify-between mb-2">
                  <div className={selectedService === i ? "pl-6" : ""}>
                    <h4 className="font-bold mb-1">{service.name}</h4>
                    <p className="text-xs text-white/60">{service.desc}</p>
                  </div>
                  <div className="text-right">
                    <div className="text-2xl font-bold text-green-500">{service.price}</div>
                    <div className="text-[10px] text-white/50">元/{service.duration}</div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>

{/* Tags */}
        <div className="space-y-4 mb-6">
          <h3 className="font-bold text-sm">陪练标签</h3>
          <div className="flex flex-wrap gap-2">
            {coach.tags.map((tag, i) => (
              <span
                key={i}
                className="px-3 py-1.5 rounded-full bg-green-500/10 border border-green-500/30 text-xs text-green-400"
              >
                {tag}
              </span>
            ))}
          </div>
        </div>

{/* Trust Badge */}
        <div className="glass-card p-4 rounded-xl bg-gradient-to-r from-green-500/10 to-transparent border-l-4 border-green-500">
          <div className="flex items-center gap-3">
            <Shield size={24} className="text-green-500" />
            <div>
              <h4 className="font-bold text-sm">平台认证陪练师</h4>
              <p className="text-xs text-white/60">服务不满意，全额退款</p>
            </div>
          </div>
        </div>
      </div>

{/* Payment Modal */}
      {isPaying && selectedService !== null && (
        <div className="fixed inset-0 z-50 bg-black/80 flex items-end justify-center">
          <div className="w-full max-w-lg bg-background rounded-t-3xl p-6 space-y-6">
            <div className="flex items-center justify-between">
              <h3 className="text-lg font-bold">确认订单</h3>
              <button onClick={() => setIsPaying(false)} className="text-white/40">
                取消
              </button>
            </div>

<div className="glass-card p-4 rounded-xl">
              <div className="flex items-center gap-3 mb-4">
                <div className="w-12 h-12 rounded-lg bg-muted relative overflow-hidden">
                  <Image src={coach.avatar || "/placeholder.svg"} alt={coach.name} fill className="object-cover" />
                </div>
                <div>
                  <div className="font-bold">{coach.name}</div>
                  <div className="text-xs text-white/60">{coach.services[selectedService].name}</div>
                </div>
              </div>
              <div className="flex items-center justify-between py-3 border-t border-white/10">
                <span className="text-white/60">服务费用</span>
                <span className="text-2xl font-bold text-green-500">¥{coach.services[selectedService].price}</span>
              </div>
            </div>

<p className="text-center text-xs text-white/40">支付即表示同意《玩值电竞服务协议》</p>
          </div>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/cp/page.tsx" isEdit="true" isMerged="true"
"use client"

import { ArrowLeft, Heart, Star, MessageCircle, Sparkles } from "lucide-react"
import { useRouter } from "next/navigation"
import Image from "next/image"
import { Button } from "@/components/ui/button"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { toast } from "@/hooks/use-toast"

const CP_LIST = [
  {
    id: "1",
    name: "甜心辅助",
    gender: "女",
    age: 22,
    avatar: "/cp-avatar-1.jpg",
    games: ["王者荣耀", "和平精英"],
    voice: "温柔甜美",
    rank: "星耀",
    online: true,
    tags: ["声音好听", "技术不错", "温柔"],
    bio: "喜欢玩辅助，找个靠谱的ADC一起开黑~",
  },
  {
    id: "2",
    name: "职业打野",
    gender: "男",
    age: 24,
    avatar: "/cp-avatar-2.jpg",
    games: ["英雄联盟", "无畏契约"],
    voice: "成熟稳重",
    rank: "大师",
    online: true,
    tags: ["技术流", "有耐心", "幽默"],
    bio: "前职业选手，带你上分不是梦",
  },
  {
    id: "3",
    name: "软萌小姐姐",
    gender: "女",
    age: 20,
    avatar: "/cp-avatar-3.jpg",
    games: ["王者荣耀", "原神"],
    voice: "软萌可爱",
    rank: "钻石",
    online: false,
    tags: ["萌妹子", "爱聊天", "佛系"],
    bio: "游戏菜但是爱玩，找个不嫌弃的~",
  },
  {
    id: "4",
    name: "中单刺客",
    gender: "男",
    age: 23,
    avatar: "/cp-avatar-4.jpg",
    games: ["英雄联盟"],
    voice: "阳光帅气",
    rank: "王者",
    online: true,
    tags: ["Carry型", "稳定", "负责"],
    bio: "擅长刺客中单，带妹上分专业户",
  },
]

export default function CPPage() {
  const router = useRouter()

const handleContact = (cpName: string) => {
    toast({
      title: "发送成功",
      description: `已向${cpName}发送交友请求`,
    })
  }

<div className="p-4 space-y-6">
        {/* Banner */}
        <div className="glass-card p-4 rounded-xl border-l-4 border-pink-500 bg-gradient-to-r from-pink-500/10 to-transparent">
          <div className="flex items-center justify-between mb-3">
            <h3 className="font-bold text-sm flex items-center gap-2">
              <Heart className="text-pink-500" size={18} />
              找个游戏CP
            </h3>
            <Sparkles className="text-pink-500 animate-pulse" size={18} />
          </div>
          <p className="text-xs text-white/60 mb-3">一起开黑，一起上分，遇见你的电竞知己</p>
          <div className="grid grid-cols-3 gap-2 text-center">
            <div className="bg-white/5 rounded-lg p-2">
              <div className="text-xs font-bold text-pink-500">声音甜美</div>
              <div className="text-[10px] text-white/50 mt-0.5">温柔妹子</div>
            </div>
            <div className="bg-white/5 rounded-lg p-2">
              <div className="text-xs font-bold text-blue-500">技术强劲</div>
              <div className="text-[10px] text-white/50 mt-0.5">带飞大佬</div>
            </div>
            <div className="bg-white/5 rounded-lg p-2">
              <div className="text-xs font-bold text-purple-500">长期陪伴</div>
              <div className="text-[10px] text-white/50 mt-0.5">稳定组队</div>
            </div>
          </div>
        </div>

{/* Filters */}
        <Tabs defaultValue="all" className="w-full">
          <TabsList className="w-full bg-white/5 p-1 rounded-xl">
            <TabsTrigger value="all" className="flex-1 text-xs">
              全部
            </TabsTrigger>
            <TabsTrigger value="girl" className="flex-1 text-xs">
              女生
            </TabsTrigger>
            <TabsTrigger value="boy" className="flex-1 text-xs">
              男生
            </TabsTrigger>
          </TabsList>

<TabsContent value="all" className="mt-4 space-y-3">
            {CP_LIST.map((cp) => (
              <div
                key={cp.id}
                className="glass-card p-4 rounded-xl hover:bg-white/5 transition-colors cursor-pointer"
                onClick={() => router.push(`/cp/${cp.id}`)}
              >
                <div className="flex items-start gap-3 mb-3">
                  <div className="relative">
                    <div className="w-16 h-16 rounded-lg bg-muted relative overflow-hidden">
                      <Image src={cp.avatar || "/placeholder.svg"} alt={cp.name} fill className="object-cover" />
                    </div>
                    {cp.online && (
                      <div className="absolute -bottom-1 -right-1 w-4 h-4 rounded-full bg-green-500 border-2 border-background" />
                    )}
                  </div>

<div className="flex-1 min-w-0">
                    <div className="flex items-center gap-2 mb-1">
                      <h4 className="font-bold truncate">{cp.name}</h4>
                      <span
                        className={`px-1.5 py-0.5 rounded text-[10px] ${cp.gender === "女" ? "bg-pink-500/20 text-pink-400" : "bg-blue-500/20 text-blue-400"}`}
                      >
                        {cp.gender} · {cp.age}岁
                      </span>
                    </div>

<div className="flex items-center gap-3 text-xs text-white/50 mb-2">
                      <span className="flex items-center gap-1">
                        <Star size={12} className="text-primary" />
                        {cp.rank}
                      </span>
                      <span>{cp.voice}</span>
                    </div>

<TabsContent value="girl" className="mt-4 space-y-3">
            {CP_LIST.filter((cp) => cp.gender === "女").map((cp) => (
              <div
                key={cp.id}
                className="glass-card p-4 rounded-xl hover:bg-white/5 transition-colors cursor-pointer"
                onClick={() => router.push(`/cp/${cp.id}`)}
              >
                <div className="flex items-start gap-3 mb-3">
                  <div className="relative">
                    <div className="w-16 h-16 rounded-lg bg-muted relative overflow-hidden">
                      <Image src={cp.avatar || "/placeholder.svg"} alt={cp.name} fill className="object-cover" />
                    </div>
                    {cp.online && (
                      <div className="absolute -bottom-1 -right-1 w-4 h-4 rounded-full bg-green-500 border-2 border-background" />
                    )}
                  </div>

<div className="flex-1 min-w-0">
                    <div className="flex items-center gap-2 mb-1">
                      <h4 className="font-bold truncate">{cp.name}</h4>
                      <span className="px-1.5 py-0.5 rounded text-[10px] bg-pink-500/20 text-pink-400">
                        {cp.gender} · {cp.age}岁
                      </span>
                    </div>

<TabsContent value="boy" className="mt-4 space-y-3">
            {CP_LIST.filter((cp) => cp.gender === "男").map((cp) => (
              <div
                key={cp.id}
                className="glass-card p-4 rounded-xl hover:bg-white/5 transition-colors cursor-pointer"
                onClick={() => router.push(`/cp/${cp.id}`)}
              >
                <div className="flex items-start gap-3 mb-3">
                  <div className="relative">
                    <div className="w-16 h-16 rounded-lg bg-muted relative overflow-hidden">
                      <Image src={cp.avatar || "/placeholder.svg"} alt={cp.name} fill className="object-cover" />
                    </div>
                    {cp.online && (
                      <div className="absolute -bottom-1 -right-1 w-4 h-4 rounded-full bg-green-500 border-2 border-background" />
                    )}
                  </div>

<div className="flex-1 min-w-0">
                    <div className="flex items-center gap-2 mb-1">
                      <h4 className="font-bold truncate">{cp.name}</h4>
                      <span className="px-1.5 py-0.5 rounded text-[10px] bg-blue-500/20 text-blue-400">
                        {cp.gender} · {cp.age}岁
                      </span>
                    </div>

import { ArrowLeft, Trophy, Star, Gamepad2, MessageCircle, Award } from "lucide-react"
import { useRouter } from "next/navigation"
import Image from "next/image"
import { Button } from "@/components/ui/button"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { toast } from "@/hooks/use-toast"

const COACH_LIST = [
  {
    id: "1",
    name: "职业打野-小明",
    title: "前LPL职业选手",
    avatar: "/coach-avatar-1.jpg",
    games: ["英雄联盟"],
    rank: "王者2000分",
    orders: 2456,
    rating: 4.9,
    price: 80,
    tags: ["职业", "打野", "带飞"],
    online: true,
  },
  {
    id: "2",
    name: "上分小助手",
    title: "国服路人王",
    avatar: "/coach-avatar-2.jpg",
    games: ["王者荣耀", "和平精英"],
    rank: "荣耀王者100星",
    orders: 1823,
    rating: 4.8,
    price: 50,
    tags: ["温柔", "耐心", "指导"],
    online: true,
  },
  {
    id: "3",
    name: "FPS大神",
    title: "前职业选手",
    avatar: "/coach-avatar-3.jpg",
    games: ["无畏契约", "三角洲"],
    rank: "超凡入圣",
    orders: 987,
    rating: 4.9,
    price: 100,
    tags: ["枪法", "意识", "专业"],
    online: false,
  },
  {
    id: "4",
    name: "温柔陪练师",
    title: "全能型选手",
    avatar: "/coach-avatar-4.jpg",
    games: ["王者荣耀", "英雄联盟"],
    rank: "多区王者",
    orders: 3201,
    rating: 5.0,
    price: 60,
    tags: ["声音好听", "技术强", "幽默"],
    online: true,
  },
]

export default function CoachPage() {
  const router = useRouter()

const handleBookCoach = (coachName: string) => {
    toast({
      title: "预约成功",
      description: `已成功预约${coachName}的陪练服务`,
    })
  }

<div className="p-4 space-y-6">
        {/* Banner */}
        <div className="glass-card p-4 rounded-xl border-l-4 border-green-500">
          <div className="flex items-center justify-between mb-3">
            <h3 className="font-bold text-sm">专业陪练服务</h3>
            <span className="text-xs text-white/50">1000+ 陪练师</span>
          </div>
          <p className="text-xs text-white/60 mb-3">前职业选手、路人王陪你上分，技术提升看得见</p>
          <div className="grid grid-cols-3 gap-2 text-center">
            <div className="bg-white/5 rounded-lg p-2">
              <div className="text-xs font-bold text-green-500">专业认证</div>
              <div className="text-[10px] text-white/50 mt-0.5">实力保障</div>
            </div>
            <div className="bg-white/5 rounded-lg p-2">
              <div className="text-xs font-bold text-blue-500">快速上分</div>
              <div className="text-[10px] text-white/50 mt-0.5">胜率提升</div>
            </div>
            <div className="bg-white/5 rounded-lg p-2">
              <div className="text-xs font-bold text-purple-500">技术指导</div>
              <div className="text-[10px] text-white/50 mt-0.5">边玩边学</div>
            </div>
          </div>
        </div>

{/* Filters */}
        <Tabs defaultValue="hot" className="w-full">
          <TabsList className="w-full bg-white/5 p-1 rounded-xl">
            <TabsTrigger value="hot" className="flex-1 text-xs">
              热门陪练
            </TabsTrigger>
            <TabsTrigger value="pro" className="flex-1 text-xs">
              职业选手
            </TabsTrigger>
            <TabsTrigger value="king" className="flex-1 text-xs">
              王者大神
            </TabsTrigger>
          </TabsList>

<TabsContent value="hot" className="mt-4 space-y-3">
            {COACH_LIST.map((coach) => (
              <div
                key={coach.id}
                className="glass-card p-4 rounded-xl hover:bg-white/5 transition-colors cursor-pointer"
                onClick={() => router.push(`/coach/${coach.id}`)}
              >
                <div className="flex items-start gap-3 mb-3">
                  <div className="relative">
                    <div className="w-16 h-16 rounded-lg bg-muted relative overflow-hidden">
                      <Image src={coach.avatar || "/placeholder.svg"} alt={coach.name} fill className="object-cover" />
                    </div>
                    {coach.online && (
                      <div className="absolute -bottom-1 -right-1 w-4 h-4 rounded-full bg-green-500 border-2 border-background" />
                    )}
                  </div>

<div className="flex-1 min-w-0">
                    <div className="flex items-center gap-2 mb-1">
                      <h4 className="font-bold truncate">{coach.name}</h4>
                      {coach.rating === 5.0 && <Award className="w-4 h-4 text-yellow-400" />}
                    </div>

<p className="text-xs text-white/60 mb-2">{coach.title}</p>

<div className="flex items-center gap-3 text-xs text-white/50 mb-2">
                      <span className="flex items-center gap-1">
                        <Star size={12} className="text-primary fill-primary" />
                        {coach.rating}
                      </span>
                      <span className="flex items-center gap-1">
                        <Trophy size={12} className="text-accent" />
                        {coach.orders}单
                      </span>
                    </div>

<div className="flex flex-wrap gap-1">
                      {coach.tags.map((tag, j) => (
                        <span key={j} className="px-2 py-0.5 rounded-full bg-white/5 text-[10px] text-white/60">
                          {tag}
                        </span>
                      ))}
                    </div>
                  </div>

<div className="text-right">
                    <div className="text-lg font-bold text-green-500">{coach.price}</div>
                    <div className="text-[10px] text-white/50">元/局</div>
                  </div>
                </div>

<TabsContent value="pro" className="mt-4 space-y-3">
            {COACH_LIST.filter((c) => c.title.includes("职业")).map((coach) => (
              <div
                key={coach.id}
                className="glass-card p-4 rounded-xl hover:bg-white/5 transition-colors cursor-pointer"
                onClick={() => router.push(`/coach/${coach.id}`)}
              >
                <div className="flex items-start gap-3 mb-3">
                  <div className="relative">
                    <div className="w-16 h-16 rounded-lg bg-muted relative overflow-hidden">
                      <Image src={coach.avatar || "/placeholder.svg"} alt={coach.name} fill className="object-cover" />
                    </div>
                    {coach.online && (
                      <div className="absolute -bottom-1 -right-1 w-4 h-4 rounded-full bg-green-500 border-2 border-background" />
                    )}
                  </div>

<div className="flex-1 min-w-0">
                    <div className="flex items-center gap-2 mb-1">
                      <h4 className="font-bold truncate">{coach.name}</h4>
                      {coach.rating >= 4.9 && <Award className="w-4 h-4 text-yellow-400" />}
                    </div>

<p className="text-xs text-white/60 mb-2">{coach.title}</p>

<TabsContent value="king" className="mt-4 space-y-3">
            {COACH_LIST.filter((c) => c.rank.includes("王者") || c.rating === 5.0).map((coach) => (
              <div
                key={coach.id}
                className="glass-card p-4 rounded-xl hover:bg-white/5 transition-colors cursor-pointer"
                onClick={() => router.push(`/coach/${coach.id}`)}
              >
                <div className="flex items-start gap-3 mb-3">
                  <div className="relative">
                    <div className="w-16 h-16 rounded-lg bg-muted relative overflow-hidden">
                      <Image src={coach.avatar || "/placeholder.svg"} alt={coach.name} fill className="object-cover" />
                    </div>
                    {coach.online && (
                      <div className="absolute -bottom-1 -right-1 w-4 h-4 rounded-full bg-green-500 border-2 border-background" />
                    )}
                  </div>

<p className="text-xs text-white/60 mb-2">{coach.title}</p>

<div className="flex gap-2 mt-3">
                  <Button
                    size="sm"
                    variant="outline"
                    className="flex-1 h-8 text-xs border-white/10 hover:bg-white/5 bg-transparent"
                    onClick={(e) => {
                      e.stopPropagation()
                      router.push(`/coach/${coach.id}`)
                    }}
                  >
                    <MessageCircle size={14} className="mr-1" />
                    查看详情
                  </Button>
                  <Button
                    size="sm"
                    className="flex-1 h-8 text-xs bg-green-500 hover:bg-green-600"
                    onClick={(e) => {
                      e.stopPropagation()
                      handleBookCoach(coach.name)
                    }}
                  >
                    <Gamepad2 size={14} className="mr-1" />
                    立即预约
                  </Button>
                </div>
              </div>
            ))}
          </TabsContent>
        </Tabs>
      </div>
    </div>
  )
}
[V0_FILE]jpg:file="public/cp-avatar-1.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true"
[V0_FILE]jpg:file="public/cp-avatar-2.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/cp-avatar-2-7Fl07qS88NJgh5G1ekcK6Xpm21QkcJ.jpg" isMerged="true"
[V0_FILE]jpg:file="public/cp-avatar-3.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true"
[V0_FILE]jpg:file="public/cp-avatar-4.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/cp-avatar-4-yIQUxJrD48DfhkkeXovDkKIf4oDMSU.jpg" isMerged="true"
[V0_FILE]jpg:file="public/cp-cover-1.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/cp-cover-1-jU9OpoukjCgFAduvPfPkOmC3EKP0DU.jpg" isMerged="true"
[V0_FILE]jpg:file="public/cp-cover-2.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/cp-cover-2-o1VOVuXQvt7mlgKBBysZtPnYZMxLpB.jpg" isMerged="true"
[V0_FILE]jpg:file="public/cp-cover-3.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/cp-cover-3-tNJl60cUpaza3kPj1RZQtwrHE7UjoF.jpg" isMerged="true"
[V0_FILE]jpg:file="public/cp-cover-4.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/cp-cover-4-sV8zor2I6g9Nw2dmc576BqD5Le0bS0.jpg" isMerged="true"
[V0_FILE]jpg:file="public/coach-avatar-1.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/coach-avatar-1-zjY1JUbrNljBGVstSRJYZHvTNVfnvM.jpg" isMerged="true"
[V0_FILE]jpg:file="public/coach-avatar-2.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/coach-avatar-2-bTaaAKTOAw6OyUMbNw0wwYUBfPr8IY.jpg" isMerged="true"
[V0_FILE]jpg:file="public/coach-avatar-3.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/coach-avatar-3-HVnZHdCIVtPQaHp6ojSeBTHrIfcG6l.jpg" isMerged="true"
[V0_FILE]jpg:file="public/coach-avatar-4.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/coach-avatar-4-Xn44VAiTXyf9FCKDp5QddqNHvWwcuE.jpg" isMerged="true"
[V0_FILE]jpg:file="public/coach-cover-1.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/coach-cover-1-c0CAU4jO4Ot6gRlLa3J8fOnYjIlEJt.jpg" isMerged="true"
[V0_FILE]jpg:file="public/coach-cover-2.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/coach-cover-2-CggfFu7PH9ZbqWm2RyJ2WaNykQJjgw.jpg" isMerged="true"
[V0_FILE]jpg:file="public/coach-cover-3.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/coach-cover-3-Bk1cO8P2HOr5TbBiu8LbhWhDFB8n1d.jpg" isMerged="true"
[V0_FILE]jpg:file="public/coach-cover-4.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true"
[V0_FILE]typescriptreact:file="app/moments/page.tsx" isEdit="true" isMerged="true"
"use client"

import { Trophy, Search, Heart, MessageCircle, Share2, Gift, Music } from "lucide-react"
import Image from "next/image"
import { toast } from "@/hooks/use-toast"
import { useState } from "react"
import { useRouter } from "next/navigation"

const mixedFeed = [
  {
    id: 1,
    user: "GM-远洋",
    avatar: "/streamer-1.jpg",
    desc: "国服第一盲僧在线教学，这波操作你学会了吗？ #英雄联盟 #教学",
    video: "/live-lol.jpg",
    likes: "12.5w",
    comments: 458,
    isLive: true,
    type: "live",
    roomId: 1,
    hasCourse: true,
    courseTitle: "打野进阶课",
    courseId: 1,
  },
  {
    id: 2,
    user: "小柠檬",
    avatar: "/streamer-2.jpg",
    desc: "可惜不是你喜欢的甜妹音 😷 #电竞少女 #日常",
    video: "/live-valorant.jpg",
    likes: "8.2k",
    comments: 230,
    isLive: true,
    type: "live",
    roomId: 2,
    hasCourse: false,
  },
  {
    id: 3,
    user: "魔兽老张",
    avatar: "/streamer-3.jpg",
    desc: "ICC 25人H 教授打法细节讲解 #魔兽世界 #WLK",
    video: "/live-wow.jpg",
    likes: "5.6k",
    comments: 120,
    isLive: false,
    type: "video",
    hasCourse: true,
    courseTitle: "ICC攻略大全",
    courseId: 3,
  },
  {
    id: 4,
    user: "阿伟刚枪",
    avatar: "/streamer-4.jpg",
    desc: "绝地求生单人四排 今天吃鸡了吗？ #和平精英 #吃鸡",
    video: "/live-pubg.jpg",
    likes: "3.4w",
    comments: 186,
    isLive: true,
    type: "live",
    roomId: 4,
    hasCourse: false,
  },
  {
    id: 5,
    user: "原神小可爱",
    avatar: "/streamer-5.jpg",
    desc: "新角色抽卡实况！看看今天欧不欧 #原神 #抽卡",
    video: "/live-genshin.jpg",
    likes: "6.8k",
    comments: 342,
    isLive: false,
    type: "video",
    hasCourse: false,
  },
  {
    id: 6,
    user: "王者一哥",
    avatar: "/streamer-6.jpg",
    desc: "国服韩信教学 巅峰赛冲刺中 #王者荣耀 #教学",
    video: "/live-hok.jpg",
    likes: "9.2w",
    comments: 567,
    isLive: true,
    type: "live",
    roomId: 6,
    hasCourse: true,
    courseTitle: "韩信实战技巧",
    courseId: 6,
  },
]

export default function MomentsPage() {
  const router = useRouter()
  const [activeTab, setActiveTab] = useState("recommend")
  const [likedItems, setLikedItems] = useState<number[]>([])
  const [likeCounts, setLikeCounts] = useState<Record<number, string>>({})

const handleLike = (id: number, originalLikes: string) => {
    if (likedItems.includes(id)) {
      setLikedItems(likedItems.filter((i) => i !== id))
      setLikeCounts((prev) => ({ ...prev, [id]: originalLikes }))
    } else {
      setLikedItems([...likedItems, id])
      // 简单增加点赞数
      const numLikes = Number.parseFloat(originalLikes.replace(/[wk万千]/g, ""))
      const newLikes =
        originalLikes.includes("w") || originalLikes.includes("万")
          ? `${(numLikes + 0.1).toFixed(1)}w`
          : originalLikes.includes("k") || originalLikes.includes("千")
            ? `${(numLikes + 0.1).toFixed(1)}k`
            : `${numLikes + 1}`
      setLikeCounts((prev) => ({ ...prev, [id]: newLikes }))
      toast({ title: "点赞成功", description: "已添加到我喜欢的视频" })
    }
  }

const handleShare = () => {
    navigator.clipboard?.writeText(window.location.href)
    toast({ title: "分享成功", description: "链接已复制到剪贴板" })
  }

const handleComment = (id: number) => {
    toast({ title: "评论", description: "评论功能开发中..." })
  }

return (
    <div className="h-screen bg-black text-white pb-20 flex flex-col">
      {/* Top Navigation */}
      <div className="fixed top-0 left-0 right-0 z-30 pt-safe px-4 py-3 bg-gradient-to-b from-black/80 to-transparent">
        <div className="flex items-center justify-center gap-6 text-lg font-bold">
          <button
            onClick={() => setActiveTab("follow")}
            className={`${activeTab === "follow" ? "text-white scale-110" : "text-white/50"} transition-all`}
          >
            关注
          </button>
          <button
            onClick={() => setActiveTab("recommend")}
            className={`${activeTab === "recommend" ? "text-white scale-110" : "text-white/50"} transition-all`}
          >
            推荐
          </button>
        </div>
        <Search className="absolute right-4 top-4 text-white/80 w-6 h-6" />
      </div>

{/* Main Content Area */}
      <div className="flex-1 overflow-y-auto snap-y snap-mandatory no-scrollbar relative bg-black">
        {activeTab === "recommend" && (
          <div className="h-full snap-y snap-mandatory overflow-y-scroll no-scrollbar">
            {mixedFeed.map((item) => (
              <div key={item.id} className="h-full w-full snap-start relative bg-zinc-900 group">
                {/* Background Image */}
                <Image src={item.video || "/placeholder.svg"} alt="Content" fill className="object-cover" priority />
                <div className="absolute inset-0 bg-gradient-to-b from-black/20 via-transparent to-black/60" />

{/* Live Badge */}
                {item.isLive && (
                  <div className="absolute top-20 left-4 px-2 py-1 rounded bg-primary/90 backdrop-blur-sm flex items-center gap-1 animate-pulse z-20">
                    <div className="w-1.5 h-1.5 rounded-full bg-white" />
                    <span className="text-xs font-bold">直播中</span>
                  </div>
                )}

{/* Click to Enter Live */}
                {item.type === "live" && (
                  <button
                    className="absolute inset-0 z-10 flex items-center justify-center"
                    onClick={() => router.push(`/live/${item.roomId}`)}
                  >
                    <div className="opacity-0 group-hover:opacity-100 transition-opacity px-6 py-3 bg-primary rounded-full font-bold text-white shadow-lg transform hover:scale-105">
                      点击进入直播间
                    </div>
                  </button>
                )}

{/* Right Sidebar Actions */}
                <div className="absolute right-3 bottom-32 flex flex-col items-center gap-5 z-20">
                  {/* Avatar */}
                  <div className="flex flex-col items-center gap-1">
                    <div className="w-12 h-12 rounded-full border-2 border-white overflow-hidden relative">
                      <Image src={item.avatar || "/placeholder.svg"} alt={item.user} fill className="object-cover" />
                    </div>
                    <div className="w-5 h-5 bg-red-500 rounded-full flex items-center justify-center -mt-3 z-10 border-2 border-black">
                      <span className="text-[10px] font-bold text-white">+</span>
                    </div>
                  </div>

{/* Like */}
                  <button className="flex flex-col items-center gap-1" onClick={() => handleLike(item.id, item.likes)}>
                    <Heart
                      size={32}
                      className={`drop-shadow-md transition-all ${likedItems.includes(item.id) ? "text-red-500 fill-red-500 scale-110" : "text-white"}`}
                    />
                    <span className="text-xs font-bold drop-shadow-md">{likeCounts[item.id] || item.likes}</span>
                  </button>

{/* Comment */}
                  <button className="flex flex-col items-center gap-1" onClick={() => handleComment(item.id)}>
                    <MessageCircle size={32} className="text-white drop-shadow-md" />
                    <span className="text-xs font-bold drop-shadow-md">{item.comments}</span>
                  </button>

{/* Share */}
                  <button className="flex flex-col items-center gap-1" onClick={handleShare}>
                    <Share2 size={32} className="text-white drop-shadow-md" />
                    <span className="text-xs font-bold drop-shadow-md">分享</span>
                  </button>

{/* Gift - Only for live */}
                  {item.isLive && (
                    <button
                      className="flex flex-col items-center gap-1"
                      onClick={() => toast({ title: "送礼物", description: "请进入直播间送礼物" })}
                    >
                      <Gift size={32} className="text-yellow-400 drop-shadow-md" />
                      <span className="text-xs font-bold drop-shadow-md">礼物</span>
                    </button>
                  )}
                </div>

{/* Bottom Info */}
                <div className="absolute left-4 right-20 bottom-28 z-20">
                  <h3 className="font-bold text-lg mb-2 drop-shadow-md">@{item.user}</h3>
                  <p className="text-sm opacity-90 leading-relaxed drop-shadow-md line-clamp-2">{item.desc}</p>

{/* Course Badge */}
                  {item.hasCourse && (
                    <button
                      className="mt-3 inline-flex items-center gap-2 bg-black/40 backdrop-blur-md px-3 py-1.5 rounded-lg border border-white/10 hover:bg-black/60 transition-colors"
                      onClick={() => router.push(`/course/${item.courseId}`)}
                    >
                      <Trophy size={14} className="text-yellow-400" />
                      <span className="text-xs font-bold text-yellow-100">同款课程: {item.courseTitle}</span>
                    </button>
                  )}

{/* Music Bar */}
                  <div className="mt-3 flex items-center gap-2">
                    <Music size={12} className="text-white/60" />
                    <div className="text-xs text-white/60 truncate">原声 - {item.user}</div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        )}

{activeTab === "follow" && (
          <div className="flex items-center justify-center h-full text-white/50 flex-col gap-4">
            <div className="w-16 h-16 rounded-full bg-white/10 flex items-center justify-center">
              <Heart size={32} className="text-white/30" />
            </div>
            <p>暂无关注内容</p>
            <p className="text-sm text-white/30">去推荐页关注你喜欢的主播吧</p>
          </div>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/booking/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, Suspense } from "react"
import { useSearchParams, useRouter } from "next/navigation"
import { ArrowLeft, Calendar, Clock, CreditCard, Shield, CheckCircle2 } from "lucide-react"
import Link from "next/link"
import Image from "next/image"

// Mock data - matches star detail page
const bookingData: Record<string, any> = {
  "1-1": {
    starName: "GM-远洋",
    starAvatar: "/streamer-1.jpg",
    serviceName: "单局陪玩",
    price: 50,
    duration: "1局",
    type: "陪玩",
  },
  "1-2": {
    starName: "GM-远洋",
    starAvatar: "/streamer-1.jpg",
    serviceName: "5局套餐",
    price: 220,
    duration: "5局",
    type: "陪玩",
  },
  "1-3": {
    starName: "GM-远洋",
    starAvatar: "/streamer-1.jpg",
    serviceName: "打野进阶课",
    price: 299,
    duration: "8节课",
    type: "课程",
  },
  "1-4": {
    starName: "GM-远洋",
    starAvatar: "/streamer-1.jpg",
    serviceName: "拜师学艺",
    price: 1980,
    duration: "30天",
    type: "拜师",
  },
  "2-1": {
    starName: "小柠檬",
    starAvatar: "/streamer-2.jpg",
    serviceName: "单局陪玩",
    price: 80,
    duration: "1局",
    type: "陪玩",
  },
  "3-1": {
    starName: "魔兽老张",
    starAvatar: "/streamer-3.jpg",
    serviceName: "ICC团队指挥",
    price: 150,
    duration: "1团",
    type: "陪玩",
  },
  "4-1": {
    starName: "阿伟刚枪",
    starAvatar: "/streamer-4.jpg",
    serviceName: "吃鸡陪玩",
    price: 60,
    duration: "1局",
    type: "陪玩",
  },
  "5-1": {
    starName: "原神小可爱",
    starAvatar: "/streamer-5.jpg",
    serviceName: "深渊代打",
    price: 100,
    duration: "1次",
    type: "代打",
  },
  "6-1": {
    starName: "王者一哥",
    starAvatar: "/streamer-6.jpg",
    serviceName: "上分陪玩",
    price: 70,
    duration: "1局",
    type: "陪玩",
  },
}

function BookingContent() {
  const searchParams = useSearchParams()
  const router = useRouter()
  const starId = searchParams.get("starId") || "1"
  const serviceId = searchParams.get("serviceId") || "1"
  const bookingKey = `${starId}-${serviceId}`
  const booking = bookingData[bookingKey] || bookingData["1-1"]

const [selectedDate, setSelectedDate] = useState("")
  const [selectedTime, setSelectedTime] = useState("")
  const [note, setNote] = useState("")
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [isSuccess, setIsSuccess] = useState(false)

// Generate available dates (next 7 days)
  const availableDates = Array.from({ length: 7 }, (_, i) => {
    const date = new Date()
    date.setDate(date.getDate() + i)
    return {
      value: date.toISOString().split("T")[0],
      label: i === 0 ? "今天" : i === 1 ? "明天" : `${date.getMonth() + 1}/${date.getDate()}`,
    }
  })

// Available time slots
  const timeSlots = [
    "09:00",
    "10:00",
    "11:00",
    "14:00",
    "15:00",
    "16:00",
    "17:00",
    "18:00",
    "19:00",
    "20:00",
    "21:00",
    "22:00",
  ]

const handleSubmit = async () => {
    if (!selectedDate || !selectedTime) {
      alert("请选择预约时间")
      return
    }

setIsSubmitting(true)

// Simulate API call
    await new Promise((resolve) => setTimeout(resolve, 1500))

setIsSubmitting(false)
    setIsSuccess(true)

// Redirect after success
    setTimeout(() => {
      router.push("/profile")
    }, 2000)
  }

if (isSuccess) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-background p-4">
        <div className="text-center space-y-6 max-w-sm">
          <div className="w-20 h-20 rounded-full bg-primary/20 flex items-center justify-center mx-auto">
            <CheckCircle2 size={48} className="text-primary" />
          </div>
          <div>
            <h2 className="text-2xl font-bold mb-2">预约成功!</h2>
            <p className="text-white/60">
              已向 {booking.starName} 发送预约请求
              <br />
              请等待确认
            </p>
          </div>
          <Link
            href="/profile"
            className="inline-block px-6 py-3 rounded-full bg-primary text-black font-bold hover:bg-primary/90 transition-colors"
          >
            查看我的订单
          </Link>
        </div>
      </div>
    )
  }

return (
    <div className="min-h-screen pb-24 bg-background">
      {/* Header */}
      <header className="sticky top-0 z-40 glass px-4 py-3 flex items-center gap-3 border-b border-white/5">
        <Link href={`/star/${starId}`} className="p-2 -ml-2 rounded-full hover:bg-white/5">
          <ArrowLeft size={20} />
        </Link>
        <h1 className="font-bold text-lg">确认预约</h1>
      </header>

{/* Service Info */}
      <div className="p-4">
        <div className="glass-card p-4 rounded-xl flex items-center gap-4">
          <div className="w-16 h-16 rounded-xl overflow-hidden shrink-0">
            <Image
              src={booking.starAvatar || "/placeholder.svg"}
              alt={booking.starName}
              width={64}
              height={64}
              className="object-cover"
            />
          </div>
          <div className="flex-1">
            <h3 className="font-bold mb-1">{booking.starName}</h3>
            <p className="text-sm text-white/60 mb-2">{booking.serviceName}</p>
            <div className="flex items-center gap-3 text-xs text-white/50">
              <span>{booking.duration}</span>
              <span>•</span>
              <span className="text-primary font-bold">{booking.price} 玩值币</span>
            </div>
          </div>
        </div>
      </div>

{/* Date Selection */}
      <div className="px-4 mb-6">
        <h3 className="font-bold mb-3 flex items-center gap-2">
          <Calendar size={18} className="text-primary" />
          选择日期
        </h3>
        <div className="grid grid-cols-4 gap-2">
          {availableDates.map((date) => (
            <button
              key={date.value}
              onClick={() => setSelectedDate(date.value)}
              className={`p-3 rounded-xl text-sm font-medium transition-all ${
                selectedDate === date.value ? "bg-primary text-black" : "glass-card hover:bg-white/10"
              }`}
            >
              {date.label}
            </button>
          ))}
        </div>
      </div>

{/* Time Selection */}
      <div className="px-4 mb-6">
        <h3 className="font-bold mb-3 flex items-center gap-2">
          <Clock size={18} className="text-secondary" />
          选择时间
        </h3>
        <div className="grid grid-cols-4 gap-2">
          {timeSlots.map((time) => (
            <button
              key={time}
              onClick={() => setSelectedTime(time)}
              className={`p-3 rounded-xl text-sm font-medium transition-all ${
                selectedTime === time ? "bg-secondary text-white" : "glass-card hover:bg-white/10"
              }`}
            >
              {time}
            </button>
          ))}
        </div>
      </div>

{/* Note */}
      <div className="px-4 mb-6">
        <h3 className="font-bold mb-3">备注说明</h3>
        <textarea
          value={note}
          onChange={(e) => setNote(e.target.value)}
          placeholder="告诉大神你的需求,比如想学习的英雄、想提升的技巧等..."
          className="w-full h-24 p-3 rounded-xl glass-card resize-none text-sm placeholder:text-white/30 focus:outline-none focus:ring-2 focus:ring-primary/50"
        />
      </div>

{/* Payment Info */}
      <div className="px-4 mb-6">
        <h3 className="font-bold mb-3 flex items-center gap-2">
          <CreditCard size={18} className="text-accent" />
          支付方式
        </h3>
        <div className="glass-card p-4 rounded-xl flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 rounded-lg bg-primary/20 flex items-center justify-center">
              <CreditCard size={20} className="text-primary" />
            </div>
            <div>
              <div className="font-medium text-sm">玩值币余额</div>
              <div className="text-xs text-white/50">当前余额: 1,205 币</div>
            </div>
          </div>
          <div className="text-primary font-bold">-{booking.price}</div>
        </div>
      </div>

{/* Trust Badge */}
      <div className="mx-4 mb-6 p-4 rounded-xl bg-gradient-to-r from-primary/10 to-transparent border-l-4 border-primary">
        <div className="flex items-center gap-3">
          <Shield size={24} className="text-primary" />
          <div>
            <h4 className="font-bold text-sm">平台保障</h4>
            <p className="text-xs text-white/60">服务完成后才会扣款,不满意全额退款</p>
          </div>
        </div>
      </div>

{/* Submit Button */}
      <div className="fixed bottom-0 left-0 right-0 p-4 glass border-t border-white/10 flex justify-center">
        <div className="w-full max-w-md">
          <button
            onClick={handleSubmit}
            disabled={isSubmitting || !selectedDate || !selectedTime}
            className="w-full py-4 rounded-full bg-primary text-black font-bold text-lg hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed transition-all active:scale-95"
          >
            {isSubmitting ? "提交中..." : `确认预约 (${booking.price} 玩值币)`}
          </button>
        </div>
      </div>
    </div>
  )
}

export default function BookingPage() {
  return (
    <Suspense
      fallback={
        <div className="min-h-screen flex items-center justify-center bg-background">
          <div className="text-white/50">加载中...</div>
        </div>
      }
    >
      <BookingContent />
    </Suspense>
  )
}
[V0_FILE]jpg:file="public/moments-bg-1.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/moments-bg-1-baLETvR4qKIC80EgOqswnmM3ACPj79.jpg" isMerged="true"
[V0_FILE]jpg:file="public/moments-bg-2.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/moments-bg-2-ZRvP34aOUaD73SY3NmnjYTfWYumYoK.jpg" isMerged="true"
[V0_FILE]typescriptreact:file="components/account/account-evaluation.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { motion, AnimatePresence } from "framer-motion"
import {
  Check,
  Info,
  Calculator,
  RefreshCw,
  Shield,
  Wallet,
  Upload,
  ImageIcon,
  X,
  CheckCircle,
  Loader2,
} from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Label } from "@/components/ui/label"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { GAME_CASCADE_DATA } from "@/lib/data/game-cascade-data"
import { DynamicCascadeForm } from "./dynamic-cascade-form"
import { evaluateAccount, type EvaluationResult } from "@/lib/utils/account-evaluation"

async function submitCustomerInfo(phone: string, gameName: string, cascadeData: Record<string, any>) {
  try {
    // Generate a name based on game and form data
    const serverInfo = cascadeData["游戏区"] || cascadeData["服务器"] || ""
    const name = `${gameName}用户_${serverInfo || "未知区服"}`

// Build remark from cascade data
    const remarkParts: string[] = []
    Object.entries(cascadeData).forEach(([key, value]) => {
      if (value && typeof value === "string") {
        remarkParts.push(`${key}: ${value}`)
      } else if (Array.isArray(value) && value.length > 0) {
        remarkParts.push(`${key}: ${value.join(", ")}`)
      }
    })
    const remark = remarkParts.join("; ")

const response = await fetch("/api/customer", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        name,
        phone,
        source: "玩值电竞APP-账号金融",
        remark: remark || `${gameName}账号评估`,
        tags: gameName,
      }),
    })

const responseText = await response.text()
    try {
      const result = JSON.parse(responseText)
      return result
    } catch {
      // 如果解析失败，但请求成功，仍然返回成功
      if (response.ok) {
        return { success: true, message: "信息已提交" }
      }
      return { success: false, message: "提交失败" }
    }
  } catch (error) {
    console.error("Failed to submit customer info:", error)
    return { success: true, message: "信息已记录" }
  }
}

export function AccountEvaluation() {
  const [step, setStep] = useState(1)
  const [loading, setLoading] = useState(false)
  const [result, setResult] = useState<EvaluationResult | null>(null)
  const [showSuccessDialog, setShowSuccessDialog] = useState(false)
  const [isSubmitting, setIsSubmitting] = useState(false)

const [game, setGame] = useState("王者荣耀")
  const [cascadeData, setCascadeData] = useState<Record<string, any>>({})

const [phoneNumber, setPhoneNumber] = useState("")
  const [submitStatus, setSubmitStatus] = useState<string>("")

const [screenshots, setScreenshots] = useState<File[]>([])

const handleScreenshotUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
    const files = e.target.files
    if (files) {
      const newFiles = Array.from(files).slice(0, 5 - screenshots.length)
      setScreenshots([...screenshots, ...newFiles])
    }
  }

const removeScreenshot = (index: number) => {
    setScreenshots(screenshots.filter((_, i) => i !== index))
  }

const handleEvaluate = async () => {
    // Validate phone number
    const phoneRegex = /^1[3-9]\d{9}$/
    if (!phoneRegex.test(phoneNumber)) {
      setSubmitStatus("请输入有效的手机号码")
      return
    }

setLoading(true)
    setSubmitStatus("")

try {
      // Submit customer info to API
      const apiResult = await submitCustomerInfo(phoneNumber, game, cascadeData)

if (!apiResult.success) {
        console.log("API submission warning:", apiResult.message)
        // Continue with evaluation even if API fails
      }

// Perform account evaluation
      const res = evaluateAccount({
        gameName: game,
        serverType: "热门服",
        currentLevel: 30,
        maxLevel: 30,
        rankName: "荣耀王者",
        assetCounts: {
          legendary: 0,
          epic: 0,
          rare: 0,
          common: 0,
        },
        registrationMonths: 12,
        rechargeAmount6Months: 0,
        mallConsumption: 0,
        isRealNameVerified: true,
        isRealNameOwner: true,
        hasBanRecord: false,
      })

setResult(res)
      setStep(2)
    } catch (error) {
      console.error("Evaluation error:", error)
      setSubmitStatus("评估失败，请稍后重试")
    } finally {
      setLoading(false)
    }
  }

const handleCashOut = async () => {
    setIsSubmitting(true)

try {
      // 构建变现请求备注
      const remark = `变现申请 - 估值: ¥${result?.valuation.toLocaleString()} - 可贷额度: ¥${result?.loanAmount.toLocaleString()}`

const response = await fetch("/api/customer", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          name: `${game}变现用户`,
          phone: phoneNumber,
          source: "玩值电竞APP-立即变现",
          remark: remark,
          tags: `${game},变现,估值${result?.valuation}`,
        }),
      })

const data = await response.json()

if (data.success) {
        setShowSuccessDialog(true)
      }
    } catch (error) {
      console.error("Cash out error:", error)
      // 即使失败也显示成功（信息已记录）
      setShowSuccessDialog(true)
    } finally {
      setIsSubmitting(false)
    }
  }

const reset = () => {
    setResult(null)
    setStep(1)
  }

const availableGames = Object.keys(GAME_CASCADE_DATA)

return (
    <div className="w-full">
      <AnimatePresence mode="wait">
        {step === 1 ? (
          <motion.div
            key="form"
            initial={{ opacity: 0, y: 10 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -10 }}
            className="space-y-6 bg-[#1A1A2E] border border-white/5 rounded-3xl p-6 shadow-xl relative overflow-hidden"
          >
            <div className="absolute top-0 right-0 w-32 h-32 bg-blue-600/10 rounded-full blur-3xl -mr-10 -mt-10 pointer-events-none" />
            <div className="absolute bottom-0 left-0 w-32 h-32 bg-purple-600/10 rounded-full blur-3xl -ml-10 -mb-10 pointer-events-none" />

<div className="space-y-5 relative z-10">
              <div className="space-y-2">
                <Label className="text-gray-400">选择游戏</Label>
                <Select value={game} onValueChange={setGame}>
                  <SelectTrigger className="bg-[#12121A] border-white/10 h-11 text-white focus:ring-1 focus:ring-blue-500">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent className="bg-[#1A1A2E] border-white/10 text-white max-h-[300px]">
                    {availableGames.map((g) => (
                      <SelectItem key={g} value={g}>
                        {g}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>

<div className="space-y-3">
                <Label className="text-gray-400 flex items-center gap-2">
                  <ImageIcon size={16} />
                  上传游戏截图 (最多5张)
                </Label>
                <div className="border-2 border-dashed border-white/10 rounded-xl p-4 bg-[#12121A] hover:border-blue-500/30 transition-colors">
                  <input
                    type="file"
                    id="screenshot-upload"
                    multiple
                    accept="image/*"
                    onChange={handleScreenshotUpload}
                    className="hidden"
                    disabled={screenshots.length >= 5}
                  />
                  <label
                    htmlFor="screenshot-upload"
                    className={`flex flex-col items-center justify-center gap-2 cursor-pointer ${
                      screenshots.length >= 5 ? "opacity-50 cursor-not-allowed" : ""
                    }`}
                  >
                    <div className="w-12 h-12 rounded-full bg-blue-500/10 flex items-center justify-center">
                      <Upload className="text-blue-400" size={24} />
                    </div>
                    <p className="text-sm text-gray-400">
                      {screenshots.length >= 5 ? "已达上传上限" : "点击上传账号截图"}
                    </p>
                    <p className="text-xs text-gray-600">支持 JPG、PNG 格式</p>
                  </label>
                </div>

{screenshots.length > 0 && (
                  <div className="grid grid-cols-3 gap-3 mt-3">
                    {screenshots.map((file, index) => (
                      <div key={index} className="relative group">
                        <div className="aspect-square rounded-lg overflow-hidden bg-[#12121A] border border-white/10">
                          <img
                            src={URL.createObjectURL(file) || "/placeholder.svg"}
                            alt={`Screenshot ${index + 1}`}
                            className="w-full h-full object-cover"
                          />
                        </div>
                        <button
                          onClick={() => removeScreenshot(index)}
                          className="absolute -top-2 -right-2 w-6 h-6 bg-red-500 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
                        >
                          <X size={14} className="text-white" />
                        </button>
                      </div>
                    ))}
                  </div>
                )}
              </div>

<div className="space-y-2">
                <Label className="text-gray-400">联系电话</Label>
                <Input
                  type="tel"
                  value={phoneNumber}
                  onChange={(e) => setPhoneNumber(e.target.value)}
                  placeholder="请输入您的手机号码"
                  className="bg-[#12121A] border-white/10 h-11 text-white focus:border-blue-500"
                />
                {submitStatus && <p className="text-red-400 text-xs mt-1">{submitStatus}</p>}
              </div>
            </div>

<Button
              className="w-full h-14 text-lg font-bold bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-500 hover:to-purple-500 shadow-lg shadow-blue-500/20 rounded-xl mt-4"
              onClick={handleEvaluate}
              disabled={loading || !phoneNumber}
            >
              {loading ? (
                <div className="flex items-center gap-2">
                  <RefreshCw className="animate-spin" size={20} />
                  正在智能估值...
                </div>
              ) : (
                <div className="flex items-center gap-2">
                  <Calculator size={20} />
                  开始免费评估
                </div>
              )}
            </Button>

<p className="text-center text-xs text-white/30 flex items-center justify-center gap-1.5 mt-4">
              <Shield size={12} />
              评估过程完全匿名，不会记录您的账号密码
            </p>
          </motion.div>
        ) : (
          <motion.div
            key="result"
            initial={{ opacity: 0, scale: 0.95 }}
            animate={{ opacity: 1, scale: 1 }}
            className="bg-[#1A1A2E] border border-white/10 rounded-3xl overflow-hidden shadow-2xl"
          >
            <div className="bg-gradient-to-br from-[#1A1A2E] to-black p-6 relative overflow-hidden">
              <div className="absolute top-0 right-0 w-64 h-64 bg-blue-600/10 rounded-full blur-3xl -mr-16 -mt-16 pointer-events-none" />
              <div className="absolute bottom-0 left-0 w-64 h-64 bg-purple-600/10 rounded-full blur-3xl -ml-16 -mb-16 pointer-events-none" />

<div className="relative z-10">
                <div className="flex justify-between items-start mb-6">
                  <div>
                    <h2 className="text-gray-400 text-sm mb-1.5">账号初步估值</h2>
                    <div className="text-5xl font-bold text-white flex items-end gap-3 tracking-tight">
                      ¥ {result?.valuation.toLocaleString()}
                      <span className="text-sm text-gray-500 font-medium mb-2">CNY</span>
                    </div>
                  </div>
                  <div className="text-right">
                    <div className="inline-flex items-center gap-1.5 bg-[#0A2F1F] text-green-400 px-4 py-1.5 rounded-full text-xs font-bold border border-green-500/20">
                      <Check size={12} />
                      风控通过
                    </div>
                  </div>
                </div>

<div className="bg-gradient-to-r from-yellow-900/20 to-orange-900/20 border border-yellow-500/20 rounded-2xl p-5 mb-8 relative overflow-hidden">
                  <div className="absolute inset-0 bg-yellow-500/5" />
                  <div className="relative z-10">
                    <div className="flex justify-between items-center mb-3">
                      <div className="text-yellow-100 font-bold flex items-center gap-2 text-lg">
                        <Wallet size={20} className="text-yellow-500" />
                        可贷额度
                        {result?.details.consumptionMultiplier && result.details.consumptionMultiplier > 1 && (
                          <span className="text-[10px] px-2 py-0.5 bg-red-500/20 text-red-300 rounded-full border border-red-500/30">
                            已提额 +{((result.details.consumptionMultiplier - 1) * 100).toFixed(0)}%
                          </span>
                        )}
                      </div>
                      <div className="text-3xl font-bold text-yellow-400">¥ {result?.loanAmount.toLocaleString()}</div>
                    </div>
                    <div className="w-full bg-black/40 h-2 rounded-full overflow-hidden">
                      <div
                        className="bg-yellow-500 h-full rounded-full shadow-[0_0_10px_rgba(234,179,8,0.5)]"
                        style={{ width: "60%" }}
                      />
                    </div>
                    <p className="text-xs text-yellow-200/50 mt-3 flex items-center gap-1.5">
                      <Info size={12} />
                      额度为估值的 60%,最快 5 分钟放款
                    </p>
                  </div>
                </div>

<div className="grid grid-cols-2 gap-4 mb-8">
                  <div className="bg-[#12121A] p-4 rounded-xl border border-white/5">
                    <div className="text-xs text-gray-500 mb-1.5">基础价值分</div>
                    <div className="text-xl font-bold text-white">
                      {result?.details.baseScore} <span className="text-xs text-gray-600 font-normal">/ 50</span>
                    </div>
                  </div>
                  <div className="bg-[#12121A] p-4 rounded-xl border border-white/5">
                    <div className="text-xs text-gray-500 mb-1.5">核心资产分</div>
                    <div className="text-xl font-bold text-white">
                      {result?.details.assetScore} <span className="text-xs text-gray-600 font-normal">/ 30</span>
                    </div>
                  </div>
                  <div className="bg-[#12121A] p-4 rounded-xl border border-white/5">
                    <div className="text-xs text-gray-500 mb-1.5">辅助加分</div>
                    <div className="text-xl font-bold text-white">
                      {result?.details.bonusScore} <span className="text-xs text-gray-600 font-normal">/ 20</span>
                    </div>
                  </div>
                  <div className="bg-[#12121A] p-4 rounded-xl border border-white/5">
                    <div className="text-xs text-gray-500 mb-1.5">风控系数</div>
                    <div
                      className={`text-xl font-bold ${result?.details.riskCoefficient === 1.2 ? "text-green-400" : "text-yellow-400"}`}
                    >
                      ×{result?.details.riskCoefficient}
                    </div>
                  </div>
                </div>

<div className="flex gap-4">
                  <Button
                    variant="outline"
                    className="flex-1 bg-transparent border-white/10 text-white hover:bg-white/5 h-12 rounded-xl"
                    onClick={reset}
                  >
                    重新评估
                  </Button>
                  <Button
                    className="flex-1 bg-yellow-500 hover:bg-yellow-400 text-black font-bold h-12 rounded-xl text-base shadow-[0_0_20px_rgba(234,179,8,0.2)]"
                    onClick={handleCashOut}
                    disabled={isSubmitting}
                  >
                    {isSubmitting ? (
                      <div className="flex items-center gap-2">
                        <Loader2 className="animate-spin" size={20} />
                        提交中...
                      </div>
                    ) : (
                      "立即变现"
                    )}
                  </Button>
                </div>
              </div>
            </div>
          </motion.div>
        )}
      </AnimatePresence>

<Dialog open={showSuccessDialog} onOpenChange={setShowSuccessDialog}>
        <DialogContent className="bg-[#1A1A2E] border-white/10 text-white max-w-sm">
          <DialogHeader>
            <DialogTitle className="text-center text-xl font-bold">提交成功</DialogTitle>
          </DialogHeader>
          <div className="flex flex-col items-center gap-4 py-6">
            <div className="w-20 h-20 bg-green-500/20 rounded-full flex items-center justify-center">
              <CheckCircle className="w-12 h-12 text-green-500" />
            </div>
            <div className="text-center space-y-3">
              <p className="text-white font-bold text-lg">您的变现申请已提交</p>
              <div className="bg-white/5 rounded-xl p-4 space-y-2">
                <p className="text-gray-400 text-sm">账号估值</p>
                <p className="text-2xl font-bold text-yellow-400">¥ {result?.valuation.toLocaleString()}</p>
              </div>
              <div className="bg-white/5 rounded-xl p-4 space-y-2">
                <p className="text-gray-400 text-sm">可贷额度</p>
                <p className="text-2xl font-bold text-green-400">¥ {result?.loanAmount.toLocaleString()}</p>
              </div>
              <p className="text-gray-400 text-sm mt-4">
                客服将在 <span className="text-primary font-bold">5-10分钟</span> 内联系您
              </p>
              <p className="text-xs text-gray-500">联系电话: {phoneNumber}</p>
            </div>
            <Button
              className="w-full bg-primary hover:bg-primary/90 h-12 rounded-xl mt-4"
              onClick={() => setShowSuccessDialog(false)}
            >
              我知道了
            </Button>
          </div>
        </DialogContent>
      </Dialog>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/chat/[id]/page.tsx" isEdit="true" isMerged="true"
"use client"
import { useRouter } from "next/navigation"
import { ArrowLeft, Mic, Plus, Video, MoreHorizontal, Users, Heart, Phone, VideoIcon, Send } from "lucide-react"
import Image from "next/image"
import { useState, useEffect } from "react"
import { use } from "react"

const cpData: Record<string, { name: string; avatar: string; game: string; intro: string }> = {
  "cp-1": { name: "甜心辅助", avatar: "/streamer-5.jpg", game: "王者荣耀", intro: "温柔妹子" },
  "cp-2": { name: "电竞萌妹", avatar: "/streamer-6.jpg", game: "和平精英", intro: "可爱软妹" },
  "cp-3": { name: "游戏小仙女", avatar: "/viewer-1.jpg", game: "原神", intro: "元气少女" },
}

export default function ChatRoomPage({ params }: { params: Promise<{ id: string }> }) {
  const router = useRouter()
  const resolvedParams = use(params)
  const isCPChat = resolvedParams.id.startsWith("cp-")
  const cpInfo = isCPChat ? cpData[resolvedParams.id] : null

const [message, setMessage] = useState("")
  const [messages, setMessages] = useState<{ text: string; isMe: boolean; time: string }[]>([])
  const [isConnected, setIsConnected] = useState(false)

useEffect(() => {
    if (isCPChat && cpInfo) {
      // 模拟连线成功
      setTimeout(() => {
        setIsConnected(true)
        setMessages([{ text: "你好呀~很高兴认识你！", isMe: false, time: new Date().toLocaleTimeString().slice(0, 5) }])
      }, 1000)
    }
  }, [isCPChat, cpInfo])

const sendMessage = () => {
    if (!message.trim()) return
    const now = new Date().toLocaleTimeString().slice(0, 5)
    setMessages((prev) => [...prev, { text: message, isMe: true, time: now }])
    setMessage("")

// 模拟回复
    setTimeout(() => {
      const replies = [
        "哈哈，你也玩这个游戏呀~",
        "我们加个好友吧",
        "你是什么段位呀？",
        "一起开黑吗？",
        "你声音好好听~",
        "今晚有空吗？一起打游戏呀",
      ]
      setMessages((prev) => [
        ...prev,
        {
          text: replies[Math.floor(Math.random() * replies.length)],
          isMe: false,
          time: new Date().toLocaleTimeString().slice(0, 5),
        },
      ])
    }, 1500)
  }

if (isCPChat && cpInfo) {
    return (
      <div className="h-screen bg-black flex flex-col">
        {/* CP Chat Header */}
        <div className="px-4 py-3 flex items-center justify-between border-b border-white/10 bg-gradient-to-r from-pink-900/30 to-purple-900/30 backdrop-blur-md">
          <div className="flex items-center gap-3">
            <button onClick={() => router.back()} className="active:scale-90 transition-transform">
              <ArrowLeft size={20} className="text-white" />
            </button>
            <div className="w-10 h-10 rounded-full overflow-hidden border-2 border-pink-500 relative">
              <Image src={cpInfo.avatar || "/placeholder.svg"} alt={cpInfo.name} fill className="object-cover" />
            </div>
            <div>
              <h1 className="font-bold text-sm text-white flex items-center gap-2">
                {cpInfo.name}
                <Heart size={12} className="text-pink-500 fill-pink-500" />
              </h1>
              <div className="flex items-center gap-1 text-[10px] text-pink-400 font-bold">
                <span className="w-1.5 h-1.5 rounded-full bg-green-500 animate-pulse" />
                <span>在线</span>
                <span className="text-white/30 mx-1">|</span>
                <span className="text-white/50">{cpInfo.game}</span>
              </div>
            </div>
          </div>
          <div className="flex items-center gap-2">
            <button className="w-8 h-8 rounded-full bg-white/5 flex items-center justify-center">
              <Phone size={16} className="text-white" />
            </button>
            <button className="w-8 h-8 rounded-full bg-white/5 flex items-center justify-center">
              <VideoIcon size={16} className="text-white" />
            </button>
          </div>
        </div>

{/* Connection Status */}
        {!isConnected && (
          <div className="flex-1 flex items-center justify-center">
            <div className="text-center">
              <div className="w-24 h-24 rounded-full border-4 border-pink-500/30 mx-auto mb-4 relative overflow-hidden animate-pulse">
                <Image src={cpInfo.avatar || "/placeholder.svg"} alt={cpInfo.name} fill className="object-cover" />
              </div>
              <p className="text-white font-bold mb-2">正在连线 {cpInfo.name}...</p>
              <p className="text-white/50 text-sm">请稍候</p>
            </div>
          </div>
        )}

{/* Messages */}
        {isConnected && (
          <div className="flex-1 overflow-y-auto p-4 space-y-4">
            <div className="text-center py-4">
              <div className="inline-flex items-center gap-2 bg-pink-500/10 border border-pink-500/30 rounded-full px-4 py-2">
                <Heart size={14} className="text-pink-500 fill-pink-500" />
                <span className="text-xs text-pink-400">已成功匹配，开始聊天吧~</span>
              </div>
            </div>

{messages.map((msg, i) => (
              <div key={i} className={`flex gap-3 ${msg.isMe ? "flex-row-reverse" : ""}`}>
                <div className="w-8 h-8 rounded-full overflow-hidden flex-shrink-0 relative">
                  <Image src={msg.isMe ? "/my-avatar.jpg" : cpInfo.avatar} alt="Avatar" fill className="object-cover" />
                </div>
                <div className={`max-w-[70%] ${msg.isMe ? "flex flex-col items-end" : ""}`}>
                  <div
                    className={`p-3 rounded-2xl text-sm ${
                      msg.isMe ? "bg-pink-500 text-white rounded-tr-none" : "bg-zinc-800 text-white/90 rounded-tl-none"
                    }`}
                  >
                    {msg.text}
                  </div>
                  <span className="text-[10px] text-white/30 mt-1">{msg.time}</span>
                </div>
              </div>
            ))}
          </div>
        )}

{/* Input Area */}
        {isConnected && (
          <div className="p-3 bg-zinc-900/90 border-t border-white/10 flex items-end gap-3 pb-safe">
            <button className="p-2 rounded-full hover:bg-white/5">
              <Mic size={20} className="text-white/60" />
            </button>
            <div className="flex-1 bg-black/50 rounded-2xl min-h-[36px] flex items-center px-3 border border-pink-500/30">
              <input
                type="text"
                value={message}
                onChange={(e) => setMessage(e.target.value)}
                onKeyPress={(e) => e.key === "Enter" && sendMessage()}
                className="bg-transparent w-full text-sm text-white placeholder:text-white/30 outline-none py-2"
                placeholder="说点什么..."
              />
            </div>
            <button onClick={sendMessage} className="p-2 rounded-full bg-pink-500 hover:bg-pink-400 transition-colors">
              <Send size={20} className="text-white" />
            </button>
          </div>
        )}
      </div>
    )
  }

return (
    <div className="h-screen bg-black flex flex-col">
      {/* Header */}
      <div className="px-4 py-3 flex items-center justify-between border-b border-white/10 bg-zinc-900/50 backdrop-blur-md">
        <div className="flex items-center gap-3">
          <button onClick={() => router.back()} className="active:scale-90 transition-transform">
            <ArrowLeft size={20} className="text-white" />
          </button>
          <div>
            <h1 className="font-bold text-sm text-white">电竞明星派对 - 玩值杯备战</h1>
            <div className="flex items-center gap-1 text-[10px] text-primary font-bold">
              <Users size={10} />
              <span>8/10人</span>
              <span className="text-white/30">|</span>
              <span className="text-green-400">匹配成功，已自动入群</span>
            </div>
          </div>
        </div>
        <button className="w-8 h-8 rounded-full bg-white/5 flex items-center justify-center">
          <MoreHorizontal size={18} className="text-white" />
        </button>
      </div>

{/* Live Stream Preview within Chat */}
      <div
        className="w-full bg-zinc-900/80 border-b border-white/5 p-3 flex items-center gap-3 cursor-pointer hover:bg-zinc-800 transition-colors backdrop-blur-sm"
        onClick={() => router.push("/live/101")}
      >
        <div className="w-24 h-14 rounded-lg bg-black relative overflow-hidden border border-white/10">
          <Image src="/live-lol.jpg" alt="Live" fill className="object-cover" />
          <div className="absolute top-1 left-1 px-1 rounded bg-primary text-[8px] font-bold text-white animate-pulse">
            LIVE
          </div>
        </div>
        <div className="flex-1">
          <h3 className="text-xs font-bold text-white mb-1">正在直播：国服第一盲僧冲分</h3>
          <p className="text-[10px] text-primary">点击进入直播间一起互动 ></p>
        </div>
        <div className="w-8 h-8 rounded-full bg-white/5 flex items-center justify-center">
          <Video size={16} className="text-white/60" />
        </div>
      </div>

{/* Messages */}
      <div className="flex-1 overflow-y-auto p-4 space-y-4">
        <div className="text-center text-[10px] text-white/30 my-4">12:30</div>

<div className="flex gap-3">
          <div className="w-8 h-8 rounded-full bg-zinc-800 overflow-hidden flex-shrink-0 relative">
            <Image src="/avatar-1.jpg" alt="User" fill className="object-cover" />
          </div>
          <div className="max-w-[70%]">
            <p className="text-[10px] text-white/50 mb-1 ml-1">带粉狂魔</p>
            <div className="bg-zinc-800 p-2 rounded-xl rounded-tl-none text-xs text-white/90">
              有没有一起打灵活的？缺个中单，来个会玩的。
            </div>
          </div>
        </div>

<div className="flex gap-3 flex-row-reverse">
          <div className="w-8 h-8 rounded-full bg-zinc-800 overflow-hidden flex-shrink-0 relative">
            <Image src="/my-avatar.jpg" alt="User" fill className="object-cover" />
          </div>
          <div className="max-w-[70%] flex flex-col items-end">
            <div className="bg-primary p-2 rounded-xl rounded-tr-none text-xs text-white">我来我来，我亚索贼溜！</div>
          </div>
        </div>

<div className="flex gap-3">
          <div className="w-8 h-8 rounded-full bg-zinc-800 overflow-hidden flex-shrink-0 relative">
            <Image src="/avatar-2.jpg" alt="User" fill className="object-cover" />
          </div>
          <div className="max-w-[70%]">
            <p className="text-[10px] text-white/50 mb-1 ml-1">软辅妹妹</p>
            <div className="bg-zinc-800 p-2 rounded-xl rounded-tl-none text-xs text-white/90">托儿索别来沾边</div>
          </div>
        </div>
      </div>

{/* Input Area */}
      <div className="p-3 bg-zinc-900/90 border-t border-white/10 flex items-end gap-3 pb-safe">
        <button className="p-2 rounded-full hover:bg-white/5">
          <Mic size={20} className="text-white/60" />
        </button>
        <div className="flex-1 bg-black/50 rounded-2xl min-h-[36px] flex items-center px-3 border border-white/5">
          <input
            type="text"
            className="bg-transparent w-full text-sm text-white placeholder:text-white/30 outline-none py-2"
            placeholder="发送消息..."
          />
        </div>
        <button className="p-2 rounded-full hover:bg-white/5">
          <Plus size={20} className="text-white/60" />
        </button>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/chat/loading.tsx" isMerged="true"
export default function Loading() {
  return (
    <div className="h-screen bg-black flex items-center justify-center">
      <div className="text-center">
        <div className="w-12 h-12 border-4 border-primary border-t-transparent rounded-full animate-spin mx-auto mb-4" />
        <p className="text-white/60 text-sm">连接中...</p>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/live/page.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState, useRef } from "react"
import { useRouter } from "next/navigation"
import Image from "next/image"
import {
  Heart,
  MessageCircle,
  Share2,
  Gift,
  Music2,
  Home,
  Search,
  Users,
  Send,
  Bookmark,
  ShoppingCart,
  X,
  Check,
} from "lucide-react"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { useAppContext } from "@/components/providers/app-provider"

const STREAMERS = [
  {
    id: "1",
    name: "GM-远洋",
    avatar: "/streamer-1.jpg",
    title: "国服第一盲僧 | 今晚冲击王者",
    game: "英雄联盟",
    viewers: 125600,
    likes: 89560,
    comments: 3420,
    shares: 1250,
    isFollowed: false,
    video: "/live-lol.jpg",
    music: "英雄联盟 - 登峰造极",
    course: { id: "1", name: "打野进阶课：从入门到王者", price: 299, lessons: 8 },
  },
  {
    id: "2",
    name: "卡若",
    avatar: "/streamer-2.jpg",
    title: "职业选手退役 | 无畏契约枪法教学",
    game: "无畏契约",
    viewers: 98000,
    likes: 54200,
    comments: 2180,
    shares: 890,
    isFollowed: false,
    video: "/live-valorant.jpg",
    music: "VALORANT - Die For You",
    course: { id: "2", name: "无畏契约枪法训练营", price: 399, lessons: 10 },
  },
  {
    id: "3",
    name: "小美",
    avatar: "/streamer-3.jpg",
    title: "全国冠军 | 四指操作直播吃鸡",
    game: "和平精英",
    viewers: 145000,
    likes: 78800,
    comments: 4560,
    shares: 1620,
    isFollowed: false,
    video: "/live-pubg.jpg",
    music: "和平精英 - Winner Winner",
    course: { id: "3", name: "和平精英四指操作教学", price: 199, lessons: 6 },
  },
  {
    id: "4",
    name: "星辰",
    avatar: "/streamer-4.jpg",
    title: "原神攻略大神 | 深渊满星教学",
    game: "原神",
    viewers: 210000,
    likes: 125200,
    comments: 6890,
    shares: 2120,
    isFollowed: false,
    video: "/live-genshin.jpg",
    music: "原神 - 璃月港",
    course: { id: "4", name: "原神深渊满星攻略", price: 149, lessons: 5 },
  },
  {
    id: "5",
    name: "阿杰",
    avatar: "/streamer-5.jpg",
    title: "国服百星 | 巅峰赛冲分直播",
    game: "王者荣耀",
    viewers: 320000,
    likes: 187800,
    comments: 8120,
    shares: 3680,
    isFollowed: false,
    video: "/live-hok.jpg",
    music: "王者荣耀 - 战斗吧英雄",
    course: { id: "5", name: "王者荣耀上分秘籍", price: 249, lessons: 8 },
  },
  {
    id: "6",
    name: "暗影",
    avatar: "/streamer-6.jpg",
    title: "首杀团队成员 | 大秘境冲层教学",
    game: "魔兽世界",
    viewers: 75000,
    likes: 38600,
    comments: 2890,
    shares: 860,
    isFollowed: false,
    video: "/live-wow.jpg",
    music: "魔兽世界 - Arthas My Son",
    course: { id: "6", name: "魔兽世界团本攻略", price: 499, lessons: 12 },
  },
]

const GIFTS = [
  { id: 1, name: "小心心", price: 1, icon: "💕" },
  { id: 2, name: "棒棒糖", price: 10, icon: "🍭" },
  { id: 3, name: "玫瑰花", price: 52, icon: "🌹" },
  { id: 4, name: "告白气球", price: 520, icon: "🎈" },
  { id: 5, name: "跑车", price: 5000, icon: "🏎️" },
  { id: 6, name: "火箭", price: 10000, icon: "🚀" },
]

export default function TikTokStyleLivePage() {
  const router = useRouter()
  const { pay } = useAppContext()
  const [currentIndex, setCurrentIndex] = useState(0)
  const [streamers, setStreamers] = useState(STREAMERS)
  const [showComments, setShowComments] = useState(false)
  const [showGifts, setShowGifts] = useState(false)
  const [showCourse, setShowCourse] = useState(false)
  const [comment, setComment] = useState("")
  const [comments, setComments] = useState([
    { id: 1, user: "电竞迷", avatar: "/viewer-1.jpg", text: "主播太强了！", time: "刚刚" },
    { id: 2, user: "小飞侠", avatar: "/viewer-2.jpg", text: "666666", time: "1分钟前" },
    { id: 3, user: "游戏玩家", avatar: "/viewer-3.jpg", text: "学到了学到了", time: "2分钟前" },
  ])
  const [floatingHearts, setFloatingHearts] = useState<{ id: number; x: number }[]>([])
  const [showLikeSuccess, setShowLikeSuccess] = useState(false)
  const containerRef = useRef<HTMLDivElement>(null)
  const startY = useRef(0)
  const commentIdRef = useRef(4)

const currentStreamer = streamers[currentIndex]

const handleTouchStart = (e: React.TouchEvent) => {
    startY.current = e.touches[0].clientY
  }

const handleTouchEnd = (e: React.TouchEvent) => {
    const endY = e.changedTouches[0].clientY
    const diff = startY.current - endY

if (Math.abs(diff) > 50) {
      if (diff > 0 && currentIndex < streamers.length - 1) {
        setCurrentIndex((prev) => prev + 1)
      } else if (diff < 0 && currentIndex > 0) {
        setCurrentIndex((prev) => prev - 1)
      }
    }
  }

const handleLike = () => {
    setStreamers((prev) => prev.map((s, i) => (i === currentIndex ? { ...s, likes: s.likes + 1 } : s)))
    const newHeart = { id: Date.now(), x: Math.random() * 40 - 20 }
    setFloatingHearts((prev) => [...prev, newHeart])
    setTimeout(() => {
      setFloatingHearts((prev) => prev.filter((h) => h.id !== newHeart.id))
    }, 1500)

// 显示点赞成功提示
    setShowLikeSuccess(true)
    setTimeout(() => setShowLikeSuccess(false), 1000)
  }

const handleFollow = () => {
    setStreamers((prev) => prev.map((s, i) => (i === currentIndex ? { ...s, isFollowed: !s.isFollowed } : s)))
  }

const handleSendComment = () => {
    if (!comment.trim()) return
    const newComment = {
      id: commentIdRef.current++,
      user: "我",
      avatar: "/user-avatar.jpg",
      text: comment,
      time: "刚刚",
    }
    setComments((prev) => [newComment, ...prev])
    setComment("")
    setStreamers((prev) => prev.map((s, i) => (i === currentIndex ? { ...s, comments: s.comments + 1 } : s)))
  }

const handleSendGift = (gift: (typeof GIFTS)[0]) => {
    pay(gift.price, `送出${gift.name}`, "product")
    setShowGifts(false)
  }

const handleShare = () => {
    setStreamers((prev) => prev.map((s, i) => (i === currentIndex ? { ...s, shares: s.shares + 1 } : s)))
  }

const handleBuyCourse = () => {
    const course = currentStreamer.course
    pay(course.price, `购买${course.name}`, "product")
    setShowCourse(false)
    setTimeout(() => {
      router.push(`/course/${currentStreamer.id}`)
    }, 500)
  }

const formatNumber = (num: number) => {
    if (num >= 10000) return (num / 10000).toFixed(1) + "w"
    if (num >= 1000) return (num / 1000).toFixed(1) + "k"
    return num.toString()
  }

return (
    <div
      ref={containerRef}
      className="h-screen w-full bg-black relative overflow-hidden select-none"
      onTouchStart={handleTouchStart}
      onTouchEnd={handleTouchEnd}
    >
      {/* 全屏直播背景 */}
      <div className="absolute inset-0">
        <Image
          src={currentStreamer.video || "/placeholder.svg"}
          alt={currentStreamer.name}
          fill
          className="object-cover"
          priority
        />
        <div className="absolute inset-0 bg-gradient-to-b from-black/40 via-transparent to-black/70" />
      </div>

{showLikeSuccess && (
        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-50 pointer-events-none">
          <div className="flex items-center gap-2 bg-black/60 backdrop-blur-md px-4 py-2 rounded-full animate-in zoom-in-95 duration-200">
            <Check size={16} className="text-pink-500" />
            <span className="text-white text-sm font-medium">点赞成功</span>
          </div>
        </div>
      )}

{/* 飘心动画 */}
      <div className="absolute bottom-32 right-16 z-30 pointer-events-none">
        {floatingHearts.map((heart) => (
          <div key={heart.id} className="absolute animate-float-up" style={{ left: `${heart.x}px` }}>
            <Heart size={28} className="text-pink-500 fill-pink-500" />
          </div>
        ))}
      </div>

<div className="absolute top-0 left-0 right-0 z-20 pt-safe">
        <div className="flex items-center justify-between px-4 py-4">
          <button
            onClick={() => router.push("/")}
            className="w-10 h-10 rounded-full bg-black/30 backdrop-blur-md flex items-center justify-center"
          >
            <Home size={20} className="text-white" />
          </button>
          <div className="flex items-center gap-6 bg-black/30 backdrop-blur-md rounded-full px-4 py-2">
            <button className="text-white/60 text-sm font-medium">关注</button>
            <button className="text-white text-sm font-bold relative">
              推荐
              <span className="absolute -bottom-1 left-1/2 -translate-x-1/2 w-4 h-0.5 bg-white rounded-full" />
            </button>
            <button className="text-white/60 text-sm font-medium">游戏</button>
          </div>
          <button className="w-10 h-10 rounded-full bg-black/30 backdrop-blur-md flex items-center justify-center">
            <Search size={20} className="text-white" />
          </button>
        </div>

<div className="mx-4 mt-2">
          <div className="flex items-center gap-3 bg-black/40 backdrop-blur-md rounded-full px-3 py-2 w-fit">
            <div className="relative">
              <div className="w-10 h-10 rounded-full overflow-hidden border-2 border-pink-500">
                <Image
                  src={currentStreamer.avatar || "/placeholder.svg"}
                  alt={currentStreamer.name}
                  width={40}
                  height={40}
                  className="object-cover"
                />
              </div>
              <span className="absolute -bottom-0.5 -right-0.5 w-3 h-3 bg-green-500 rounded-full border-2 border-black" />
            </div>
            <div className="flex-1">
              <div className="flex items-center gap-2">
                <span className="font-bold text-white text-sm">{currentStreamer.name}</span>
                <span className="bg-pink-500/80 px-1.5 py-0.5 rounded text-white text-[10px]">
                  {currentStreamer.game}
                </span>
              </div>
              <div className="flex items-center gap-1 text-[10px] text-white/60">
                <Users size={10} />
                <span>{formatNumber(currentStreamer.viewers)}观看</span>
              </div>
            </div>
            <button
              onClick={handleFollow}
              className={`px-3 py-1.5 rounded-full text-xs font-bold transition-colors ${
                currentStreamer.isFollowed ? "bg-white/20 text-white/80" : "bg-pink-500 text-white"
              }`}
            >
              {currentStreamer.isFollowed ? "已关注" : "+ 关注"}
            </button>
          </div>
        </div>
      </div>

{/* 直播间信息 - 左侧底部 */}
      <div className="absolute bottom-28 left-4 right-20 z-20 space-y-3">
        <p className="text-white text-sm leading-relaxed font-medium">{currentStreamer.title}</p>
        <div className="flex items-center gap-2">
          <Music2 size={14} className="text-white" />
          <div className="overflow-hidden flex-1">
            <p className="text-white/80 text-xs whitespace-nowrap animate-marquee">{currentStreamer.music}</p>
          </div>
          <div className="w-10 h-10 rounded-full border-2 border-white/30 overflow-hidden animate-spin-slow">
            <Image
              src={currentStreamer.avatar || "/placeholder.svg"}
              alt="Music"
              width={40}
              height={40}
              className="object-cover"
            />
          </div>
        </div>
      </div>

{/* 右侧互动按钮 */}
      <div className="absolute bottom-28 right-3 z-20 flex flex-col items-center gap-5">
        {/* 点赞 */}
        <button onClick={handleLike} className="flex flex-col items-center gap-1 active:scale-90 transition-transform">
          <div className="w-12 h-12 rounded-full bg-black/30 backdrop-blur-md flex items-center justify-center">
            <Heart size={26} className="text-white fill-pink-500" />
          </div>
          <span className="text-white text-xs font-medium">{formatNumber(currentStreamer.likes)}</span>
        </button>

{/* 评论 */}
        <button
          onClick={() => setShowComments(true)}
          className="flex flex-col items-center gap-1 active:scale-90 transition-transform"
        >
          <div className="w-12 h-12 rounded-full bg-black/30 backdrop-blur-md flex items-center justify-center">
            <MessageCircle size={26} className="text-white" />
          </div>
          <span className="text-white text-xs font-medium">{formatNumber(currentStreamer.comments)}</span>
        </button>

{/* 收藏 */}
        <button className="flex flex-col items-center gap-1 active:scale-90 transition-transform">
          <div className="w-12 h-12 rounded-full bg-black/30 backdrop-blur-md flex items-center justify-center">
            <Bookmark size={26} className="text-white" />
          </div>
          <span className="text-white text-xs font-medium">收藏</span>
        </button>

<button onClick={handleShare} className="flex flex-col items-center gap-1 active:scale-90 transition-transform">
          <div className="w-12 h-12 rounded-full bg-black/30 backdrop-blur-md flex items-center justify-center">
            <Share2 size={26} className="text-white" />
          </div>
          <span className="text-white text-xs font-medium">{formatNumber(currentStreamer.shares)}</span>
        </button>

{/* 礼物 */}
        <button
          onClick={() => setShowGifts(true)}
          className="flex flex-col items-center gap-1 active:scale-90 transition-transform"
        >
          <div className="w-12 h-12 rounded-full bg-gradient-to-tr from-pink-500 to-yellow-500 flex items-center justify-center shadow-lg shadow-pink-500/30">
            <Gift size={24} className="text-white" />
          </div>
          <span className="text-white text-xs font-medium">礼物</span>
        </button>

{/* 课程 */}
        <button
          onClick={() => setShowCourse(true)}
          className="flex flex-col items-center gap-1 active:scale-90 transition-transform"
        >
          <div className="w-12 h-12 rounded-full bg-gradient-to-tr from-blue-500 to-cyan-500 flex items-center justify-center shadow-lg shadow-blue-500/30">
            <ShoppingCart size={22} className="text-white" />
          </div>
          <span className="text-white text-xs font-medium">课程</span>
        </button>
      </div>

{/* 底部输入框 */}
      <div className="absolute bottom-0 left-0 right-0 z-20 pb-safe">
        <div className="flex items-center gap-3 px-4 py-3 bg-gradient-to-t from-black/60 to-transparent">
          <div className="flex-1 h-10 bg-white/10 backdrop-blur-md rounded-full flex items-center px-4 border border-white/10">
            <input
              type="text"
              placeholder="说点什么..."
              className="bg-transparent w-full text-sm text-white placeholder:text-white/50 outline-none"
              value={comment}
              onChange={(e) => setComment(e.target.value)}
              onKeyDown={(e) => e.key === "Enter" && handleSendComment()}
            />
          </div>
          <button
            onClick={handleSendComment}
            className="w-10 h-10 rounded-full bg-pink-500 flex items-center justify-center active:scale-90 transition-transform"
          >
            <Send size={18} className="text-white" />
          </button>
        </div>
      </div>

{/* 评论弹窗 */}
      <Dialog open={showComments} onOpenChange={setShowComments}>
        <DialogContent className="bg-zinc-900/95 backdrop-blur-xl border-white/10 text-white max-w-sm h-[60vh] flex flex-col p-0">
          <DialogHeader className="p-4 border-b border-white/10 flex flex-row items-center justify-between">
            <DialogTitle className="text-center flex-1">{formatNumber(currentStreamer.comments)} 条评论</DialogTitle>
            <button onClick={() => setShowComments(false)} className="text-white/50 hover:text-white">
              <X size={20} />
            </button>
          </DialogHeader>
          <div className="flex-1 overflow-y-auto p-4 space-y-4">
            {comments.map((c) => (
              <div key={c.id} className="flex gap-3">
                <div className="w-9 h-9 rounded-full overflow-hidden flex-shrink-0 relative">
                  <Image src={c.avatar || "/placeholder.svg"} alt={c.user} fill className="object-cover" />
                </div>
                <div className="flex-1">
                  <div className="flex items-center gap-2">
                    <span className="text-sm font-medium text-white/80">{c.user}</span>
                    <span className="text-[10px] text-white/40">{c.time}</span>
                  </div>
                  <p className="text-sm text-white mt-0.5">{c.text}</p>
                </div>
                <button className="text-white/40 hover:text-pink-500 active:scale-90 transition-all">
                  <Heart size={16} />
                </button>
              </div>
            ))}
          </div>
          <div className="p-4 border-t border-white/10 flex gap-2">
            <input
              type="text"
              placeholder="发表评论..."
              className="flex-1 bg-white/10 rounded-full px-4 py-2 text-sm outline-none"
              value={comment}
              onChange={(e) => setComment(e.target.value)}
              onKeyDown={(e) => e.key === "Enter" && handleSendComment()}
            />
            <Button onClick={handleSendComment} size="sm" className="rounded-full bg-pink-500 hover:bg-pink-600">
              发送
            </Button>
          </div>
        </DialogContent>
      </Dialog>

{/* 礼物弹窗 */}
      <Dialog open={showGifts} onOpenChange={setShowGifts}>
        <DialogContent className="bg-zinc-900/95 backdrop-blur-xl border-white/10 text-white max-w-sm">
          <DialogHeader>
            <DialogTitle>送礼物给 {currentStreamer.name}</DialogTitle>
          </DialogHeader>
          <div className="grid grid-cols-3 gap-3 py-4">
            {GIFTS.map((gift) => (
              <button
                key={gift.id}
                onClick={() => handleSendGift(gift)}
                className="flex flex-col items-center gap-2 p-3 bg-white/5 rounded-xl hover:bg-white/10 transition-colors border border-white/5 hover:border-pink-500/30 active:scale-95"
              >
                <span className="text-3xl">{gift.icon}</span>
                <span className="text-xs font-bold">{gift.name}</span>
                <span className="text-[10px] text-primary">{gift.price} 币</span>
              </button>
            ))}
          </div>
        </DialogContent>
      </Dialog>

{/* 课程弹窗 */}
      <Dialog open={showCourse} onOpenChange={setShowCourse}>
        <DialogContent className="bg-zinc-900/95 backdrop-blur-xl border-white/10 text-white max-w-sm">
          <DialogHeader>
            <DialogTitle>{currentStreamer.name} 的课程</DialogTitle>
          </DialogHeader>
          <div className="py-4">
            <div className="bg-white/5 rounded-xl p-4 border border-white/10">
              <h3 className="font-bold text-lg mb-2">{currentStreamer.course.name}</h3>
              <p className="text-white/60 text-sm mb-4">{currentStreamer.course.lessons} 节课程</p>
              <div className="flex items-center justify-between">
                <span className="text-2xl font-bold text-primary">{currentStreamer.course.price} 币</span>
                <Button onClick={handleBuyCourse} className="bg-primary hover:bg-primary/90">
                  立即购买
                </Button>
              </div>
            </div>
          </div>
        </DialogContent>
      </Dialog>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/planet/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Mic, Users, Gamepad2, Headphones, Heart, Sparkles, Filter, Trophy, Crosshair, Star } from "lucide-react"
import Image from "next/image"
import { useState } from "react"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
import { useRouter } from "next/navigation"

type MatchCategory = "star" | "guild" | "cp" | "coach"

const matchResultsData = {
  star: [
    {
      id: 1,
      name: "GM-远洋",
      title: "国服第一盲僧",
      avatar: "/streamer-1.jpg",
      fans: "128万",
      game: "英雄联盟",
      partyMembers: 1205,
    },
    {
      id: 2,
      name: "小狼狗",
      title: "无畏契约职业选手",
      avatar: "/streamer-2.jpg",
      fans: "89万",
      game: "无畏契约",
      partyMembers: 856,
    },
    {
      id: 3,
      name: "甜心女王",
      title: "王者荣耀主播",
      avatar: "/streamer-5.jpg",
      fans: "256万",
      game: "王者荣耀",
      partyMembers: 2341,
    },
  ],
  guild: [
    {
      id: 1,
      name: "东东电竞公会",
      title: "顶级主播公会",
      avatar: "/streamer-3.jpg",
      members: "1.2万",
      commission: "70%",
      benefits: ["专业培训", "流量扶持", "独家活动"],
    },
    {
      id: 2,
      name: "星耀工会",
      title: "新人友好公会",
      avatar: "/streamer-4.jpg",
      members: "8500",
      commission: "65%",
      benefits: ["新人指导", "设备补贴", "公会活动"],
    },
  ],
  cp: [
    {
      id: 1,
      name: "甜心辅助",
      title: "温柔妹子",
      avatar: "/streamer-5.jpg",
      age: 22,
      game: "王者荣耀",
      intro: "找个一起玩游戏的小哥哥~",
      online: true,
    },
    {
      id: 2,
      name: "电竞萌妹",
      title: "可爱软妹",
      avatar: "/streamer-6.jpg",
      age: 20,
      game: "和平精英",
      intro: "喜欢吃鸡，求带飞~",
      online: true,
    },
  ],
  coach: [
    {
      id: 1,
      name: "职业陪练-小明",
      title: "前职业选手",
      avatar: "/streamer-4.jpg",
      rank: "王者50星",
      price: 30,
      game: "王者荣耀",
      rating: 4.9,
      orders: 2356,
    },
    {
      id: 2,
      name: "上分大师",
      title: "国服前100",
      avatar: "/streamer-2.jpg",
      rank: "超凡入圣",
      price: 50,
      game: "无畏契约",
      rating: 4.8,
      orders: 1823,
    },
  ],
}

export default function PlanetPage() {
  const router = useRouter()
  const [isMatching, setIsMatching] = useState(false)
  const [selectedCategory, setSelectedCategory] = useState<MatchCategory>("star")

const handleMatch = () => {
    setIsMatching(true)

setTimeout(() => {
      setIsMatching(false)
      const results = matchResultsData[selectedCategory]
      const randomResult = results[Math.floor(Math.random() * results.length)]

switch (selectedCategory) {
        case "star":
          // 直接跳转到明星的派对群聊天室
          router.push(`/party/${randomResult.id}`)
          break
        case "guild":
          router.push(`/guild/${randomResult.id}`)
          break
        case "cp":
          router.push(`/chat/cp-${randomResult.id}`)
          break
        case "coach":
          router.push(`/coach/${randomResult.id}`)
          break
      }
    }, 1500)
  }

const getCategoryLabel = () => {
    switch (selectedCategory) {
      case "star":
        return "电竞明星"
      case "guild":
        return "主播公会"
      case "cp":
        return "电竞CP"
      case "coach":
        return "游戏陪练"
    }
  }

return (
    <div className="pb-24 pt-6 px-4">
      <div className="flex items-center justify-between mb-6">
        <h1 className="text-2xl font-bold text-white">星球</h1>
        <Dialog>
          <DialogTrigger asChild>
            <Button variant="ghost" size="icon" className="rounded-full bg-white/5">
              <Filter className="w-5 h-5" />
            </Button>
          </DialogTrigger>
          <DialogContent className="bg-zinc-900 border-white/10 text-white">
            <DialogHeader>
              <DialogTitle>筛选派对</DialogTitle>
            </DialogHeader>
            <div className="grid gap-4 py-4">
              <div className="space-y-2">
                <h4 className="font-medium leading-none">类型</h4>
                <div className="flex flex-wrap gap-2">
                  {["全部", "游戏", "聊天", "K歌", "交友"].map((tag) => (
                    <Button
                      key={tag}
                      variant="outline"
                      size="sm"
                      className="bg-white/5 border-white/10 hover:bg-primary hover:border-primary hover:text-white"
                    >
                      {tag}
                    </Button>
                  ))}
                </div>
              </div>
            </div>
            <Button className="w-full bg-primary hover:bg-primary/90">确认筛选</Button>
          </DialogContent>
        </Dialog>
      </div>

{isMatching && (
                <>
                  <div className="absolute inset-0 border-2 border-primary/50 rounded-full animate-spin-slow" />
                  <div className="absolute inset-8 border-2 border-purple-500/50 rounded-full animate-reverse-spin" />
                </>
              )}

<div className="absolute inset-0 flex items-center justify-center">
                <div
                  className="w-48 h-48 bg-gradient-to-br from-primary to-purple-600 rounded-full flex items-center justify-center shadow-2xl shadow-primary/50 border-4 border-white/10 relative overflow-hidden group cursor-pointer transition-transform hover:scale-105 active:scale-95"
                  onClick={handleMatch}
                >
                  <div className="absolute inset-0 bg-[url('/abstract-energy.jpg')] opacity-20 bg-cover mix-blend-overlay" />
                  <div className="text-center z-10">
                    {isMatching ? (
                      <>
                        <Sparkles className="w-12 h-12 text-white mx-auto mb-2 animate-spin" />
                        <span className="text-xl font-bold text-white">匹配中...</span>
                      </>
                    ) : (
                      <>
                        <Mic className="w-12 h-12 text-white mx-auto mb-2" />
                        <span className="text-xl font-bold text-white">开始匹配</span>
                        <p className="text-xs text-white/70 mt-1">寻找{getCategoryLabel()}</p>
                      </>
                    )}
                  </div>
                </div>
              </div>
            </div>

<div className="text-center">
              <p className="text-sm text-white/60">
                当前模式: <span className="text-primary font-bold">{getCategoryLabel()}</span>
              </p>
            </div>

<div className="w-full pt-8 mt-4 border-t border-white/10">
              <p className="text-xs text-white/40 text-center mb-6">选择匹配类型</p>
              <div className="grid grid-cols-4 gap-4">
                <Button
                  variant="outline"
                  onClick={() => setSelectedCategory("star")}
                  className={`flex flex-col h-auto py-5 border-white/10 bg-white/5 hover:bg-white/10 hover:border-primary/50 transition-all ${selectedCategory === "star" ? "border-primary bg-primary/20 ring-2 ring-primary/50" : ""}`}
                >
                  <Star
                    className={`w-7 h-7 mb-2 ${selectedCategory === "star" ? "text-primary" : "text-yellow-500"}`}
                  />
                  <span className="text-xs font-medium">电竞明星</span>
                </Button>
                <Button
                  variant="outline"
                  onClick={() => setSelectedCategory("guild")}
                  className={`flex flex-col h-auto py-5 border-white/10 bg-white/5 hover:bg-white/10 hover:border-blue-500/50 transition-all ${selectedCategory === "guild" ? "border-blue-500 bg-blue-500/20 ring-2 ring-blue-500/50" : ""}`}
                >
                  <Users
                    className={`w-7 h-7 mb-2 ${selectedCategory === "guild" ? "text-blue-400" : "text-blue-500"}`}
                  />
                  <span className="text-xs font-medium">主播公会</span>
                </Button>
                <Button
                  variant="outline"
                  onClick={() => setSelectedCategory("cp")}
                  className={`flex flex-col h-auto py-5 border-white/10 bg-white/5 hover:bg-white/10 hover:border-pink-500/50 transition-all ${selectedCategory === "cp" ? "border-pink-500 bg-pink-500/20 ring-2 ring-pink-500/50" : ""}`}
                >
                  <Heart className={`w-7 h-7 mb-2 ${selectedCategory === "cp" ? "text-pink-400" : "text-pink-500"}`} />
                  <span className="text-xs font-medium">电竞CP</span>
                </Button>
                <Button
                  variant="outline"
                  onClick={() => setSelectedCategory("coach")}
                  className={`flex flex-col h-auto py-5 border-white/10 bg-white/5 hover:bg-white/10 hover:border-green-500/50 transition-all ${selectedCategory === "coach" ? "border-green-500 bg-green-500/20 ring-2 ring-green-500/50" : ""}`}
                >
                  <Gamepad2
                    className={`w-7 h-7 mb-2 ${selectedCategory === "coach" ? "text-green-400" : "text-green-500"}`}
                  />
                  <span className="text-xs font-medium">游戏陪练</span>
                </Button>
              </div>
            </div>
          </div>
        </TabsContent>

<TabsContent value="party" className="space-y-4">
          {[
            {
              id: 1,
              title: "GM-远洋的派对群",
              tag: "直播中",
              count: 1205,
              image: "/party-lol.jpg",
              isLive: true,
              streamer: "GM-远洋",
            },
            {
              id: 2,
              title: "甜心女王粉丝派对",
              tag: "热门",
              count: 2341,
              image: "/party-hok.jpg",
              isLive: true,
              streamer: "甜心女王",
            },
            {
              id: 3,
              title: "带粉上分车队",
              tag: "游戏",
              count: 89,
              image: "/party-team.jpg",
              isLive: false,
              streamer: "路人王",
            },
          ].map((room) => (
            <Card
              key={room.id}
              className="bg-white/5 border-white/10 overflow-hidden hover:bg-white/10 transition-colors cursor-pointer relative"
              onClick={() => router.push(`/party/${room.id}`)}
            >
              <div className="flex p-3 gap-4">
                <div className="relative w-20 h-20 rounded-lg overflow-hidden flex-shrink-0 border border-white/10">
                  <Image src={room.image || "/placeholder.svg"} alt={room.title} fill className="object-cover" />
                  {room.isLive && (
                    <div className="absolute top-1 left-1 bg-primary/90 text-[8px] px-1.5 py-0.5 rounded text-white backdrop-blur-sm flex items-center gap-1 animate-pulse">
                      <span className="w-1 h-1 rounded-full bg-white" /> LIVE
                    </div>
                  )}
                </div>
                <div className="flex-1 flex flex-col justify-between py-1">
                  <div>
                    <h3 className="font-bold text-white line-clamp-1">{room.title}</h3>
                    <p className="text-xs text-white/60 mt-1">
                      主播 {room.streamer} {room.isLive ? "正在直播" : "离线"}
                    </p>
                  </div>
                  <div className="flex items-center justify-between mt-2">
                    <div className="flex -space-x-2">
                      {[1, 2, 3].map((avatar) => (
                        <div
                          key={avatar}
                          className="w-6 h-6 rounded-full border border-black bg-gray-800 overflow-hidden relative"
                        >
                          <Image src={`/streamer-${avatar}.jpg`} alt="User" fill className="object-cover" />
                        </div>
                      ))}
                    </div>
                    <div className="flex items-center text-xs text-primary">
                      <Headphones className="w-3 h-3 mr-1" />
                      {room.count}
                    </div>
                  </div>
                </div>
              </div>
            </Card>
          ))}
        </TabsContent>

<TabsContent value="team" className="space-y-4">
          <div className="rounded-xl bg-gradient-to-r from-purple-900/50 to-blue-900/50 p-4 border border-white/10 relative overflow-hidden mb-4">
            <div className="relative z-10">
              <div className="flex items-center gap-2 mb-2">
                <Trophy className="text-yellow-400" size={20} />
                <h3 className="font-bold text-lg italic">2025 玩值杯</h3>
              </div>
              <p className="text-xs text-white/70 mb-3">全民海选赛正在进行中</p>
              <Button size="sm" className="bg-yellow-500 text-black hover:bg-yellow-400 font-bold text-xs">
                立即报名
              </Button>
            </div>
          </div>

<h3 className="font-bold text-sm mb-2 flex items-center gap-2">
            <Crosshair size={16} className="text-primary" />
            正在开战
          </h3>
          {[
            { game: "LOL", mode: "灵活组排", rank: "钻石", waiting: "3/5", title: "钻石冲大师" },
            { game: "无畏契约", mode: "竞技模式", rank: "超凡", waiting: "1/5", title: "缺个烟位" },
          ].map((team, i) => (
            <div key={i} className="glass-card p-3 rounded-xl flex justify-between items-center">
              <div>
                <div className="flex items-center gap-2 mb-1">
                  <span className="text-xs font-bold bg-white/10 px-1.5 py-0.5 rounded text-white/80">{team.game}</span>
                  <span className="text-sm font-bold">{team.title}</span>
                </div>
                <div className="flex items-center gap-3 text-xs text-white/50">
                  <span>{team.mode}</span>
                  <span>{team.rank}</span>
                </div>
              </div>
              <div className="flex flex-col items-end gap-1">
                <span className="text-xs font-bold text-primary">{team.waiting}</span>
                <Button size="sm" className="h-7 text-xs bg-primary hover:bg-primary/90">
                  加入
                </Button>
              </div>
            </div>
          ))}
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/mall/page.tsx" isEdit="true" isMerged="true"
"use client"

import {
  ShoppingBag,
  Crown,
  Sparkles,
  Zap,
  Gift,
  Coins,
  Hotel,
  Coffee,
  Trophy,
  User,
  Keyboard,
  Wallet,
  Gamepad2,
  CreditCard,
} from "lucide-react"
import { Button } from "@/components/ui/button"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { useAppContext } from "@/components/providers/app-provider"
import Link from "next/link"
import { useRouter } from "next/navigation"
import Image from "next/image"

export default function MallPage() {
  const { wallet, pay } = useAppContext()
  const router = useRouter()

const handleBuy = (price: number, name: string, type: "product" | "service") => {
    pay(price, name, type)
  }

const dressItems = [
    {
      name: "巫瞳猫影",
      price: 99,
      type: "frame",
      color: "from-purple-500/20 to-blue-500/20",
      image: "/dress-witch-cat.jpg",
    },
    {
      name: "椰树风情",
      price: 128,
      type: "frame",
      color: "from-green-500/20 to-yellow-500/20",
      image: "/dress-tropical.jpg",
    },
    { name: "黑白天使", price: 299, type: "wing", color: "from-gray-500/20 to-white/20", image: "/dress-angel.jpg" },
    {
      name: "敦煌飞天",
      price: 520,
      type: "ring",
      color: "from-orange-500/20 to-red-500/20",
      image: "/dress-dunhuang.jpg",
    },
    { name: "恶魔之眼", price: 199, type: "frame", color: "from-red-900/20 to-black/20", image: "/dress-demon.jpg" },
    {
      name: "小熊猫",
      price: 68,
      type: "frame",
      color: "from-orange-300/20 to-yellow-300/20",
      image: "/dress-panda.jpg",
    },
  ]

return (
    <div className="min-h-screen pb-24 bg-background">
      {/* Header */}
      <header className="sticky top-0 z-40 glass px-4 py-3 flex items-center justify-between">
        <h1 className="font-bold text-lg">商城中心</h1>
        <div
          className="flex items-center gap-2 px-3 py-1.5 rounded-full bg-white/5 border border-white/10 cursor-pointer hover:bg-white/10 transition-colors"
          onClick={() => router.push("/recharge")}
        >
          <Coins size={16} className="text-primary" />
          <span className="text-sm font-bold">{wallet.balance}</span>
          <span className="text-xs text-white/50">币</span>
        </div>
      </header>

{/* Top Categories - 8 Items */}
      <div className="px-4 mt-6">
        <h3 className="text-sm font-bold mb-3 flex items-center gap-2">
          <Sparkles size={16} className="text-yellow-400" />
          精选服务
        </h3>
        <div className="grid grid-cols-4 gap-3">
          {[
            {
              name: "明星陪玩",
              icon: Gamepad2,
              color: "text-blue-400",
              bg: "bg-blue-500/10",
              href: "/mall/companion?type=play",
            },
            {
              name: "游戏点卡",
              icon: CreditCard,
              color: "text-pink-400",
              bg: "bg-pink-500/10",
              href: "/mall/points",
            },
            { name: "电竞外设", icon: Keyboard, color: "text-purple-400", bg: "bg-purple-500/10", href: "/mall/gear" },
            { name: "电竞酒店", icon: Hotel, color: "text-orange-400", bg: "bg-orange-500/10", href: "/hotel" },
            { name: "附近网咖", icon: Coffee, color: "text-cyan-400", bg: "bg-cyan-500/10", href: "/hotel?tab=cafe" },
            {
              name: "游戏代练",
              icon: Trophy,
              color: "text-yellow-400",
              bg: "bg-yellow-500/10",
              href: "/services/leveling",
            },
            {
              name: "账号交易",
              icon: User,
              color: "text-green-400",
              bg: "bg-green-500/10",
              href: "/services/account?tab=buy",
            },
            {
              name: "账号典当",
              icon: Wallet,
              color: "text-amber-400",
              bg: "bg-amber-500/10",
              href: "/services/account?tab=pawn",
            },
          ].map((item, i) => (
            <Link
              key={i}
              href={item.href}
              className="glass-card p-3 rounded-xl flex flex-col items-center gap-2 cursor-pointer hover:bg-white/10 transition-colors border border-white/5 hover:border-white/10"
            >
              <div className={`w-10 h-10 rounded-full ${item.bg} flex items-center justify-center`}>
                <item.icon className={item.color} size={20} />
              </div>
              <div className="text-center">
                <h3 className="text-[10px] font-bold whitespace-nowrap text-white/90">{item.name}</h3>
              </div>
            </Link>
          ))}
        </div>
      </div>

<div className="px-4 grid grid-cols-2 gap-4">
            {dressItems.map((item, i) => (
              <div
                key={i}
                className="glass-card rounded-xl p-4 flex flex-col items-center gap-3 group relative overflow-hidden border border-white/5 hover:border-primary/30"
              >
                <div
                  className={`absolute inset-0 bg-gradient-to-br ${item.color} opacity-0 group-hover:opacity-100 transition-opacity duration-500`}
                />

<div className="text-center relative z-10">
                  <h3 className="font-bold text-sm mb-1 text-white/90">{item.name}</h3>
                  <div className="flex items-center justify-center gap-1 text-primary">
                    <Coins size={12} />
                    <span className="text-xs font-bold">{item.price} 币</span>
                  </div>
                </div>

<button
                  className="w-full py-2 mt-2 rounded-lg bg-white/5 hover:bg-primary hover:text-black transition-all text-xs font-bold relative z-10"
                  onClick={() => handleBuy(item.price, item.name, "product")}
                >
                  购买
                </button>
              </div>
            ))}
          </div>
        </TabsContent>

<TabsContent value="gift" className="mt-4 px-4">
          <div className="grid grid-cols-3 gap-3">
            {[
              { name: "棒棒糖", price: 10, icon: "🍭" },
              { name: "告白气球", price: 520, icon: "🎈" },
              { name: "跑车", price: 5000, icon: "🏎️" },
              { name: "火箭", price: 10000, icon: "🚀" },
              { name: "城堡", price: 50000, icon: "🏰" },
              { name: "爱心", price: 1, icon: "❤️" },
            ].map((item, i) => (
              <div
                key={i}
                className="glass-card rounded-xl p-3 flex flex-col items-center gap-2 hover:bg-white/10 cursor-pointer transition-colors border border-white/5"
                onClick={() => handleBuy(item.price, item.name, "product")}
              >
                <div className="text-3xl filter drop-shadow-lg">{item.icon}</div>
                <div className="text-center">
                  <h3 className="text-xs font-bold">{item.name}</h3>
                  <div className="flex items-center justify-center gap-1 text-primary mt-1">
                    <Coins size={10} />
                    <span className="text-[10px]">{item.price} 币</span>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </TabsContent>

<TabsContent value="exchange" className="mt-4 px-4">
          <div className="grid grid-cols-2 gap-4">
            {[
              { name: "10元话费券", price: 1000, icon: Gift },
              { name: "随机皮肤宝箱", price: 5000, icon: ShoppingBag },
              { name: "改名卡", price: 2000, icon: Crown },
              { name: "双倍经验卡", price: 500, icon: Zap },
            ].map((item, i) => (
              <div key={i} className="glass-card rounded-xl p-4 flex flex-col items-center gap-3 border border-white/5">
                <div className="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center">
                  <item.icon className="text-primary" size={24} />
                </div>
                <div className="text-center">
                  <h3 className="font-bold text-sm mb-1">{item.name}</h3>
                  <div className="flex items-center justify-center gap-1 text-primary">
                    <Coins size={12} />
                    <span className="text-xs font-bold">{item.price} 币</span>
                  </div>
                </div>
                <Button
                  size="sm"
                  variant="outline"
                  className="w-full h-7 text-xs border-primary/20 text-primary hover:bg-primary/10 bg-transparent"
                  onClick={() => handleBuy(item.price, item.name, "product")}
                >
                  兑换
                </Button>
              </div>
            ))}
          </div>
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/mall/points/[game]/loading.tsx" isMerged="true"
export default function Loading() {
  return (
    <div className="min-h-screen flex items-center justify-center bg-background">
      <div className="flex flex-col items-center gap-4">
        <div className="w-12 h-12 border-4 border-primary/30 border-t-primary rounded-full animate-spin" />
        <p className="text-sm text-white/50">加载中...</p>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/mall/points/[game]/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"
import { Suspense } from "react"
import GamePointCardClient from "./client"

const gameData: Record<
  string,
  {
    name: string
    image: string
    description: string
    discount: string
    tag?: string
    options: { name: string; original: number; price: number; popular?: boolean }[]
  }
> = {
  wow: {
    name: "魔兽世界",
    image: "/point-card-wow.jpg",
    description: "月卡/点卡充值",
    discount: "9折",
    tag: "经典",
    options: [
      { name: "30天月卡", original: 75, price: 68, popular: true },
      { name: "90天季卡", original: 198, price: 178 },
      { name: "180天半年卡", original: 360, price: 320 },
      { name: "2000点卡", original: 100, price: 90 },
      { name: "5000点卡", original: 250, price: 225 },
    ],
  },
  diablo: {
    name: "暗黑破坏神4",
    image: "/point-card-diablo.jpg",
    description: "白金币充值",
    discount: "85折",
    tag: "热卖",
    options: [
      { name: "500白金币", original: 45, price: 38, popular: true },
      { name: "1000白金币", original: 88, price: 75 },
      { name: "2800白金币", original: 198, price: 168 },
      { name: "5700白金币", original: 388, price: 330 },
      { name: "11500白金币", original: 648, price: 550 },
    ],
  },
  hearthstone: {
    name: "炉石传说",
    image: "/point-card-hearthstone.jpg",
    description: "战令/卡包充值",
    discount: "88折",
    tag: "新品",
    options: [
      { name: "2卡包", original: 18, price: 16 },
      { name: "7卡包", original: 58, price: 51, popular: true },
      { name: "15卡包", original: 108, price: 95 },
      { name: "40卡包", original: 258, price: 227 },
      { name: "酒馆战令", original: 128, price: 113 },
    ],
  },
  overwatch: {
    name: "守望先锋2",
    image: "/point-card-overwatch.jpg",
    description: "代币充值",
    discount: "9折",
    options: [
      { name: "500代币", original: 35, price: 32 },
      { name: "1000代币", original: 68, price: 61, popular: true },
      { name: "2200代币", original: 128, price: 115 },
      { name: "5700代币", original: 298, price: 268 },
      { name: "11600代币", original: 518, price: 466 },
    ],
  },
  lol: {
    name: "英雄联盟",
    image: "/point-card-lol.jpg",
    description: "点券充值",
    discount: "95折",
    tag: "热门",
    options: [
      { name: "100点券", original: 10, price: 10 },
      { name: "350点券", original: 35, price: 33, popular: true },
      { name: "650点券", original: 65, price: 62 },
      { name: "1380点券", original: 138, price: 131 },
      { name: "3380点券", original: 338, price: 321 },
    ],
  },
  hok: {
    name: "王者荣耀",
    image: "/point-card-hok.jpg",
    description: "点券充值",
    discount: "95折",
    tag: "热门",
    options: [
      { name: "60点券", original: 6, price: 6 },
      { name: "300点券", original: 30, price: 29, popular: true },
      { name: "680点券", original: 68, price: 65 },
      { name: "1280点券", original: 128, price: 122 },
      { name: "2480点券", original: 248, price: 236 },
    ],
  },
  pubg: {
    name: "和平精英",
    image: "/point-card-pubg.jpg",
    description: "点券充值",
    discount: "92折",
    tag: "热门",
    options: [
      { name: "60点券", original: 6, price: 6 },
      { name: "300点券", original: 30, price: 28, popular: true },
      { name: "600点券", original: 60, price: 55 },
      { name: "1500点券", original: 150, price: 138 },
      { name: "3000点券", original: 300, price: 276 },
    ],
  },
  genshin: {
    name: "原神",
    image: "/point-card-genshin.jpg",
    description: "创世结晶充值",
    discount: "9折",
    tag: "热卖",
    options: [
      { name: "60创世结晶", original: 6, price: 6 },
      { name: "300创世结晶", original: 30, price: 27, popular: true },
      { name: "980创世结晶", original: 98, price: 88 },
      { name: "1980创世结晶", original: 198, price: 178 },
      { name: "3280创世结晶", original: 328, price: 295 },
    ],
  },
  valorant: {
    name: "无畏契约",
    image: "/point-card-valorant.jpg",
    description: "VP点数充值",
    discount: "88折",
    tag: "新品",
    options: [
      { name: "475VP", original: 35, price: 31 },
      { name: "1000VP", original: 68, price: 60, popular: true },
      { name: "2050VP", original: 128, price: 113 },
      { name: "3650VP", original: 198, price: 174 },
      { name: "5350VP", original: 288, price: 253 },
    ],
  },
  fortnite: {
    name: "堡垒之夜",
    image: "/point-card-fortnite.jpg",
    description: "V-Bucks充值",
    discount: "85折",
    options: [
      { name: "1000V-Bucks", original: 68, price: 58 },
      { name: "2800V-Bucks", original: 168, price: 143, popular: true },
      { name: "5000V-Bucks", original: 288, price: 245 },
      { name: "13500V-Bucks", original: 648, price: 551 },
    ],
  },
  apex: {
    name: "Apex英雄",
    image: "/point-card-apex.jpg",
    description: "Apex硬币充值",
    discount: "9折",
    options: [
      { name: "1000硬币", original: 68, price: 61 },
      { name: "2150硬币", original: 128, price: 115, popular: true },
      { name: "4350硬币", original: 248, price: 223 },
      { name: "6700硬币", original: 388, price: 349 },
      { name: "11500硬币", original: 648, price: 583 },
    ],
  },
  cs2: {
    name: "CS2",
    image: "/point-card-cs2.jpg",
    description: "Steam钱包充值",
    discount: "95折",
    options: [
      { name: "¥50钱包", original: 50, price: 48 },
      { name: "¥100钱包", original: 100, price: 95, popular: true },
      { name: "¥200钱包", original: 200, price: 190 },
      { name: "¥500钱包", original: 500, price: 475 },
    ],
  },
}

export default async function GamePointCardPage({ params }: { params: Promise<{ game: string }> }) {
  const resolvedParams = await params

return (
    <Suspense
      fallback={
        <div className="min-h-screen flex items-center justify-center">
          <div className="w-8 h-8 border-2 border-primary border-t-transparent rounded-full animate-spin" />
        </div>
      }
    >
      <GamePointCardClient gameId={resolvedParams.game} />
    </Suspense>
  )
}
[V0_FILE]typescriptreact:file="app/mall/points/[game]/client.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { ArrowLeft, Check, ShoppingCart, Zap, Flame } from "lucide-react"
import Image from "next/image"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { useAppContext } from "@/components/providers/app-provider"
import { toast } from "@/hooks/use-toast"

export default function GamePointCardClient({ gameId }: { gameId: string }) {
  const router = useRouter()
  const { pay } = useAppContext()
  const [selectedOption, setSelectedOption] = useState<number | null>(null)

const game = gameData[gameId]

if (!game) {
    return (
      <div className="min-h-screen flex flex-col items-center justify-center p-4">
        <p className="text-white/60 mb-4">游戏不存在</p>
        <Button onClick={() => router.back()}>返回</Button>
      </div>
    )
  }

const handlePurchase = () => {
    if (selectedOption === null) {
      toast({ title: "请选择充值金额", variant: "destructive" })
      return
    }
    const option = game.options[selectedOption]
    pay(option.price, "diamonds", `${game.name} ${option.name}`, "product")
    router.push("/mall")
  }

return (
    <div className="min-h-screen pb-36 bg-background">
      {/* Header with Image */}
      <div className="relative h-56">
        <Image src={game.image || "/placeholder.svg"} alt={game.name} fill className="object-cover" />
        <div className="absolute inset-0 bg-gradient-to-t from-background via-background/60 to-transparent" />
        <div className="absolute top-0 left-0 right-0 p-4 flex items-center justify-between">
          <button onClick={() => router.back()} className="p-2 rounded-full bg-black/40 backdrop-blur-md">
            <ArrowLeft size={20} />
          </button>
          {game.tag && (
            <div className="bg-secondary/90 text-white text-xs font-bold px-3 py-1 rounded-full">{game.tag}</div>
          )}
        </div>
        <div className="absolute bottom-4 left-4 right-4">
          <div className="bg-yellow-500/90 text-black text-sm font-bold px-3 py-1 rounded-full mb-2 inline-block">
            <Flame size={14} className="inline mr-1" />
            {game.discount} 限时优惠
          </div>
          <h1 className="text-2xl font-bold">{game.name}</h1>
          <p className="text-sm text-white/60">{game.description}</p>
        </div>
      </div>

{/* Options */}
      <div className="px-4 mt-6 space-y-3">
        <h3 className="font-bold text-sm flex items-center gap-2">
          <ShoppingCart size={16} className="text-primary" />
          选择充值金额
        </h3>

{game.options.map((option, i) => (
          <div
            key={i}
            onClick={() => setSelectedOption(i)}
            className={`bg-[#1A1A22] rounded-xl p-4 flex items-center justify-between border-2 transition-all cursor-pointer ${
              selectedOption === i ? "border-primary bg-primary/5" : "border-transparent hover:border-white/10"
            }`}
          >
            <div className="flex items-center gap-3">
              <div
                className={`w-6 h-6 rounded-full border-2 flex items-center justify-center ${
                  selectedOption === i ? "border-primary bg-primary" : "border-white/30"
                }`}
              >
                {selectedOption === i && <Check size={14} className="text-black" />}
              </div>
              <div>
                <div className="flex items-center gap-2">
                  <p className="font-bold">{option.name}</p>
                  {option.popular && (
                    <span className="bg-secondary/20 text-secondary text-[8px] px-1.5 py-0.5 rounded font-bold">
                      推荐
                    </span>
                  )}
                </div>
                <div className="flex items-center gap-2 mt-0.5">
                  <span className="text-xs text-white/40 line-through">¥{option.original}</span>
                  <span className="text-[10px] text-green-400">省¥{option.original - option.price}</span>
                </div>
              </div>
            </div>
            <span className="text-xl font-bold text-primary">¥{option.price}</span>
          </div>
        ))}
      </div>

<div className="fixed bottom-16 left-0 right-0 px-4 py-3 bg-background/95 backdrop-blur-md border-t border-white/5 z-30">
        <div className="flex items-center gap-4">
          <div className="flex-1 min-w-0">
            {selectedOption !== null ? (
              <>
                <p className="text-xs text-white/50 truncate">已选: {game.options[selectedOption].name}</p>
                <p className="text-xl font-bold text-primary">¥{game.options[selectedOption].price}</p>
              </>
            ) : (
              <p className="text-sm text-white/50">请选择充值金额</p>
            )}
          </div>
          <Button
            className="shrink-0 px-6 h-11 text-base font-bold"
            onClick={handlePurchase}
            disabled={selectedOption === null}
          >
            <Zap size={18} className="mr-2" />
            立即购买
          </Button>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/star/[id]/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import {
  ArrowLeft,
  Star,
  Trophy,
  Users,
  Clock,
  Shield,
  Heart,
  MessageCircle,
  Share2,
  Sparkles,
  PlayCircle,
} from "lucide-react"
import Image from "next/image"
import Link from "next/link"
import { useState } from "react"
import { useAppContext } from "@/components/providers/app-provider"
import { useRouter } from "next/navigation"
import { Suspense } from "react"

const starData: Record<string, any> = {
  "1": {
    name: "GM-远洋",
    title: "国服第一盲僧",
    avatar: "/streamer-1.jpg",
    cover: "/live-lol.jpg",
    rating: 4.9,
    orders: 1205,
    fans: 468000,
    heat: 1256000,
    games: ["英雄联盟", "无畏契约"],
    tags: ["职业选手", "国服第一", "耐心教学"],
    intro: "前职业战队打野选手,擅长盲僧、千珏等打野英雄。曾获得LPL春季赛冠军,现专注于游戏教学和陪玩服务。",
    achievements: [
      { icon: Trophy, text: "LPL春季赛冠军" },
      { icon: Star, text: "国服第一盲僧" },
      { icon: Users, text: "46.8万粉丝" },
    ],
    services: [
      {
        id: "1",
        type: "陪玩",
        name: "单局陪玩",
        price: 50,
        duration: "1局",
        desc: "一起开黑,边玩边教,轻松上分",
        popular: true,
      },
      {
        id: "2",
        type: "陪玩",
        name: "5局套餐",
        price: 220,
        duration: "5局",
        desc: "连续5局陪玩,享受9折优惠",
        discount: "9折",
      },
      {
        id: "3",
        type: "课程",
        name: "打野进阶课",
        price: 299,
        duration: "8节课",
        desc: "系统学习打野思路、刷野路线、Gank时机",
        courseId: "1",
      },
      {
        id: "4",
        type: "拜师",
        name: "拜师学艺",
        price: 1980,
        duration: "30天",
        desc: "一对一长期指导,包含10次实战陪练+课程",
        hot: true,
      },
    ],
    reviews: [
      {
        user: "玩家***23",
        avatar: "/viewer-1.jpg",
        rating: 5,
        content: "远洋老师教的很好,盲僧R闪学会了!",
        time: "2天前",
      },
      {
        user: "电竞***爱好者",
        avatar: "/viewer-2.jpg",
        rating: 5,
        content: "非常耐心,讲解很详细,值得!",
        time: "5天前",
      },
    ],
  },
  "2": {
    name: "卡若",
    title: "职业战队退役选手",
    avatar: "/streamer-2.jpg",
    cover: "/live-valorant.jpg",
    rating: 4.8,
    orders: 856,
    fans: 320000,
    heat: 980000,
    games: ["无畏契约", "CS2"],
    tags: ["前职业选手", "枪法精准", "幽默风趣"],
    intro: "前职业战队选手,擅长FPS游戏。退役后专注于游戏教学,帮助数千玩家提升枪法技术。",
    achievements: [
      { icon: Trophy, text: "VCT冠军" },
      { icon: Star, text: "超凡入圣" },
      { icon: Users, text: "32万粉丝" },
    ],
    services: [
      { id: "1", type: "陪玩", name: "单局陪玩", price: 80, duration: "1局", desc: "一起开黑,教你枪法", popular: true },
      {
        id: "2",
        type: "课程",
        name: "枪法训练营",
        price: 399,
        duration: "10节课",
        desc: "系统学习枪法、道具、地图",
        courseId: "2",
      },
      { id: "3", type: "拜师", name: "拜师学艺", price: 2980, duration: "30天", desc: "一对一长期指导", hot: true },
    ],
    reviews: [
      {
        user: "召唤师***88",
        avatar: "/viewer-3.jpg",
        rating: 5,
        content: "卡若老师很专业,枪法提升很快!",
        time: "1天前",
      },
    ],
  },
  "3": {
    name: "小美",
    title: "全国冠军",
    avatar: "/streamer-3.jpg",
    cover: "/live-pubg.jpg",
    rating: 4.9,
    orders: 2340,
    fans: 580000,
    heat: 1450000,
    games: ["和平精英", "使命召唤手游"],
    tags: ["全国冠军", "四指操作", "甜美声音"],
    intro: "和平精英全国冠军,四指操作教学专家。声音甜美,教学耐心,深受玩家喜爱。",
    achievements: [
      { icon: Trophy, text: "全国冠军" },
      { icon: Star, text: "无敌战神" },
      { icon: Users, text: "58万粉丝" },
    ],
    services: [
      { id: "1", type: "陪玩", name: "单局陪玩", price: 60, duration: "1局", desc: "甜美声音陪你吃鸡", popular: true },
      {
        id: "2",
        type: "课程",
        name: "四指操作课",
        price: 199,
        duration: "6节课",
        desc: "从零学会四指操作",
        courseId: "3",
      },
    ],
    reviews: [
      { user: "玩家***66", avatar: "/viewer-1.jpg", rating: 5, content: "小美老师太厉害了,带我吃鸡!", time: "3天前" },
    ],
  },
  "4": {
    name: "星辰",
    title: "原神攻略大神",
    avatar: "/streamer-4.jpg",
    cover: "/live-genshin.jpg",
    rating: 4.7,
    orders: 3450,
    fans: 890000,
    heat: 2100000,
    games: ["原神", "崩坏：星穹铁道"],
    tags: ["深渊满星", "角色养成", "攻略专家"],
    intro: "原神深渊满星玩家,精通所有角色配队与圣遗物搭配,帮助无数玩家实现满星目标。",
    achievements: [
      { icon: Trophy, text: "深渊满星" },
      { icon: Star, text: "全角色满命" },
      { icon: Users, text: "89万粉丝" },
    ],
    services: [
      {
        id: "1",
        type: "陪玩",
        name: "联机陪玩",
        price: 30,
        duration: "1小时",
        desc: "带你打boss刷材料",
        popular: true,
      },
      { id: "2", type: "课程", name: "深渊满星课", price: 149, duration: "5节课", desc: "教你轻松满星", courseId: "4" },
    ],
    reviews: [
      { user: "旅行者***", avatar: "/viewer-2.jpg", rating: 5, content: "终于满星了,感谢星辰老师!", time: "1天前" },
    ],
  },
  "5": {
    name: "阿杰",
    title: "国服百星",
    avatar: "/streamer-5.jpg",
    cover: "/live-hok.jpg",
    rating: 4.8,
    orders: 4560,
    fans: 1250000,
    heat: 3200000,
    games: ["王者荣耀"],
    tags: ["国服百星", "打野教学", "上分快"],
    intro: "王者荣耀国服百星玩家,擅长打野位,带飞无数玩家上王者。教学风格直接高效。",
    achievements: [
      { icon: Trophy, text: "国服百星" },
      { icon: Star, text: "巅峰赛前100" },
      { icon: Users, text: "125万粉丝" },
    ],
    services: [
      { id: "1", type: "陪玩", name: "单局上分", price: 40, duration: "1局", desc: "带你躺赢上分", popular: true },
      { id: "2", type: "课程", name: "上分秘籍", price: 249, duration: "8节课", desc: "教你快速上王者", courseId: "5" },
      { id: "3", type: "拜师", name: "拜师学艺", price: 1580, duration: "30天", desc: "保证上王者", hot: true },
    ],
    reviews: [
      { user: "峡谷***王", avatar: "/viewer-3.jpg", rating: 5, content: "阿杰老师太强了,一周上王者!", time: "2天前" },
    ],
  },
  "6": {
    name: "暗影",
    title: "首杀团队成员",
    avatar: "/streamer-6.jpg",
    cover: "/live-wow.jpg",
    rating: 4.9,
    orders: 890,
    fans: 280000,
    heat: 750000,
    games: ["魔兽世界", "暗黑破坏神4"],
    tags: ["首杀成员", "团本专家", "资深玩家"],
    intro: "魔兽世界首杀团队成员,拥有15年游戏经验。精通所有职业与团本机制。",
    achievements: [
      { icon: Trophy, text: "首杀成员" },
      { icon: Star, text: "史诗钥石大师" },
      { icon: Users, text: "28万粉丝" },
    ],
    services: [
      {
        id: "1",
        type: "陪玩",
        name: "大秘境陪刷",
        price: 100,
        duration: "1把",
        desc: "带你刷高层大秘境",
        popular: true,
      },
      {
        id: "2",
        type: "课程",
        name: "团本攻略",
        price: 499,
        duration: "12节课",
        desc: "全BOSS机制详解",
        courseId: "6",
      },
    ],
    reviews: [
      { user: "艾泽***战士", avatar: "/viewer-1.jpg", rating: 5, content: "暗影老师讲解太详细了!", time: "4天前" },
    ],
  },
}

const StarDetailClient = ({ starId }: { starId: string }) => {
  const star = starData[starId] || starData["1"]
  const { pay } = useAppContext()
  const router = useRouter()
  const [isFollowed, setIsFollowed] = useState(false)
  const [showShareModal, setShowShareModal] = useState(false)

const handleFollow = () => {
    setIsFollowed(!isFollowed)
  }

const handleBookService = (service: any) => {
    if (service.courseId) {
      router.push(`/course/${service.courseId}`)
    } else {
      const success = pay(service.price, "diamonds", `${star.name} - ${service.name}`, "product")
      if (success) {
        router.push("/messages")
      }
    }
  }

return (
    <div className="min-h-screen pb-24 bg-background">
      {/* Header with Cover */}
      <div className="relative h-64">
        <Image src={star.cover || "/placeholder.svg"} alt={star.name} fill className="object-cover" />
        <div className="absolute inset-0 bg-gradient-to-b from-transparent via-background/50 to-background" />

<button
          onClick={() => setShowShareModal(true)}
          className="absolute top-4 right-4 z-10 w-10 h-10 rounded-full glass flex items-center justify-center"
        >
          <Share2 size={20} />
        </button>

{/* Profile Info */}
      <div className="mt-14 px-4">
        <div className="flex items-start justify-between mb-3">
          <div>
            <h1 className="text-2xl font-bold mb-1">{star.name}</h1>
            <p className="text-sm text-white/60">{star.title}</p>
          </div>
          <button
            onClick={handleFollow}
            className={`px-4 py-2 rounded-full font-bold flex items-center gap-2 transition-colors ${
              isFollowed ? "bg-white/10 text-white/60" : "bg-secondary text-white hover:bg-secondary/90"
            }`}
          >
            <Heart size={16} className={isFollowed ? "fill-red-500 text-red-500" : ""} />
            {isFollowed ? "已关注" : "关注"}
          </button>
        </div>

<div className="flex items-center gap-6 mb-4">
          <div className="flex items-center gap-1">
            <Star size={16} className="text-primary fill-primary" />
            <span className="font-bold">{star.rating}</span>
            <span className="text-xs text-white/50">评分</span>
          </div>
          <div className="flex items-center gap-1">
            <Trophy size={16} className="text-accent" />
            <span className="font-bold">{star.orders}</span>
            <span className="text-xs text-white/50">订单</span>
          </div>
          <div className="flex items-center gap-1">
            <Users size={16} className="text-secondary" />
            <span className="font-bold">{(star.fans / 10000).toFixed(1)}万</span>
            <span className="text-xs text-white/50">粉丝</span>
          </div>
        </div>

<div className="flex flex-wrap gap-2 mb-6">
          {star.tags.map((tag: string, i: number) => (
            <span key={i} className="px-3 py-1 rounded-full bg-white/5 border border-white/10 text-xs">
              {tag}
            </span>
          ))}
        </div>

<div className="flex gap-2 mb-6">
          {star.games.map((game: string, i: number) => (
            <div key={i} className="px-3 py-1.5 rounded-lg glass-card text-xs font-medium">
              {game}
            </div>
          ))}
        </div>
      </div>

{/* Achievements */}
      <div className="px-4 mb-6">
        <h3 className="font-bold mb-3 flex items-center gap-2">
          <Trophy size={18} className="text-primary" />
          成就荣誉
        </h3>
        <div className="grid grid-cols-3 gap-3">
          {star.achievements.map((achievement: any, i: number) => (
            <div key={i} className="glass-card p-3 rounded-xl flex flex-col items-center gap-2 text-center">
              <achievement.icon size={24} className="text-primary" />
              <span className="text-[10px] text-white/70 leading-tight">{achievement.text}</span>
            </div>
          ))}
        </div>
      </div>

{/* Introduction */}
      <div className="px-4 mb-6">
        <h3 className="font-bold mb-2">个人简介</h3>
        <p className="text-sm text-white/70 leading-relaxed">{star.intro}</p>
      </div>

{/* Services */}
      <div className="px-4 mb-6">
        <h3 className="font-bold mb-3 flex items-center gap-2">
          <Sparkles size={18} className="text-secondary" />
          服务项目
        </h3>
        <div className="space-y-3">
          {star.services.map((service: any) => (
            <div
              key={service.id}
              className="glass-card p-4 rounded-xl relative overflow-hidden group hover:border-primary/30 transition-colors"
            >
              {service.popular && (
                <div className="absolute top-2 right-2 px-2 py-0.5 rounded-full bg-primary/20 text-primary text-[10px] font-bold">
                  热门
                </div>
              )}
              {service.hot && (
                <div className="absolute top-2 right-2 px-2 py-0.5 rounded-full bg-secondary/20 text-secondary text-[10px] font-bold animate-pulse">
                  火爆
                </div>
              )}

<div className="flex items-start justify-between mb-2">
                <div>
                  <div className="flex items-center gap-2 mb-1">
                    <span className="px-2 py-0.5 rounded bg-white/5 text-[10px] font-medium">{service.type}</span>
                    <h4 className="font-bold">{service.name}</h4>
                  </div>
                  <p className="text-xs text-white/60 mb-2">{service.desc}</p>
                  <div className="flex items-center gap-2 text-xs text-white/50">
                    <Clock size={12} />
                    <span>{service.duration}</span>
                  </div>
                </div>
                <div className="text-right">
                  <div className="text-2xl font-bold text-primary">{service.price}</div>
                  <div className="text-[10px] text-white/50">钻石</div>
                </div>
              </div>

<button
                onClick={() => handleBookService(service)}
                className="w-full mt-3 py-2.5 rounded-lg bg-primary text-black font-bold text-center hover:bg-primary/90 transition-colors"
              >
                {service.courseId ? "查看课程" : "立即预约"}
              </button>
            </div>
          ))}
        </div>
      </div>

{/* Reviews */}
      <div className="px-4 mb-6">
        <div className="flex items-center justify-between mb-3">
          <h3 className="font-bold flex items-center gap-2">
            <MessageCircle size={18} className="text-accent" />
            用户评价
          </h3>
          <Link href="#" className="text-xs text-white/50">
            查看全部
          </Link>
        </div>
        <div className="space-y-3">
          {star.reviews.map((review: any, i: number) => (
            <div key={i} className="glass-card p-4 rounded-xl">
              <div className="flex items-center gap-3 mb-2">
                <div className="w-8 h-8 rounded-full bg-muted relative overflow-hidden">
                  <Image src={review.avatar || "/placeholder.svg"} alt={review.user} fill className="object-cover" />
                </div>
                <div className="flex-1">
                  <div className="flex items-center justify-between">
                    <span className="text-sm font-medium">{review.user}</span>
                    <span className="text-xs text-white/50">{review.time}</span>
                  </div>
                  <div className="flex gap-0.5">
                    {Array.from({ length: review.rating }).map((_, j) => (
                      <Star key={j} size={12} className="text-primary fill-primary" />
                    ))}
                  </div>
                </div>
              </div>
              <p className="text-sm text-white/70">{review.content}</p>
            </div>
          ))}
        </div>
      </div>

{/* Trust Badge */}
      <div className="mx-4 mb-6 p-4 rounded-xl bg-gradient-to-r from-primary/10 to-transparent border-l-4 border-primary">
        <div className="flex items-center gap-3">
          <Shield size={24} className="text-primary" />
          <div>
            <h4 className="font-bold text-sm">平台保障</h4>
            <p className="text-xs text-white/60">服务不满意,全额退款</p>
          </div>
        </div>
      </div>

export default async function StarDetailPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params
  return (
    <Suspense
      fallback={
        <div className="min-h-screen bg-background flex items-center justify-center">
          <div className="w-8 h-8 border-2 border-primary border-t-transparent rounded-full animate-spin" />
        </div>
      }
    >
      <StarDetailClient starId={id} />
    </Suspense>
  )
}
[V0_FILE]typescriptreact:file="app/star/[id]/client.tsx" isMerged="true"
"use client"

export default function StarDetailClient({ starId }: { starId: string }) {
  const star = starData[starId] || starData["1"]
  const { pay } = useAppContext()
  const router = useRouter()
  const [isFollowed, setIsFollowed] = useState(false)
  const [showShareModal, setShowShareModal] = useState(false)

const handleFollow = () => {
    setIsFollowed(!isFollowed)
  }

{/* Trust Badge */}
      <div className="mx-4 mb-6 p-4 rounded-xl bg-gradient-to-r from-primary/10 to-transparent border-l-4 border-primary">
        <div className="flex items-center gap-3">
          <Shield size={24} className="text-primary" />
          <div>
            <h4 className="font-bold text-sm">平台保障</h4>
            <p className="text-xs text-white/60">服务不满意,全额退款</p>
          </div>
        </div>
      </div>

{/* Share Modal */}
      {showShareModal && (
        <div className="fixed inset-0 z-50 flex items-end justify-center">
          <div className="absolute inset-0 bg-black/60" onClick={() => setShowShareModal(false)} />
          <div className="relative w-full bg-zinc-900 rounded-t-3xl p-6 animate-slide-up">
            <h3 className="text-lg font-bold mb-4 text-center">分享主播</h3>
            <div className="grid grid-cols-4 gap-4 mb-6">
              {[
                { name: "微信", icon: "💬", color: "bg-green-500" },
                { name: "朋友圈", icon: "🌐", color: "bg-green-600" },
                { name: "QQ", icon: "🐧", color: "bg-blue-500" },
                { name: "微博", icon: "📱", color: "bg-red-500" },
              ].map((platform) => (
                <button
                  key={platform.name}
                  onClick={() => setShowShareModal(false)}
                  className="flex flex-col items-center gap-2"
                >
                  <div className={`w-14 h-14 rounded-full ${platform.color} flex items-center justify-center text-2xl`}>
                    {platform.icon}
                  </div>
                  <span className="text-xs text-white/70">{platform.name}</span>
                </button>
              ))}
            </div>
            <button
              onClick={() => setShowShareModal(false)}
              className="w-full py-3 rounded-xl bg-white/10 text-white font-medium"
            >
              取消
            </button>
          </div>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/star/[id]/loading.tsx" isMerged="true"
export default function Loading() {
  return (
    <div className="min-h-screen bg-background flex items-center justify-center">
      <div className="w-8 h-8 border-2 border-primary border-t-transparent rounded-full animate-spin" />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/services/account/page.tsx" isEdit="true" isMerged="true"
"use client"
import { Suspense } from "react"
import { Search, Filter, Shield, Wallet, Gamepad2, FileText, Clock } from "lucide-react"
import { useRouter, useSearchParams } from "next/navigation"
import Image from "next/image"
import { Button } from "@/components/ui/button"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { toast } from "@/hooks/use-toast"
import { AccountPawn } from "@/components/account/account-pawn"

function AccountTradeContent() {
  const router = useRouter()
  const searchParams = useSearchParams()
  const defaultTab = searchParams.get("tab") || "buy"

const games = [
    { name: "全部", icon: null },
    { name: "英雄联盟", icon: "/account-icon-lol.jpg" },
    { name: "无畏契约", icon: "/account-icon-val.jpg" },
    { name: "王者荣耀", icon: "/account-icon-hok.jpg" },
    { name: "原神", icon: "/account-icon-gen.jpg" },
  ]

const accounts = [
    {
      id: 1,
      title: "英雄联盟-全英雄 全皮肤 龙瞎",
      price: 2888,
      server: "艾欧尼亚",
      security: "找回包赔",
      image: "/account-lol.jpg",
      tags: ["顶号", "满级"],
    },
    {
      id: 2,
      title: "无畏契约-满特工 冠军套",
      price: 1500,
      server: "国服",
      security: "保险护航",
      image: "/account-val.jpg",
      tags: ["成品号"],
    },
    {
      id: 3,
      title: "王者荣耀-V10 300皮肤",
      price: 5600,
      server: "安卓QQ",
      security: "官方验号",
      image: "/account-hok.jpg",
      tags: ["贵族10", "国标"],
    },
    {
      id: 4,
      title: "原神-满命雷神 草神",
      price: 3200,
      server: "天空岛",
      security: "签署合同",
      image: "/account-genshin.jpg",
      tags: ["三神", "高练度"],
    },
  ]

<TabsContent value="buy" className="flex-1 px-4 space-y-4 mt-4 data-[state=inactive]:hidden">
          {/* Search & Filter */}
          <div className="flex gap-2">
            <div className="relative flex-1">
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-white/40" size={16} />
              <input
                type="text"
                placeholder="搜索游戏、区服、英雄..."
                className="w-full bg-white/5 rounded-lg py-2.5 pl-9 pr-4 text-sm text-white focus:outline-none focus:ring-1 focus:ring-primary placeholder:text-white/30"
              />
            </div>
            <Button variant="outline" className="border-white/10 bg-white/5 text-white/70 w-10 px-0">
              <Filter size={16} />
            </Button>
          </div>

{/* Game Categories */}
          <div className="overflow-x-auto no-scrollbar pb-2">
            <div className="flex gap-3">
              {games.map((g, i) => (
                <div key={i} className="flex flex-col items-center gap-1 min-w-[60px] cursor-pointer group">
                  <div
                    className={`w-12 h-12 rounded-xl flex items-center justify-center border border-white/10 overflow-hidden transition-all group-hover:border-primary/50 ${!g.icon ? "bg-white/5" : "bg-black"}`}
                  >
                    {g.icon ? (
                      <Image
                        src={g.icon || "/placeholder.svg"}
                        alt={g.name}
                        width={48}
                        height={48}
                        className="object-cover"
                      />
                    ) : (
                      <Gamepad2 className="text-white/50" />
                    )}
                  </div>
                  <span className="text-[10px] text-white/60 group-hover:text-white">{g.name}</span>
                </div>
              ))}
            </div>
          </div>

{/* Account List */}
          <div className="grid gap-3">
            {accounts.map((acc) => (
              <div
                key={acc.id}
                className="glass-card p-3 rounded-xl flex gap-3 hover:bg-white/5 transition-colors cursor-pointer group"
                onClick={() => toast({ title: "即将跳转详情", description: "该功能为模拟演示" })}
              >
                <div className="w-28 h-24 bg-muted rounded-lg relative overflow-hidden shrink-0 border border-white/5">
                  <Image
                    src={acc.image || "/placeholder.svg"}
                    alt={acc.title}
                    fill
                    className="object-cover transition-transform group-hover:scale-105"
                  />
                  <div className="absolute top-1 left-1 bg-black/60 text-[9px] px-1.5 py-0.5 rounded backdrop-blur-sm text-white/90 font-medium">
                    {acc.server}
                  </div>
                </div>
                <div className="flex-1 flex flex-col justify-between py-0.5">
                  <div>
                    <h3 className="font-bold text-sm line-clamp-2 leading-snug">{acc.title}</h3>
                    <div className="flex flex-wrap gap-1 mt-1.5">
                      {acc.tags.map((tag) => (
                        <span key={tag} className="text-[9px] bg-white/5 text-white/50 px-1 rounded">
                          {tag}
                        </span>
                      ))}
                    </div>
                  </div>

<div className="flex items-end justify-between mt-auto">
                    <div className="flex flex-col">
                      <span className="text-[10px] text-green-400 flex items-center gap-1 mb-0.5">
                        <Shield size={10} /> {acc.security}
                      </span>
                      <span className="text-lg font-bold text-primary leading-none">¥{acc.price}</span>
                    </div>
                    <Button
                      size="sm"
                      className="h-7 text-xs px-3 font-bold bg-white/10 hover:bg-primary hover:text-black"
                    >
                      购买
                    </Button>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </TabsContent>

<TabsContent value="pawn" className="flex-1 px-4 space-y-4 mt-4 data-[state=inactive]:hidden">
          {/* Pawn Banner / Header Area */}
          <div className="bg-gradient-to-br from-amber-900/30 to-orange-900/20 p-6 rounded-3xl border border-amber-500/20 relative overflow-hidden shadow-lg">
            <div className="absolute top-0 right-0 w-32 h-32 bg-amber-500/10 rounded-full blur-3xl -mr-10 -mt-10 pointer-events-none" />

<div className="flex items-center justify-between mb-6 relative z-10">
              <div className="flex items-center gap-4">
                <div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-amber-500/20 to-orange-500/20 flex items-center justify-center border border-white/10 shadow-inner">
                  <Wallet size={24} className="text-amber-300" />
                </div>
                <div>
                  <h2 className="text-lg font-bold text-white">游戏账号质押</h2>
                  <p className="text-xs text-amber-200/60 mt-0.5">合法典当 · 随时赎回 · 安全保障</p>
                </div>
              </div>
              <div className="text-right">
                <div className="text-xs text-white/40 mb-1">已质押账号</div>
                <div className="text-xl font-mono font-bold text-white tracking-tight">8,526</div>
              </div>
            </div>

{/* Pawn Process Steps */}
          <div className="glass-card p-4 rounded-2xl">
            <h3 className="font-bold text-sm mb-3 flex items-center gap-2">
              <FileText size={16} className="text-amber-400" />
              典当流程
            </h3>
            <div className="flex items-center justify-between text-center">
              {[
                { step: "1", label: "提交账号" },
                { step: "2", label: "价值评估" },
                { step: "3", label: "签署协议" },
                { step: "4", label: "获得资金" },
              ].map((item, i) => (
                <div key={i} className="flex-1 relative">
                  <div className="w-8 h-8 rounded-full bg-amber-500/20 border border-amber-500/30 flex items-center justify-center mx-auto mb-1.5">
                    <span className="text-xs font-bold text-amber-400">{item.step}</span>
                  </div>
                  <span className="text-[10px] text-white/60">{item.label}</span>
                  {i < 3 && (
                    <div className="absolute top-4 left-[60%] w-[80%] h-[1px] bg-gradient-to-r from-amber-500/30 to-transparent" />
                  )}
                </div>
              ))}
            </div>
          </div>

{/* Pawn Form Component */}
          <AccountPawn />

{/* Service Features */}
          <div className="grid grid-cols-2 gap-3 pb-8">
            <div className="bg-white/5 border border-white/5 p-3 rounded-xl flex items-center gap-3">
              <div className="w-8 h-8 rounded-full bg-green-500/10 flex items-center justify-center">
                <Shield className="text-green-400" size={16} />
              </div>
              <div>
                <div className="text-xs font-bold">合同保障</div>
                <div className="text-[10px] text-white/40">签署正规协议</div>
              </div>
            </div>
            <div className="bg-white/5 border border-white/5 p-3 rounded-xl flex items-center gap-3">
              <div className="w-8 h-8 rounded-full bg-amber-500/10 flex items-center justify-center">
                <Clock className="text-amber-400" size={16} />
              </div>
              <div>
                <div className="text-xs font-bold">随时赎回</div>
                <div className="text-[10px] text-white/40">质押期内可赎回</div>
              </div>
            </div>
          </div>
        </TabsContent>
      </Tabs>
    </div>
  )
}

export default function AccountTradePage() {
  return (
    <Suspense
      fallback={
        <div className="min-h-screen flex items-center justify-center bg-background">
          <div className="flex flex-col items-center gap-4">
            <div className="w-8 h-8 border-2 border-primary border-t-transparent rounded-full animate-spin" />
            <div className="text-white/50 text-sm">加载中...</div>
          </div>
        </div>
      }
    >
      <AccountTradeContent />
    </Suspense>
  )
}
[V0_FILE]typescriptreact:file="components/account/account-pawn.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { motion, AnimatePresence } from "framer-motion"
import {
  Check,
  Info,
  Calculator,
  RefreshCw,
  Shield,
  Wallet,
  Upload,
  ImageIcon,
  X,
  CheckCircle,
  Loader2,
  FileText,
  AlertTriangle,
  ChevronDown,
  ChevronUp,
} from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Label } from "@/components/ui/label"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Checkbox } from "@/components/ui/checkbox"
import { GAME_CASCADE_DATA } from "@/lib/data/game-cascade-data"
import { DynamicCascadeForm } from "./dynamic-cascade-form"
import { evaluateAccount, type EvaluationResult } from "@/lib/utils/account-evaluation"

async function submitPawnRequest(phone: string, gameName: string, cascadeData: Record<string, any>, pawnDays: number) {
  try {
    const serverInfo = cascadeData["游戏区"] || cascadeData["服务器"] || ""
    const name = `${gameName}典当用户_${serverInfo || "未知区服"}`

const remarkParts: string[] = [`典当期限: ${pawnDays}天`]
    Object.entries(cascadeData).forEach(([key, value]) => {
      if (value && typeof value === "string") {
        remarkParts.push(`${key}: ${value}`)
      } else if (Array.isArray(value) && value.length > 0) {
        remarkParts.push(`${key}: ${value.join(", ")}`)
      }
    })
    const remark = remarkParts.join("; ")

const response = await fetch("/api/customer", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        name,
        phone,
        source: "玩值电竞APP-账号典当",
        remark: remark || `${gameName}账号典当申请`,
        tags: `${gameName},典当,${pawnDays}天`,
      }),
    })

const responseText = await response.text()
    try {
      const result = JSON.parse(responseText)
      return result
    } catch {
      if (response.ok) {
        return { success: true, message: "申请已提交" }
      }
      return { success: false, message: "提交失败" }
    }
  } catch (error) {
    console.error("Failed to submit pawn request:", error)
    return { success: true, message: "申请已记录" }
  }
}

const PAWN_TERMS = [
  { days: 7, serviceFeePercent: 5.6, label: "7天" },
  { days: 15, serviceFeePercent: 10.5, label: "15天" },
  { days: 30, serviceFeePercent: 18, label: "30天" },
]

export function AccountPawn() {
  const [step, setStep] = useState(1)
  const [loading, setLoading] = useState(false)
  const [result, setResult] = useState<EvaluationResult | null>(null)
  const [showSuccessDialog, setShowSuccessDialog] = useState(false)
  const [showAgreementDialog, setShowAgreementDialog] = useState(false)
  const [showRestrictionDialog, setShowRestrictionDialog] = useState(false)
  const [isSubmitting, setIsSubmitting] = useState(false)

const [game, setGame] = useState("王者荣耀")
  const [cascadeData, setCascadeData] = useState<Record<string, any>>({})
  const [pawnDays, setPawnDays] = useState(30)
  const [agreedToTerms, setAgreedToTerms] = useState(false)

const [phoneNumber, setPhoneNumber] = useState("")
  const [submitStatus, setSubmitStatus] = useState<string>("")

const [screenshots, setScreenshots] = useState<File[]>([])
  const [showFeeDetail, setShowFeeDetail] = useState(false)

const removeScreenshot = (index: number) => {
    setScreenshots(screenshots.filter((_, i) => i !== index))
  }

const selectedTerm = PAWN_TERMS.find((t) => t.days === pawnDays) || PAWN_TERMS[2]

const handleEvaluate = async () => {
    const phoneRegex = /^1[3-9]\d{9}$/
    if (!phoneRegex.test(phoneNumber)) {
      setSubmitStatus("请输入有效的手机号码")
      return
    }

if (!agreedToTerms) {
      setSubmitStatus("请先阅读并同意相关协议")
      return
    }

setLoading(true)
    setSubmitStatus("")

try {
      const apiResult = await submitPawnRequest(phoneNumber, game, cascadeData, pawnDays)

if (!apiResult.success) {
        console.log("API submission warning:", apiResult.message)
      }

const res = evaluateAccount({
        gameName: game,
        serverType: "热门服",
        currentLevel: 30,
        maxLevel: 30,
        rankName: "荣耀王者",
        assetCounts: {
          legendary: 0,
          epic: 0,
          rare: 0,
          common: 0,
        },
        registrationMonths: 12,
        rechargeAmount6Months: 0,
        mallConsumption: 0,
        isRealNameVerified: true,
        isRealNameOwner: true,
        hasBanRecord: false,
      })

const handlePawnSubmit = async () => {
    setIsSubmitting(true)

try {
      const serviceFee = Math.round(((result?.loanAmount || 0) * selectedTerm.serviceFeePercent) / 100)
      const remark = `典当申请 - 估值: ¥${result?.valuation.toLocaleString()} - 典当金额: ¥${result?.loanAmount.toLocaleString()} - 期限: ${pawnDays}天 - 服务费: ¥${serviceFee}`

await fetch("/api/customer", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          name: `${game}典当确认`,
          phone: phoneNumber,
          source: "玩值电竞APP-典当确认",
          remark: remark,
          tags: `${game},典当确认,${pawnDays}天`,
        }),
      })

setShowSuccessDialog(true)
    } catch (error) {
      console.error("Pawn submit error:", error)
      setShowSuccessDialog(true)
    } finally {
      setIsSubmitting(false)
    }
  }

const reset = () => {
    setResult(null)
    setStep(1)
  }

const availableGames = Object.keys(GAME_CASCADE_DATA)

const serviceFee = result ? Math.round((result.loanAmount * selectedTerm.serviceFeePercent) / 100) : 0
  const totalRepay = result ? result.loanAmount + serviceFee : 0

return (
    <div className="w-full">
      <AnimatePresence mode="wait">
        {step === 1 ? (
          <motion.div
            key="form"
            initial={{ opacity: 0, y: 10 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -10 }}
            className="space-y-6 bg-gradient-to-br from-amber-900/20 to-orange-900/10 border border-amber-500/10 rounded-3xl p-6 shadow-xl relative overflow-hidden"
          >
            <div className="absolute top-0 right-0 w-32 h-32 bg-amber-600/10 rounded-full blur-3xl -mr-10 -mt-10 pointer-events-none" />

<div className="space-y-5 relative z-10">
              <div className="space-y-2">
                <Label className="text-gray-400">选择游戏</Label>
                <Select value={game} onValueChange={setGame}>
                  <SelectTrigger className="bg-black/30 border-white/10 h-11 text-white focus:ring-1 focus:ring-amber-500">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent className="bg-zinc-900 border-white/10 text-white max-h-[300px]">
                    {availableGames.map((g) => (
                      <SelectItem key={g} value={g}>
                        {g}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>

<div className="space-y-2">
                <Label className="text-gray-400">典当期限</Label>
                <div className="grid grid-cols-3 gap-3">
                  {PAWN_TERMS.map((term) => (
                    <button
                      key={term.days}
                      onClick={() => setPawnDays(term.days)}
                      className={`p-3 rounded-xl border text-center transition-all ${
                        pawnDays === term.days
                          ? "border-amber-500 bg-amber-500/20"
                          : "border-white/10 bg-black/20 hover:border-amber-500/50"
                      }`}
                    >
                      <div className="font-bold text-lg">{term.label}</div>
                      <div className="text-[10px] text-white/50">短期周转</div>
                    </button>
                  ))}
                </div>
              </div>

<div className="space-y-3">
                <Label className="text-gray-400 flex items-center gap-2">
                  <ImageIcon size={16} />
                  上传游戏截图 (最多5张)
                </Label>
                <div className="border-2 border-dashed border-white/10 rounded-xl p-4 bg-black/20 hover:border-amber-500/30 transition-colors">
                  <input
                    type="file"
                    id="screenshot-upload"
                    multiple
                    accept="image/*"
                    onChange={handleScreenshotUpload}
                    className="hidden"
                    disabled={screenshots.length >= 5}
                  />
                  <label
                    htmlFor="screenshot-upload"
                    className={`flex flex-col items-center justify-center gap-2 cursor-pointer ${
                      screenshots.length >= 5 ? "opacity-50 cursor-not-allowed" : ""
                    }`}
                  >
                    <div className="w-12 h-12 rounded-full bg-amber-500/10 flex items-center justify-center">
                      <Upload className="text-amber-400" size={24} />
                    </div>
                    <p className="text-sm text-gray-400">
                      {screenshots.length >= 5 ? "已达上传上限" : "点击上传账号截图"}
                    </p>
                    <p className="text-xs text-gray-600">支持 JPG、PNG 格式</p>
                  </label>
                </div>

{screenshots.length > 0 && (
                  <div className="grid grid-cols-3 gap-3 mt-3">
                    {screenshots.map((file, index) => (
                      <div key={index} className="relative group">
                        <div className="aspect-square rounded-lg overflow-hidden bg-black/30 border border-white/10">
                          <img
                            src={URL.createObjectURL(file) || "/placeholder.svg"}
                            alt={`Screenshot ${index + 1}`}
                            className="w-full h-full object-cover"
                          />
                        </div>
                        <button
                          onClick={() => removeScreenshot(index)}
                          className="absolute -top-2 -right-2 w-6 h-6 bg-red-500 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
                        >
                          <X size={14} className="text-white" />
                        </button>
                      </div>
                    ))}
                  </div>
                )}
              </div>

<div className="space-y-2">
                <Label className="text-gray-400">联系电话</Label>
                <Input
                  type="tel"
                  value={phoneNumber}
                  onChange={(e) => setPhoneNumber(e.target.value)}
                  placeholder="请输入您的手机号码"
                  className="bg-black/30 border-white/10 h-11 text-white focus:border-amber-500"
                />
              </div>

{/* 协议确认 */}
              <div className="flex items-start gap-3 p-3 rounded-xl bg-black/20 border border-white/5">
                <Checkbox
                  id="terms"
                  checked={agreedToTerms}
                  onCheckedChange={(checked) => setAgreedToTerms(checked as boolean)}
                  className="mt-0.5 border-amber-500 data-[state=checked]:bg-amber-500"
                />
                <div className="flex-1">
                  <label htmlFor="terms" className="text-xs text-white/70 cursor-pointer">
                    我已阅读并同意
                    <button
                      type="button"
                      onClick={() => setShowAgreementDialog(true)}
                      className="text-amber-400 hover:underline mx-1"
                    >
                      《游戏账号质押服务协议》
                    </button>
                    及
                    <button
                      type="button"
                      onClick={() => setShowRestrictionDialog(true)}
                      className="text-amber-400 hover:underline mx-1"
                    >
                      《账号使用限制公约》
                    </button>
                  </label>
                </div>
              </div>

{submitStatus && <p className="text-red-400 text-xs">{submitStatus}</p>}
            </div>

<Button
              className="w-full h-14 text-lg font-bold bg-gradient-to-r from-amber-600 to-orange-600 hover:from-amber-500 hover:to-orange-500 shadow-lg shadow-amber-500/20 rounded-xl mt-4"
              onClick={handleEvaluate}
              disabled={loading || !phoneNumber || !agreedToTerms}
            >
              {loading ? (
                <div className="flex items-center gap-2">
                  <RefreshCw className="animate-spin" size={20} />
                  正在评估中...
                </div>
              ) : (
                <div className="flex items-center gap-2">
                  <Calculator size={20} />
                  开始价值评估
                </div>
              )}
            </Button>

<p className="text-center text-xs text-white/30 flex items-center justify-center gap-1.5 mt-4">
              <Shield size={12} />
              评估过程完全匿名，账号信息严格保密
            </p>
          </motion.div>
        ) : (
          <motion.div
            key="result"
            initial={{ opacity: 0, scale: 0.95 }}
            animate={{ opacity: 1, scale: 1 }}
            className="bg-gradient-to-br from-amber-900/20 to-orange-900/10 border border-amber-500/20 rounded-3xl overflow-hidden shadow-2xl"
          >
            <div className="p-6 relative overflow-hidden">
              <div className="absolute top-0 right-0 w-64 h-64 bg-amber-600/10 rounded-full blur-3xl -mr-16 -mt-16 pointer-events-none" />

<div className="relative z-10">
                <div className="flex justify-between items-start mb-6">
                  <div>
                    <h2 className="text-gray-400 text-sm mb-1.5">账号评估价值</h2>
                    <div className="text-5xl font-bold text-white flex items-end gap-3 tracking-tight">
                      ¥ {result?.valuation.toLocaleString()}
                      <span className="text-sm text-gray-500 font-medium mb-2">CNY</span>
                    </div>
                  </div>
                  <div className="text-right">
                    <div className="inline-flex items-center gap-1.5 bg-green-900/30 text-green-400 px-4 py-1.5 rounded-full text-xs font-bold border border-green-500/20">
                      <Check size={12} />
                      评估通过
                    </div>
                  </div>
                </div>

{/* 典当金额 */}
                <div className="bg-gradient-to-r from-amber-900/30 to-orange-900/30 border border-amber-500/20 rounded-2xl p-5 mb-6 relative overflow-hidden">
                  <div className="relative z-10">
                    <div className="flex justify-between items-center mb-3">
                      <div className="text-amber-100 font-bold flex items-center gap-2 text-lg">
                        <Wallet size={20} className="text-amber-500" />
                        可典当金额
                      </div>
                      <div className="text-3xl font-bold text-amber-400">¥ {result?.loanAmount.toLocaleString()}</div>
                    </div>
                    <div className="w-full bg-black/40 h-2 rounded-full overflow-hidden">
                      <div
                        className="bg-amber-500 h-full rounded-full shadow-[0_0_10px_rgba(245,158,11,0.5)]"
                        style={{ width: "60%" }}
                      />
                    </div>
                    <p className="text-xs text-amber-200/50 mt-3 flex items-center gap-1.5">
                      <Info size={12} />
                      典当金额为估值的 60%
                    </p>
                  </div>
                </div>

<div className="bg-black/20 rounded-2xl p-4 mb-6 border border-white/5">
                  <button
                    onClick={() => setShowFeeDetail(!showFeeDetail)}
                    className="w-full flex items-center justify-between"
                  >
                    <h3 className="font-bold text-sm flex items-center gap-2">
                      <FileText size={16} className="text-amber-400" />
                      典当服务费说明
                    </h3>
                    {showFeeDetail ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
                  </button>

{showFeeDetail && (
                    <div className="mt-3 pt-3 border-t border-white/10 text-xs text-white/60 space-y-2">
                      <p>典当服务费包含以下服务项目：</p>
                      <ul className="list-disc list-inside space-y-1 text-white/50">
                        <li>账号价值专业评估服务</li>
                        <li>账号安全托管服务</li>
                        <li>资金快速到账服务</li>
                        <li>赎回手续办理服务</li>
                      </ul>
                    </div>
                  )}

<div className="mt-4 space-y-2 text-sm">
                    <div className="flex justify-between">
                      <span className="text-white/60">典当金额</span>
                      <span className="font-bold">¥ {result?.loanAmount.toLocaleString()}</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-white/60">典当服务费 ({pawnDays}天)</span>
                      <span className="font-bold text-amber-400">¥ {serviceFee.toLocaleString()}</span>
                    </div>
                    <div className="border-t border-white/10 pt-2 flex justify-between">
                      <span className="text-white/60">到期赎回金额</span>
                      <span className="font-bold text-lg text-white">¥ {totalRepay.toLocaleString()}</span>
                    </div>
                  </div>
                </div>

{/* 注意事项 */}
                <div className="bg-yellow-900/20 border border-yellow-500/20 rounded-xl p-3 mb-6">
                  <div className="flex items-start gap-2">
                    <AlertTriangle size={16} className="text-yellow-500 mt-0.5 shrink-0" />
                    <div className="text-xs text-yellow-200/70">
                      <p className="font-bold mb-1">质押期间请注意：</p>
                      <ul className="list-disc list-inside space-y-0.5 text-yellow-200/50">
                        <li>不得转移、赠与账号内核心虚拟资产</li>
                        <li>不得使用外挂、辅助脚本等违规操作</li>
                        <li>不得修改密码、密保信息</li>
                      </ul>
                    </div>
                  </div>
                </div>

<div className="flex gap-4">
                  <Button
                    variant="outline"
                    className="flex-1 bg-transparent border-white/10 text-white hover:bg-white/5 h-12 rounded-xl"
                    onClick={reset}
                  >
                    重新评估
                  </Button>
                  <Button
                    className="flex-1 bg-amber-500 hover:bg-amber-400 text-black font-bold h-12 rounded-xl text-base shadow-[0_0_20px_rgba(245,158,11,0.2)]"
                    onClick={handlePawnSubmit}
                    disabled={isSubmitting}
                  >
                    {isSubmitting ? (
                      <div className="flex items-center gap-2">
                        <Loader2 className="animate-spin" size={20} />
                        提交中...
                      </div>
                    ) : (
                      "申请典当"
                    )}
                  </Button>
                </div>
              </div>
            </div>
          </motion.div>
        )}
      </AnimatePresence>

{/* 成功弹窗 */}
      <Dialog open={showSuccessDialog} onOpenChange={setShowSuccessDialog}>
        <DialogContent className="bg-zinc-900 border-white/10 text-white max-w-sm">
          <DialogHeader>
            <DialogTitle className="text-center">
              <div className="w-16 h-16 bg-green-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
                <CheckCircle className="text-green-400" size={32} />
              </div>
              <span className="text-xl">典当申请已提交</span>
            </DialogTitle>
          </DialogHeader>
          <div className="text-center space-y-4">
            <div className="bg-black/30 rounded-xl p-4">
              <p className="text-2xl font-bold text-amber-400">¥ {result?.loanAmount.toLocaleString()}</p>
              <p className="text-xs text-white/50 mt-1">典当金额</p>
            </div>
            <p className="text-sm text-white/70">
              我们的客服将在 <span className="text-amber-400 font-bold">5-10分钟</span> 内与您联系
            </p>
            <p className="text-xs text-white/50">请保持手机畅通: {phoneNumber}</p>
            <Button
              className="w-full bg-amber-500 hover:bg-amber-400 text-black font-bold"
              onClick={() => {
                setShowSuccessDialog(false)
                reset()
              }}
            >
              我知道了
            </Button>
          </div>
        </DialogContent>
      </Dialog>

{/* 质押服务协议弹窗 */}
      <Dialog open={showAgreementDialog} onOpenChange={setShowAgreementDialog}>
        <DialogContent className="bg-zinc-900 border-white/10 text-white max-w-md max-h-[80vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle className="flex items-center gap-2">
              <FileText size={20} className="text-amber-400" />
              游戏账号质押服务协议
            </DialogTitle>
          </DialogHeader>
          <div className="text-xs text-white/70 space-y-4 leading-relaxed">
            <section>
              <h4 className="font-bold text-white mb-2">第一条 定义与服务范围</h4>
              <p>1.1 "质押服务"指甲方将其合法持有的游戏账号作为担保物，向乙方申请借款的服务。</p>
              <p>1.2 质押期间，账号控制权仍归甲方，但需遵守本协议约定的使用限制。</p>
            </section>
            <section>
              <h4 className="font-bold text-white mb-2">第二条 服务流程</h4>
              <p>2.1 申请：甲方提交账号资料及个人信息进行评估申请。</p>
              <p>2.2 评估：乙方对账号价值进行专业评估，出具评估报告。</p>
              <p>2.3 签约：双方确认借款金额、期限、服务费后签署本协议。</p>
              <p>2.4 放款：乙方在签约后1个工作日内完成放款。</p>
              <p>2.5 赎回：甲方在到期前支付本金及服务费，解除质押。</p>
            </section>
            <section>
              <h4 className="font-bold text-white mb-2">第三条 费用说明</h4>
              <p>3.1 典当服务费为一次性收取，包含评估、托管、放款、赎回等全流程服务费用。</p>
              <p>3.2 提前赎回不退还服务费，逾期赎回需支付额外逾期费用。</p>
            </section>
            <section>
              <h4 className="font-bold text-white mb-2">第四条 违约处置</h4>
              <p>4.1 逾期超过30天未赎回，乙方有权处置质押账号。</p>
              <p>4.2 账号处置所得优先抵扣借款本金及费用，剩余部分返还甲方。</p>
            </section>
          </div>
          <Button
            className="w-full bg-amber-500 hover:bg-amber-400 text-black font-bold mt-4"
            onClick={() => setShowAgreementDialog(false)}
          >
            我已阅读并理解
          </Button>
        </DialogContent>
      </Dialog>

<Dialog open={showRestrictionDialog} onOpenChange={setShowRestrictionDialog}>
        <DialogContent className="bg-zinc-900 border-white/10 text-white max-w-md max-h-[80vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle className="flex items-center gap-2">
              <AlertTriangle size={20} className="text-yellow-400" />
              账号使用限制公约
            </DialogTitle>
          </DialogHeader>
          <div className="text-xs text-white/70 space-y-4 leading-relaxed">
            <p className="text-white/90">质押期间，甲方使用账号不得从事以下行为，否则将承担违约后果：</p>

<section className="bg-red-900/20 border border-red-500/20 rounded-lg p-3">
              <h4 className="font-bold text-red-400 mb-2 flex items-center gap-2">
                <span className="w-5 h-5 rounded-full bg-red-500/20 flex items-center justify-center text-[10px]">
                  1
                </span>
                资产转移
              </h4>
              <p>转移、赠与、销毁账号内核心虚拟资产（如高级装备、稀有道具、大量游戏货币等）。</p>
            </section>

<section className="bg-red-900/20 border border-red-500/20 rounded-lg p-3">
              <h4 className="font-bold text-red-400 mb-2 flex items-center gap-2">
                <span className="w-5 h-5 rounded-full bg-red-500/20 flex items-center justify-center text-[10px]">
                  2
                </span>
                违规操作
              </h4>
              <p>使用外挂、辅助脚本等非法程序；利用游戏漏洞；发表违规言论导致账号被处罚。</p>
            </section>

<section className="bg-red-900/20 border border-red-500/20 rounded-lg p-3">
              <h4 className="font-bold text-red-400 mb-2 flex items-center gap-2">
                <span className="w-5 h-5 rounded-full bg-red-500/20 flex items-center justify-center text-[10px]">
                  3
                </span>
                权属变更
              </h4>
              <p>尝试修改密码、密保信息、绑定手机或邮箱（经乙方书面同意除外）；将账号用于出租、出售等再处置。</p>
            </section>

<section className="bg-red-900/20 border border-red-500/20 rounded-lg p-3">
              <h4 className="font-bold text-red-400 mb-2 flex items-center gap-2">
                <span className="w-5 h-5 rounded-full bg-red-500/20 flex items-center justify-center text-[10px]">
                  4
                </span>
                价值减损
              </h4>
              <p>进行明显有悖于账号价值最大化的操作（具体标准由乙方根据游戏类型判断并公示）。</p>
            </section>

<div className="bg-amber-900/20 border border-amber-500/20 rounded-lg p-3 mt-4">
              <p className="text-amber-200/80 text-center font-medium">
                甲方确认：我已阅读、理解并完全同意本协议及其所有附件的全部内容。
              </p>
            </div>
          </div>
          <Button
            className="w-full bg-amber-500 hover:bg-amber-400 text-black font-bold mt-4"
            onClick={() => setShowRestrictionDialog(false)}
          >
            我已阅读并同意
          </Button>
        </DialogContent>
      </Dialog>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/hotel/page.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Search, MapPin, Filter, Star, ArrowLeft, ChevronDown, CheckCircle2, X, Map, Navigation } from "lucide-react"
import { useRouter, useSearchParams } from "next/navigation"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import Image from "next/image"
import { Suspense } from "react"

const hotels = [
  {
    id: 1,
    name: "玩值电竞酒店(旗舰店)",
    rating: 4.9,
    reviews: 1205,
    price: 398,
    distance: "0.8km",
    tags: ["RTX4090", "电竞椅", "24h餐饮"],
    district: "思明区/SM广场",
    image: "/hotel-1.jpg",
    lat: 24.4798,
    lng: 118.0894,
  },
  {
    id: 2,
    name: "极客空间电竞公寓",
    rating: 4.7,
    reviews: 856,
    price: 268,
    distance: "1.2km",
    tags: ["五黑房", "投影", "免费停车"],
    district: "湖里区/万达广场",
    image: "/hotel-2.jpg",
    lat: 24.5103,
    lng: 118.1287,
  },
  {
    id: 3,
    name: "异次元电竞酒店",
    rating: 4.8,
    reviews: 2341,
    price: 328,
    distance: "2.5km",
    tags: ["情侣房", "PS5", "VR体验"],
    district: "集美区/软件园",
    image: "/hotel-3.jpg",
    lat: 24.5745,
    lng: 118.1012,
  },
]

const cafes = [
  {
    id: 101,
    name: "网鱼网咖(万达店)",
    rating: 4.8,
    reviews: 5620,
    price: 12,
    distance: "0.5km",
    tags: ["3080显卡", "特权公馆", "现磨咖啡"],
    district: "湖里区/万达广场",
    image: "/cafe-1.jpg",
    lat: 24.5089,
    lng: 118.1256,
  },
  {
    id: 102,
    name: "杰拉电竞馆",
    rating: 4.6,
    reviews: 3210,
    price: 10,
    distance: "1.8km",
    tags: ["赛事级配置", "美女陪玩", "独立包间"],
    district: "思明区/中山路",
    image: "/cafe-2.jpg",
    lat: 24.4512,
    lng: 118.0823,
  },
]

function HotelContent() {
  const router = useRouter()
  const searchParams = useSearchParams()
  const defaultTab = searchParams.get("tab") || "hotel"
  const [activeTab, setActiveTab] = useState(defaultTab)
  const [showPaymentSuccess, setShowPaymentSuccess] = useState(false)
  const [paymentInfo, setPaymentInfo] = useState({ name: "", price: 0, type: "" })
  const [showMap, setShowMap] = useState(false)
  const [selectedLocation, setSelectedLocation] = useState<{ name: string; lat: number; lng: number } | null>(null)

const handleBook = (name: string, price: number, type: string) => {
    setPaymentInfo({ name, price, type })
    setShowPaymentSuccess(true)
  }

const handleShowMap = (item: { name: string; lat: number; lng: number }) => {
    setSelectedLocation(item)
    setShowMap(true)
  }

return (
    <div className="min-h-screen bg-background pb-24">
      {/* 支付成功弹窗 */}
      {showPaymentSuccess && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm">
          <div className="bg-zinc-900 rounded-2xl p-6 mx-4 max-w-sm w-full border border-white/10 animate-in zoom-in-95 duration-200">
            <div className="flex justify-end mb-2">
              <button
                onClick={() => setShowPaymentSuccess(false)}
                className="p-1 hover:bg-white/10 rounded-full transition-colors"
              >
                <X size={20} className="text-white/50" />
              </button>
            </div>
            <div className="text-center">
              <div className="w-16 h-16 rounded-full bg-primary/20 flex items-center justify-center mx-auto mb-4">
                <CheckCircle2 size={40} className="text-primary" />
              </div>
              <h3 className="text-xl font-bold mb-2">{paymentInfo.type === "hotel" ? "预订成功" : "抢座成功"}</h3>
              <p className="text-white/60 mb-4">
                您已成功{paymentInfo.type === "hotel" ? "预订" : "抢座"} {paymentInfo.name}
              </p>
              <div className="bg-zinc-800/50 rounded-xl p-4 mb-4">
                <div className="flex justify-between items-center text-sm">
                  <span className="text-white/60">支付金额</span>
                  <span className="text-primary font-bold text-lg">
                    ¥{paymentInfo.price}
                    {paymentInfo.type === "cafe" ? "/时" : ""}
                  </span>
                </div>
              </div>
              <button
                onClick={() => {
                  setShowPaymentSuccess(false)
                  router.push("/orders")
                }}
                className="w-full py-3 rounded-full bg-primary text-black font-bold active:scale-95 transition-transform"
              >
                查看订单
              </button>
            </div>
          </div>
        </div>
      )}

{showMap && selectedLocation && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm">
          <div className="bg-zinc-900 rounded-2xl mx-4 max-w-md w-full border border-white/10 animate-in zoom-in-95 duration-200 overflow-hidden">
            <div className="flex items-center justify-between p-4 border-b border-white/10">
              <div className="flex items-center gap-2">
                <Map size={20} className="text-primary" />
                <h3 className="font-bold">{selectedLocation.name}</h3>
              </div>
              <button
                onClick={() => setShowMap(false)}
                className="p-1 hover:bg-white/10 rounded-full transition-colors"
              >
                <X size={20} className="text-white/50" />
              </button>
            </div>
            <div className="relative h-64 bg-zinc-800">
              {/* 厦门市地图占位 */}
              <div className="absolute inset-0 flex items-center justify-center">
                <Image src="/xiamen-city-map-with-location-pin.jpg" alt="厦门市地图" fill className="object-cover opacity-50" />
                <div className="absolute inset-0 flex flex-col items-center justify-center">
                  <Navigation size={48} className="text-primary mb-2" />
                  <p className="text-white font-bold">{selectedLocation.name}</p>
                  <p className="text-xs text-white/60 mt-1">厦门市</p>
                </div>
              </div>
            </div>
            <div className="p-4">
              <button
                onClick={() => {
                  window.open(
                    `https://uri.amap.com/marker?position=${selectedLocation.lng},${selectedLocation.lat}&name=${encodeURIComponent(selectedLocation.name)}&coordinate=gaode&callnative=1`,
                    "_blank",
                  )
                }}
                className="w-full py-3 rounded-full bg-primary text-black font-bold active:scale-95 transition-transform flex items-center justify-center gap-2"
              >
                <Navigation size={18} />
                打开导航
              </button>
            </div>
          </div>
        </div>
      )}

{/* Header with Search */}
      <div className="sticky top-0 z-40 bg-background/95 backdrop-blur-md border-b border-white/5 supports-[backdrop-filter]:bg-background/60">
        <div className="flex items-center gap-3 px-4 py-2">
          <button onClick={() => router.back()} className="active:scale-90 transition-transform">
            <ArrowLeft size={22} />
          </button>
          <div className="flex-1 h-9 bg-zinc-800/50 rounded-full flex items-center px-3 gap-2 border border-white/5">
            <Search size={14} className="text-white/40" />
            <input
              type="text"
              placeholder="搜索酒店、网咖、商圈"
              className="bg-transparent border-none outline-none text-xs w-full h-full text-white placeholder:text-white/30"
            />
          </div>
          <button
            onClick={() => handleShowMap({ name: "厦门市", lat: 24.4798, lng: 118.0894 })}
            className="flex items-center gap-1 text-primary hover:bg-primary/10 px-2 py-1 rounded-full transition-colors"
          >
            <MapPin size={18} />
            <span className="text-xs font-bold">地图</span>
          </button>
        </div>

{/* Tab Switcher & Filters */}
        <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
          <div className="px-4 pb-2">
            <TabsList className="grid w-full grid-cols-2 bg-zinc-800/50 h-9">
              <TabsTrigger
                value="hotel"
                className="text-xs data-[state=active]:bg-primary data-[state=active]:text-white"
              >
                电竞酒店
              </TabsTrigger>
              <TabsTrigger
                value="cafe"
                className="text-xs data-[state=active]:bg-primary data-[state=active]:text-white"
              >
                附近网咖
              </TabsTrigger>
            </TabsList>
          </div>

{hotels.map((hotel) => (
              <div key={hotel.id} className="flex gap-3 py-3 border-b border-white/5 last:border-0">
                <div className="relative w-24 h-24 rounded-lg overflow-hidden shrink-0 bg-muted">
                  <Image src={hotel.image || "/placeholder.svg"} alt={hotel.name} fill className="object-cover" />
                  {hotel.id === 1 && (
                    <div className="absolute top-0 left-0 bg-red-500 text-white text-[10px] px-1.5 py-0.5 rounded-br-lg font-bold">
                      热门
                    </div>
                  )}
                </div>

<div className="flex items-center gap-2 text-xs text-white/60 mb-1">
                      <div className="flex items-center text-orange-400 font-bold bg-orange-500/10 px-1 rounded">
                        <Star size={10} fill="currentColor" />
                        <span className="ml-0.5">{hotel.rating}</span>
                      </div>
                      <span className="text-primary font-bold">{hotel.reviews}条评论</span>
                    </div>

<div className="text-xs text-white/40 truncate mb-1">
                      {hotel.district} | {hotel.distance}
                    </div>

<div className="flex flex-wrap gap-1">
                      {hotel.tags.map((tag, i) => (
                        <span
                          key={i}
                          className="px-1.5 py-0.5 rounded text-[10px] border border-white/10 text-white/50 bg-white/5"
                        >
                          {tag}
                        </span>
                      ))}
                    </div>
                  </div>

<div className="flex items-end justify-between mt-1">
                    <div className="flex items-baseline gap-0.5 text-red-500">
                      <span className="text-xs font-bold">¥</span>
                      <span className="text-xl font-bold leading-none">{hotel.price}</span>
                      <span className="text-xs text-white/50 ml-1 font-normal">起</span>
                    </div>
                    <button
                      onClick={() => handleBook(hotel.name, hotel.price, "hotel")}
                      className="px-3 py-1 bg-primary text-white text-xs rounded-full font-bold active:scale-95 transition-transform"
                    >
                      预订
                    </button>
                  </div>
                </div>
              </div>
            ))}
          </TabsContent>

{cafes.map((cafe) => (
              <div key={cafe.id} className="flex gap-3 py-3 border-b border-white/5 last:border-0">
                <div className="relative w-24 h-24 rounded-lg overflow-hidden shrink-0 bg-muted">
                  <Image src={cafe.image || "/placeholder.svg"} alt={cafe.name} fill className="object-cover" />
                </div>

<div className="flex-1 flex flex-col justify-between min-w-0">
                  <div>
                    <div className="flex items-start justify-between mb-1">
                      <h3 className="font-bold text-base truncate pr-2">{cafe.name}</h3>
                      <button
                        onClick={() => handleShowMap(cafe)}
                        className="text-primary hover:bg-primary/10 p-1 rounded transition-colors shrink-0"
                      >
                        <MapPin size={16} />
                      </button>
                    </div>
                    <div className="flex items-center gap-2 text-xs text-white/60 mb-1">
                      <div className="flex items-center text-orange-400 font-bold bg-orange-500/10 px-1 rounded">
                        <Star size={10} fill="currentColor" />
                        <span className="ml-0.5">{cafe.rating}</span>
                      </div>
                      <span className="text-white/40">人均 ¥{(cafe.price * 3).toFixed(0)}</span>
                    </div>
                    <div className="text-xs text-white/40 truncate mb-1">
                      {cafe.district} | {cafe.distance}
                    </div>

<div className="flex items-end justify-between mt-1">
                    <div className="flex items-baseline gap-0.5">
                      <span className="text-xs text-white/60">¥</span>
                      <span className="text-lg font-bold text-primary leading-none">{cafe.price}</span>
                      <span className="text-xs text-white/40">/时</span>
                    </div>
                    <button
                      onClick={() => handleBook(cafe.name, cafe.price, "cafe")}
                      className="px-3 py-1 bg-white/10 text-white text-xs rounded-full font-bold active:scale-95 transition-transform hover:bg-white/20"
                    >
                      抢座
                    </button>
                  </div>
                </div>
              </div>
            ))}
          </TabsContent>
        </Tabs>
      </div>
    </div>
  )
}

export default function HotelPage() {
  return (
    <Suspense
      fallback={
        <div className="min-h-screen flex items-center justify-center bg-background">
          <div className="w-8 h-8 border-2 border-primary border-t-transparent rounded-full animate-spin" />
        </div>
      }
    >
      <HotelContent />
    </Suspense>
  )
}
[V0_FILE]jpg:file="public/hotel-1.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/hotel-1-smlSHcHDFiCqEv2DGRNuw1HDrxfqhg.jpg" isMerged="true"
[V0_FILE]jpg:file="public/hotel-2.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/hotel-2-EvXKWhsZiaFKz35o6r8ylNQ7ATuqNT.jpg" isMerged="true"
[V0_FILE]jpg:file="public/hotel-3.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/hotel-3-iEKJQPQBprpSbsg3rehn18S8mpYZwC.jpg" isMerged="true"
[V0_FILE]jpg:file="public/cafe-1.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/cafe-1-nrBf8l1ixMYYC4j1LdWZXGNHkZQhuQ.jpg" isMerged="true"
[V0_FILE]jpg:file="public/cafe-2.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/cafe-2-BoCL7Fj2hSBfsxM6IracsrulATMXaL.jpg" isMerged="true"
[V0_FILE]jpg:file="public/xiamen-city-map-with-location-pin.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/xiamen-city-map-with-location-pin-mvX86Vus6BjlfZCFVobmnFAf7r6cTj.jpg" isMerged="true"
[V0_FILE]typescriptreact:file="components/shared/purchase-bar.tsx" isEdit="true" isMerged="true"
"use client"

import { Heart, MessageCircle, Coins } from "lucide-react"
import { Button } from "@/components/ui/button"
import { useAppContext } from "@/components/providers/app-provider"
import { useRouter } from "next/navigation"
import Link from "next/link"
import { useState } from "react"

interface PurchaseBarProps {
  price: number
  productName: string
  chatLink?: string
  onSuccess?: () => void
  showCollect?: boolean
  showChat?: boolean
  buttonText?: string
}

export function PurchaseBar({
  price,
  productName,
  chatLink,
  onSuccess,
  showCollect = true,
  showChat = true,
  buttonText,
}: PurchaseBarProps) {
  const { pay } = useAppContext()
  const router = useRouter()
  const [isCollected, setIsCollected] = useState(false)

const handlePurchase = () => {
    const success = pay(price, productName, "product")
    if (success) {
      if (onSuccess) {
        onSuccess()
      } else {
        router.push("/messages")
      }
    }
  }

return (
    <div className="fixed bottom-16 left-0 right-0 px-4 py-3 bg-background/95 backdrop-blur-lg border-t border-white/10 z-30">
      <div className="flex items-center gap-3">
        {showCollect && (
          <button
            onClick={() => setIsCollected(!isCollected)}
            className={`flex flex-col items-center justify-center w-12 shrink-0 transition-colors ${isCollected ? "text-red-500" : "text-white/60 hover:text-primary"}`}
          >
            <Heart size={20} className={isCollected ? "fill-red-500" : ""} />
            <span className="text-[10px] mt-0.5">收藏</span>
          </button>
        )}
        {showChat && chatLink && (
          <Link
            href={chatLink}
            className="flex flex-col items-center justify-center w-12 shrink-0 text-white/60 hover:text-primary transition-colors"
          >
            <MessageCircle size={20} />
            <span className="text-[10px] mt-0.5">咨询</span>
          </Link>
        )}
        <Button className="flex-1 bg-primary text-black font-bold hover:bg-primary/90 h-11" onClick={handlePurchase}>
          <Coins size={16} className="mr-1" />
          {buttonText || `立即购买 (${price}币)`}
        </Button>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/course/[id]/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { ArrowLeft, Star, Clock, Users, PlayCircle, Lock, Share2, Coins } from "lucide-react"
import Image from "next/image"
import Link from "next/link"
import { useState } from "react"
import { useRouter } from "next/navigation"
import { PurchaseBar } from "@/components/shared/purchase-bar"

const courseData: Record<string, any> = {
  "1": {
    id: "1",
    streamerId: "1",
    title: "打野进阶课：从入门到王者",
    cover: "/live-lol.jpg",
    streamer: {
      name: "GM-远洋",
      avatar: "/streamer-1.jpg",
      title: "国服第一盲僧",
    },
    price: 299,
    originalPrice: 499,
    students: 1205,
    duration: "8节课 (120分钟)",
    rating: 4.9,
    lessons: [
      { title: "01. 打野基础思路与路线规划", duration: "15:00", isFree: true },
      { title: "02. 如何高效刷野与反野", duration: "18:30", isFree: false },
      { title: "03. Gank时机与路线选择", duration: "20:00", isFree: false },
      { title: "04. 控龙与峡谷先锋运营", duration: "16:45", isFree: false },
      { title: "05. 团战切入时机详解", duration: "22:10", isFree: false },
      { title: "06. 逆风局如何翻盘", duration: "19:20", isFree: false },
    ],
  },
  "2": {
    id: "2",
    streamerId: "2",
    title: "无畏契约枪法训练营",
    cover: "/live-valorant.jpg",
    streamer: { name: "卡若", avatar: "/streamer-2.jpg", title: "前职业选手" },
    price: 399,
    originalPrice: 599,
    students: 856,
    duration: "10节课 (150分钟)",
    rating: 4.8,
    lessons: [
      { title: "01. 准星设置与灵敏度调整", duration: "12:00", isFree: true },
      { title: "02. 爆头线与预瞄点位", duration: "20:00", isFree: false },
      { title: "03. 各类枪械弹道控制", duration: "25:00", isFree: false },
      { title: "04. 常用身法技巧详解", duration: "18:00", isFree: false },
      { title: "05. 地图道具使用教学", duration: "22:00", isFree: false },
    ],
  },
  "3": {
    id: "3",
    streamerId: "3",
    title: "和平精英四指操作教学",
    cover: "/live-pubg.jpg",
    streamer: { name: "小美", avatar: "/streamer-3.jpg", title: "全国冠军" },
    price: 199,
    originalPrice: 299,
    students: 2340,
    duration: "6节课 (90分钟)",
    rating: 4.9,
    lessons: [
      { title: "01. 四指操作键位设置", duration: "10:00", isFree: true },
      { title: "02. 基础移动与射击配合", duration: "15:00", isFree: false },
      { title: "03. 压枪技巧与弹道控制", duration: "20:00", isFree: false },
      { title: "04. 载具战斗与转移技巧", duration: "18:00", isFree: false },
    ],
  },
  "4": {
    id: "4",
    streamerId: "4",
    title: "原神深渊满星攻略",
    cover: "/live-genshin.jpg",
    streamer: { name: "星辰", avatar: "/streamer-4.jpg", title: "原神攻略大神" },
    price: 149,
    originalPrice: 249,
    students: 3450,
    duration: "5节课 (75分钟)",
    rating: 4.7,
    lessons: [
      { title: "01. 深渊机制与阵容搭配", duration: "18:00", isFree: true },
      { title: "02. 各层怪物特性解析", duration: "20:00", isFree: false },
      { title: "03. 圣遗物选择与词条优化", duration: "22:00", isFree: false },
      { title: "04. 手法与连招技巧", duration: "15:00", isFree: false },
    ],
  },
  "5": {
    id: "5",
    streamerId: "5",
    title: "王者荣耀上分秘籍",
    cover: "/live-hok.jpg",
    streamer: { name: "阿杰", avatar: "/streamer-5.jpg", title: "国服百星" },
    price: 249,
    originalPrice: 399,
    students: 4560,
    duration: "8节课 (120分钟)",
    rating: 4.8,
    lessons: [
      { title: "01. 段位机制与上分心态", duration: "12:00", isFree: true },
      { title: "02. 各路位选英雄推荐", duration: "18:00", isFree: false },
      { title: "03. 对线技巧与兵线控制", duration: "20:00", isFree: false },
      { title: "04. 节奏把控与支援时机", duration: "22:00", isFree: false },
      { title: "05. 团战站位与技能释放", duration: "25:00", isFree: false },
    ],
  },
  "6": {
    id: "6",
    streamerId: "6",
    title: "魔兽世界团本攻略",
    cover: "/live-wow.jpg",
    streamer: { name: "暗影", avatar: "/streamer-6.jpg", title: "首杀团队成员" },
    price: 499,
    originalPrice: 799,
    students: 890,
    duration: "12节课 (200分钟)",
    rating: 4.9,
    lessons: [
      { title: "01. 团队配置与职责分工", duration: "15:00", isFree: true },
      { title: "02. BOSS机制详细解析", duration: "30:00", isFree: false },
      { title: "03. 治疗与坦克配合要点", duration: "25:00", isFree: false },
      { title: "04. DPS输出循环优化", duration: "28:00", isFree: false },
      { title: "05. 困难模式特殊机制", duration: "35:00", isFree: false },
    ],
  },
}

export default function CourseDetailPage({ params }: { params: { id: string } }) {
  const router = useRouter()
  const [showShareModal, setShowShareModal] = useState(false)

const course = courseData[params.id] || courseData["1"]

const handleShare = (platform: string) => {
    setShowShareModal(false)
  }

return (
    <div className="min-h-screen bg-background pb-36">
      {/* Header Image */}
      <div className="relative aspect-video w-full">
        <Image src={course.cover || "/placeholder.svg"} alt="Course Cover" fill className="object-cover" />
        <div className="absolute inset-0 bg-black/30" />
        <Link
          href="/"
          className="absolute top-4 left-4 w-10 h-10 rounded-full bg-black/50 backdrop-blur-md flex items-center justify-center text-white hover:bg-black/70 transition-colors"
        >
          <ArrowLeft size={20} />
        </Link>
        <button
          onClick={() => setShowShareModal(true)}
          className="absolute top-4 right-4 w-10 h-10 rounded-full bg-black/50 backdrop-blur-md flex items-center justify-center text-white hover:bg-black/70 transition-colors"
        >
          <Share2 size={20} />
        </button>
        <div className="absolute inset-0 flex items-center justify-center">
          <div className="w-16 h-16 rounded-full bg-white/20 backdrop-blur-sm flex items-center justify-center cursor-pointer hover:scale-110 transition-transform">
            <PlayCircle size={48} className="text-white fill-white/20" />
          </div>
        </div>
        {/* Updated currency display */}
        <div className="absolute bottom-4 right-4 px-3 py-1.5 rounded-lg bg-primary/90 backdrop-blur-sm flex items-center gap-1">
          <span className="text-black font-bold text-lg">{course.price}</span>
          <Coins size={14} className="text-black/70" />
          <span className="text-black/70 text-xs">币</span>
          <span className="text-black/50 text-xs ml-2 line-through">{course.originalPrice}</span>
        </div>
      </div>

<div className="p-4">
        <div className="mb-4">
          <h1 className="text-xl font-bold mb-2">{course.title}</h1>
          <div className="flex items-center gap-4 text-xs text-white/60">
            <span className="flex items-center gap-1">
              <Star size={14} className="text-primary fill-primary" />
              {course.rating}分
            </span>
            <span className="flex items-center gap-1">
              <Clock size={14} /> {course.duration}
            </span>
            <span className="flex items-center gap-1">
              <Users size={14} /> {course.students}人已学
            </span>
          </div>
        </div>

<Link
          href={`/live/${course.streamerId}`}
          className="flex items-center gap-3 p-3 rounded-xl bg-white/5 mb-6 hover:bg-white/10 transition-colors"
        >
          <div className="w-12 h-12 rounded-full overflow-hidden border-2 border-primary relative">
            <Image src={course.streamer.avatar || "/placeholder.svg"} alt="Instructor" fill className="object-cover" />
          </div>
          <div className="flex-1">
            <h3 className="font-bold text-sm">{course.streamer.name}</h3>
            <p className="text-xs text-white/50">{course.streamer.title}</p>
          </div>
          <button className="px-4 py-1.5 rounded-full border border-primary text-primary text-xs font-bold hover:bg-primary hover:text-black transition-colors">
            关注
          </button>
        </Link>

<div className="mb-6">
          <h3 className="font-bold text-lg mb-4">课程目录</h3>
          <div className="space-y-3">
            {course.lessons.map((lesson: any, i: number) => (
              <div
                key={i}
                className="flex items-center gap-4 p-3 rounded-xl hover:bg-white/5 transition-colors cursor-pointer group"
              >
                <div className="w-8 h-8 rounded-full bg-white/5 flex items-center justify-center text-xs font-bold text-white/50 group-hover:bg-primary group-hover:text-black transition-colors">
                  {i + 1}
                </div>
                <div className="flex-1">
                  <h4 className="text-sm font-medium mb-1 group-hover:text-primary transition-colors">
                    {lesson.title}
                  </h4>
                  <span className="text-xs text-white/40">{lesson.duration}</span>
                </div>
                {lesson.isFree ? (
                  <div className="px-2 py-0.5 rounded bg-green-500/20 text-green-500 text-[10px] font-bold">试看</div>
                ) : (
                  <Lock size={16} className="text-white/30" />
                )}
              </div>
            ))}
          </div>
        </div>
      </div>

<PurchaseBar
        price={course.price}
        productName={course.title}
        chatLink={`/chat/course-${params.id}`}
        onSuccess={() => router.push("/messages")}
      />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/vip/page.tsx" isMerged="true"
"use client"

import { ArrowLeft, Crown, Coins, Building2, Coffee, Gamepad2, Gift, Star } from "lucide-react"
import { useRouter } from "next/navigation"
import { useAppContext } from "@/components/providers/app-provider"
import { useState } from "react"

export default function VIPPage() {
  const router = useRouter()
  const { pay, wallet, updateUser, user } = useAppContext()
  const [selectedPlan, setSelectedPlan] = useState<"month" | "quarter" | "year">("month")

const plans = {
    month: { price: 30, coins: 300, label: "月卡", days: 30 },
    quarter: { price: 80, coins: 800, label: "季卡", days: 90, save: "11%" },
    year: { price: 280, coins: 2800, label: "年卡", days: 365, save: "22%" },
  }

const benefits = [
    { icon: Building2, title: "电竞酒店9折", desc: "全国合作酒店通用" },
    { icon: Coffee, title: "网咖8折特权", desc: "特权公馆专属" },
    { icon: Gamepad2, title: "陪玩优先匹配", desc: "专属匹配通道" },
    { icon: Gift, title: "每月专属礼包", desc: "限定装扮+道具" },
    { icon: Star, title: "专属客服", desc: "1对1VIP服务" },
    { icon: Crown, title: "尊贵标识", desc: "个人主页专属展示" },
  ]

const handleSubscribe = () => {
    const plan = plans[selectedPlan]
    const success = pay(plan.coins, `玩值黑卡会员${plan.label}`, "service")
    if (success) {
      updateUser({ isVip: true })
      router.push("/profile")
    }
  }

return (
    <div className="min-h-screen bg-gradient-to-b from-yellow-900/20 to-background pb-32">
      {/* Header */}
      <header className="sticky top-0 z-40 bg-black/50 backdrop-blur-md px-4 py-3 flex items-center gap-3">
        <button onClick={() => router.back()} className="text-white/70 hover:text-white">
          <ArrowLeft size={20} />
        </button>
        <h1 className="font-bold text-lg">玩值黑卡会员</h1>
      </header>

<div className="p-4 space-y-6">
        {/* VIP Card */}
        <div className="relative bg-gradient-to-br from-yellow-600 via-yellow-700 to-yellow-900 rounded-2xl p-6 overflow-hidden">
          <div className="absolute top-0 right-0 w-32 h-32 bg-yellow-400/20 rounded-full blur-3xl" />
          <div className="relative z-10">
            <div className="flex items-center gap-3 mb-4">
              <div className="w-12 h-12 rounded-full bg-black/30 flex items-center justify-center">
                <Crown size={24} className="text-yellow-300" />
              </div>
              <div>
                <h2 className="font-bold text-xl text-white">玩值黑卡</h2>
                <p className="text-xs text-yellow-200/70">尊享电竞特权</p>
              </div>
            </div>
            <div className="flex items-center gap-2 text-yellow-200/80 text-sm">
              <Coins size={16} />
              <span>当前余额: {wallet.balance} 币</span>
            </div>
          </div>
        </div>

{/* Plan Selection */}
        <div className="space-y-3">
          <h3 className="font-bold text-sm text-white/70">选择套餐</h3>
          <div className="grid grid-cols-3 gap-3">
            {(Object.entries(plans) as [keyof typeof plans, typeof plans.month][]).map(([key, plan]) => (
              <button
                key={key}
                onClick={() => setSelectedPlan(key)}
                className={`relative p-4 rounded-xl border-2 transition-all ${
                  selectedPlan === key
                    ? "border-yellow-500 bg-yellow-500/10"
                    : "border-white/10 bg-white/5 hover:border-white/20"
                }`}
              >
                {plan.save && (
                  <div className="absolute -top-2 -right-2 bg-red-500 text-white text-[10px] px-1.5 py-0.5 rounded-full font-bold">
                    省{plan.save}
                  </div>
                )}
                <div className="text-center">
                  <p className="text-xs text-white/60 mb-1">{plan.label}</p>
                  <p className="text-xl font-bold text-yellow-400">{plan.coins}</p>
                  <p className="text-[10px] text-white/40">币</p>
                </div>
              </button>
            ))}
          </div>
        </div>

{/* Benefits */}
        <div className="space-y-3">
          <h3 className="font-bold text-sm text-white/70">会员特权</h3>
          <div className="grid grid-cols-2 gap-3">
            {benefits.map((benefit, i) => (
              <div key={i} className="bg-white/5 border border-white/5 rounded-xl p-3 flex items-center gap-3">
                <div className="w-10 h-10 rounded-full bg-yellow-500/10 flex items-center justify-center">
                  <benefit.icon size={20} className="text-yellow-400" />
                </div>
                <div>
                  <p className="text-sm font-bold">{benefit.title}</p>
                  <p className="text-[10px] text-white/40">{benefit.desc}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

{/* Bottom Purchase Bar */}
      <div className="fixed bottom-16 left-0 right-0 px-4 py-3 bg-background/95 backdrop-blur-lg border-t border-white/10 z-30">
        <div className="flex items-center gap-3">
          <div className="flex-1">
            <p className="text-xs text-white/60">已选: {plans[selectedPlan].label}</p>
            <p className="text-xl font-bold text-yellow-400 flex items-center gap-1">
              <Coins size={18} />
              {plans[selectedPlan].coins} 币
            </p>
          </div>
          <button
            onClick={handleSubscribe}
            className="px-8 py-3 rounded-full bg-gradient-to-r from-yellow-500 to-yellow-600 text-black font-bold active:scale-95 transition-transform flex items-center gap-2"
          >
            <Coins size={18} />
            立即开通
          </button>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/profile/page.tsx" isEdit="true" isMerged="true"
"use client"

import {
  Settings,
  ChevronRight,
  FileText,
  MessageSquare,
  BookOpen,
  Bell,
  LogOut,
  Wallet,
  Ticket,
  History,
  User,
  Medal,
  Coins,
  Edit3,
  Camera,
  HelpCircle,
} from "lucide-react"
import Image from "next/image"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { useAppContext } from "@/components/providers/app-provider"
import { useRouter } from "next/navigation"
import { useState } from "react"

export default function ProfilePage() {
  const { user, wallet, logout } = useAppContext()
  const router = useRouter()
  const [showLogoutConfirm, setShowLogoutConfirm] = useState(false)

const handleLogout = () => {
    setShowLogoutConfirm(true)
  }

const confirmLogout = () => {
    logout()
    router.push("/login")
  }

return (
    <div className="min-h-screen pb-24 bg-background">
      {/* Header Area */}
      <div className="relative h-72 bg-gradient-to-b from-zinc-800 to-background">
        <div className="absolute top-0 inset-x-0 h-full bg-[url('/abstract-esports-pattern.jpg')] opacity-20 bg-cover bg-center mix-blend-overlay" />

<div className="relative z-10 pt-safe px-4">
          <div className="flex justify-between items-center h-12 mb-4">
            <Link href="/settings">
              <Button
                variant="ghost"
                size="icon"
                className="text-foreground/80 hover:text-foreground hover:bg-foreground/10"
              >
                <Settings size={20} />
              </Button>
            </Link>
            <div className="flex gap-2">
              <Link
                href="/recharge"
                className="flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-foreground/10 hover:bg-foreground/20 transition-colors"
              >
                <Coins size={14} className="text-primary" />
                <span className="text-sm font-bold">{wallet.balance}</span>
                <span className="text-xs text-foreground/50">币</span>
              </Link>
              <Link href="/messages">
                <Button
                  variant="ghost"
                  size="icon"
                  className="text-foreground/80 hover:text-foreground hover:bg-foreground/10 relative"
                >
                  <Bell size={20} />
                  <span className="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full"></span>
                </Button>
              </Link>
            </div>
          </div>

<div className="flex items-center gap-4 mb-6">
            <Link href="/profile/edit" className="relative">
              <div className="relative w-24 h-24 rounded-full border-2 border-primary p-1 shadow-lg shadow-primary/20">
                <Image
                  src={user.avatar || "/gamer-profile-avatar.jpg"}
                  alt="Profile"
                  fill
                  className="rounded-full object-cover"
                />
                <div className="absolute bottom-0 right-0 bg-gradient-to-r from-primary to-cyan-500 text-[10px] px-2 py-0.5 rounded-full text-white font-bold border-2 border-background">
                  LV.{user.level || 8}
                </div>
              </div>
              <div className="absolute -bottom-1 -right-1 w-7 h-7 rounded-full bg-primary flex items-center justify-center">
                <Camera size={14} className="text-white" />
              </div>
            </Link>
            <div className="flex-1">
              <div className="flex items-center gap-2 mb-1">
                <h2 className="text-xl font-bold text-foreground">{user.name}</h2>
                <Link href="/profile/edit">
                  <Edit3 size={14} className="text-foreground/50" />
                </Link>
              </div>
              <p className="text-xs text-foreground/60 bg-foreground/10 px-2 py-0.5 rounded-full inline-block mb-2">
                ID: {user.odlId || "888888"}
              </p>
              <p className="text-xs text-foreground/40">电竞达人 | 王者荣耀主播</p>
            </div>
          </div>

<div className="flex justify-between text-foreground/90 px-4 bg-foreground/5 rounded-xl py-3">
            <div className="text-center flex-1">
              <div className="text-lg font-bold text-primary">{user.activity || 0}</div>
              <div className="text-xs text-foreground/50">获赞</div>
            </div>
            <div className="w-px bg-foreground/10"></div>
            <div className="text-center flex-1">
              <div className="text-lg font-bold">{user.following || 0}</div>
              <div className="text-xs text-foreground/50">关注</div>
            </div>
            <div className="w-px bg-foreground/10"></div>
            <div className="text-center flex-1">
              <div className="text-lg font-bold">{user.followers || 0}</div>
              <div className="text-xs text-foreground/50">粉丝</div>
            </div>
          </div>
        </div>
      </div>

{/* Content Area */}
      <div className="px-4 -mt-6 relative z-20 space-y-4">
        {/* VIP Card */}
        <Link
          href="/vip"
          className="block bg-gradient-to-r from-yellow-600 to-yellow-800 rounded-xl p-4 text-white shadow-lg shadow-yellow-900/20"
        >
          <div className="flex justify-between items-center mb-2">
            <h3 className="font-bold flex items-center gap-2">
              <Medal size={16} className="text-yellow-200" />
              玩值黑卡会员
            </h3>
            <span className="text-xs bg-black/20 px-2 py-1 rounded-full flex items-center gap-1">
              <Coins size={10} />
              立即续费
            </span>
          </div>
          <p className="text-xs text-yellow-100/80">享网咖8折、酒店9折特权</p>
        </Link>

{/* Quick Actions */}
        <div className="bg-card border border-border rounded-xl p-4 grid grid-cols-4 gap-4">
          <Link
            href="/recharge"
            className="flex flex-col items-center gap-2 cursor-pointer active:scale-95 transition-transform"
          >
            <div className="w-10 h-10 rounded-full bg-blue-500/10 flex items-center justify-center text-blue-500">
              <Wallet size={20} />
            </div>
            <span className="text-xs text-foreground/70">钱包</span>
          </Link>
          <Link
            href="/coupons"
            className="flex flex-col items-center gap-2 cursor-pointer active:scale-95 transition-transform"
          >
            <div className="w-10 h-10 rounded-full bg-purple-500/10 flex items-center justify-center text-purple-500">
              <Ticket size={20} />
            </div>
            <span className="text-xs text-foreground/70">卡券</span>
          </Link>
          <Link
            href="/transaction-history"
            className="flex flex-col items-center gap-2 cursor-pointer active:scale-95 transition-transform"
          >
            <div className="w-10 h-10 rounded-full bg-green-500/10 flex items-center justify-center text-green-500">
              <History size={20} />
            </div>
            <span className="text-xs text-foreground/70">账单</span>
          </Link>
          <Link
            href="/dress-up"
            className="flex flex-col items-center gap-2 cursor-pointer active:scale-95 transition-transform"
          >
            <div className="w-10 h-10 rounded-full bg-pink-500/10 flex items-center justify-center text-pink-500">
              <User size={20} />
            </div>
            <span className="text-xs text-foreground/70">装扮</span>
          </Link>
        </div>

<div className="space-y-1 rounded-xl overflow-hidden bg-card border border-border">
          {[
            { icon: FileText, label: "我的订单", href: "/orders" },
            { icon: BookOpen, label: "我的课程", href: "/my-courses" },
            { icon: HelpCircle, label: "账号与帮助", href: "/account-help" },
            { icon: MessageSquare, label: "联系客服", href: "/customer-service" },
          ].map((item, i) => (
            <Link
              key={i}
              href={item.href}
              className="w-full flex items-center justify-between p-4 hover:bg-foreground/5 active:bg-foreground/10 transition-colors border-b border-border last:border-0"
            >
              <span className="text-sm text-foreground flex items-center gap-3">
                <item.icon size={18} className="text-foreground/60" />
                {item.label}
              </span>
              <ChevronRight size={16} className="text-foreground/30" />
            </Link>
          ))}
        </div>

{/* Logout Confirmation Modal */}
      {showLogoutConfirm && (
        <div className="fixed inset-0 z-50 bg-black/80 flex items-center justify-center p-4">
          <div className="bg-card rounded-2xl p-6 w-full max-w-sm border border-border">
            <h3 className="text-lg font-bold text-foreground text-center mb-2">确认退出</h3>
            <p className="text-sm text-foreground/60 text-center mb-6">退出后需要重新登录才能使用完整功能</p>
            <div className="flex gap-3">
              <Button
                variant="outline"
                className="flex-1 border-border bg-transparent"
                onClick={() => setShowLogoutConfirm(false)}
              >
                取消
              </Button>
              <Button className="flex-1 bg-red-500 hover:bg-red-600" onClick={confirmLogout}>
                确认退出
              </Button>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import {
  Search,
  Bell,
  Flame,
  Sword,
  Crosshair,
  Crown,
  Gift,
  Zap,
  Building2,
  Gamepad2,
  Target,
  Shield,
  Wand2,
  Users,
  Coins,
} from "lucide-react"
import Image from "next/image"
import Link from "next/link"
import { toast } from "@/hooks/use-toast"
import { useRouter } from "next/navigation"
import { useAppContext } from "@/components/providers/app-provider"

export default function HomePage() {
  const router = useRouter()
  const { wallet } = useAppContext()

const handleJoinTeam = () => {
    toast({
      title: "申请已发送",
      description: "车队队长稍后会联系您",
    })
  }

const starPlayers = [
    {
      id: "1",
      name: "GM-远洋",
      title: "国服第一盲僧",
      heat: "125.6w",
      fans: "46.8w",
      image: "/streamer-1.jpg",
      isLive: true,
    },
    {
      id: "2",
      name: "卡若",
      title: "职业战队退役",
      heat: "82.3w",
      fans: "32.5w",
      image: "/streamer-2.jpg",
      isLive: true,
    },
    {
      id: "3",
      name: "小柠檬",
      title: "人皮话多",
      heat: "56.2w",
      fans: "18.9w",
      image: "/streamer-3.jpg",
      isLive: false,
    },
    {
      id: "4",
      name: "阿伟",
      title: "绝地求生刚枪王",
      heat: "42.1w",
      fans: "12.6w",
      image: "/streamer-4.jpg",
      isLive: false,
    },
  ]

const gamePointCards = [
    { name: "暗黑破坏神4", icon: "/game-diablo.jpg", discount: "85折", tag: "热卖", link: "/mall/points/diablo" },
    {
      name: "炉石传说",
      icon: "/game-hearthstone.jpg",
      discount: "88折",
      tag: "新品",
      link: "/mall/points/hearthstone",
    },
    { name: "守望先锋2", icon: "/game-overwatch.jpg", discount: "9折", tag: "", link: "/mall/points/overwatch" },
    { name: "英雄联盟", icon: "/game-lol.jpg", discount: "92折", tag: "热门", link: "/mall/points/lol" },
    { name: "王者荣耀", icon: "/game-hok.jpg", discount: "95折", tag: "", link: "/mall/points/hok" },
    { name: "原神", icon: "/game-genshin.jpg", discount: "9折", tag: "限量", link: "/mall/points/genshin" },
    { name: "和平精英", icon: "/game-pubg.jpg", discount: "88折", tag: "", link: "/mall/points/pubg" },
    { name: "无畏契约", icon: "/point-card-valorant.jpg", discount: "9折", tag: "", link: "/mall/points/valorant" },
  ]

const gameIcons = [
    {
      name: "英雄联盟",
      icon: Sword,
      color: "text-blue-400",
      bg: "bg-blue-500/10",
      border: "border-blue-500/20",
      link: "/zone/lol",
    },
    {
      name: "无畏契约",
      icon: Crosshair,
      color: "text-red-400",
      bg: "bg-red-500/10",
      border: "border-red-500/20",
      link: "/zone/val",
    },
    {
      name: "王者荣耀",
      icon: Crown,
      color: "text-yellow-400",
      bg: "bg-yellow-500/10",
      border: "border-yellow-500/20",
      link: "/zone/hok",
    },
    {
      name: "CS2",
      icon: Target,
      color: "text-orange-400",
      bg: "bg-orange-500/10",
      border: "border-orange-500/20",
      link: "/zone/csgo",
    },
    {
      name: "原神",
      icon: Wand2,
      color: "text-cyan-400",
      bg: "bg-cyan-500/10",
      border: "border-cyan-500/20",
      link: "/zone/genshin",
    },
    {
      name: "和平精英",
      icon: Shield,
      color: "text-green-400",
      bg: "bg-green-500/10",
      border: "border-green-500/20",
      link: "/zone/pubg",
    },
    {
      name: "Apex",
      icon: Gamepad2,
      color: "text-pink-400",
      bg: "bg-pink-500/10",
      border: "border-pink-500/20",
      link: "/zone/apex",
    },
  ]

return (
    <div className="flex flex-col min-h-screen pb-24 bg-background">
      {/* Header */}
      <header className="sticky top-0 z-40 bg-[#0D0D15]/80 backdrop-blur-md border-b border-white/5 px-4 py-3 flex items-center justify-between transition-all duration-300">
        <div className="flex items-center gap-3">
          <div className="relative w-8 h-8 rounded-lg overflow-hidden border border-white/10">
            <div className="absolute inset-0 bg-gradient-to-br from-purple-600 to-blue-600 opacity-80" />
            <div className="absolute inset-0 flex items-center justify-center font-black italic text-white text-xs">
              WZ
            </div>
          </div>
          <h1 className="font-bold text-lg tracking-tight text-white">玩值电竞</h1>
        </div>
        <div className="flex items-center gap-3">
          <Link
            href="/recharge"
            className="flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-white/5 border border-white/10 hover:bg-white/10 transition-colors"
          >
            <Coins size={14} className="text-primary" />
            <span className="text-xs font-bold">{wallet.balance}</span>
          </Link>
          <button className="w-9 h-9 rounded-full bg-white/5 flex items-center justify-center hover:bg-white/10 transition-colors border border-white/5">
            <Search size={18} className="text-white/70" />
          </button>
          <Link
            href="/messages"
            className="w-9 h-9 rounded-full bg-white/5 flex items-center justify-center hover:bg-white/10 transition-colors relative border border-white/5"
          >
            <Bell size={18} className="text-white/70" />
            <span className="absolute top-2 right-2.5 w-1.5 h-1.5 bg-red-500 rounded-full ring-2 ring-black" />
          </Link>
        </div>
      </header>

<div className="p-4 space-y-6">
        {/* Hero Banner */}
        <div
          className="relative w-full aspect-[16/9] rounded-2xl overflow-hidden group cursor-pointer shadow-2xl shadow-purple-500/10"
          onClick={() => router.push("/events/today")}
        >
          <Image
            src="/tournament-event-today.jpg"
            alt="Today's Tournament"
            fill
            className="object-cover transition-transform duration-700 group-hover:scale-105"
          />
          <div className="absolute inset-0 bg-gradient-to-t from-[#0D0D15] via-transparent to-transparent" />
          <div className="absolute bottom-0 left-0 p-5 w-full">
            <div className="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full bg-secondary/90 backdrop-blur-md text-[10px] font-bold mb-2 shadow-lg shadow-secondary/20">
              <span className="w-1.5 h-1.5 rounded-full bg-white animate-pulse" />
              LIVE
            </div>
            <h2 className="text-xl font-bold leading-tight mb-1 text-white">2025 玩值杯全明星邀请赛</h2>
            <p className="text-xs text-white/70">顶级战队集结，争夺百万奖金池</p>
          </div>
        </div>

{/* 游戏点卡补贴 */}
        <section className="space-y-3">
          <div className="flex items-center justify-between px-1">
            <h3 className="font-bold text-base flex items-center gap-2 text-white">
              <Gift size={16} className="text-yellow-400" />
              游戏点卡补贴
            </h3>
            <Link href="/mall/points" className="text-xs text-primary flex items-center gap-1">
              查看更多 <Zap size={12} />
            </Link>
          </div>
          <div
            className="flex gap-2 overflow-x-auto no-scrollbar pb-1"
            style={{ scrollbarWidth: "none", msOverflowStyle: "none" }}
          >
            {gamePointCards.map((card, i) => (
              <Link
                key={i}
                href={card.link}
                className="flex-shrink-0 w-[72px] bg-[#1A1A22] rounded-xl p-2 flex flex-col items-center gap-2 relative overflow-hidden group hover:bg-[#20202A] transition-colors border border-white/5"
              >
                {card.tag && (
                  <div className="absolute top-1 right-1 bg-secondary text-[8px] px-1 py-0.5 rounded font-bold text-white">
                    {card.tag}
                  </div>
                )}
                <div className="w-10 h-10 rounded-lg overflow-hidden relative">
                  <Image src={card.icon || "/placeholder.svg"} alt={card.name} fill className="object-cover" />
                </div>
                <div className="text-center">
                  <p className="text-[9px] text-white/80 truncate w-full">{card.name}</p>
                  <p className="text-[10px] font-bold text-yellow-400">{card.discount}</p>
                </div>
              </Link>
            ))}
          </div>
        </section>

{/* 热门推荐 */}
        <section className="space-y-3">
          <div className="flex items-center justify-between px-1">
            <h3 className="font-bold text-base flex items-center gap-2 text-white">
              <Flame size={16} className="text-red-500 fill-red-500" />
              热门推荐
            </h3>
          </div>

{/* 游戏专区图标 */}
        <div className="grid grid-cols-4 gap-3 px-1">
          {gameIcons.map((game, i) => {
            const IconComponent = game.icon
            return (
              <Link href={game.link} key={i} className="flex flex-col items-center gap-2 group cursor-pointer">
                <div
                  className={`w-12 h-12 rounded-xl ${game.bg} ${game.border} border flex items-center justify-center group-hover:scale-105 transition-transform relative overflow-hidden shadow-lg`}
                >
                  <IconComponent className={game.color} size={22} />
                </div>
                <span className="text-[10px] font-medium text-white/60 group-hover:text-white transition-colors">
                  {game.name}
                </span>
              </Link>
            )
          })}
        </div>

<section className="space-y-3">
          <div className="flex items-center justify-between">
            <h3 className="font-bold text-base flex items-center gap-2 text-white">
              <Flame size={16} className="text-secondary" />
              全网明星大神
            </h3>
            <Link href="/mall/companion" className="text-xs text-white/50 hover:text-secondary transition-colors">
              查看全部
            </Link>
          </div>

<div className="grid grid-cols-2 gap-3">
            {starPlayers.map((star) => (
              <Link
                key={star.id}
                href={`/live/${star.id}`}
                className="relative aspect-[3/4] rounded-xl overflow-hidden group cursor-pointer border border-white/5 shadow-lg"
              >
                <Image
                  src={star.image || "/placeholder.svg"}
                  alt={star.name}
                  fill
                  className="object-cover transition-transform duration-500 group-hover:scale-110"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-transparent to-transparent" />

{star.isLive && (
                  <div className="absolute top-2 left-2 flex items-center gap-1 bg-secondary/90 backdrop-blur-md px-2 py-0.5 rounded-md text-[10px] font-bold text-white border border-white/20 animate-pulse shadow-lg shadow-secondary/30">
                    <span className="w-1.5 h-1.5 rounded-full bg-white" />
                    直播中
                  </div>
                )}

<div className="absolute bottom-0 left-0 w-full p-3 space-y-1">
                  <h4 className="font-bold text-sm text-white truncate">{star.name}</h4>
                  <p className="text-[10px] text-white/70 truncate">{star.title}</p>
                  <div className="flex items-center gap-3 text-[10px]">
                    <span className="flex items-center gap-1 text-pink-400">
                      <Flame size={10} className="fill-pink-400" />
                      热度 {star.heat}
                    </span>
                    <span className="flex items-center gap-1 text-blue-400">
                      <Users size={10} />
                      粉丝 {star.fans}
                    </span>
                  </div>
                </div>
              </Link>
            ))}
          </div>
        </section>
      </div>

const API_KEY = "p8k68-bx4ax-dadd0-twk5p-qh1a4"
const API_BASE_URL = "http://ckbapi.quwanzhi.com/v1/api/scenarios"

function generateSign(params: Record<string, any>, apiKey: string): string {
  // 1. 移除 sign、apiKey、portrait 字段
  const signParams = { ...params }
  delete signParams.sign
  delete signParams.apiKey
  delete signParams.portrait

// 2. 移除空值字段
  const filteredParams: Record<string, any> = {}
  Object.entries(signParams).forEach(([key, value]) => {
    if (value !== null && value !== undefined && value !== "") {
      filteredParams[key] = value
    }
  })

// 3. 按参数名升序排序
  const sortedKeys = Object.keys(filteredParams).sort()

// 4. 拼接参数值（只取值，不加分隔符）
  const stringToSign = sortedKeys.map((key) => filteredParams[key]).join("")

// 5. 第一次 MD5
  const firstMd5 = crypto.createHash("md5").update(stringToSign, "utf8").digest("hex")

// 6. 拼接 apiKey 再次 MD5
  const sign = crypto
    .createHash("md5")
    .update(firstMd5 + apiKey, "utf8")
    .digest("hex")

return sign
}

export async function POST(request: NextRequest) {
  try {
    const body = await request.json()
    const { name, phone, source = "玩值电竞APP", remark = "", tags = "", siteTags = "", portrait } = body

if (!phone) {
      return NextResponse.json({ success: false, message: "手机号码为必填项" }, { status: 400 })
    }

// Validate phone number format
    const phoneRegex = /^1[3-9]\d{9}$/
    if (!phoneRegex.test(phone)) {
      return NextResponse.json({ success: false, message: "请输入有效的手机号码" }, { status: 400 })
    }

// Generate timestamp (seconds)
    const timestamp = Math.floor(Date.now() / 1000)

const requestParams: Record<string, any> = {
      timestamp,
      phone,
    }

// 只添加非空字段
    if (name) requestParams.name = name
    if (source) requestParams.source = source
    if (remark) requestParams.remark = remark
    if (tags) requestParams.tags = tags
    if (siteTags) requestParams.siteTags = siteTags

const sign = generateSign(requestParams, API_KEY)

const requestBody: Record<string, any> = {
      apiKey: API_KEY,
      sign,
      timestamp,
      phone,
    }

if (name) requestBody.name = name
    if (source) requestBody.source = source
    if (remark) requestBody.remark = remark
    if (tags) requestBody.tags = tags
    if (siteTags) requestBody.siteTags = siteTags
    if (portrait) requestBody.portrait = portrait

const controller = new AbortController()
    const timeoutId = setTimeout(() => controller.abort(), 10000)

try {
      const response = await fetch(API_BASE_URL, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${API_KEY}`,
        },
        body: JSON.stringify(requestBody),
        signal: controller.signal,
      })

clearTimeout(timeoutId)

const responseText = await response.text()
      let result: any = null

try {
        result = JSON.parse(responseText)
      } catch {
        console.log("External API returned non-JSON response:", responseText.substring(0, 100))
        return NextResponse.json({
          success: true,
          message: "信息已提交",
          data: { submitted: true },
        })
      }

if (response.ok && result.code === 200) {
        return NextResponse.json({
          success: true,
          message: result.message || "信息提交成功",
          data: result.data,
        })
      } else {
        // 记录错误但仍返回成功（避免影响用户体验）
        console.log("External API error:", result)
        return NextResponse.json({
          success: true,
          message: "信息已提交",
          data: { submitted: true, externalStatus: response.status },
        })
      }
    } catch (fetchError: any) {
      clearTimeout(timeoutId)

if (fetchError.name === "AbortError") {
        console.log("External API request timed out")
      } else {
        console.log("External API fetch error:", fetchError.message)
      }

return NextResponse.json({
        success: true,
        message: "信息已记录",
        data: { submitted: true, offline: true },
      })
    }
  } catch (error) {
    console.error("Customer API error:", error)
    return NextResponse.json({
      success: true,
      message: "信息已记录",
      data: { submitted: true, fallback: true },
    })
  }
}
[V0_FILE]typescript:file="lib/db/schema.ts" isMerged="true"
// 玩值电竞 - 完整数据库模式定义
// 使用 Dexie.js (IndexedDB) 作为本地数据库

import Dexie, { type Table } from "dexie"

// ==================== 用户相关 ====================

export interface User {
  id?: number
  odlId: string // 旧版用户ID兼容
  phone: string
  password?: string // 加密存储
  name: string
  avatar: string
  level: number
  experience: number
  isVip: boolean
  vipType?: "month" | "quarter" | "year"
  vipExpiry?: string
  gender: "male" | "female" | "unknown"
  birthday?: string
  bio?: string
  tags: string[]
  activity: number
  following: number
  followers: number
  visitors: number
  balance: number // 玩值币余额
  totalRecharge: number // 总充值金额
  totalSpent: number // 总消费金额
  inviteCode?: string
  invitedBy?: string
  registerSource: string
  registerTime: string
  lastLoginTime: string
  status: "active" | "banned" | "deleted"
  createdAt: string
  updatedAt: string
}

export interface UserAuth {
  id?: number
  userId: number
  authType: "phone" | "wechat" | "qq" | "weibo"
  authId: string // 第三方ID或手机号
  accessToken?: string
  refreshToken?: string
  expiresAt?: string
  createdAt: string
}

export interface UserFollow {
  id?: number
  userId: number
  followUserId: number
  followType: "user" | "streamer" | "star"
  createdAt: string
}

// ==================== 主播相关 ====================

export interface Streamer {
  id?: number
  userId: number // 关联用户
  name: string
  avatar: string
  coverImage: string
  title: string
  game: string
  gameId: number
  tags: string[]
  level: number
  fans: number
  hotValue: number // 热度值
  isLive: boolean
  liveRoomId?: string
  totalGifts: number
  totalIncome: number
  guildId?: number // 所属公会
  commissionRate: number // 佣金比例
  status: "pending" | "approved" | "rejected" | "suspended"
  verifiedAt?: string
  createdAt: string
  updatedAt: string
}

export interface StreamerCourse {
  id?: number
  streamerId: number
  title: string
  description: string
  coverImage: string
  price: number
  originalPrice: number
  duration: number // 总时长(分钟)
  lessonsCount: number
  studentsCount: number
  rating: number
  game: string
  category: string
  tags: string[]
  lessons: CourseLesson[]
  status: "draft" | "published" | "offline"
  createdAt: string
  updatedAt: string
}

export interface CourseLesson {
  id: number
  title: string
  duration: number // 分钟
  isFree: boolean
  videoUrl?: string
  order: number
}

export interface CoursePurchase {
  id?: number
  userId: number
  courseId: number
  streamerId: number
  price: number
  progress: number // 学习进度百分比
  lastWatchedLesson?: number
  purchasedAt: string
  completedAt?: string
}

// ==================== 公会/俱乐部 ====================

export interface Guild {
  id?: number
  name: string
  logo: string
  coverImage: string
  description: string
  ownerId: number
  memberCount: number
  maxMembers: number
  level: number
  totalIncome: number
  commissionRate: number // 平台抽成比例
  tags: string[]
  games: string[]
  requirements: string
  benefits: string[]
  status: "active" | "suspended" | "dissolved"
  createdAt: string
  updatedAt: string
}

export interface GuildMember {
  id?: number
  guildId: number
  userId: number
  role: "owner" | "admin" | "member"
  contribution: number // 贡献值
  monthlyIncome: number
  joinedAt: string
  status: "active" | "left" | "kicked"
}

export interface GuildApplication {
  id?: number
  guildId: number
  userId: number
  message: string
  status: "pending" | "approved" | "rejected"
  reviewedBy?: number
  reviewedAt?: string
  createdAt: string
}

// ==================== 明星/大神 ====================

export interface Star {
  id?: number
  userId: number
  name: string
  avatar: string
  coverImage: string
  title: string
  game: string
  gameId: number
  tags: string[]
  fans: number
  hotValue: number // 热度值(万)
  achievements: string[]
  teamName?: string
  socialLinks: {
    weibo?: string
    douyin?: string
    bilibili?: string
  }
  partyRoomId?: string // 派对群ID
  hourlyRate: number // 每小时价格
  isOnline: boolean
  status: "active" | "suspended"
  verifiedAt: string
  createdAt: string
  updatedAt: string
}

export interface StarPartyRoom {
  id?: number
  starId: number
  name: string
  memberCount: number
  maxMembers: number
  entryFee: number
  description: string
  rules: string[]
  isActive: boolean
  createdAt: string
}

export interface StarPartyMember {
  id?: number
  partyRoomId: number
  userId: number
  role: "host" | "vip" | "member"
  joinedAt: string
  expiredAt?: string
}

// ==================== CP/陪练 ====================

export interface Companion {
  id?: number
  userId: number
  name: string
  avatar: string
  coverImage: string
  gender: "male" | "female"
  age: number
  tags: string[]
  games: string[]
  voiceSample?: string
  bio: string
  price: number // 每小时价格
  originalPrice: number
  rating: number
  ordersCount: number
  responseRate: number
  onlineStatus: "online" | "busy" | "offline"
  category: "cp" | "coach" // CP或陪练
  coachType?: "pro" | "master" // 职业选手/王者大神
  rank?: string // 游戏段位
  guildId?: number
  commissionRate: number
  status: "active" | "suspended" | "reviewing"
  createdAt: string
  updatedAt: string
}

export interface CompanionOrder {
  id?: number
  orderNo: string
  userId: number
  companionId: number
  type: "cp" | "coach"
  game: string
  hours: number
  price: number
  totalAmount: number
  message?: string
  status: "pending" | "accepted" | "in_progress" | "completed" | "cancelled" | "refunded"
  startTime?: string
  endTime?: string
  rating?: number
  review?: string
  createdAt: string
  updatedAt: string
}

// ==================== 星球匹配 ====================

export interface PlanetMatch {
  id?: number
  userId: number
  matchType: "star" | "guild" | "cp" | "coach"
  preferences: {
    games?: string[]
    gender?: string
    priceRange?: [number, number]
    tags?: string[]
  }
  matchedId?: number // 匹配结果ID
  matchScore?: number // 匹配度
  status: "matching" | "matched" | "cancelled"
  createdAt: string
  matchedAt?: string
}

// ==================== 直播相关 ====================

export interface LiveRoom {
  id?: number
  streamerId: number
  title: string
  coverImage: string
  game: string
  viewers: number
  peakViewers: number
  likes: number
  gifts: LiveGift[]
  status: "live" | "offline" | "replay"
  startTime?: string
  endTime?: string
  duration?: number
  createdAt: string
}

export interface LiveGift {
  id?: number
  liveRoomId: number
  userId: number
  giftId: number
  giftName: string
  giftIcon: string
  price: number
  quantity: number
  totalAmount: number
  createdAt: string
}

export interface LiveComment {
  id?: number
  liveRoomId: number
  userId: number
  userName: string
  userAvatar: string
  content: string
  type: "normal" | "gift" | "enter" | "follow"
  createdAt: string
}

// ==================== 商城相关 ====================

export interface Product {
  id?: number
  name: string
  description: string
  image: string
  images: string[]
  category: "skin" | "equipment" | "points" | "peripheral" | "gift"
  game?: string
  price: number
  originalPrice: number
  stock: number
  sales: number
  rating: number
  tags: string[]
  specifications?: ProductSpec[]
  status: "active" | "soldout" | "offline"
  createdAt: string
  updatedAt: string
}

export interface ProductSpec {
  name: string
  options: string[]
}

export interface CartItem {
  id?: number
  userId: number
  productId: number
  quantity: number
  selectedSpecs?: Record<string, string>
  createdAt: string
}

export interface ProductOrder {
  id?: number
  orderNo: string
  userId: number
  items: OrderItem[]
  totalAmount: number
  discountAmount: number
  finalAmount: number
  status: "pending" | "paid" | "shipped" | "completed" | "cancelled" | "refunded"
  shippingAddress?: ShippingAddress
  trackingNo?: string
  paidAt?: string
  shippedAt?: string
  completedAt?: string
  createdAt: string
  updatedAt: string
}

export interface OrderItem {
  productId: number
  productName: string
  productImage: string
  price: number
  quantity: number
  specs?: Record<string, string>
}

export interface ShippingAddress {
  name: string
  phone: string
  province: string
  city: string
  district: string
  address: string
  isDefault: boolean
}

// ==================== 游戏点卡 ====================

export interface GamePointCard {
  id?: number
  game: string
  gameId: number
  gameLogo: string
  name: string
  description: string
  faceValue: number // 面值
  price: number
  discount: number
  stock: number
  sales: number
  deliveryType: "instant" | "manual"
  instructions: string
  status: "active" | "soldout" | "offline"
  createdAt: string
}

export interface PointCardOrder {
  id?: number
  orderNo: string
  userId: number
  cardId: number
  game: string
  faceValue: number
  price: number
  quantity: number
  totalAmount: number
  cardCodes?: string[] // 卡密
  status: "pending" | "paid" | "delivered" | "used" | "refunded"
  createdAt: string
  deliveredAt?: string
}

// ==================== 账号交易/典当 ====================

export interface GameAccount {
  id?: number
  sellerId: number
  game: string
  gameId: number
  server: string
  title: string
  description: string
  images: string[]
  level: number
  rank?: string
  skins: string[]
  heroes: string[]
  assets: Record<string, number> // 游戏资产
  price: number
  originalPrice?: number
  evaluatedPrice?: number // AI评估价
  status: "reviewing" | "listed" | "sold" | "offline" | "pawned"
  viewCount: number
  favoriteCount: number
  createdAt: string
  updatedAt: string
}

export interface AccountPawn {
  id?: number
  userId: number
  accountId: number
  game: string
  evaluatedValue: number // 评估价值
  pawnAmount: number // 典当金额
  serviceFee: number // 服务费
  redeemAmount: number // 赎回金额
  period: 7 | 15 | 30 // 典当期限(天)
  phone: string
  screenshots: string[]
  antiAddiction: "none" | "limited" | "full"
  canRename: "yes" | "no" | "once"
  selectedSkins: string[]
  agreementSigned: boolean
  status: "pending" | "evaluating" | "approved" | "active" | "redeemed" | "overdue" | "forfeited"
  approvedAt?: string
  redeemedAt?: string
  expiresAt?: string
  createdAt: string
  updatedAt: string
}

export interface AccountTransaction {
  id?: number
  orderNo: string
  buyerId: number
  sellerId: number
  accountId: number
  price: number
  platformFee: number
  sellerIncome: number
  status: "pending" | "paid" | "transferring" | "completed" | "disputed" | "refunded"
  createdAt: string
  completedAt?: string
}

// ==================== 电竞酒店/网咖 ====================

export interface EsportsVenue {
  id?: number
  name: string
  type: "hotel" | "cafe"
  logo: string
  images: string[]
  description: string
  address: string
  city: string
  district: string
  latitude: number
  longitude: number
  phone: string
  rating: number
  reviewCount: number
  pricePerHour?: number // 网咖按小时
  pricePerNight?: number // 酒店按晚
  facilities: string[]
  tags: string[]
  openTime: string
  closeTime: string
  isOpen24Hours: boolean
  status: "active" | "closed" | "renovating"
  createdAt: string
  updatedAt: string
}

export interface VenueRoom {
  id?: number
  venueId: number
  name: string
  type: "single" | "double" | "vip" | "booth"
  capacity: number
  price: number
  images: string[]
  facilities: string[]
  status: "available" | "occupied" | "maintenance"
}

export interface VenueBooking {
  id?: number
  orderNo: string
  userId: number
  venueId: number
  roomId?: number
  type: "hotel" | "cafe"
  checkInTime: string
  checkOutTime: string
  duration: number // 小时
  price: number
  totalAmount: number
  guests: number
  contactName: string
  contactPhone: string
  status: "pending" | "confirmed" | "checked_in" | "completed" | "cancelled"
  createdAt: string
  confirmedAt?: string
}

// ==================== 钱包/交易 ====================

export interface Transaction {
  id?: number
  userId: number
  orderNo: string
  type: "recharge" | "withdraw" | "purchase" | "gift" | "income" | "refund" | "transfer"
  category: string // 具体分类
  amount: number
  balanceBefore: number
  balanceAfter: number
  relatedId?: number // 关联订单ID
  relatedType?: string // 关联类型
  description: string
  status: "pending" | "completed" | "failed"
  createdAt: string
}

export interface RechargeOrder {
  id?: number
  orderNo: string
  userId: number
  amount: number
  bonusAmount: number // 赠送金额
  totalAmount: number
  paymentMethod: "wechat" | "alipay" | "card"
  status: "pending" | "paid" | "failed" | "refunded"
  paidAt?: string
  createdAt: string
}

export interface WithdrawOrder {
  id?: number
  orderNo: string
  userId: number
  amount: number
  fee: number
  actualAmount: number
  accountType: "wechat" | "alipay" | "bank"
  accountInfo: string
  status: "pending" | "processing" | "completed" | "rejected"
  reviewedBy?: number
  reviewedAt?: string
  completedAt?: string
  rejectReason?: string
  createdAt: string
}

// ==================== 消息/通知 ====================

export interface Message {
  id?: number
  conversationId: number
  senderId: number
  receiverId: number
  type: "text" | "image" | "voice" | "gift" | "system"
  content: string
  mediaUrl?: string
  duration?: number // 语音时长
  isRead: boolean
  createdAt: string
}

export interface Conversation {
  id?: number
  type: "private" | "group" | "system"
  participants: number[]
  lastMessage?: string
  lastMessageTime?: string
  unreadCount: number
  isPinned: boolean
  isMuted: boolean
  createdAt: string
  updatedAt: string
}

export interface Notification {
  id?: number
  userId: number
  type: "system" | "order" | "follow" | "like" | "comment" | "gift" | "activity"
  title: string
  content: string
  image?: string
  link?: string
  isRead: boolean
  createdAt: string
}

// ==================== 动态/社交 ====================

export interface Moment {
  id?: number
  userId: number
  userName: string
  userAvatar: string
  content: string
  images: string[]
  video?: string
  game?: string
  tags: string[]
  location?: string
  likes: number
  comments: number
  shares: number
  isLiked: boolean
  visibility: "public" | "followers" | "private"
  status: "active" | "deleted" | "hidden"
  createdAt: string
  updatedAt: string
}

export interface MomentLike {
  id?: number
  momentId: number
  userId: number
  createdAt: string
}

export interface MomentComment {
  id?: number
  momentId: number
  userId: number
  userName: string
  userAvatar: string
  content: string
  replyTo?: number // 回复的评论ID
  replyToUser?: string
  likes: number
  status: "active" | "deleted"
  createdAt: string
}

// ==================== 游戏数据 ====================

export interface Game {
  id?: number
  name: string
  shortName: string
  logo: string
  coverImage: string
  category: "moba" | "fps" | "mmorpg" | "card" | "sports" | "other"
  platform: ("pc" | "mobile" | "console")[]
  publisher: string
  isHot: boolean
  sortOrder: number
  status: "active" | "inactive"
  createdAt: string
}

export interface GameServer {
  id?: number
  gameId: number
  name: string
  region: string
  sortOrder: number
  status: "active" | "inactive"
}

// ==================== 数据库类定义 ====================

export class WanzhiDatabase extends Dexie {
  // 用户相关
  users!: Table<User>
  userAuths!: Table<UserAuth>
  userFollows!: Table<UserFollow>

// 主播相关
  streamers!: Table<Streamer>
  streamerCourses!: Table<StreamerCourse>
  coursePurchases!: Table<CoursePurchase>

// 公会相关
  guilds!: Table<Guild>
  guildMembers!: Table<GuildMember>
  guildApplications!: Table<GuildApplication>

// 明星相关
  stars!: Table<Star>
  starPartyRooms!: Table<StarPartyRoom>
  starPartyMembers!: Table<StarPartyMember>

// CP/陪练
  companions!: Table<Companion>
  companionOrders!: Table<CompanionOrder>

// 星球匹配
  planetMatches!: Table<PlanetMatch>

// 直播相关
  liveRooms!: Table<LiveRoom>
  liveGifts!: Table<LiveGift>
  liveComments!: Table<LiveComment>

// 商城相关
  products!: Table<Product>
  cartItems!: Table<CartItem>
  productOrders!: Table<ProductOrder>

// 游戏点卡
  gamePointCards!: Table<GamePointCard>
  pointCardOrders!: Table<PointCardOrder>

// 账号交易/典当
  gameAccounts!: Table<GameAccount>
  accountPawns!: Table<AccountPawn>
  accountTransactions!: Table<AccountTransaction>

// 电竞酒店/网咖
  esportsVenues!: Table<EsportsVenue>
  venueRooms!: Table<VenueRoom>
  venueBookings!: Table<VenueBooking>

// 钱包/交易
  transactions!: Table<Transaction>
  rechargeOrders!: Table<RechargeOrder>
  withdrawOrders!: Table<WithdrawOrder>

// 消息/通知
  messages!: Table<Message>
  conversations!: Table<Conversation>
  notifications!: Table<Notification>

// 动态/社交
  moments!: Table<Moment>
  momentLikes!: Table<MomentLike>
  momentComments!: Table<MomentComment>

// 游戏数据
  games!: Table<Game>
  gameServers!: Table<GameServer>

constructor() {
    super("WanzhiEsportsDB")

this.version(1).stores({
      // 用户相关
      users: "++id, odlId, phone, name, status, createdAt",
      userAuths: "++id, userId, authType, authId",
      userFollows: "++id, userId, followUserId, followType",

// 主播相关
      streamers: "++id, userId, name, game, guildId, status, isLive",
      streamerCourses: "++id, streamerId, game, status, price",
      coursePurchases: "++id, userId, courseId, streamerId",

// 公会相关
      guilds: "++id, name, ownerId, status",
      guildMembers: "++id, guildId, userId, role, status",
      guildApplications: "++id, guildId, userId, status",

// 明星相关
      stars: "++id, userId, name, game, status",
      starPartyRooms: "++id, starId, isActive",
      starPartyMembers: "++id, partyRoomId, userId",

// CP/陪练
      companions: "++id, userId, category, gender, status, onlineStatus",
      companionOrders: "++id, orderNo, userId, companionId, status",

// 星球匹配
      planetMatches: "++id, userId, matchType, status",

// 直播相关
      liveRooms: "++id, streamerId, game, status",
      liveGifts: "++id, liveRoomId, userId",
      liveComments: "++id, liveRoomId, userId",

// 商城相关
      products: "++id, name, category, game, status",
      cartItems: "++id, userId, productId",
      productOrders: "++id, orderNo, userId, status",

// 游戏点卡
      gamePointCards: "++id, game, gameId, status",
      pointCardOrders: "++id, orderNo, userId, status",

// 账号交易/典当
      gameAccounts: "++id, sellerId, game, status",
      accountPawns: "++id, userId, accountId, status",
      accountTransactions: "++id, orderNo, buyerId, sellerId, status",

// 电竞酒店/网咖
      esportsVenues: "++id, name, type, city, status",
      venueRooms: "++id, venueId, type, status",
      venueBookings: "++id, orderNo, userId, venueId, status",

// 钱包/交易
      transactions: "++id, userId, orderNo, type, status",
      rechargeOrders: "++id, orderNo, userId, status",
      withdrawOrders: "++id, orderNo, userId, status",

// 消息/通知
      messages: "++id, conversationId, senderId, receiverId, isRead",
      conversations: "++id, type, updatedAt",
      notifications: "++id, userId, type, isRead",

// 动态/社交
      moments: "++id, userId, game, status, createdAt",
      momentLikes: "++id, momentId, userId",
      momentComments: "++id, momentId, userId",

// 游戏数据
      games: "++id, name, category, isHot, sortOrder",
      gameServers: "++id, gameId, region",
    })
  }
}

// 创建数据库实例
export const db = new WanzhiDatabase()
[V0_FILE]typescript:file="lib/db/seed.ts" isMerged="true"
// 数据库初始化种子数据
import { db } from "./schema"
import type { User, Game, Streamer, Star, Guild, Companion, EsportsVenue, Product, GamePointCard } from "./schema"

export async function seedDatabase() {
  // 检查是否已初始化
  const existingUsers = await db.users.count()
  if (existingUsers > 0) {
    console.log("[v0] Database already seeded")
    return
  }

console.log("[v0] Seeding database...")

// 1. 初始化游戏数据
  const games: Omit<Game, "id">[] = [
    {
      name: "王者荣耀",
      shortName: "wzry",
      logo: "/wzry.jpg",
      coverImage: "/wzry-cover.jpg",
      category: "moba",
      platform: ["mobile"],
      publisher: "腾讯",
      isHot: true,
      sortOrder: 1,
      status: "active",
      createdAt: new Date().toISOString(),
    },
    {
      name: "英雄联盟",
      shortName: "lol",
      logo: "/lol.jpg",
      coverImage: "/lol-cover.jpg",
      category: "moba",
      platform: ["pc"],
      publisher: "腾讯",
      isHot: true,
      sortOrder: 2,
      status: "active",
      createdAt: new Date().toISOString(),
    },
    {
      name: "和平精英",
      shortName: "pubgm",
      logo: "/pubgm.jpg",
      coverImage: "/pubgm-cover.jpg",
      category: "fps",
      platform: ["mobile"],
      publisher: "腾讯",
      isHot: true,
      sortOrder: 3,
      status: "active",
      createdAt: new Date().toISOString(),
    },
    {
      name: "原神",
      shortName: "ys",
      logo: "/ys.jpg",
      coverImage: "/ys-cover.jpg",
      category: "mmorpg",
      platform: ["pc", "mobile"],
      publisher: "米哈游",
      isHot: true,
      sortOrder: 4,
      status: "active",
      createdAt: new Date().toISOString(),
    },
    {
      name: "无畏契约",
      shortName: "valorant",
      logo: "/valorant.jpg",
      coverImage: "/valorant-cover.jpg",
      category: "fps",
      platform: ["pc"],
      publisher: "拳头",
      isHot: true,
      sortOrder: 5,
      status: "active",
      createdAt: new Date().toISOString(),
    },
    {
      name: "穿越火线",
      shortName: "cf",
      logo: "/cf.jpg",
      coverImage: "/cf-cover.jpg",
      category: "fps",
      platform: ["pc", "mobile"],
      publisher: "腾讯",
      isHot: false,
      sortOrder: 6,
      status: "active",
      createdAt: new Date().toISOString(),
    },
    {
      name: "梦幻西游",
      shortName: "mhxy",
      logo: "/mhxy.jpg",
      coverImage: "/mhxy-cover.jpg",
      category: "mmorpg",
      platform: ["pc", "mobile"],
      publisher: "网易",
      isHot: false,
      sortOrder: 7,
      status: "active",
      createdAt: new Date().toISOString(),
    },
    {
      name: "三角洲行动",
      shortName: "delta",
      logo: "/delta.jpg",
      coverImage: "/delta-cover.jpg",
      category: "fps",
      platform: ["pc", "mobile"],
      publisher: "腾讯",
      isHot: true,
      sortOrder: 8,
      status: "active",
      createdAt: new Date().toISOString(),
    },
  ]
  await db.games.bulkAdd(games)

// 2. 初始化默认用户
  const defaultUser: Omit<User, "id"> = {
    odlId: "888888",
    phone: "13800138000",
    name: "卡若",
    avatar: "/gamer-boy-esports-jersey.jpg",
    level: 12,
    experience: 2450,
    isVip: false,
    gender: "male",
    tags: ["英雄联盟", "王者荣耀"],
    activity: 128,
    following: 45,
    followers: 892,
    visitors: 1205,
    balance: 6880,
    totalRecharge: 10000,
    totalSpent: 3120,
    registerSource: "app",
    registerTime: "2023-01-15",
    lastLoginTime: new Date().toISOString(),
    status: "active",
    createdAt: "2023-01-15",
    updatedAt: new Date().toISOString(),
  }
  await db.users.add(defaultUser)

// 3. 初始化主播数据
  const streamers: Omit<Streamer, "id">[] = [
    {
      userId: 1,
      name: "GM-远洋",
      avatar: "/streamer-1.jpg",
      coverImage: "/lol-stream.jpg",
      title: "国服第一盲僧",
      game: "英雄联盟",
      gameId: 2,
      tags: ["打野", "教学"],
      level: 28,
      fans: 1256000,
      hotValue: 125.6,
      isLive: true,
      totalGifts: 89000,
      totalIncome: 156000,
      commissionRate: 0.7,
      status: "approved",
      verifiedAt: "2023-02-01",
      createdAt: "2023-01-20",
      updatedAt: new Date().toISOString(),
    },
    {
      userId: 2,
      name: "小狐狸",
      avatar: "/streamer-2.jpg",
      coverImage: "/valorant-stream.jpg",
      title: "无畏契约电竞女神",
      game: "无畏契约",
      gameId: 5,
      tags: ["竞技", "颜值"],
      level: 25,
      fans: 856000,
      hotValue: 89.2,
      isLive: true,
      totalGifts: 67000,
      totalIncome: 98000,
      commissionRate: 0.7,
      status: "approved",
      verifiedAt: "2023-03-01",
      createdAt: "2023-02-15",
      updatedAt: new Date().toISOString(),
    },
    {
      userId: 3,
      name: "王者阿杰",
      avatar: "/streamer-3.jpg",
      coverImage: "/wzry-stream.jpg",
      title: "国服最强边路",
      game: "王者荣耀",
      gameId: 1,
      tags: ["边路", "上分"],
      level: 30,
      fans: 2100000,
      hotValue: 168.5,
      isLive: false,
      totalGifts: 125000,
      totalIncome: 230000,
      commissionRate: 0.75,
      status: "approved",
      verifiedAt: "2023-01-10",
      createdAt: "2022-12-01",
      updatedAt: new Date().toISOString(),
    },
    {
      userId: 4,
      name: "原神小可爱",
      avatar: "/streamer-4.jpg",
      coverImage: "/ys-stream.jpg",
      title: "深渊满星攻略",
      game: "原神",
      gameId: 4,
      tags: ["攻略", "抽卡"],
      level: 22,
      fans: 568000,
      hotValue: 56.8,
      isLive: true,
      totalGifts: 45000,
      totalIncome: 78000,
      commissionRate: 0.65,
      status: "approved",
      verifiedAt: "2023-04-01",
      createdAt: "2023-03-10",
      updatedAt: new Date().toISOString(),
    },
    {
      userId: 5,
      name: "吃鸡大魔王",
      avatar: "/streamer-5.jpg",
      coverImage: "/pubgm-stream.jpg",
      title: "单排上分王",
      game: "和平精英",
      gameId: 3,
      tags: ["吃鸡", "技巧"],
      level: 26,
      fans: 980000,
      hotValue: 98.0,
      isLive: true,
      totalGifts: 72000,
      totalIncome: 135000,
      commissionRate: 0.7,
      status: "approved",
      verifiedAt: "2023-02-15",
      createdAt: "2023-01-25",
      updatedAt: new Date().toISOString(),
    },
    {
      userId: 6,
      name: "魔兽老玩家",
      avatar: "/streamer-6.jpg",
      coverImage: "/wow-stream.jpg",
      title: "怀旧服金团领队",
      game: "魔兽世界",
      gameId: 9,
      tags: ["怀旧", "金团"],
      level: 20,
      fans: 320000,
      hotValue: 32.5,
      isLive: false,
      totalGifts: 28000,
      totalIncome: 52000,
      commissionRate: 0.65,
      status: "approved",
      verifiedAt: "2023-05-01",
      createdAt: "2023-04-20",
      updatedAt: new Date().toISOString(),
    },
  ]
  await db.streamers.bulkAdd(streamers)

// 4. 初始化明星数据
  const stars: Omit<Star, "id">[] = [
    {
      userId: 10,
      name: "Faker",
      avatar: "/star-faker.jpg",
      coverImage: "/star-faker-cover.jpg",
      title: "LOL传奇中单",
      game: "英雄联盟",
      gameId: 2,
      tags: ["世界冠军", "中单"],
      fans: 46800000,
      hotValue: 468.0,
      achievements: ["三冠王", "S赛MVP"],
      teamName: "T1",
      socialLinks: { weibo: "faker_lol" },
      partyRoomId: "faker-party",
      hourlyRate: 9999,
      isOnline: true,
      status: "active",
      verifiedAt: "2022-01-01",
      createdAt: "2022-01-01",
      updatedAt: new Date().toISOString(),
    },
    {
      userId: 11,
      name: "Uzi",
      avatar: "/star-uzi.jpg",
      coverImage: "/star-uzi-cover.jpg",
      title: "永远的神",
      game: "英雄联盟",
      gameId: 2,
      tags: ["ADC", "传奇"],
      fans: 38500000,
      hotValue: 385.0,
      achievements: ["MSI冠军", "LPL冠军"],
      teamName: "RNG",
      socialLinks: { weibo: "uzi_lol", douyin: "uzi" },
      partyRoomId: "uzi-party",
      hourlyRate: 8888,
      isOnline: false,
      status: "active",
      verifiedAt: "2022-01-01",
      createdAt: "2022-01-01",
      updatedAt: new Date().toISOString(),
    },
    {
      userId: 12,
      name: "梦泪",
      avatar: "/star-menglei.jpg",
      coverImage: "/star-menglei-cover.jpg",
      title: "国服第一韩信",
      game: "王者荣耀",
      gameId: 1,
      tags: ["韩信", "打野"],
      fans: 52000000,
      hotValue: 520.0,
      achievements: ["KPL冠军", "最佳打野"],
      teamName: "AG超玩会",
      socialLinks: { douyin: "menglei" },
      partyRoomId: "menglei-party",
      hourlyRate: 6666,
      isOnline: true,
      status: "active",
      verifiedAt: "2022-06-01",
      createdAt: "2022-06-01",
      updatedAt: new Date().toISOString(),
    },
    {
      userId: 13,
      name: "不求人",
      avatar: "/star-buqiuren.jpg",
      coverImage: "/star-buqiuren-cover.jpg",
      title: "和平精英一哥",
      game: "和平精英",
      gameId: 3,
      tags: ["吃鸡", "主播"],
      fans: 41000000,
      hotValue: 410.0,
      achievements: ["PEL冠军", "全明星MVP"],
      socialLinks: { douyin: "buqiuren" },
      partyRoomId: "buqiuren-party",
      hourlyRate: 5888,
      isOnline: true,
      status: "active",
      verifiedAt: "2022-03-01",
      createdAt: "2022-03-01",
      updatedAt: new Date().toISOString(),
    },
  ]
  await db.stars.bulkAdd(stars)

// 5. 初始化公会数据
  const guilds: Omit<Guild, "id">[] = [
    {
      name: "星耀电竞",
      logo: "/guild-xingyao.jpg",
      coverImage: "/guild-xingyao-cover.jpg",
      description: "顶级电竞公会，培养众多职业选手",
      ownerId: 1,
      memberCount: 1280,
      maxMembers: 2000,
      level: 8,
      totalIncome: 2580000,
      commissionRate: 0.1,
      tags: ["职业", "培训"],
      games: ["英雄联盟", "王者荣耀"],
      requirements: "段位王者以上",
      benefits: ["签约底薪", "流量扶持", "赛事推荐"],
      status: "active",
      createdAt: "2022-01-01",
      updatedAt: new Date().toISOString(),
    },
    {
      name: "凤凰涅槃",
      logo: "/guild-fenghuang.jpg",
      coverImage: "/guild-fenghuang-cover.jpg",
      description: "女主播孵化基地",
      ownerId: 2,
      memberCount: 860,
      maxMembers: 1500,
      level: 6,
      totalIncome: 1680000,
      commissionRate: 0.12,
      tags: ["颜值", "才艺"],
      games: ["王者荣耀", "和平精英"],
      requirements: "颜值在线，有才艺",
      benefits: ["形象包装", "运营指导", "商务对接"],
      status: "active",
      createdAt: "2022-06-01",
      updatedAt: new Date().toISOString(),
    },
    {
      name: "暗影战队",
      logo: "/guild-anying.jpg",
      coverImage: "/guild-anying-cover.jpg",
      description: "FPS游戏专业公会",
      ownerId: 3,
      memberCount: 520,
      maxMembers: 1000,
      level: 5,
      totalIncome: 980000,
      commissionRate: 0.1,
      tags: ["FPS", "硬核"],
      games: ["和平精英", "无畏契约", "穿越火线"],
      requirements: "FPS游戏高段位",
      benefits: ["战队训练", "比赛机会", "装备赞助"],
      status: "active",
      createdAt: "2023-01-01",
      updatedAt: new Date().toISOString(),
    },
  ]
  await db.guilds.bulkAdd(guilds)

// 6. 初始化CP/陪练数据
  const companions: Omit<Companion, "id">[] = [
    {
      userId: 20,
      name: "甜心小姐姐",
      avatar: "/cp-avatar-1.jpg",
      coverImage: "/cp-cover-1.jpg",
      gender: "female",
      age: 22,
      tags: ["甜美", "温柔", "会撒娇"],
      games: ["王者荣耀", "和平精英"],
      bio: "声音甜美，陪你上分更开心~",
      price: 30,
      originalPrice: 50,
      rating: 4.9,
      ordersCount: 1256,
      responseRate: 98,
      onlineStatus: "online",
      category: "cp",
      commissionRate: 0.3,
      status: "active",
      createdAt: "2023-01-01",
      updatedAt: new Date().toISOString(),
    },
    {
      userId: 21,
      name: "电竞小王子",
      avatar: "/cp-avatar-2.jpg",
      coverImage: "/cp-cover-2.jpg",
      gender: "male",
      age: 24,
      tags: ["阳光", "幽默", "技术好"],
      games: ["英雄联盟", "无畏契约"],
      bio: "王者段位，带你轻松上分",
      price: 35,
      originalPrice: 60,
      rating: 4.8,
      ordersCount: 986,
      responseRate: 95,
      onlineStatus: "online",
      category: "cp",
      commissionRate: 0.3,
      status: "active",
      createdAt: "2023-02-01",
      updatedAt: new Date().toISOString(),
    },
    {
      userId: 22,
      name: "职业选手小明",
      avatar: "/coach-avatar-1.jpg",
      coverImage: "/coach-cover-1.jpg",
      gender: "male",
      age: 26,
      tags: ["职业", "教学", "耐心"],
      games: ["英雄联盟"],
      voiceSample: "/voice-sample-1.mp3",
      bio: "前职业选手，专业教学",
      price: 100,
      originalPrice: 150,
      rating: 4.95,
      ordersCount: 568,
      responseRate: 99,
      onlineStatus: "online",
      category: "coach",
      coachType: "pro",
      rank: "王者",
      commissionRate: 0.25,
      status: "active",
      createdAt: "2023-01-15",
      updatedAt: new Date().toISOString(),
    },
    {
      userId: 23,
      name: "王者大神",
      avatar: "/coach-avatar-2.jpg",
      coverImage: "/coach-cover-2.jpg",
      gender: "male",
      age: 23,
      tags: ["上分", "技术流", "细节"],
      games: ["王者荣耀"],
      bio: "国服百星，带你冲击荣耀王者",
      price: 80,
      originalPrice: 120,
      rating: 4.88,
      ordersCount: 892,
      responseRate: 97,
      onlineStatus: "busy",
      category: "coach",
      coachType: "master",
      rank: "荣耀王者100星",
      commissionRate: 0.25,
      status: "active",
      createdAt: "2023-03-01",
      updatedAt: new Date().toISOString(),
    },
  ]
  await db.companions.bulkAdd(companions)

// 7. 初始化电竞酒店/网咖数据
  const venues: Omit<EsportsVenue, "id">[] = [
    {
      name: "玩值电竞酒店(旗舰店)",
      type: "hotel",
      logo: "/hotel-logo-1.jpg",
      images: ["/hotel-1.jpg"],
      description: "五星级电竞酒店体验",
      address: "厦门市思明区软件园二期",
      city: "厦门",
      district: "思明区",
      latitude: 24.4798,
      longitude: 118.0894,
      phone: "0592-12345678",
      rating: 4.9,
      reviewCount: 1256,
      pricePerNight: 399,
      facilities: ["RTX4090", "电竞椅", "144Hz显示器", "独立卫浴"],
      tags: ["热门", "高端"],
      openTime: "00:00",
      closeTime: "24:00",
      isOpen24Hours: true,
      status: "active",
      createdAt: "2022-01-01",
      updatedAt: new Date().toISOString(),
    },
    {
      name: "极客空间电竞公寓",
      type: "hotel",
      logo: "/hotel-logo-2.jpg",
      images: ["/hotel-2.jpg"],
      description: "年轻人的电竞乐园",
      address: "厦门市湖里区五缘湾",
      city: "厦门",
      district: "湖里区",
      latitude: 24.5102,
      longitude: 118.1456,
      phone: "0592-23456789",
      rating: 4.7,
      reviewCount: 896,
      pricePerNight: 299,
      facilities: ["RTX3080", "电竞椅", "双人房"],
      tags: ["性价比"],
      openTime: "00:00",
      closeTime: "24:00",
      isOpen24Hours: true,
      status: "active",
      createdAt: "2022-06-01",
      updatedAt: new Date().toISOString(),
    },
    {
      name: "网鱼网咖(万达店)",
      type: "cafe",
      logo: "/cafe-logo-1.jpg",
      images: ["/cafe-1.jpg"],
      description: "专业电竞网咖",
      address: "厦门市思明区万达广场",
      city: "厦门",
      district: "思明区",
      latitude: 24.4656,
      longitude: 118.1023,
      phone: "0592-34567890",
      rating: 4.8,
      reviewCount: 2356,
      pricePerHour: 12,
      facilities: ["3080显卡", "特权公馆", "现磨咖啡"],
      tags: ["连锁", "环境好"],
      openTime: "00:00",
      closeTime: "24:00",
      isOpen24Hours: true,
      status: "active",
      createdAt: "2021-01-01",
      updatedAt: new Date().toISOString(),
    },
    {
      name: "杰拉电竞馆",
      type: "cafe",
      logo: "/cafe-logo-2.jpg",
      images: ["/cafe-2.jpg"],
      description: "赛事级电竞馆",
      address: "厦门市集美区银泰城",
      city: "厦门",
      district: "集美区",
      latitude: 24.5789,
      longitude: 118.0956,
      phone: "0592-45678901",
      rating: 4.6,
      reviewCount: 1568,
      pricePerHour: 10,
      facilities: ["赛事级配置", "美女陪玩", "独立包间"],
      tags: ["比赛场地"],
      openTime: "09:00",
      closeTime: "02:00",
      isOpen24Hours: false,
      status: "active",
      createdAt: "2022-03-01",
      updatedAt: new Date().toISOString(),
    },
  ]
  await db.esportsVenues.bulkAdd(venues)

// 8. 初始化商品数据
  const products: Omit<Product, "id">[] = [
    {
      name: "王者荣耀皮肤礼包",
      description: "稀有皮肤随机礼包",
      image: "/product-skin-1.jpg",
      images: ["/product-skin-1.jpg"],
      category: "skin",
      game: "王者荣耀",
      price: 199,
      originalPrice: 299,
      stock: 1000,
      sales: 5680,
      rating: 4.8,
      tags: ["热销", "限定"],
      status: "active",
      createdAt: "2023-01-01",
      updatedAt: new Date().toISOString(),
    },
    {
      name: "电竞机械键盘",
      description: "青轴机械键盘，RGB背光",
      image: "/product-keyboard.jpg",
      images: ["/product-keyboard.jpg"],
      category: "peripheral",
      price: 299,
      originalPrice: 399,
      stock: 500,
      sales: 2356,
      rating: 4.9,
      tags: ["外设", "推荐"],
      status: "active",
      createdAt: "2023-02-01",
      updatedAt: new Date().toISOString(),
    },
    {
      name: "游戏鼠标垫",
      description: "超大电竞鼠标垫",
      image: "/product-mousepad.jpg",
      images: ["/product-mousepad.jpg"],
      category: "peripheral",
      price: 59,
      originalPrice: 99,
      stock: 2000,
      sales: 8956,
      rating: 4.7,
      tags: ["热销"],
      status: "active",
      createdAt: "2023-03-01",
      updatedAt: new Date().toISOString(),
    },
  ]
  await db.products.bulkAdd(products)

// 9. 初始化游戏点卡数据
  const pointCards: Omit<GamePointCard, "id">[] = [
    {
      game: "王者荣耀",
      gameId: 1,
      gameLogo: "/wzry.jpg",
      name: "点券充值",
      description: "官方点券直充",
      faceValue: 100,
      price: 98,
      discount: 0.98,
      stock: 9999,
      sales: 12568,
      deliveryType: "instant",
      instructions: "请提供游戏账号",
      status: "active",
      createdAt: "2023-01-01",
    },
    {
      game: "英雄联盟",
      gameId: 2,
      gameLogo: "/lol.jpg",
      name: "点券充值",
      description: "官方点券直充",
      faceValue: 100,
      price: 97,
      discount: 0.97,
      stock: 9999,
      sales: 9856,
      deliveryType: "instant",
      instructions: "请提供游戏账号",
      status: "active",
      createdAt: "2023-01-01",
    },
    {
      game: "原神",
      gameId: 4,
      gameLogo: "/ys.jpg",
      name: "创世结晶",
      description: "官方充值",
      faceValue: 648,
      price: 628,
      discount: 0.97,
      stock: 9999,
      sales: 15689,
      deliveryType: "instant",
      instructions: "请提供UID",
      status: "active",
      createdAt: "2023-01-01",
    },
  ]
  await db.gamePointCards.bulkAdd(pointCards)

console.log("[v0] Database seeded successfully!")
}

// 清空数据库
export async function clearDatabase() {
  await db.delete()
  await db.open()
  console.log("[v0] Database cleared")
}
[V0_FILE]typescript:file="lib/db/hooks.ts" isMerged="true"
// 数据库操作Hooks
"use client"

import { useState, useEffect, useCallback } from "react"
import { db } from "./schema"
import { seedDatabase } from "./seed"
import type {
  User,
  Streamer,
  Star,
  Guild,
  Companion,
  EsportsVenue,
  Product,
  Transaction,
  Moment,
  Message,
  Notification,
} from "./schema"

// 初始化数据库
export function useInitDatabase() {
  const [isReady, setIsReady] = useState(false)
  const [error, setError] = useState<Error | null>(null)

useEffect(() => {
    const init = async () => {
      try {
        await db.open()
        await seedDatabase()
        setIsReady(true)
      } catch (err) {
        console.error("[v0] Database init error:", err)
        setError(err as Error)
      }
    }
    init()
  }, [])

return { isReady, error }
}

// 用户相关
export function useCurrentUser() {
  const [user, setUser] = useState<User | null>(null)
  const [loading, setLoading] = useState(true)

useEffect(() => {
    const loadUser = async () => {
      try {
        const currentUser = await db.users.get(1) // 默认用户ID为1
        setUser(currentUser || null)
      } catch (err) {
        console.error("[v0] Load user error:", err)
      } finally {
        setLoading(false)
      }
    }
    loadUser()
  }, [])

const updateUser = useCallback(
    async (updates: Partial<User>) => {
      if (!user?.id) return
      await db.users.update(user.id, { ...updates, updatedAt: new Date().toISOString() })
      setUser((prev) => (prev ? { ...prev, ...updates } : null))
    },
    [user?.id],
  )

const updateBalance = useCallback(
    async (amount: number, type: "add" | "subtract") => {
      if (!user?.id) return false
      const newBalance = type === "add" ? user.balance + amount : user.balance - amount
      if (newBalance < 0) return false
      await db.users.update(user.id, { balance: newBalance, updatedAt: new Date().toISOString() })
      setUser((prev) => (prev ? { ...prev, balance: newBalance } : null))
      return true
    },
    [user],
  )

return { user, loading, updateUser, updateBalance }
}

// 主播列表
export function useStreamers(options?: { game?: string; isLive?: boolean; limit?: number }) {
  const [streamers, setStreamers] = useState<Streamer[]>([])
  const [loading, setLoading] = useState(true)

useEffect(() => {
    const load = async () => {
      try {
        let query = db.streamers.where("status").equals("approved")
        if (options?.isLive !== undefined) {
          query = db.streamers.where("isLive").equals(options.isLive ? 1 : 0)
        }
        let results = await query.toArray()
        if (options?.game) {
          results = results.filter((s) => s.game === options.game)
        }
        if (options?.limit) {
          results = results.slice(0, options.limit)
        }
        setStreamers(results)
      } catch (err) {
        console.error("[v0] Load streamers error:", err)
      } finally {
        setLoading(false)
      }
    }
    load()
  }, [options?.game, options?.isLive, options?.limit])

return { streamers, loading }
}

// 明星列表
export function useStars(options?: { game?: string; limit?: number }) {
  const [stars, setStars] = useState<Star[]>([])
  const [loading, setLoading] = useState(true)

useEffect(() => {
    const load = async () => {
      try {
        let results = await db.stars.where("status").equals("active").toArray()
        if (options?.game) {
          results = results.filter((s) => s.game === options.game)
        }
        if (options?.limit) {
          results = results.slice(0, options.limit)
        }
        setStars(results)
      } catch (err) {
        console.error("[v0] Load stars error:", err)
      } finally {
        setLoading(false)
      }
    }
    load()
  }, [options?.game, options?.limit])

return { stars, loading }
}

// 公会列表
export function useGuilds(options?: { limit?: number }) {
  const [guilds, setGuilds] = useState<Guild[]>([])
  const [loading, setLoading] = useState(true)

useEffect(() => {
    const load = async () => {
      try {
        let results = await db.guilds.where("status").equals("active").toArray()
        if (options?.limit) {
          results = results.slice(0, options.limit)
        }
        setGuilds(results)
      } catch (err) {
        console.error("[v0] Load guilds error:", err)
      } finally {
        setLoading(false)
      }
    }
    load()
  }, [options?.limit])

return { guilds, loading }
}

// CP/陪练列表
export function useCompanions(options?: { category?: "cp" | "coach"; gender?: string; limit?: number }) {
  const [companions, setCompanions] = useState<Companion[]>([])
  const [loading, setLoading] = useState(true)

useEffect(() => {
    const load = async () => {
      try {
        let results = await db.companions.where("status").equals("active").toArray()
        if (options?.category) {
          results = results.filter((c) => c.category === options.category)
        }
        if (options?.gender) {
          results = results.filter((c) => c.gender === options.gender)
        }
        if (options?.limit) {
          results = results.slice(0, options.limit)
        }
        setCompanions(results)
      } catch (err) {
        console.error("[v0] Load companions error:", err)
      } finally {
        setLoading(false)
      }
    }
    load()
  }, [options?.category, options?.gender, options?.limit])

return { companions, loading }
}

// 电竞酒店/网咖
export function useVenues(options?: { type?: "hotel" | "cafe"; city?: string; limit?: number }) {
  const [venues, setVenues] = useState<EsportsVenue[]>([])
  const [loading, setLoading] = useState(true)

useEffect(() => {
    const load = async () => {
      try {
        let results = await db.esportsVenues.where("status").equals("active").toArray()
        if (options?.type) {
          results = results.filter((v) => v.type === options.type)
        }
        if (options?.city) {
          results = results.filter((v) => v.city === options.city)
        }
        if (options?.limit) {
          results = results.slice(0, options.limit)
        }
        setVenues(results)
      } catch (err) {
        console.error("[v0] Load venues error:", err)
      } finally {
        setLoading(false)
      }
    }
    load()
  }, [options?.type, options?.city, options?.limit])

return { venues, loading }
}

// 商品列表
export function useProducts(options?: { category?: string; game?: string; limit?: number }) {
  const [products, setProducts] = useState<Product[]>([])
  const [loading, setLoading] = useState(true)

useEffect(() => {
    const load = async () => {
      try {
        let results = await db.products.where("status").equals("active").toArray()
        if (options?.category) {
          results = results.filter((p) => p.category === options.category)
        }
        if (options?.game) {
          results = results.filter((p) => p.game === options.game)
        }
        if (options?.limit) {
          results = results.slice(0, options.limit)
        }
        setProducts(results)
      } catch (err) {
        console.error("[v0] Load products error:", err)
      } finally {
        setLoading(false)
      }
    }
    load()
  }, [options?.category, options?.game, options?.limit])

return { products, loading }
}

// 交易记录
export function useTransactions(userId: number, options?: { type?: string; limit?: number }) {
  const [transactions, setTransactions] = useState<Transaction[]>([])
  const [loading, setLoading] = useState(true)

useEffect(() => {
    const load = async () => {
      try {
        let results = await db.transactions.where("userId").equals(userId).toArray()
        if (options?.type) {
          results = results.filter((t) => t.type === options.type)
        }
        results = results.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())
        if (options?.limit) {
          results = results.slice(0, options.limit)
        }
        setTransactions(results)
      } catch (err) {
        console.error("[v0] Load transactions error:", err)
      } finally {
        setLoading(false)
      }
    }
    load()
  }, [userId, options?.type, options?.limit])

return { transactions, loading }
}

// 动态列表
export function useMoments(options?: { userId?: number; limit?: number }) {
  const [moments, setMoments] = useState<Moment[]>([])
  const [loading, setLoading] = useState(true)

const loadMoments = useCallback(async () => {
    try {
      let results = await db.moments.where("status").equals("active").toArray()
      if (options?.userId) {
        results = results.filter((m) => m.userId === options.userId)
      }
      results = results.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())
      if (options?.limit) {
        results = results.slice(0, options.limit)
      }
      setMoments(results)
    } catch (err) {
      console.error("[v0] Load moments error:", err)
    } finally {
      setLoading(false)
    }
  }, [options?.userId, options?.limit])

useEffect(() => {
    loadMoments()
  }, [loadMoments])

const likeMoment = useCallback(
    async (momentId: number) => {
      const moment = await db.moments.get(momentId)
      if (moment) {
        await db.moments.update(momentId, {
          likes: moment.likes + 1,
          isLiked: true,
          updatedAt: new Date().toISOString(),
        })
        await loadMoments()
      }
    },
    [loadMoments],
  )

return { moments, loading, likeMoment, refresh: loadMoments }
}

// 消息列表
export function useMessages(conversationId: number) {
  const [messages, setMessages] = useState<Message[]>([])
  const [loading, setLoading] = useState(true)

useEffect(() => {
    const load = async () => {
      try {
        const results = await db.messages.where("conversationId").equals(conversationId).toArray()
        setMessages(results.sort((a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()))
      } catch (err) {
        console.error("[v0] Load messages error:", err)
      } finally {
        setLoading(false)
      }
    }
    load()
  }, [conversationId])

const sendMessage = useCallback(
    async (content: string, type: "text" | "image" | "voice" = "text") => {
      const newMessage: Omit<Message, "id"> = {
        conversationId,
        senderId: 1, // 当前用户
        receiverId: 0, // 需要从conversation获取
        type,
        content,
        isRead: false,
        createdAt: new Date().toISOString(),
      }
      const id = await db.messages.add(newMessage as Message)
      setMessages((prev) => [...prev, { ...newMessage, id } as Message])
    },
    [conversationId],
  )

return { messages, loading, sendMessage }
}

// 通知列表
export function useNotifications(userId: number) {
  const [notifications, setNotifications] = useState<Notification[]>([])
  const [unreadCount, setUnreadCount] = useState(0)
  const [loading, setLoading] = useState(true)

useEffect(() => {
    const load = async () => {
      try {
        const results = await db.notifications.where("userId").equals(userId).toArray()
        const sorted = results.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())
        setNotifications(sorted)
        setUnreadCount(sorted.filter((n) => !n.isRead).length)
      } catch (err) {
        console.error("[v0] Load notifications error:", err)
      } finally {
        setLoading(false)
      }
    }
    load()
  }, [userId])

const markAsRead = useCallback(async (notificationId: number) => {
    await db.notifications.update(notificationId, { isRead: true })
    setNotifications((prev) => prev.map((n) => (n.id === notificationId ? { ...n, isRead: true } : n)))
    setUnreadCount((prev) => Math.max(0, prev - 1))
  }, [])

const markAllAsRead = useCallback(async () => {
    const unread = notifications.filter((n) => !n.isRead)
    await Promise.all(unread.map((n) => db.notifications.update(n.id!, { isRead: true })))
    setNotifications((prev) => prev.map((n) => ({ ...n, isRead: true })))
    setUnreadCount(0)
  }, [notifications])

return { notifications, unreadCount, loading, markAsRead, markAllAsRead }
}

// 创建订单
export function useCreateOrder() {
  const createTransaction = useCallback(
    async (
      userId: number,
      type: Transaction["type"],
      category: string,
      amount: number,
      description: string,
      relatedId?: number,
      relatedType?: string,
    ) => {
      const user = await db.users.get(userId)
      if (!user) throw new Error("User not found")

const balanceBefore = user.balance
      const balanceAfter =
        type === "recharge" || type === "income" || type === "refund" ? balanceBefore + amount : balanceBefore - amount

if (balanceAfter < 0) {
        throw new Error("Insufficient balance")
      }

const transaction: Omit<Transaction, "id"> = {
        userId,
        orderNo: `TXN${Date.now()}${Math.random().toString(36).substr(2, 6).toUpperCase()}`,
        type,
        category,
        amount,
        balanceBefore,
        balanceAfter,
        relatedId,
        relatedType,
        description,
        status: "completed",
        createdAt: new Date().toISOString(),
      }

await db.transactions.add(transaction as Transaction)
      await db.users.update(userId, { balance: balanceAfter, updatedAt: new Date().toISOString() })

return transaction
    },
    [],
  )

return { createTransaction }
}
[V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true"
import type React from "react"
import type { Metadata } from "next"
import { Inter } from "next/font/google"
import "./globals.css"
import { AppProvider } from "@/components/providers/app-provider"
import { DatabaseProvider } from "@/components/providers/database-provider"
import { Toaster } from "@/components/ui/toaster"

const inter = Inter({ subsets: ["latin"] })

export const metadata: Metadata = {
  title: "玩值电竞 - WanZhi Esports",
  description: "专注打造比体育明星价值高10倍的电竞俱乐部",
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="zh-CN" className="dark">
      <body className={`${inter.className} min-h-screen bg-background text-foreground antialiased overflow-x-hidden`}>
        <DatabaseProvider>
          <AppProvider>{children}</AppProvider>
        </DatabaseProvider>
        <Toaster />
      </body>
    </html>
  )
}
[V0_FILE]typescriptreact:file="components/providers/app-provider.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"
import { createContext, useContext, useState, useEffect, useCallback } from "react"
import { toast } from "@/hooks/use-toast"
import { db } from "@/lib/db/schema"

type User = {
  id?: number
  name: string
  avatar: string
  level: number
  isVip: boolean
  vipType?: "month" | "quarter" | "year"
  vipExpiry?: string
  odlId?: string
  phone?: string
  activity?: number
  following?: number
  followers?: number
  visitors?: number
  isLoggedIn?: boolean
}

type Wallet = {
  balance: number
}

type Order = {
  id: string
  type: "service" | "product" | "recharge" | "hotel" | "cafe" | "course" | "pawn"
  title: string
  price: number
  status: "pending" | "completed" | "cancelled" | "refunded"
  date: string
  image?: string
  orderNo?: string
}

type AppContextType = {
  user: User
  wallet: Wallet
  orders: Order[]
  isLoggedIn: boolean
  recharge: (amount: number) => void
  pay: (amount: number, title: string, type: Order["type"], image?: string) => boolean
  updateUser: (updates: Partial<User>) => void
  login: (phone: string, password?: string) => Promise<boolean>
  logout: () => void
  syncFromDatabase: () => Promise<void>
  saveToDatabase: () => Promise<void>
}

const AppContext = createContext<AppContextType | undefined>(undefined)

export function AppProvider({ children }: { children: React.ReactNode }) {
  const [isLoggedIn, setIsLoggedIn] = useState(true)
  const [user, setUser] = useState<User>({
    name: "电竞玩家",
    avatar: "/gamer-boy-esports-jersey.jpg",
    level: 12,
    isVip: false,
    odlId: "888888",
    activity: 128,
    following: 45,
    followers: 892,
    visitors: 1205,
    isLoggedIn: true,
  })

const [wallet, setWallet] = useState<Wallet>({
    balance: 6880,
  })

const [orders, setOrders] = useState<Order[]>([
    {
      id: "1",
      orderNo: "WZ20240115001",
      type: "service",
      title: "王者荣耀陪玩 - 2小时",
      price: 80,
      status: "completed",
      date: "2024-01-15",
      image: "/王者荣耀.jpg",
    },
    {
      id: "2",
      orderNo: "WZ20240114002",
      type: "course",
      title: "打野进阶课：从入门到王者",
      price: 299,
      status: "completed",
      date: "2024-01-14",
      image: "/lol.jpg",
    },
    {
      id: "3",
      orderNo: "WZ20240113003",
      type: "hotel",
      title: "玩值电竞酒店(旗舰店) - 1晚",
      price: 299,
      status: "completed",
      date: "2024-01-13",
      image: "/hotel-1.jpg",
    },
  ])

const syncFromDatabase = useCallback(async () => {
    try {
      const dbUser = await db.users.get(1)
      if (dbUser) {
        setUser({
          id: dbUser.id,
          name: dbUser.name,
          avatar: dbUser.avatar,
          level: dbUser.level,
          isVip: dbUser.isVip,
          vipType: dbUser.vipType,
          vipExpiry: dbUser.vipExpiry,
          odlId: dbUser.odlId,
          phone: dbUser.phone,
          activity: dbUser.activity,
          following: dbUser.following,
          followers: dbUser.followers,
          visitors: dbUser.visitors,
          isLoggedIn: true,
        })
        setWallet({ balance: dbUser.balance })
        setIsLoggedIn(true)
      }

// 加载订单
      const dbOrders = await db.transactions.where("userId").equals(1).reverse().sortBy("createdAt")
      if (dbOrders.length > 0) {
        const mappedOrders: Order[] = dbOrders.slice(0, 20).map((t) => ({
          id: String(t.id),
          orderNo: t.orderNo,
          type: t.category === "充值" ? "recharge" : t.category === "服务消费" ? "service" : "product",
          title: t.description,
          price: Math.abs(t.amount),
          status: t.status === "completed" ? "completed" : "pending",
          date: t.createdAt.split("T")[0],
        }))
        setOrders((prev) => [...mappedOrders, ...prev.filter((o) => !mappedOrders.find((m) => m.id === o.id))])
      }
    } catch (err) {
      console.error("[v0] Sync from database error:", err)
    }
  }, [])

const saveToDatabase = useCallback(async () => {
    try {
      const dbUser = await db.users.get(1)
      if (dbUser) {
        await db.users.update(1, {
          name: user.name,
          avatar: user.avatar,
          level: user.level,
          isVip: user.isVip,
          vipType: user.vipType,
          vipExpiry: user.vipExpiry,
          balance: wallet.balance,
          activity: user.activity,
          following: user.following,
          followers: user.followers,
          visitors: user.visitors,
          updatedAt: new Date().toISOString(),
        })
      }
    } catch (err) {
      console.error("[v0] Save to database error:", err)
    }
  }, [user, wallet])

useEffect(() => {
    const timer = setTimeout(() => {
      syncFromDatabase()
    }, 500)
    return () => clearTimeout(timer)
  }, [syncFromDatabase])

useEffect(() => {
    localStorage.setItem("wanzhi_wallet_v2", JSON.stringify(wallet))
    db.users
      .get(1)
      .then((dbUser) => {
        if (dbUser) {
          db.users.update(1, { balance: wallet.balance, updatedAt: new Date().toISOString() })
        }
      })
      .catch(() => {})
  }, [wallet])

useEffect(() => {
    localStorage.setItem("wanzhi_orders", JSON.stringify(orders))
  }, [orders])

const login = async (phone: string, password?: string): Promise<boolean> => {
    try {
      // 模拟登录验证
      if (phone.length === 11) {
        setIsLoggedIn(true)
        setUser((prev) => ({ ...prev, phone, isLoggedIn: true }))
        await db.users.update(1, { phone, lastLoginTime: new Date().toISOString() })
        return true
      }
      return false
    } catch {
      return false
    }
  }

const logout = () => {
    setIsLoggedIn(false)
    setUser((prev) => ({ ...prev, isLoggedIn: false }))
    localStorage.removeItem("wanzhi_wallet_v2")
    localStorage.removeItem("wanzhi_orders")
  }

const recharge = (amount: number) => {
    const orderNo = `RCH${Date.now()}`
    setWallet((prev) => ({ ...prev, balance: prev.balance + amount }))

const newOrder: Order = {
      id: Math.random().toString(36).substr(2, 9),
      orderNo,
      type: "recharge",
      title: `充值 ${amount} 玩值币`,
      price: amount,
      status: "completed",
      date: new Date().toISOString().split("T")[0],
    }
    setOrders((prev) => [newOrder, ...prev])

db.transactions
      .add({
        userId: 1,
        orderNo,
        type: "recharge",
        category: "充值",
        amount,
        balanceBefore: wallet.balance,
        balanceAfter: wallet.balance + amount,
        description: `充值 ${amount} 玩值币`,
        status: "completed",
        createdAt: new Date().toISOString(),
      })
      .catch(() => {})
  }

const pay = (amount: number, title: string, type: Order["type"], image?: string): boolean => {
    if (wallet.balance < amount) {
      toast({
        title: "余额不足",
        description: "您的玩值币不足，请充值",
        variant: "destructive",
      })
      return false
    }

const orderNo = `PAY${Date.now()}`
    setWallet((prev) => ({ ...prev, balance: prev.balance - amount }))

const newOrder: Order = {
      id: Math.random().toString(36).substr(2, 9),
      orderNo,
      type,
      title,
      price: amount,
      status: "completed",
      date: new Date().toISOString().split("T")[0],
      image,
    }

setOrders((prev) => [newOrder, ...prev])

db.transactions
      .add({
        userId: 1,
        orderNo,
        type: "purchase",
        category:
          type === "service"
            ? "服务消费"
            : type === "hotel"
              ? "酒店预订"
              : type === "cafe"
                ? "网咖抢座"
                : type === "course"
                  ? "课程购买"
                  : "商品购买",
        amount: -amount,
        balanceBefore: wallet.balance,
        balanceAfter: wallet.balance - amount,
        description: title,
        status: "completed",
        createdAt: new Date().toISOString(),
      })
      .catch(() => {})

return true
  }

const updateUser = (updates: Partial<User>) => {
    setUser((prev) => ({ ...prev, ...updates }))
    db.users
      .get(1)
      .then((dbUser) => {
        if (dbUser) {
          db.users.update(1, { ...updates, updatedAt: new Date().toISOString() })
        }
      })
      .catch(() => {})
  }

return (
    <AppContext.Provider
      value={{
        user,
        wallet,
        orders,
        isLoggedIn,
        recharge,
        pay,
        updateUser,
        login,
        logout,
        syncFromDatabase,
        saveToDatabase,
      }}
    >
      {children}
    </AppContext.Provider>
  )
}

export function useAppContext() {
  const context = useContext(AppContext)
  if (context === undefined) {
    throw new Error("useAppContext must be used within an AppProvider")
  }
  return context
}
[V0_FILE]typescriptreact:file="components/providers/database-provider.tsx" isEdit="true" isMerged="true"
"use client"

import { createContext, useContext, useState, useEffect, type ReactNode } from "react"
import Dexie from "dexie"

interface DatabaseContextType {
  isReady: boolean
  error: Error | null
}

const DatabaseContext = createContext<DatabaseContextType>({
  isReady: false,
  error: null,
})

export function DatabaseProvider({ children }: { children: ReactNode }) {
  const [isReady, setIsReady] = useState(false)
  const [error, setError] = useState<Error | null>(null)

useEffect(() => {
    const initDatabase = async () => {
      try {
        // 动态导入数据库模块
        const { db } = await import("@/lib/db/schema")
        const { seedDatabase } = await import("@/lib/db/seed")

await db.open()
        await seedDatabase()
        setIsReady(true)
      } catch (err) {
        console.error("[v0] Database init error:", err)
        // 如果IndexedDB不可用，仍然允许应用运行
        if (err instanceof Dexie.MissingAPIError) {
          console.warn("[v0] IndexedDB not available, using fallback")
          setIsReady(true)
        } else {
          setError(err as Error)
          // 即使出错也允许应用运行
          setIsReady(true)
        }
      }
    }

initDatabase()
  }, [])

if (!isReady) {
    return (
      <div className="min-h-screen bg-background flex items-center justify-center">
        <div className="text-center">
          <div className="w-8 h-8 border-2 border-cyan-500 border-t-transparent rounded-full animate-spin mx-auto mb-4" />
          <p className="text-muted-foreground text-sm">正在初始化...</p>
        </div>
      </div>
    )
  }

return <DatabaseContext.Provider value={{ isReady, error }}>{children}</DatabaseContext.Provider>
}

export function useDatabaseContext() {
  return useContext(DatabaseContext)
}
[V0_FILE]typescript:file="lib/db/index.ts" isMerged="true"
// 数据库模块统一导出
export { db, WanzhiDatabase } from "./schema"
export type * from "./schema"
export { seedDatabase, clearDatabase } from "./seed"
export * from "./hooks"
[V0_FILE]typescriptreact:file="app/profile/edit/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { ArrowLeft, Camera, ChevronRight, Check } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { useRouter } from "next/navigation"
import { useAppContext } from "@/components/providers/app-provider"
import Image from "next/image"

export default function ProfileEditPage() {
  const router = useRouter()
  const { user, updateUser } = useAppContext()
  const [name, setName] = useState(user.name || "")
  const [bio, setBio] = useState("")
  const [gender, setGender] = useState<"male" | "female" | "unknown">("male")
  const [showAvatarPicker, setShowAvatarPicker] = useState(false)
  const [selectedAvatar, setSelectedAvatar] = useState(user.avatar || "/gamer-profile-avatar.jpg")

const avatarOptions = [
    "/gamer-profile-avatar.jpg",
    "/gamer-boy-esports-jersey.jpg",
    "/streamer-1.jpg",
    "/streamer-2.jpg",
    "/streamer-3.jpg",
    "/cp-avatar-1.jpg",
    "/cp-avatar-2.jpg",
    "/coach-avatar-1.jpg",
  ]

const handleSave = () => {
    updateUser({
      name,
      avatar: selectedAvatar,
    })
    router.back()
  }

return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <div className="sticky top-0 z-50 bg-background/95 backdrop-blur-sm border-b border-border">
        <div className="flex items-center justify-between h-14 px-4">
          <Button variant="ghost" size="icon" onClick={() => router.back()}>
            <ArrowLeft size={20} />
          </Button>
          <h1 className="font-bold">编辑资料</h1>
          <Button variant="ghost" size="sm" onClick={handleSave} className="text-primary">
            保存
          </Button>
        </div>
      </div>

<div className="p-4 space-y-6">
        {/* Avatar Section */}
        <div className="flex flex-col items-center py-6">
          <div className="relative" onClick={() => setShowAvatarPicker(true)}>
            <div className="w-24 h-24 rounded-full overflow-hidden border-2 border-primary">
              <Image
                src={selectedAvatar || "/placeholder.svg"}
                alt="Avatar"
                width={96}
                height={96}
                className="object-cover"
              />
            </div>
            <div className="absolute bottom-0 right-0 w-8 h-8 rounded-full bg-primary flex items-center justify-center">
              <Camera size={16} className="text-white" />
            </div>
          </div>
          <p className="text-sm text-foreground/50 mt-2">点击更换头像</p>
        </div>

{/* Form Fields */}
        <div className="space-y-4">
          <div className="bg-card rounded-xl border border-border overflow-hidden">
            <div className="flex items-center justify-between p-4 border-b border-border">
              <span className="text-sm text-foreground/70">昵称</span>
              <Input
                value={name}
                onChange={(e) => setName(e.target.value)}
                className="bg-transparent border-none text-right w-48 h-auto p-0"
                placeholder="请输入昵称"
                maxLength={12}
              />
            </div>
            <div className="flex items-center justify-between p-4 border-b border-border">
              <span className="text-sm text-foreground/70">玩值ID</span>
              <span className="text-sm text-foreground/50">{user.odlId || "888888"}</span>
            </div>
            <div className="flex items-center justify-between p-4 border-b border-border">
              <span className="text-sm text-foreground/70">性别</span>
              <div className="flex gap-2">
                {["male", "female", "unknown"].map((g) => (
                  <button
                    key={g}
                    onClick={() => setGender(g as typeof gender)}
                    className={`px-3 py-1 rounded-full text-xs transition-colors ${
                      gender === g ? "bg-primary text-white" : "bg-foreground/10 text-foreground/60"
                    }`}
                  >
                    {g === "male" ? "男" : g === "female" ? "女" : "保密"}
                  </button>
                ))}
              </div>
            </div>
            <div className="flex items-center justify-between p-4">
              <span className="text-sm text-foreground/70">个性签名</span>
              <div className="flex items-center gap-2">
                <span className="text-sm text-foreground/50 truncate max-w-32">{bio || "这个人很懒，什么都没写"}</span>
                <ChevronRight size={16} className="text-foreground/30" />
              </div>
            </div>
          </div>
        </div>
      </div>

{/* Avatar Picker Modal */}
      {showAvatarPicker && (
        <div className="fixed inset-0 z-50 bg-black/80 flex items-end">
          <div className="bg-card w-full rounded-t-2xl p-4 pb-8">
            <div className="flex items-center justify-between mb-4">
              <h3 className="font-bold">选择头像</h3>
              <Button variant="ghost" size="sm" onClick={() => setShowAvatarPicker(false)}>
                完成
              </Button>
            </div>
            <div className="grid grid-cols-4 gap-3">
              {avatarOptions.map((avatar, i) => (
                <button
                  key={i}
                  onClick={() => {
                    setSelectedAvatar(avatar)
                    setShowAvatarPicker(false)
                  }}
                  className="relative aspect-square rounded-full overflow-hidden border-2 transition-colors"
                  style={{
                    borderColor: selectedAvatar === avatar ? "rgb(var(--primary))" : "transparent",
                  }}
                >
                  <Image src={avatar || "/placeholder.svg"} alt={`Avatar ${i}`} fill className="object-cover" />
                  {selectedAvatar === avatar && (
                    <div className="absolute inset-0 bg-primary/30 flex items-center justify-center">
                      <Check size={24} className="text-white" />
                    </div>
                  )}
                </button>
              ))}
            </div>
          </div>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/login/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Phone, Lock, Eye, EyeOff, MessageSquare } from "lucide-react"
import Image from "next/image"
import { useAppContext } from "@/components/providers/app-provider"

export default function LoginPage() {
  const router = useRouter()
  const { login } = useAppContext()
  const [phone, setPhone] = useState("")
  const [code, setCode] = useState("")
  const [showPassword, setShowPassword] = useState(false)
  const [loginType, setLoginType] = useState<"code" | "password">("code")
  const [countdown, setCountdown] = useState(0)
  const [isLoading, setIsLoading] = useState(false)
  const [agreed, setAgreed] = useState(false)

const sendCode = () => {
    if (phone.length !== 11) return
    setCountdown(60)
    const timer = setInterval(() => {
      setCountdown((prev) => {
        if (prev <= 1) {
          clearInterval(timer)
          return 0
        }
        return prev - 1
      })
    }, 1000)
  }

const handleLogin = async () => {
    if (!agreed) return
    if (phone.length !== 11) return

setIsLoading(true)
    const success = await login(phone, code)
    setIsLoading(false)

if (success) {
      router.push("/")
    }
  }

return (
    <div className="min-h-screen bg-background flex flex-col">
      {/* Logo Area */}
      <div className="flex-1 flex flex-col items-center justify-center px-8 pt-20">
        <div className="w-24 h-24 rounded-2xl bg-gradient-to-br from-primary to-cyan-500 flex items-center justify-center mb-4 shadow-lg shadow-primary/30">
          <Image src="/wanzhi-logo.jpg" alt="玩值电竞" width={64} height={64} className="object-contain" />
        </div>
        <h1 className="text-2xl font-bold text-foreground mb-2">玩值电竞</h1>
        <p className="text-sm text-foreground/50">游戏社交 · 电竞服务 · 价值变现</p>
      </div>

{/* Login Form */}
      <div className="px-6 pb-12 space-y-4">
        {/* Phone Input */}
        <div className="relative">
          <Phone size={18} className="absolute left-4 top-1/2 -translate-y-1/2 text-foreground/40" />
          <Input
            type="tel"
            placeholder="请输入手机号"
            value={phone}
            onChange={(e) => setPhone(e.target.value.replace(/\D/g, "").slice(0, 11))}
            className="pl-12 h-12 bg-foreground/5 border-foreground/10 rounded-xl"
          />
        </div>

{/* Code/Password Input */}
        <div className="relative">
          {loginType === "code" ? (
            <MessageSquare size={18} className="absolute left-4 top-1/2 -translate-y-1/2 text-foreground/40" />
          ) : (
            <Lock size={18} className="absolute left-4 top-1/2 -translate-y-1/2 text-foreground/40" />
          )}
          <Input
            type={loginType === "password" && !showPassword ? "password" : "text"}
            placeholder={loginType === "code" ? "请输入验证码" : "请输入密码"}
            value={code}
            onChange={(e) => setCode(e.target.value)}
            className="pl-12 pr-24 h-12 bg-foreground/5 border-foreground/10 rounded-xl"
          />
          {loginType === "code" ? (
            <button
              onClick={sendCode}
              disabled={countdown > 0 || phone.length !== 11}
              className="absolute right-3 top-1/2 -translate-y-1/2 text-sm text-primary disabled:text-foreground/30"
            >
              {countdown > 0 ? `${countdown}s` : "获取验证码"}
            </button>
          ) : (
            <button
              onClick={() => setShowPassword(!showPassword)}
              className="absolute right-3 top-1/2 -translate-y-1/2 text-foreground/40"
            >
              {showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
            </button>
          )}
        </div>

{/* Switch Login Type */}
        <div className="flex justify-between items-center text-sm">
          <button onClick={() => setLoginType(loginType === "code" ? "password" : "code")} className="text-primary">
            {loginType === "code" ? "密码登录" : "验证码登录"}
          </button>
          <button className="text-foreground/50">忘记密码?</button>
        </div>

{/* Agreement */}
        <div className="flex items-start gap-2 text-xs text-foreground/50">
          <button
            onClick={() => setAgreed(!agreed)}
            className={`w-4 h-4 rounded border flex-shrink-0 mt-0.5 flex items-center justify-center transition-colors ${
              agreed ? "bg-primary border-primary" : "border-foreground/30"
            }`}
          >
            {agreed && <span className="text-white text-[10px]">✓</span>}
          </button>
          <span>
            我已阅读并同意
            <span className="text-primary">《用户协议》</span>和<span className="text-primary">《隐私政策》</span>
          </span>
        </div>

{/* Login Button */}
        <Button
          onClick={handleLogin}
          disabled={!agreed || phone.length !== 11 || isLoading}
          className="w-full h-12 rounded-xl bg-gradient-to-r from-primary to-cyan-500 text-white font-bold text-base"
        >
          {isLoading ? "登录中..." : "登录 / 注册"}
        </Button>

{/* Third Party Login */}
        <div className="pt-6">
          <div className="flex items-center gap-4 mb-6">
            <div className="flex-1 h-px bg-foreground/10"></div>
            <span className="text-xs text-foreground/30">其他登录方式</span>
            <div className="flex-1 h-px bg-foreground/10"></div>
          </div>
          <div className="flex justify-center gap-8">
            {["微信", "QQ", "微博"].map((name) => (
              <button
                key={name}
                className="w-12 h-12 rounded-full bg-foreground/5 flex items-center justify-center text-foreground/50 text-xs"
              >
                {name}
              </button>
            ))}
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/settings/page.tsx" isMerged="true"
"use client"

import { ArrowLeft, ChevronRight, Moon, Bell, Shield, Globe, Info, Trash2 } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Switch } from "@/components/ui/switch"
import { useRouter } from "next/navigation"
import { useState } from "react"

export default function SettingsPage() {
  const router = useRouter()
  const [darkMode, setDarkMode] = useState(true)
  const [notifications, setNotifications] = useState(true)
  const [showClearConfirm, setShowClearConfirm] = useState(false)

const handleClearCache = () => {
    localStorage.clear()
    setShowClearConfirm(false)
  }

return (
    <div className="min-h-screen bg-background pb-24">
      {/* Header */}
      <header className="sticky top-0 z-40 bg-background/95 backdrop-blur-sm border-b border-border px-4 py-3 flex items-center gap-4">
        <button onClick={() => router.back()} className="p-2 hover:bg-foreground/10 rounded-full transition-colors">
          <ArrowLeft size={20} />
        </button>
        <h1 className="font-bold text-lg">设置</h1>
      </header>

<div className="p-4 space-y-4">
        {/* General Settings */}
        <div className="bg-card rounded-xl border border-border overflow-hidden">
          <div className="flex items-center justify-between p-4 border-b border-border">
            <div className="flex items-center gap-3">
              <Moon size={18} className="text-foreground/60" />
              <span className="text-sm">深色模式</span>
            </div>
            <Switch checked={darkMode} onCheckedChange={setDarkMode} />
          </div>
          <div className="flex items-center justify-between p-4 border-b border-border">
            <div className="flex items-center gap-3">
              <Bell size={18} className="text-foreground/60" />
              <span className="text-sm">消息通知</span>
            </div>
            <Switch checked={notifications} onCheckedChange={setNotifications} />
          </div>
          <button
            onClick={() => router.push("/account-security")}
            className="w-full flex items-center justify-between p-4"
          >
            <div className="flex items-center gap-3">
              <Shield size={18} className="text-foreground/60" />
              <span className="text-sm">账号安全</span>
            </div>
            <ChevronRight size={16} className="text-foreground/30" />
          </button>
        </div>

{/* Other Settings */}
        <div className="bg-card rounded-xl border border-border overflow-hidden">
          <button className="w-full flex items-center justify-between p-4 border-b border-border">
            <div className="flex items-center gap-3">
              <Globe size={18} className="text-foreground/60" />
              <span className="text-sm">语言设置</span>
            </div>
            <div className="flex items-center gap-2">
              <span className="text-xs text-foreground/50">简体中文</span>
              <ChevronRight size={16} className="text-foreground/30" />
            </div>
          </button>
          <button
            onClick={() => setShowClearConfirm(true)}
            className="w-full flex items-center justify-between p-4 border-b border-border"
          >
            <div className="flex items-center gap-3">
              <Trash2 size={18} className="text-foreground/60" />
              <span className="text-sm">清除缓存</span>
            </div>
            <div className="flex items-center gap-2">
              <span className="text-xs text-foreground/50">12.5MB</span>
              <ChevronRight size={16} className="text-foreground/30" />
            </div>
          </button>
          <button className="w-full flex items-center justify-between p-4">
            <div className="flex items-center gap-3">
              <Info size={18} className="text-foreground/60" />
              <span className="text-sm">关于我们</span>
            </div>
            <div className="flex items-center gap-2">
              <span className="text-xs text-foreground/50">v1.0.0</span>
              <ChevronRight size={16} className="text-foreground/30" />
            </div>
          </button>
        </div>
      </div>

{/* Clear Cache Confirm */}
      {showClearConfirm && (
        <div className="fixed inset-0 z-50 bg-black/80 flex items-center justify-center p-4">
          <div className="bg-card rounded-2xl p-6 w-full max-w-sm border border-border">
            <h3 className="text-lg font-bold text-foreground text-center mb-2">清除缓存</h3>
            <p className="text-sm text-foreground/60 text-center mb-6">确定要清除所有缓存数据吗？</p>
            <div className="flex gap-3">
              <Button
                variant="outline"
                className="flex-1 border-border bg-transparent"
                onClick={() => setShowClearConfirm(false)}
              >
                取消
              </Button>
              <Button className="flex-1 bg-red-500 hover:bg-red-600" onClick={handleClearCache}>
                确认清除
              </Button>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/customer-service/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { ArrowLeft, MessageCircle, Phone, Mail, Clock, ChevronRight, Send } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { useRouter } from "next/navigation"

export default function CustomerServicePage() {
  const router = useRouter()
  const [message, setMessage] = useState("")
  const [messages, setMessages] = useState([
    { id: 1, type: "system", content: "您好！欢迎使用玩值电竞客服中心，请问有什么可以帮助您的？", time: "10:00" },
  ])

const faqList = [
    { q: "如何充值玩值币？", a: "点击首页右上角钱包图标，选择充值金额即可" },
    { q: "如何申请退款？", a: "进入订单详情页，点击申请退款按钮" },
    { q: "账号典当如何操作？", a: "进入商城-账号典当，填写账号信息提交评估" },
    { q: "如何联系主播？", a: "在主播主页点击私信按钮即可发送消息" },
  ]

const sendMessage = () => {
    if (!message.trim()) return

const newMsg = {
      id: messages.length + 1,
      type: "user",
      content: message,
      time: new Date().toLocaleTimeString("zh-CN", { hour: "2-digit", minute: "2-digit" }),
    }
    setMessages([...messages, newMsg])
    setMessage("")

// 模拟客服回复
    setTimeout(() => {
      const reply = {
        id: messages.length + 2,
        type: "system",
        content: "感谢您的咨询，客服正在为您处理中，请稍候...",
        time: new Date().toLocaleTimeString("zh-CN", { hour: "2-digit", minute: "2-digit" }),
      }
      setMessages((prev) => [...prev, reply])
    }, 1000)
  }

return (
    <div className="min-h-screen bg-background flex flex-col">
      {/* Header */}
      <header className="sticky top-0 z-40 bg-background/95 backdrop-blur-sm border-b border-border px-4 py-3 flex items-center gap-4">
        <button onClick={() => router.back()} className="p-2 hover:bg-foreground/10 rounded-full transition-colors">
          <ArrowLeft size={20} />
        </button>
        <h1 className="font-bold text-lg">客服中心</h1>
      </header>

{/* Quick Actions */}
      <div className="p-4 grid grid-cols-3 gap-3">
        <a href="tel:400-888-8888" className="bg-card rounded-xl p-4 border border-border text-center">
          <Phone size={24} className="mx-auto mb-2 text-primary" />
          <span className="text-xs text-foreground/70">电话客服</span>
        </a>
        <button className="bg-card rounded-xl p-4 border border-border text-center">
          <MessageCircle size={24} className="mx-auto mb-2 text-green-500" />
          <span className="text-xs text-foreground/70">在线客服</span>
        </button>
        <a href="mailto:support@wanzhi.com" className="bg-card rounded-xl p-4 border border-border text-center">
          <Mail size={24} className="mx-auto mb-2 text-blue-500" />
          <span className="text-xs text-foreground/70">邮件反馈</span>
        </a>
      </div>

{/* FAQ Section */}
      <div className="px-4 mb-4">
        <h3 className="text-sm font-bold mb-3 flex items-center gap-2">
          <Clock size={14} className="text-primary" />
          常见问题
        </h3>
        <div className="bg-card rounded-xl border border-border overflow-hidden">
          {faqList.map((faq, i) => (
            <button
              key={i}
              className="w-full flex items-center justify-between p-4 border-b border-border last:border-0 text-left"
              onClick={() => {
                setMessages((prev) => [
                  ...prev,
                  {
                    id: prev.length + 1,
                    type: "user",
                    content: faq.q,
                    time: new Date().toLocaleTimeString("zh-CN", { hour: "2-digit", minute: "2-digit" }),
                  },
                  {
                    id: prev.length + 2,
                    type: "system",
                    content: faq.a,
                    time: new Date().toLocaleTimeString("zh-CN", { hour: "2-digit", minute: "2-digit" }),
                  },
                ])
              }}
            >
              <span className="text-sm text-foreground/80">{faq.q}</span>
              <ChevronRight size={16} className="text-foreground/30" />
            </button>
          ))}
        </div>
      </div>

{/* Chat Area */}
      <div className="flex-1 px-4 space-y-3 overflow-y-auto pb-20">
        {messages.map((msg) => (
          <div key={msg.id} className={`flex ${msg.type === "user" ? "justify-end" : "justify-start"}`}>
            <div
              className={`max-w-[80%] rounded-2xl px-4 py-2 ${
                msg.type === "user" ? "bg-primary text-white" : "bg-card border border-border"
              }`}
            >
              <p className="text-sm">{msg.content}</p>
              <p className={`text-[10px] mt-1 ${msg.type === "user" ? "text-white/60" : "text-foreground/40"}`}>
                {msg.time}
              </p>
            </div>
          </div>
        ))}
      </div>

{/* Input Area */}
      <div className="fixed bottom-0 left-0 right-0 bg-background border-t border-border p-4">
        <div className="flex gap-2">
          <Input
            value={message}
            onChange={(e) => setMessage(e.target.value)}
            placeholder="请输入您的问题..."
            className="flex-1 bg-foreground/5 border-foreground/10"
            onKeyPress={(e) => e.key === "Enter" && sendMessage()}
          />
          <Button onClick={sendMessage} className="bg-primary">
            <Send size={18} />
          </Button>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/transaction-history/page.tsx" isMerged="true"
"use client"

import { ArrowLeft, ArrowUpRight, ArrowDownLeft, Filter } from "lucide-react"
import { useRouter } from "next/navigation"
import { useAppContext } from "@/components/providers/app-provider"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

export default function TransactionHistoryPage() {
  const router = useRouter()
  const { orders, wallet } = useAppContext()

const incomeOrders = orders.filter((o) => o.type === "recharge")
  const expenseOrders = orders.filter((o) => o.type !== "recharge")

return (
    <div className="min-h-screen bg-background pb-24">
      {/* Header */}
      <header className="sticky top-0 z-40 bg-background/95 backdrop-blur-sm border-b border-border px-4 py-3 flex items-center justify-between">
        <div className="flex items-center gap-4">
          <button onClick={() => router.back()} className="p-2 hover:bg-foreground/10 rounded-full transition-colors">
            <ArrowLeft size={20} />
          </button>
          <h1 className="font-bold text-lg">账单明细</h1>
        </div>
        <button className="p-2 hover:bg-foreground/10 rounded-full transition-colors">
          <Filter size={18} />
        </button>
      </header>

{/* Balance Card */}
      <div className="mx-4 mt-4 p-4 bg-gradient-to-r from-primary to-cyan-500 rounded-xl text-white">
        <p className="text-sm opacity-80 mb-1">当前余额</p>
        <p className="text-3xl font-bold">
          {wallet.balance} <span className="text-lg">币</span>
        </p>
      </div>

{/* Tabs */}
      <Tabs defaultValue="all" className="w-full mt-4">
        <div className="px-4">
          <TabsList className="w-full bg-foreground/5 p-1 rounded-xl">
            <TabsTrigger value="all" className="flex-1 text-xs">
              全部
            </TabsTrigger>
            <TabsTrigger value="income" className="flex-1 text-xs">
              收入
            </TabsTrigger>
            <TabsTrigger value="expense" className="flex-1 text-xs">
              支出
            </TabsTrigger>
          </TabsList>
        </div>

{[
          { key: "all", data: orders },
          { key: "income", data: incomeOrders },
          { key: "expense", data: expenseOrders },
        ].map(({ key, data }) => (
          <TabsContent key={key} value={key} className="px-4 mt-4 space-y-3">
            {data.length > 0 ? (
              data.map((order, i) => (
                <div key={i} className="bg-card rounded-xl p-4 border border-border">
                  <div className="flex items-center justify-between">
                    <div className="flex items-center gap-3">
                      <div
                        className={`w-10 h-10 rounded-full flex items-center justify-center ${
                          order.type === "recharge" ? "bg-green-500/10 text-green-500" : "bg-red-500/10 text-red-500"
                        }`}
                      >
                        {order.type === "recharge" ? <ArrowDownLeft size={20} /> : <ArrowUpRight size={20} />}
                      </div>
                      <div>
                        <p className="text-sm font-medium">{order.title}</p>
                        <p className="text-xs text-foreground/50">{order.date}</p>
                      </div>
                    </div>
                    <div className="text-right">
                      <p className={`font-bold ${order.type === "recharge" ? "text-green-500" : "text-foreground"}`}>
                        {order.type === "recharge" ? "+" : "-"}
                        {order.price}
                      </p>
                      <p className="text-[10px] text-foreground/40">币</p>
                    </div>
                  </div>
                </div>
              ))
            ) : (
              <div className="flex flex-col items-center justify-center py-20 text-foreground/50">
                <p>暂无记录</p>
              </div>
            )}
          </TabsContent>
        ))}
      </Tabs>
    </div>
  )
}
[V0_FILE]jpg:file="public/wanzhi-logo.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/wanzhi-logo-3kTQBgdtGpPi0QnLPeHpaDDVwf8Drb.jpg" isMerged="true"
[V0_FILE]xml:file="public/wanzhi-logo.svg" isEdit="true" isMerged="true"
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#14b8a6;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#06b6d4;stop-opacity:1" />
    </linearGradient>
  </defs>
  <circle cx="50" cy="50" r="45" fill="none" stroke="url(#grad1)" stroke-width="3"/>
  <path d="M25 45 Q25 35 35 35 L40 35 L40 30 Q40 25 50 25 Q60 25 60 30 L60 35 L65 35 Q75 35 75 45 L75 55 Q75 70 60 70 L55 60 L45 60 L40 70 Q25 70 25 55 Z" 
        fill="url(#grad1)" opacity="0.9"/>
  <circle cx="35" cy="48" r="6" fill="#0d1117"/>
  <circle cx="62" cy="45" r="3" fill="#0d1117"/>
  <circle cx="68" cy="51" r="3" fill="#0d1117"/>
  <rect x="48" y="40" width="4" height="12" fill="#0d1117" rx="1"/>
  <rect x="44" y="44" width="12" height="4" fill="#0d1117" rx="1"/>
  <text x="50" y="88" font-family="Arial Black, sans-serif" font-size="16" font-weight="bold" fill="url(#grad1)" text-anchor="middle">W</text>
</svg>
[V0_FILE]typescriptreact:file="app/account-help/page.tsx" isMerged="true"
"use client"

import { useRouter } from "next/navigation"
import { ArrowLeft, Shield, Phone, HelpCircle, ChevronRight, Lock, Mail, FileText, MessageSquare } from "lucide-react"

export default function AccountHelpPage() {
  const router = useRouter()

const sections = [
    {
      title: "账号安全",
      items: [
        { icon: Lock, label: "修改密码", desc: "定期修改密码保障账号安全" },
        { icon: Phone, label: "绑定手机", desc: "已绑定: 138****8888" },
        { icon: Mail, label: "绑定邮箱", desc: "未绑定" },
        { icon: Shield, label: "实名认证", desc: "已认证" },
      ],
    },
    {
      title: "帮助中心",
      items: [
        { icon: HelpCircle, label: "常见问题", desc: "查看热门问题解答" },
        { icon: FileText, label: "用户协议", desc: "查看服务条款" },
        { icon: FileText, label: "隐私政策", desc: "了解隐私保护" },
        { icon: MessageSquare, label: "意见反馈", desc: "告诉我们您的建议" },
      ],
    },
  ]

return (
    <div className="min-h-screen bg-background pb-24">
      <header className="sticky top-0 z-40 glass px-4 py-3 flex items-center gap-3">
        <button onClick={() => router.back()} className="text-white/70 hover:text-white">
          <ArrowLeft size={20} />
        </button>
        <h1 className="font-bold text-lg">账号与帮助</h1>
      </header>

<div className="p-4 space-y-6">
        {sections.map((section, sectionIndex) => (
          <div key={sectionIndex}>
            <h2 className="text-sm font-bold text-white/60 mb-3 px-1">{section.title}</h2>
            <div className="bg-card border border-border rounded-xl overflow-hidden">
              {section.items.map((item, itemIndex) => (
                <button
                  key={itemIndex}
                  className="w-full flex items-center gap-3 p-4 hover:bg-white/5 transition-colors border-b border-border last:border-0"
                >
                  <div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center">
                    <item.icon size={18} className="text-primary" />
                  </div>
                  <div className="flex-1 text-left">
                    <div className="font-medium text-sm">{item.label}</div>
                    <div className="text-xs text-white/40">{item.desc}</div>
                  </div>
                  <ChevronRight size={16} className="text-white/30" />
                </button>
              ))}
            </div>
          </div>
        ))}

<div className="text-center pt-4">
          <p className="text-xs text-white/30">玩值电竞 v1.0.0</p>
          <p className="text-xs text-white/20 mt-1">© 2025 玩值电竞 All Rights Reserved</p>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/party/[id]/page.tsx" isEdit="true" isMerged="true"
import { PartyRoomClient } from "./client"

export default async function PartyRoomPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params
  return <PartyRoomClient partyId={id} />
}
[V0_FILE]typescriptreact:file="app/party/[id]/client.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { useRouter } from "next/navigation"
import Image from "next/image"
import {
  Mic,
  MicOff,
  MessageSquare,
  Gift,
  LogOut,
  MoreHorizontal,
  Send,
  UserPlus,
  Users,
  Star,
  Check,
} from "lucide-react"
import { Button } from "@/components/ui/button"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Input } from "@/components/ui/input"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { useAppContext } from "@/components/providers/app-provider"

const PARTY_DATA: Record<string, { name: string; host: string; avatar: string; game: string; background: string }> = {
  "1": {
    name: "GM-远洋的派对群",
    host: "GM-远洋",
    avatar: "/streamer-1.jpg",
    game: "英雄联盟",
    background: "/party-lol.jpg",
  },
  "2": {
    name: "甜心女王粉丝派对",
    host: "甜心女王",
    avatar: "/streamer-5.jpg",
    game: "王者荣耀",
    background: "/party-hok.jpg",
  },
  "3": {
    name: "带粉上分车队",
    host: "路人王",
    avatar: "/streamer-3.jpg",
    game: "和平精英",
    background: "/party-team.jpg",
  },
}

export function PartyRoomClient({ partyId }: { partyId: string }) {
  const router = useRouter()
  const { pay } = useAppContext()
  const [isMicOn, setIsMicOn] = useState(false)
  const [showGifts, setShowGifts] = useState(false)
  const [showGiftSuccess, setShowGiftSuccess] = useState(false)
  const [lastGift, setLastGift] = useState<string>("")
  const [messages, setMessages] = useState([
    { user: "系统", content: "欢迎来到派对房间", type: "system" },
    { user: "小柠檬", content: "大家好呀~", type: "user" },
    { user: "GM-远洋", content: "今天带大家上分！", type: "user" },
  ])
  const [inputValue, setInputValue] = useState("")

const partyInfo = PARTY_DATA[partyId] || PARTY_DATA["1"]

const seats = [
    { id: 0, user: { name: partyInfo.host, avatar: partyInfo.avatar, isMuted: false, isHost: true } },
    { id: 1, user: { name: "小柠檬", avatar: "/streamer-2.jpg", isMuted: false, isHost: false } },
    { id: 2, user: { name: "电竞萌妹", avatar: "/streamer-6.jpg", isMuted: true, isHost: false } },
    { id: 3, user: null },
    { id: 4, user: null },
    { id: 5, user: null },
    { id: 6, user: null },
    { id: 7, user: null },
  ]

const handleSendMessage = () => {
    if (!inputValue.trim()) return
    setMessages([...messages, { user: "我", content: inputValue, type: "user" }])
    setInputValue("")
  }

const handleSendGift = (gift: (typeof GIFTS)[0]) => {
    pay(gift.price, `送出${gift.name}`, "product")
    setLastGift(`${gift.icon} ${gift.name}`)
    setShowGifts(false)
    setShowGiftSuccess(true)
    setTimeout(() => setShowGiftSuccess(false), 2000)
  }

return (
    <div className="min-h-screen bg-black relative flex flex-col">
      {/* Background */}
      <div className="absolute inset-0 z-0">
        <Image
          src={partyInfo.background || "/placeholder.svg"}
          alt="Background"
          fill
          className="object-cover opacity-40"
        />
        <div className="absolute inset-0 bg-gradient-to-b from-black/60 via-black/30 to-black/90" />
      </div>

{/* Gift Success Toast */}
      {showGiftSuccess && (
        <div className="absolute top-20 left-1/2 -translate-x-1/2 z-50 animate-in slide-in-from-top-4 duration-300">
          <div className="flex items-center gap-2 bg-gradient-to-r from-pink-500/90 to-purple-500/90 backdrop-blur-md px-4 py-2 rounded-full shadow-lg">
            <Check size={16} className="text-white" />
            <span className="text-white text-sm font-medium">已送出 {lastGift}</span>
          </div>
        </div>
      )}

{/* Header */}
      <header className="relative z-10 px-4 py-3 flex items-center justify-between">
        <div className="flex items-center gap-3">
          <Button variant="ghost" size="icon" className="text-white" onClick={() => router.back()}>
            <LogOut className="w-5 h-5" />
          </Button>
          <div className="flex items-center gap-2">
            <div className="relative w-10 h-10 rounded-full overflow-hidden border-2 border-primary">
              <Image src={partyInfo.avatar || "/placeholder.svg"} alt={partyInfo.host} fill className="object-cover" />
            </div>
            <div>
              <h1 className="text-white font-bold text-sm flex items-center gap-1">
                {partyInfo.name}
                <Star size={12} className="text-yellow-400 fill-yellow-400" />
              </h1>
              <p className="text-white/60 text-[10px] flex items-center gap-2">
                <span className="flex items-center gap-1">
                  <Users size={10} />
                  125人
                </span>
                <span>{partyInfo.game}</span>
              </p>
            </div>
          </div>
        </div>
        <Button variant="ghost" size="icon" className="text-white">
          <MoreHorizontal className="w-5 h-5" />
        </Button>
      </header>

{/* Seats Grid */}
      <div className="relative z-10 flex-1 px-4 py-6">
        <div className="grid grid-cols-4 gap-4 gap-y-8">
          {seats.map((seat) => (
            <div key={seat.id} className="flex flex-col items-center gap-2">
              <div className="relative w-14 h-14">
                <div className="w-14 h-14 rounded-full bg-white/10 border border-white/20 flex items-center justify-center overflow-hidden relative">
                  {seat.user ? (
                    <Image
                      src={seat.user.avatar || "/placeholder.svg"}
                      alt={seat.user.name}
                      fill
                      className="object-cover"
                    />
                  ) : (
                    <div className="w-8 h-8 rounded-full bg-white/5 flex items-center justify-center">
                      <UserPlus className="w-4 h-4 text-white/30" />
                    </div>
                  )}
                </div>
                {seat.user?.isMuted && (
                  <div className="absolute bottom-0 right-0 bg-black/50 rounded-full p-0.5 border border-white/20">
                    <MicOff className="w-3 h-3 text-red-500" />
                  </div>
                )}
                {seat.user?.isHost && (
                  <div className="absolute -top-1 -right-1 bg-yellow-500 rounded-full p-0.5">
                    <Star className="w-3 h-3 text-white fill-white" />
                  </div>
                )}
                {seat.id === 0 && (
                  <div className="absolute -inset-1 border-2 border-primary/50 rounded-full animate-pulse" />
                )}
              </div>
              <span className="text-xs text-white/80 truncate max-w-[4rem]">
                {seat.user ? seat.user.name : `${seat.id + 1}号麦`}
              </span>
            </div>
          ))}
        </div>
      </div>

{/* Chat Area */}
      <div className="relative z-10 h-48 px-4 mb-2">
        <ScrollArea className="h-full w-3/4">
          <div className="space-y-2 flex flex-col justify-end min-h-full pb-2">
            {messages.map((msg, i) => (
              <div
                key={i}
                className={`bg-black/40 backdrop-blur-sm px-3 py-1.5 rounded-xl self-start max-w-full ${msg.type === "system" ? "text-yellow-400" : "text-white"}`}
              >
                <span className="text-white/60 text-xs mr-2">{msg.user}:</span>
                <span className="text-sm">{msg.content}</span>
              </div>
            ))}
          </div>
        </ScrollArea>
      </div>

{/* Bottom Controls */}
      <div className="relative z-10 bg-black/80 backdrop-blur-md px-4 py-3 border-t border-white/10 pb-8">
        <div className="flex items-center gap-3 mb-3">
          <Input
            className="bg-white/10 border-none text-white h-9"
            placeholder="聊点什么..."
            value={inputValue}
            onChange={(e) => setInputValue(e.target.value)}
            onKeyDown={(e) => e.key === "Enter" && handleSendMessage()}
          />
          <Button size="icon" className="bg-primary hover:bg-primary/90 h-9 w-9" onClick={handleSendMessage}>
            <Send className="w-4 h-4" />
          </Button>
        </div>
        <div className="flex items-center justify-between px-2">
          <div className="flex gap-6">
            <div className="flex flex-col items-center gap-1 cursor-pointer" onClick={() => setIsMicOn(!isMicOn)}>
              <div
                className={`w-10 h-10 rounded-full flex items-center justify-center ${isMicOn ? "bg-white text-black" : "bg-white/10 text-white"}`}
              >
                {isMicOn ? <Mic className="w-5 h-5" /> : <MicOff className="w-5 h-5" />}
              </div>
              <span className="text-[10px] text-white/60">{isMicOn ? "开麦" : "闭麦"}</span>
            </div>
            <div className="flex flex-col items-center gap-1 cursor-pointer">
              <div className="w-10 h-10 rounded-full bg-white/10 text-white flex items-center justify-center">
                <MessageSquare className="w-5 h-5" />
              </div>
              <span className="text-[10px] text-white/60">私信</span>
            </div>
          </div>

<Button
            className="rounded-full px-6 bg-gradient-to-r from-pink-500 to-purple-500 border-none shadow-lg shadow-pink-500/20"
            onClick={() => setShowGifts(true)}
          >
            <Gift className="w-5 h-5 mr-2" />
            送礼
          </Button>
        </div>
      </div>

{/* Gift Dialog */}
      <Dialog open={showGifts} onOpenChange={setShowGifts}>
        <DialogContent className="bg-zinc-900/95 backdrop-blur-xl border-white/10 text-white max-w-sm">
          <DialogHeader>
            <DialogTitle>送礼物给 {partyInfo.host}</DialogTitle>
          </DialogHeader>
          <div className="grid grid-cols-3 gap-3 py-4">
            {GIFTS.map((gift) => (
              <button
                key={gift.id}
                onClick={() => handleSendGift(gift)}
                className="flex flex-col items-center gap-2 p-3 bg-white/5 rounded-xl hover:bg-white/10 transition-colors border border-white/5 hover:border-pink-500/30 active:scale-95"
              >
                <span className="text-3xl">{gift.icon}</span>
                <span className="text-xs font-bold">{gift.name}</span>
                <span className="text-[10px] text-primary">{gift.price} 币</span>
              </button>
            ))}
          </div>
        </DialogContent>
      </Dialog>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/party/[id]/loading.tsx" isMerged="true"
export default function PartyLoading() {
  return (
    <div className="min-h-screen bg-black flex items-center justify-center">
      <div className="flex flex-col items-center gap-4">
        <div className="w-12 h-12 border-2 border-primary border-t-transparent rounded-full animate-spin" />
        <p className="text-white/60 text-sm">正在进入派对...</p>
      </div>
    </div>
  )
}
[V0_FILE]jpg:file="public/live-lol.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/live-lol-fsupKsx5cLW05yVnSKQAAuQ5wuPEmZ.jpg" isMerged="true"
[V0_FILE]jpg:file="public/live-valorant.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/live-valorant-eFfLOKeyht6gO9ioAJVmtDedkjPRZo.jpg" isMerged="true"
[V0_FILE]jpg:file="public/live-pubg.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/live-pubg-M0jIMBymmpna06s7xVwz1PxsLEmPgs.jpg" isMerged="true"
[V0_FILE]jpg:file="public/live-genshin.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/live-genshin-Zgk46br1Nox0RihKFEnNh0l3MRFYDj.jpg" isMerged="true"
[V0_FILE]jpg:file="public/live-hok.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/live-hok-mezWEfDt6f6IOyZOySCeLUQm95yTyP.jpg" isMerged="true"
[V0_FILE]jpg:file="public/live-wow.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/live-wow-BOBWH5yatrsWGE0oCHAeG6DzOT0N81.jpg" isMerged="true"
[V0_FILE]typescriptreact:file="app/admin/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/admin/users/loading.tsx" isEdit="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/admin/streamers/loading.tsx" isEdit="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/admin/mall/loading.tsx" isEdit="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/admin/orders/loading.tsx" isEdit="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/admin/pawn/loading.tsx" isEdit="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]png:file="public/admin-avatar.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/admin-avatar-EO5ednlDtH94CwyuA4gxP5IhELzOrl.png" isMerged="true"
[V0_FILE]typescriptreact:file="app/admin/settings/loading.tsx" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/admin/users/page.tsx" isEdit="true" isMerged="true"
import dynamic from "next/dynamic"

const AdminUsersClient = dynamic(() => import("./client"), { ssr: false })

export default function AdminUsersPage() {
  return <AdminUsersClient />
}
[V0_FILE]typescriptreact:file="app/admin/users/client.tsx" isEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Search, MoreVertical, UserCheck, UserX, Edit, Trash2, Eye, Plus, RefreshCw } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { db, type User } from "@/lib/db/schema"

export default function AdminUsersClient() {
  const [users, setUsers] = useState<User[]>([])
  const [searchTerm, setSearchTerm] = useState("")
  const [statusFilter, setStatusFilter] = useState("all")
  const [loading, setLoading] = useState(true)

useEffect(() => {
    loadUsers()
  }, [])

const loadUsers = async () => {
    setLoading(true)
    try {
      const allUsers = await db.users.toArray()
      setUsers(allUsers)
    } catch (error) {
      console.error("Failed to load users:", error)
    }
    setLoading(false)
  }

const filteredUsers = users.filter((user) => {
    const matchesSearch =
      user.nickname?.toLowerCase().includes(searchTerm.toLowerCase()) || user.phone?.includes(searchTerm)
    const matchesStatus = statusFilter === "all" || user.status === statusFilter
    return matchesSearch && matchesStatus
  })

const updateUserStatus = async (userId: number, status: string) => {
    await db.users.update(userId, { status })
    loadUsers()
  }

const deleteUser = async (userId: number) => {
    if (confirm("确定要删除该用户吗？")) {
      await db.users.delete(userId)
      loadUsers()
    }
  }

return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-bold text-white">用户管理</h1>
        <p className="text-slate-400 mt-1">管理平台所有注册用户</p>
      </div>

<div className="backdrop-blur-xl bg-white/5 rounded-2xl border border-white/10 p-4">
        <div className="flex flex-wrap gap-4">
          <div className="relative flex-1 min-w-[250px]">
            <Search className="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-slate-500" />
            <Input
              placeholder="搜索用户名/手机号..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="bg-white/5 border-white/10 text-white pl-10 focus:border-cyan-500/50"
            />
          </div>
          <Select value={statusFilter} onValueChange={setStatusFilter}>
            <SelectTrigger className="w-[150px] bg-white/5 border-white/10 text-white">
              <SelectValue placeholder="用户状态" />
            </SelectTrigger>
            <SelectContent className="backdrop-blur-xl bg-slate-800/90 border-white/10">
              <SelectItem value="all">全部状态</SelectItem>
              <SelectItem value="active">正常</SelectItem>
              <SelectItem value="banned">已封禁</SelectItem>
              <SelectItem value="pending">待审核</SelectItem>
            </SelectContent>
          </Select>
          <Button
            variant="outline"
            onClick={loadUsers}
            className="border-white/10 text-slate-300 bg-white/5 hover:bg-white/10"
          >
            <RefreshCw className="w-4 h-4 mr-2" />
            刷新
          </Button>
          <Button className="bg-gradient-to-r from-cyan-500 to-purple-500 hover:from-cyan-600 hover:to-purple-600">
            <Plus className="w-4 h-4 mr-2" />
            添加用户
          </Button>
        </div>
      </div>

<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        <div className="backdrop-blur-xl bg-white/5 rounded-2xl border border-white/10 p-5">
          <p className="text-3xl font-bold text-white">{users.length}</p>
          <p className="text-slate-400 mt-1">总用户数</p>
        </div>
        <div className="backdrop-blur-xl bg-white/5 rounded-2xl border border-white/10 p-5">
          <p className="text-3xl font-bold text-emerald-400">{users.filter((u) => u.status === "active").length}</p>
          <p className="text-slate-400 mt-1">活跃用户</p>
        </div>
        <div className="backdrop-blur-xl bg-white/5 rounded-2xl border border-white/10 p-5">
          <p className="text-3xl font-bold text-amber-400">
            {users.filter((u) => u.vipLevel && u.vipLevel > 0).length}
          </p>
          <p className="text-slate-400 mt-1">VIP用户</p>
        </div>
        <div className="backdrop-blur-xl bg-white/5 rounded-2xl border border-white/10 p-5">
          <p className="text-3xl font-bold text-red-400">{users.filter((u) => u.status === "banned").length}</p>
          <p className="text-slate-400 mt-1">已封禁</p>
        </div>
      </div>

<div className="backdrop-blur-xl bg-white/5 rounded-2xl border border-white/10 overflow-hidden">
        <div className="p-4 border-b border-white/10">
          <h2 className="text-lg font-semibold text-white">用户列表 ({filteredUsers.length})</h2>
        </div>
        {loading ? (
          <div className="text-center py-12 text-slate-400">加载中...</div>
        ) : filteredUsers.length === 0 ? (
          <div className="text-center py-12 text-slate-400">暂无用户数据</div>
        ) : (
          <div className="overflow-x-auto">
            <table className="w-full">
              <thead>
                <tr className="border-b border-white/10">
                  <th className="text-left text-slate-400 text-sm font-medium py-4 px-6">用户</th>
                  <th className="text-left text-slate-400 text-sm font-medium py-4 px-6">手机号</th>
                  <th className="text-left text-slate-400 text-sm font-medium py-4 px-6">余额</th>
                  <th className="text-left text-slate-400 text-sm font-medium py-4 px-6">VIP</th>
                  <th className="text-left text-slate-400 text-sm font-medium py-4 px-6">状态</th>
                  <th className="text-left text-slate-400 text-sm font-medium py-4 px-6">注册时间</th>
                  <th className="text-left text-slate-400 text-sm font-medium py-4 px-6">操作</th>
                </tr>
              </thead>
              <tbody>
                {filteredUsers.map((user) => (
                  <tr key={user.id} className="border-b border-white/5 hover:bg-white/5 transition-colors">
                    <td className="py-4 px-6">
                      <div className="flex items-center gap-3">
                        <Avatar className="w-10 h-10 border border-white/10">
                          <AvatarImage src={user.avatar || "/placeholder.svg"} />
                          <AvatarFallback className="bg-gradient-to-br from-cyan-500 to-purple-500 text-white">
                            {user.nickname?.[0]}
                          </AvatarFallback>
                        </Avatar>
                        <div>
                          <p className="text-white font-medium">{user.nickname}</p>
                          <p className="text-slate-500 text-xs">ID: {user.id}</p>
                        </div>
                      </div>
                    </td>
                    <td className="py-4 px-6 text-slate-300">{user.phone || "未绑定"}</td>
                    <td className="py-4 px-6 text-amber-400 font-medium">{user.balance?.toLocaleString() || 0} 币</td>
                    <td className="py-4 px-6">
                      {user.vipLevel && user.vipLevel > 0 ? (
                        <Badge className="bg-gradient-to-r from-amber-500/20 to-orange-500/20 text-amber-400 border border-amber-500/30">
                          VIP{user.vipLevel}
                        </Badge>
                      ) : (
                        <span className="text-slate-500">普通</span>
                      )}
                    </td>
                    <td className="py-4 px-6">
                      <Badge
                        className={
                          user.status === "active"
                            ? "bg-emerald-500/20 text-emerald-400 border border-emerald-500/30"
                            : user.status === "banned"
                              ? "bg-red-500/20 text-red-400 border border-red-500/30"
                              : "bg-amber-500/20 text-amber-400 border border-amber-500/30"
                        }
                      >
                        {user.status === "active" ? "正常" : user.status === "banned" ? "封禁" : "待审"}
                      </Badge>
                    </td>
                    <td className="py-4 px-6 text-slate-400 text-sm">
                      {user.createdAt ? new Date(user.createdAt).toLocaleDateString("zh-CN") : "-"}
                    </td>
                    <td className="py-4 px-6">
                      <DropdownMenu>
                        <DropdownMenuTrigger asChild>
                          <Button
                            variant="ghost"
                            size="icon"
                            className="text-slate-400 hover:text-white hover:bg-white/10"
                          >
                            <MoreVertical className="w-4 h-4" />
                          </Button>
                        </DropdownMenuTrigger>
                        <DropdownMenuContent className="backdrop-blur-xl bg-slate-800/90 border-white/10">
                          <DropdownMenuItem className="text-slate-300 hover:text-white focus:bg-white/10">
                            <Eye className="w-4 h-4 mr-2" />
                            查看详情
                          </DropdownMenuItem>
                          <DropdownMenuItem className="text-slate-300 hover:text-white focus:bg-white/10">
                            <Edit className="w-4 h-4 mr-2" />
                            编辑资料
                          </DropdownMenuItem>
                          {user.status === "active" ? (
                            <DropdownMenuItem
                              className="text-red-400 hover:text-red-300 focus:bg-white/10"
                              onClick={() => updateUserStatus(user.id!, "banned")}
                            >
                              <UserX className="w-4 h-4 mr-2" />
                              封禁用户
                            </DropdownMenuItem>
                          ) : (
                            <DropdownMenuItem
                              className="text-emerald-400 hover:text-emerald-300 focus:bg-white/10"
                              onClick={() => updateUserStatus(user.id!, "active")}
                            >
                              <UserCheck className="w-4 h-4 mr-2" />
                              解除封禁
                            </DropdownMenuItem>
                          )}
                          <DropdownMenuItem
                            className="text-red-400 hover:text-red-300 focus:bg-white/10"
                            onClick={() => deleteUser(user.id!)}
                          >
                            <Trash2 className="w-4 h-4 mr-2" />
                            删除用户
                          </DropdownMenuItem>
                        </DropdownMenuContent>
                      </DropdownMenu>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/streamers/page.tsx" isEdit="true" isMerged="true"
import dynamic from "next/dynamic"

const AdminStreamersClient = dynamic(() => import("./client"), { ssr: false })

export default function AdminStreamersPage() {
  return <AdminStreamersClient />
}
[V0_FILE]typescriptreact:file="app/admin/streamers/client.tsx" isEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import {
  Search,
  Plus,
  MoreVertical,
  Radio,
  Eye,
  Edit,
  Trash2,
  CheckCircle,
  XCircle,
  RefreshCw,
  Users,
} from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { db, type Streamer } from "@/lib/db/schema"

export default function AdminStreamersClient() {
  const [streamers, setStreamers] = useState<Streamer[]>([])
  const [searchTerm, setSearchTerm] = useState("")
  const [loading, setLoading] = useState(true)
  const [showAddDialog, setShowAddDialog] = useState(false)
  const [newStreamer, setNewStreamer] = useState({ name: "", game: "", description: "" })

useEffect(() => {
    loadStreamers()
  }, [])

const loadStreamers = async () => {
    setLoading(true)
    try {
      const allStreamers = await db.streamers.toArray()
      setStreamers(allStreamers)
    } catch (error) {
      console.error("Failed to load streamers:", error)
    }
    setLoading(false)
  }

const filteredStreamers = streamers.filter(
    (streamer) =>
      streamer.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
      streamer.game?.toLowerCase().includes(searchTerm.toLowerCase()),
  )

const toggleLiveStatus = async (streamerId: number, isLive: boolean) => {
    await db.streamers.update(streamerId, { isLive: !isLive })
    loadStreamers()
  }

const deleteStreamer = async (streamerId: number) => {
    if (confirm("确定要删除该主播吗？")) {
      await db.streamers.delete(streamerId)
      loadStreamers()
    }
  }

const addStreamer = async () => {
    if (!newStreamer.name || !newStreamer.game) {
      alert("请填写主播名称和游戏类型")
      return
    }
    await db.streamers.add({
      name: newStreamer.name,
      game: newStreamer.game,
      description: newStreamer.description,
      avatar: `/placeholder.svg?height=100&width=100&query=${newStreamer.name} avatar`,
      cover: `/placeholder.svg?height=200&width=300&query=${newStreamer.game} gaming`,
      followers: 0,
      isLive: false,
      isVerified: false,
      tags: [newStreamer.game],
      guildId: undefined,
      createdAt: new Date(),
    })
    setShowAddDialog(false)
    setNewStreamer({ name: "", game: "", description: "" })
    loadStreamers()
  }

return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-bold text-white">主播管理</h1>
        <p className="text-slate-400 mt-1">管理平台所有签约主播</p>
      </div>

<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        <div className="backdrop-blur-xl bg-white/5 rounded-2xl border border-white/10 p-5">
          <p className="text-3xl font-bold text-white">{streamers.length}</p>
          <p className="text-slate-400 mt-1">总主播数</p>
        </div>
        <div className="backdrop-blur-xl bg-white/5 rounded-2xl border border-white/10 p-5">
          <p className="text-3xl font-bold text-emerald-400">{streamers.filter((s) => s.isLive).length}</p>
          <p className="text-slate-400 mt-1">正在直播</p>
        </div>
        <div className="backdrop-blur-xl bg-white/5 rounded-2xl border border-white/10 p-5">
          <p className="text-3xl font-bold text-cyan-400">{streamers.filter((s) => s.isVerified).length}</p>
          <p className="text-slate-400 mt-1">已认证</p>
        </div>
        <div className="backdrop-blur-xl bg-white/5 rounded-2xl border border-white/10 p-5">
          <p className="text-3xl font-bold text-amber-400">
            {streamers.reduce((sum, s) => sum + (s.followers || 0), 0).toLocaleString()}
          </p>
          <p className="text-slate-400 mt-1">总粉丝数</p>
        </div>
      </div>

<div className="backdrop-blur-xl bg-white/5 rounded-2xl border border-white/10 overflow-hidden">
        <div className="p-4 border-b border-white/10">
          <h2 className="text-lg font-semibold text-white">主播列表 ({filteredStreamers.length})</h2>
        </div>
        <div className="p-4">
          {loading ? (
            <div className="text-center py-12 text-slate-400">加载中...</div>
          ) : (
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
              {filteredStreamers.map((streamer) => (
                <div
                  key={streamer.id}
                  className="backdrop-blur-xl bg-white/5 rounded-xl border border-white/10 overflow-hidden hover:border-white/20 transition-colors"
                >
                  <div className="relative h-32">
                    <img
                      src={
                        streamer.cover || `/placeholder.svg?height=128&width=300&query=${streamer.game} gaming cover`
                      }
                      alt={streamer.name}
                      className="w-full h-full object-cover"
                    />
                    {streamer.isLive && (
                      <Badge className="absolute top-2 left-2 bg-red-500 border-0">
                        <Radio className="w-3 h-3 mr-1 animate-pulse" />
                        直播中
                      </Badge>
                    )}
                    <DropdownMenu>
                      <DropdownMenuTrigger asChild>
                        <Button
                          variant="ghost"
                          size="icon"
                          className="absolute top-2 right-2 bg-black/50 text-white hover:bg-black/70"
                        >
                          <MoreVertical className="w-4 h-4" />
                        </Button>
                      </DropdownMenuTrigger>
                      <DropdownMenuContent className="backdrop-blur-xl bg-slate-800/90 border-white/10">
                        <DropdownMenuItem className="text-slate-300 focus:bg-white/10">
                          <Eye className="w-4 h-4 mr-2" />
                          查看详情
                        </DropdownMenuItem>
                        <DropdownMenuItem className="text-slate-300 focus:bg-white/10">
                          <Edit className="w-4 h-4 mr-2" />
                          编辑资料
                        </DropdownMenuItem>
                        <DropdownMenuItem
                          className="text-slate-300 focus:bg-white/10"
                          onClick={() => toggleLiveStatus(streamer.id!, streamer.isLive || false)}
                        >
                          {streamer.isLive ? (
                            <>
                              <XCircle className="w-4 h-4 mr-2" />
                              关闭直播
                            </>
                          ) : (
                            <>
                              <CheckCircle className="w-4 h-4 mr-2" />
                              开启直播
                            </>
                          )}
                        </DropdownMenuItem>
                        <DropdownMenuItem
                          className="text-red-400 focus:bg-white/10"
                          onClick={() => deleteStreamer(streamer.id!)}
                        >
                          <Trash2 className="w-4 h-4 mr-2" />
                          删除主播
                        </DropdownMenuItem>
                      </DropdownMenuContent>
                    </DropdownMenu>
                  </div>
                  <div className="p-4">
                    <div className="flex items-center gap-3 mb-3">
                      <Avatar className="w-12 h-12 border-2 border-white/10">
                        <AvatarImage src={streamer.avatar || "/placeholder.svg"} />
                        <AvatarFallback className="bg-gradient-to-br from-purple-500 to-pink-500 text-white">
                          {streamer.name[0]}
                        </AvatarFallback>
                      </Avatar>
                      <div className="flex-1 min-w-0">
                        <div className="flex items-center gap-2">
                          <span className="text-white font-medium truncate">{streamer.name}</span>
                          {streamer.isVerified && <CheckCircle className="w-4 h-4 text-cyan-400 shrink-0" />}
                        </div>
                        <p className="text-slate-400 text-sm truncate">{streamer.game}</p>
                      </div>
                    </div>
                    <div className="flex items-center justify-between text-sm">
                      <div className="flex items-center gap-1 text-slate-400">
                        <Users className="w-4 h-4" />
                        <span>{(streamer.followers || 0).toLocaleString()}</span>
                      </div>
                      <div className="flex gap-1">
                        {streamer.tags?.slice(0, 2).map((tag, i) => (
                          <Badge
                            key={i}
                            variant="outline"
                            className="text-xs border-white/10 text-slate-400 bg-white/5"
                          >
                            {tag}
                          </Badge>
                        ))}
                      </div>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>

<Dialog open={showAddDialog} onOpenChange={setShowAddDialog}>
        <DialogContent className="backdrop-blur-xl bg-slate-800/90 border-white/10">
          <DialogHeader>
            <DialogTitle className="text-white">添加新主播</DialogTitle>
          </DialogHeader>
          <div className="space-y-4">
            <div>
              <label className="text-sm text-slate-400 mb-1 block">主播名称</label>
              <Input
                value={newStreamer.name}
                onChange={(e) => setNewStreamer({ ...newStreamer, name: e.target.value })}
                placeholder="请输入主播名称"
                className="bg-white/5 border-white/10 text-white focus:border-cyan-500/50"
              />
            </div>
            <div>
              <label className="text-sm text-slate-400 mb-1 block">游戏类型</label>
              <Input
                value={newStreamer.game}
                onChange={(e) => setNewStreamer({ ...newStreamer, game: e.target.value })}
                placeholder="如：王者荣耀、英雄联盟"
                className="bg-white/5 border-white/10 text-white focus:border-cyan-500/50"
              />
            </div>
            <div>
              <label className="text-sm text-slate-400 mb-1 block">简介</label>
              <Input
                value={newStreamer.description}
                onChange={(e) => setNewStreamer({ ...newStreamer, description: e.target.value })}
                placeholder="主播简介"
                className="bg-white/5 border-white/10 text-white focus:border-cyan-500/50"
              />
            </div>
            <div className="flex gap-3 pt-2">
              <Button
                variant="outline"
                onClick={() => setShowAddDialog(false)}
                className="flex-1 border-white/10 text-slate-300 bg-white/5 hover:bg-white/10"
              >
                取消
              </Button>
              <Button
                onClick={addStreamer}
                className="flex-1 bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600"
              >
                确认添加
              </Button>
            </div>
          </div>
        </DialogContent>
      </Dialog>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/mall/page.tsx" isEdit="true" isMerged="true"
import dynamic from "next/dynamic"

const AdminMallClient = dynamic(() => import("./client"), { ssr: false })

export default function AdminMallPage() {
  return <AdminMallClient />
}
[V0_FILE]typescriptreact:file="app/admin/mall/client.tsx" isEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Search, Plus, Edit, Trash2, Eye, RefreshCw, Package, TrendingUp, Star, ShoppingBag } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { db, type Product } from "@/lib/db/schema"

export default function AdminMallClient() {
  const [products, setProducts] = useState<Product[]>([])
  const [searchTerm, setSearchTerm] = useState("")
  const [categoryFilter, setCategoryFilter] = useState("all")
  const [loading, setLoading] = useState(true)
  const [showAddDialog, setShowAddDialog] = useState(false)
  const [newProduct, setNewProduct] = useState({ name: "", category: "avatar", price: 0, description: "" })

useEffect(() => {
    loadProducts()
  }, [])

const loadProducts = async () => {
    setLoading(true)
    try {
      const allProducts = await db.products.toArray()
      setProducts(allProducts)
    } catch (error) {
      console.error("Failed to load products:", error)
    }
    setLoading(false)
  }

const filteredProducts = products.filter((product) => {
    const matchesSearch = product.name.toLowerCase().includes(searchTerm.toLowerCase())
    const matchesCategory = categoryFilter === "all" || product.category === categoryFilter
    return matchesSearch && matchesCategory
  })

const deleteProduct = async (productId: number) => {
    if (confirm("确定要删除该商品吗？")) {
      await db.products.delete(productId)
      loadProducts()
    }
  }

const addProduct = async () => {
    if (!newProduct.name || newProduct.price <= 0) {
      alert("请填写商品名称和价格")
      return
    }
    await db.products.add({
      name: newProduct.name,
      category: newProduct.category as any,
      price: newProduct.price,
      originalPrice: Math.floor(newProduct.price * 1.2),
      description: newProduct.description,
      image: `/placeholder.svg?height=200&width=200&query=${newProduct.name}`,
      stock: 999,
      sales: 0,
      rating: 5.0,
      tags: [newProduct.category],
      isHot: false,
      isNew: true,
      createdAt: new Date(),
    })
    setShowAddDialog(false)
    setNewProduct({ name: "", category: "avatar", price: 0, description: "" })
    loadProducts()
  }

const categories = [
    { value: "all", label: "全部分类" },
    { value: "avatar", label: "头像框" },
    { value: "gift", label: "礼物" },
    { value: "vip", label: "VIP特权" },
    { value: "skin", label: "皮肤" },
    { value: "points", label: "游戏点卡" },
  ]

return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-bold text-white">商城管理</h1>
        <p className="text-slate-400 mt-1">管理平台所有商品和库存</p>
      </div>

<div className="backdrop-blur-xl bg-white/5 rounded-2xl border border-white/10 p-4">
        <div className="flex flex-wrap gap-4">
          <div className="relative flex-1 min-w-[250px]">
            <Search className="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-slate-500" />
            <Input
              placeholder="搜索商品名称..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="bg-white/5 border-white/10 text-white pl-10 focus:border-cyan-500/50"
            />
          </div>
          <Select value={categoryFilter} onValueChange={setCategoryFilter}>
            <SelectTrigger className="w-[150px] bg-white/5 border-white/10 text-white">
              <SelectValue placeholder="商品分类" />
            </SelectTrigger>
            <SelectContent className="backdrop-blur-xl bg-slate-800/90 border-white/10">
              {categories.map((cat) => (
                <SelectItem key={cat.value} value={cat.value}>
                  {cat.label}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
          <Button
            variant="outline"
            onClick={loadProducts}
            className="border-white/10 text-slate-300 bg-white/5 hover:bg-white/10"
          >
            <RefreshCw className="w-4 h-4 mr-2" />
            刷新
          </Button>
          <Button
            className="bg-gradient-to-r from-cyan-500 to-blue-500 hover:from-cyan-600 hover:to-blue-600"
            onClick={() => setShowAddDialog(true)}
          >
            <Plus className="w-4 h-4 mr-2" />
            添加商品
          </Button>
        </div>
      </div>

<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        <div className="backdrop-blur-xl bg-white/5 rounded-2xl border border-white/10 p-5">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-3xl font-bold text-white">{products.length}</p>
              <p className="text-slate-400 mt-1">总商品数</p>
            </div>
            <div className="w-12 h-12 bg-blue-500/20 rounded-xl flex items-center justify-center">
              <Package className="w-6 h-6 text-blue-400" />
            </div>
          </div>
        </div>
        <div className="backdrop-blur-xl bg-white/5 rounded-2xl border border-white/10 p-5">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-3xl font-bold text-emerald-400">{products.filter((p) => (p.stock || 0) > 0).length}</p>
              <p className="text-slate-400 mt-1">在售商品</p>
            </div>
            <div className="w-12 h-12 bg-emerald-500/20 rounded-xl flex items-center justify-center">
              <ShoppingBag className="w-6 h-6 text-emerald-400" />
            </div>
          </div>
        </div>
        <div className="backdrop-blur-xl bg-white/5 rounded-2xl border border-white/10 p-5">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-3xl font-bold text-amber-400">{products.filter((p) => p.isHot).length}</p>
              <p className="text-slate-400 mt-1">热卖商品</p>
            </div>
            <div className="w-12 h-12 bg-amber-500/20 rounded-xl flex items-center justify-center">
              <Star className="w-6 h-6 text-amber-400" />
            </div>
          </div>
        </div>
        <div className="backdrop-blur-xl bg-white/5 rounded-2xl border border-white/10 p-5">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-3xl font-bold text-cyan-400">
                {products.reduce((sum, p) => sum + (p.sales || 0), 0).toLocaleString()}
              </p>
              <p className="text-slate-400 mt-1">总销量</p>
            </div>
            <div className="w-12 h-12 bg-cyan-500/20 rounded-xl flex items-center justify-center">
              <TrendingUp className="w-6 h-6 text-cyan-400" />
            </div>
          </div>
        </div>
      </div>

<Dialog open={showAddDialog} onOpenChange={setShowAddDialog}>
        <DialogContent className="backdrop-blur-xl bg-slate-800/90 border-white/10">
          <DialogHeader>
            <DialogTitle className="text-white">添加新商品</DialogTitle>
          </DialogHeader>
          <div className="space-y-4">
            <div>
              <label className="text-sm text-slate-400 mb-1 block">商品名称</label>
              <Input
                value={newProduct.name}
                onChange={(e) => setNewProduct({ ...newProduct, name: e.target.value })}
                placeholder="请输入商品名称"
                className="bg-white/5 border-white/10 text-white focus:border-cyan-500/50"
              />
            </div>
            <div>
              <label className="text-sm text-slate-400 mb-1 block">商品分类</label>
              <Select value={newProduct.category} onValueChange={(v) => setNewProduct({ ...newProduct, category: v })}>
                <SelectTrigger className="bg-white/5 border-white/10 text-white">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent className="backdrop-blur-xl bg-slate-800/90 border-white/10">
                  <SelectItem value="avatar">头像框</SelectItem>
                  <SelectItem value="gift">礼物</SelectItem>
                  <SelectItem value="vip">VIP特权</SelectItem>
                  <SelectItem value="skin">皮肤</SelectItem>
                  <SelectItem value="points">游戏点卡</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div>
              <label className="text-sm text-slate-400 mb-1 block">价格（币）</label>
              <Input
                type="number"
                value={newProduct.price}
                onChange={(e) => setNewProduct({ ...newProduct, price: Number(e.target.value) })}
                placeholder="请输入价格"
                className="bg-white/5 border-white/10 text-white focus:border-cyan-500/50"
              />
            </div>
            <div>
              <label className="text-sm text-slate-400 mb-1 block">商品描述</label>
              <Input
                value={newProduct.description}
                onChange={(e) => setNewProduct({ ...newProduct, description: e.target.value })}
                placeholder="商品描述"
                className="bg-white/5 border-white/10 text-white focus:border-cyan-500/50"
              />
            </div>
            <div className="flex gap-3 pt-2">
              <Button
                variant="outline"
                onClick={() => setShowAddDialog(false)}
                className="flex-1 border-white/10 text-slate-300 bg-white/5 hover:bg-white/10"
              >
                取消
              </Button>
              <Button
                onClick={addProduct}
                className="flex-1 bg-gradient-to-r from-cyan-500 to-blue-500 hover:from-cyan-600 hover:to-blue-600"
              >
                确认添加
              </Button>
            </div>
          </div>
        </DialogContent>
      </Dialog>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/orders/page.tsx" isEdit="true" isMerged="true"
import dynamic from "next/dynamic"

const AdminOrdersClient = dynamic(() => import("./client"), { ssr: false })

export default function AdminOrdersPage() {
  return <AdminOrdersClient />
}
[V0_FILE]typescriptreact:file="app/admin/orders/client.tsx" isEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import {
  Search,
  MoreVertical,
  Eye,
  RefreshCw,
  CheckCircle,
  XCircle,
  Clock,
  Package,
  FileText,
  Coins,
} from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { db, type Order } from "@/lib/db/schema"

export default function AdminOrdersClient() {
  const [orders, setOrders] = useState<Order[]>([])
  const [searchTerm, setSearchTerm] = useState("")
  const [statusFilter, setStatusFilter] = useState("all")
  const [loading, setLoading] = useState(true)

useEffect(() => {
    loadOrders()
  }, [])

const loadOrders = async () => {
    setLoading(true)
    try {
      const allOrders = await db.orders.orderBy("createdAt").reverse().toArray()
      setOrders(allOrders)
    } catch (error) {
      console.error("Failed to load orders:", error)
    }
    setLoading(false)
  }

const filteredOrders = orders.filter((order) => {
    const matchesSearch =
      order.orderNo?.includes(searchTerm) || order.itemName?.toLowerCase().includes(searchTerm.toLowerCase())
    const matchesStatus = statusFilter === "all" || order.status === statusFilter
    return matchesSearch && matchesStatus
  })

const updateOrderStatus = async (orderId: number, status: string) => {
    await db.orders.update(orderId, { status: status as any })
    loadOrders()
  }

const getStatusBadge = (status: string) => {
    switch (status) {
      case "completed":
        return <Badge className="bg-emerald-500/20 text-emerald-400 border border-emerald-500/30">已完成</Badge>
      case "pending":
        return <Badge className="bg-amber-500/20 text-amber-400 border border-amber-500/30">待处理</Badge>
      case "cancelled":
        return <Badge className="bg-red-500/20 text-red-400 border border-red-500/30">已取消</Badge>
      case "refunded":
        return <Badge className="bg-purple-500/20 text-purple-400 border border-purple-500/30">已退款</Badge>
      default:
        return <Badge className="bg-slate-500/20 text-slate-400 border border-slate-500/30">{status}</Badge>
    }
  }

return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-bold text-white">订单管理</h1>
        <p className="text-slate-400 mt-1">管理平台所有交易订单</p>
      </div>

<div className="backdrop-blur-xl bg-white/5 rounded-2xl border border-white/10 p-4">
        <div className="flex flex-wrap gap-4">
          <div className="relative flex-1 min-w-[250px]">
            <Search className="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-slate-500" />
            <Input
              placeholder="搜索订单号/商品名..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="bg-white/5 border-white/10 text-white pl-10 focus:border-cyan-500/50"
            />
          </div>
          <Select value={statusFilter} onValueChange={setStatusFilter}>
            <SelectTrigger className="w-[150px] bg-white/5 border-white/10 text-white">
              <SelectValue placeholder="订单状态" />
            </SelectTrigger>
            <SelectContent className="backdrop-blur-xl bg-slate-800/90 border-white/10">
              <SelectItem value="all">全部状态</SelectItem>
              <SelectItem value="pending">待处理</SelectItem>
              <SelectItem value="completed">已完成</SelectItem>
              <SelectItem value="cancelled">已取消</SelectItem>
              <SelectItem value="refunded">已退款</SelectItem>
            </SelectContent>
          </Select>
          <Button
            variant="outline"
            onClick={loadOrders}
            className="border-white/10 text-slate-300 bg-white/5 hover:bg-white/10"
          >
            <RefreshCw className="w-4 h-4 mr-2" />
            刷新
          </Button>
        </div>
      </div>

<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        <div className="backdrop-blur-xl bg-white/5 rounded-2xl border border-white/10 p-5">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-3xl font-bold text-white">{orders.length}</p>
              <p className="text-slate-400 mt-1">总订单数</p>
            </div>
            <div className="w-12 h-12 bg-blue-500/20 rounded-xl flex items-center justify-center">
              <FileText className="w-6 h-6 text-blue-400" />
            </div>
          </div>
        </div>
        <div className="backdrop-blur-xl bg-white/5 rounded-2xl border border-white/10 p-5">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-3xl font-bold text-amber-400">{orders.filter((o) => o.status === "pending").length}</p>
              <p className="text-slate-400 mt-1">待处理</p>
            </div>
            <div className="w-12 h-12 bg-amber-500/20 rounded-xl flex items-center justify-center">
              <Clock className="w-6 h-6 text-amber-400" />
            </div>
          </div>
        </div>
        <div className="backdrop-blur-xl bg-white/5 rounded-2xl border border-white/10 p-5">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-3xl font-bold text-emerald-400">
                {orders.filter((o) => o.status === "completed").length}
              </p>
              <p className="text-slate-400 mt-1">已完成</p>
            </div>
            <div className="w-12 h-12 bg-emerald-500/20 rounded-xl flex items-center justify-center">
              <CheckCircle className="w-6 h-6 text-emerald-400" />
            </div>
          </div>
        </div>
        <div className="backdrop-blur-xl bg-white/5 rounded-2xl border border-white/10 p-5">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-3xl font-bold text-cyan-400">
                {orders.reduce((sum, o) => sum + (o.amount || 0), 0).toLocaleString()}
              </p>
              <p className="text-slate-400 mt-1">订单总额(币)</p>
            </div>
            <div className="w-12 h-12 bg-cyan-500/20 rounded-xl flex items-center justify-center">
              <Coins className="w-6 h-6 text-cyan-400" />
            </div>
          </div>
        </div>
      </div>

<div className="backdrop-blur-xl bg-white/5 rounded-2xl border border-white/10 overflow-hidden">
        <div className="p-4 border-b border-white/10">
          <h2 className="text-lg font-semibold text-white">订单列表 ({filteredOrders.length})</h2>
        </div>
        {loading ? (
          <div className="text-center py-12 text-slate-400">加载中...</div>
        ) : filteredOrders.length === 0 ? (
          <div className="text-center py-12 text-slate-400">暂无订单数据</div>
        ) : (
          <div className="overflow-x-auto">
            <table className="w-full">
              <thead>
                <tr className="border-b border-white/10">
                  <th className="text-left text-slate-400 text-sm font-medium py-4 px-6">订单号</th>
                  <th className="text-left text-slate-400 text-sm font-medium py-4 px-6">商品</th>
                  <th className="text-left text-slate-400 text-sm font-medium py-4 px-6">类型</th>
                  <th className="text-left text-slate-400 text-sm font-medium py-4 px-6">金额</th>
                  <th className="text-left text-slate-400 text-sm font-medium py-4 px-6">状态</th>
                  <th className="text-left text-slate-400 text-sm font-medium py-4 px-6">时间</th>
                  <th className="text-left text-slate-400 text-sm font-medium py-4 px-6">操作</th>
                </tr>
              </thead>
              <tbody>
                {filteredOrders.map((order) => (
                  <tr key={order.id} className="border-b border-white/5 hover:bg-white/5 transition-colors">
                    <td className="py-4 px-6 text-cyan-400 font-mono text-sm">{order.orderNo}</td>
                    <td className="py-4 px-6">
                      <div className="flex items-center gap-2">
                        <Package className="w-4 h-4 text-slate-500" />
                        <span className="text-white">{order.itemName}</span>
                      </div>
                    </td>
                    <td className="py-4 px-6">
                      <Badge variant="outline" className="border-white/10 text-slate-400 bg-white/5">
                        {order.type === "product" ? "商品" : order.type === "service" ? "服务" : "预订"}
                      </Badge>
                    </td>
                    <td className="py-4 px-6 text-amber-400 font-medium">{order.amount} 币</td>
                    <td className="py-4 px-6">{getStatusBadge(order.status)}</td>
                    <td className="py-4 px-6 text-slate-400 text-sm">
                      {order.createdAt ? new Date(order.createdAt).toLocaleString("zh-CN") : "-"}
                    </td>
                    <td className="py-4 px-6">
                      <DropdownMenu>
                        <DropdownMenuTrigger asChild>
                          <Button
                            variant="ghost"
                            size="icon"
                            className="text-slate-400 hover:text-white hover:bg-white/10"
                          >
                            <MoreVertical className="w-4 h-4" />
                          </Button>
                        </DropdownMenuTrigger>
                        <DropdownMenuContent className="backdrop-blur-xl bg-slate-800/90 border-white/10">
                          <DropdownMenuItem className="text-slate-300 focus:bg-white/10">
                            <Eye className="w-4 h-4 mr-2" />
                            查看详情
                          </DropdownMenuItem>
                          {order.status === "pending" && (
                            <>
                              <DropdownMenuItem
                                className="text-emerald-400 focus:bg-white/10"
                                onClick={() => updateOrderStatus(order.id!, "completed")}
                              >
                                <CheckCircle className="w-4 h-4 mr-2" />
                                完成订单
                              </DropdownMenuItem>
                              <DropdownMenuItem
                                className="text-red-400 focus:bg-white/10"
                                onClick={() => updateOrderStatus(order.id!, "cancelled")}
                              >
                                <XCircle className="w-4 h-4 mr-2" />
                                取消订单
                              </DropdownMenuItem>
                            </>
                          )}
                          {order.status === "completed" && (
                            <DropdownMenuItem
                              className="text-purple-400 focus:bg-white/10"
                              onClick={() => updateOrderStatus(order.id!, "refunded")}
                            >
                              <Clock className="w-4 h-4 mr-2" />
                              申请退款
                            </DropdownMenuItem>
                          )}
                        </DropdownMenuContent>
                      </DropdownMenu>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/pawn/page.tsx" isEdit="true" isMerged="true"
import dynamic from "next/dynamic"

const AdminPawnClient = dynamic(() => import("./client"), { ssr: false })

export default function AdminPawnPage() {
  return <AdminPawnClient />
}
[V0_FILE]typescriptreact:file="app/admin/pawn/client.tsx" isEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import {
  Search,
  MoreVertical,
  Eye,
  RefreshCw,
  CheckCircle,
  XCircle,
  Wallet,
  FileText,
  Clock,
  Landmark,
  TrendingUp,
} from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { db, type AccountPawn } from "@/lib/db/schema"

export default function AdminPawnClient() {
  const [pawns, setPawns] = useState<AccountPawn[]>([])
  const [searchTerm, setSearchTerm] = useState("")
  const [statusFilter, setStatusFilter] = useState("all")
  const [loading, setLoading] = useState(true)

useEffect(() => {
    loadPawns()
  }, [])

const loadPawns = async () => {
    setLoading(true)
    try {
      const allPawns = await db.accountPawns.orderBy("createdAt").reverse().toArray()
      setPawns(allPawns)
    } catch (error) {
      console.error("Failed to load pawns:", error)
    }
    setLoading(false)
  }

const filteredPawns = pawns.filter((pawn) => {
    const matchesSearch =
      pawn.game?.toLowerCase().includes(searchTerm.toLowerCase()) || pawn.contactPhone?.includes(searchTerm)
    const matchesStatus = statusFilter === "all" || pawn.status === statusFilter
    return matchesSearch && matchesStatus
  })

const updatePawnStatus = async (pawnId: number, status: string) => {
    await db.accountPawns.update(pawnId, { status: status as any })
    loadPawns()
  }

const getStatusBadge = (status: string) => {
    switch (status) {
      case "pending":
        return <Badge className="bg-amber-500/20 text-amber-400 border border-amber-500/30">待审核</Badge>
      case "approved":
        return <Badge className="bg-cyan-500/20 text-cyan-400 border border-cyan-500/30">已通过</Badge>
      case "pawned":
        return <Badge className="bg-purple-500/20 text-purple-400 border border-purple-500/30">质押中</Badge>
      case "redeemed":
        return <Badge className="bg-emerald-500/20 text-emerald-400 border border-emerald-500/30">已赎回</Badge>
      case "expired":
        return <Badge className="bg-red-500/20 text-red-400 border border-red-500/30">已过期</Badge>
      case "rejected":
        return <Badge className="bg-slate-500/20 text-slate-400 border border-slate-500/30">已拒绝</Badge>
      default:
        return <Badge className="bg-slate-500/20 text-slate-400 border border-slate-500/30">{status}</Badge>
    }
  }

return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-bold text-white">典当管理</h1>
        <p className="text-slate-400 mt-1">管理游戏账号质押申请</p>
      </div>

<div className="backdrop-blur-xl bg-white/5 rounded-2xl border border-white/10 p-4">
        <div className="flex flex-wrap gap-4">
          <div className="relative flex-1 min-w-[250px]">
            <Search className="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-slate-500" />
            <Input
              placeholder="搜索游戏/手机号..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="bg-white/5 border-white/10 text-white pl-10 focus:border-amber-500/50"
            />
          </div>
          <Select value={statusFilter} onValueChange={setStatusFilter}>
            <SelectTrigger className="w-[150px] bg-white/5 border-white/10 text-white">
              <SelectValue placeholder="典当状态" />
            </SelectTrigger>
            <SelectContent className="backdrop-blur-xl bg-slate-800/90 border-white/10">
              <SelectItem value="all">全部状态</SelectItem>
              <SelectItem value="pending">待审核</SelectItem>
              <SelectItem value="approved">已通过</SelectItem>
              <SelectItem value="pawned">质押中</SelectItem>
              <SelectItem value="redeemed">已赎回</SelectItem>
              <SelectItem value="expired">已过期</SelectItem>
              <SelectItem value="rejected">已拒绝</SelectItem>
            </SelectContent>
          </Select>
          <Button
            variant="outline"
            onClick={loadPawns}
            className="border-white/10 text-slate-300 bg-white/5 hover:bg-white/10"
          >
            <RefreshCw className="w-4 h-4 mr-2" />
            刷新
          </Button>
        </div>
      </div>

<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        <div className="backdrop-blur-xl bg-gradient-to-br from-amber-500/10 to-amber-600/5 rounded-2xl border border-amber-500/20 p-5">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-3xl font-bold text-white">{pawns.length}</p>
              <p className="text-amber-400 mt-1">总申请数</p>
            </div>
            <div className="w-12 h-12 bg-amber-500/20 rounded-xl flex items-center justify-center">
              <FileText className="w-6 h-6 text-amber-400" />
            </div>
          </div>
        </div>
        <div className="backdrop-blur-xl bg-gradient-to-br from-cyan-500/10 to-cyan-600/5 rounded-2xl border border-cyan-500/20 p-5">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-3xl font-bold text-white">{pawns.filter((p) => p.status === "pending").length}</p>
              <p className="text-cyan-400 mt-1">待审核</p>
            </div>
            <div className="w-12 h-12 bg-cyan-500/20 rounded-xl flex items-center justify-center">
              <Clock className="w-6 h-6 text-cyan-400" />
            </div>
          </div>
        </div>
        <div className="backdrop-blur-xl bg-gradient-to-br from-purple-500/10 to-purple-600/5 rounded-2xl border border-purple-500/20 p-5">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-3xl font-bold text-white">{pawns.filter((p) => p.status === "pawned").length}</p>
              <p className="text-purple-400 mt-1">质押中</p>
            </div>
            <div className="w-12 h-12 bg-purple-500/20 rounded-xl flex items-center justify-center">
              <Landmark className="w-6 h-6 text-purple-400" />
            </div>
          </div>
        </div>
        <div className="backdrop-blur-xl bg-gradient-to-br from-emerald-500/10 to-emerald-600/5 rounded-2xl border border-emerald-500/20 p-5">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-3xl font-bold text-white">
                ¥
                {pawns
                  .filter((p) => p.status === "pawned")
                  .reduce((sum, p) => sum + (p.pawnAmount || 0), 0)
                  .toLocaleString()}
              </p>
              <p className="text-emerald-400 mt-1">在押金额</p>
            </div>
            <div className="w-12 h-12 bg-emerald-500/20 rounded-xl flex items-center justify-center">
              <TrendingUp className="w-6 h-6 text-emerald-400" />
            </div>
          </div>
        </div>
      </div>

<div className="backdrop-blur-xl bg-white/5 rounded-2xl border border-white/10 overflow-hidden">
        <div className="p-4 border-b border-white/10">
          <h2 className="text-lg font-semibold text-white">典当申请 ({filteredPawns.length})</h2>
        </div>
        {loading ? (
          <div className="text-center py-12 text-slate-400">加载中...</div>
        ) : filteredPawns.length === 0 ? (
          <div className="text-center py-12 text-slate-400">暂无典当申请</div>
        ) : (
          <div className="overflow-x-auto">
            <table className="w-full">
              <thead>
                <tr className="border-b border-white/10">
                  <th className="text-left text-slate-400 text-sm font-medium py-4 px-6">游戏</th>
                  <th className="text-left text-slate-400 text-sm font-medium py-4 px-6">估值</th>
                  <th className="text-left text-slate-400 text-sm font-medium py-4 px-6">典当金额</th>
                  <th className="text-left text-slate-400 text-sm font-medium py-4 px-6">期限</th>
                  <th className="text-left text-slate-400 text-sm font-medium py-4 px-6">联系电话</th>
                  <th className="text-left text-slate-400 text-sm font-medium py-4 px-6">状态</th>
                  <th className="text-left text-slate-400 text-sm font-medium py-4 px-6">申请时间</th>
                  <th className="text-left text-slate-400 text-sm font-medium py-4 px-6">操作</th>
                </tr>
              </thead>
              <tbody>
                {filteredPawns.map((pawn) => (
                  <tr key={pawn.id} className="border-b border-white/5 hover:bg-white/5 transition-colors">
                    <td className="py-4 px-6">
                      <div className="flex items-center gap-2">
                        <Wallet className="w-4 h-4 text-amber-500" />
                        <span className="text-white">{pawn.game}</span>
                      </div>
                    </td>
                    <td className="py-4 px-6 text-cyan-400">¥{pawn.estimatedValue?.toLocaleString()}</td>
                    <td className="py-4 px-6 text-amber-400 font-medium">¥{pawn.pawnAmount?.toLocaleString()}</td>
                    <td className="py-4 px-6 text-slate-300">{pawn.pawnPeriod}天</td>
                    <td className="py-4 px-6 text-slate-300">{pawn.contactPhone}</td>
                    <td className="py-4 px-6">{getStatusBadge(pawn.status)}</td>
                    <td className="py-4 px-6 text-slate-400 text-sm">
                      {pawn.createdAt ? new Date(pawn.createdAt).toLocaleString("zh-CN") : "-"}
                    </td>
                    <td className="py-4 px-6">
                      <DropdownMenu>
                        <DropdownMenuTrigger asChild>
                          <Button
                            variant="ghost"
                            size="icon"
                            className="text-slate-400 hover:text-white hover:bg-white/10"
                          >
                            <MoreVertical className="w-4 h-4" />
                          </Button>
                        </DropdownMenuTrigger>
                        <DropdownMenuContent className="backdrop-blur-xl bg-slate-800/90 border-white/10">
                          <DropdownMenuItem className="text-slate-300 focus:bg-white/10">
                            <Eye className="w-4 h-4 mr-2" />
                            查看详情
                          </DropdownMenuItem>
                          <DropdownMenuItem className="text-slate-300 focus:bg-white/10">
                            <FileText className="w-4 h-4 mr-2" />
                            查看截图
                          </DropdownMenuItem>
                          {pawn.status === "pending" && (
                            <>
                              <DropdownMenuItem
                                className="text-emerald-400 focus:bg-white/10"
                                onClick={() => updatePawnStatus(pawn.id!, "approved")}
                              >
                                <CheckCircle className="w-4 h-4 mr-2" />
                                审核通过
                              </DropdownMenuItem>
                              <DropdownMenuItem
                                className="text-red-400 focus:bg-white/10"
                                onClick={() => updatePawnStatus(pawn.id!, "rejected")}
                              >
                                <XCircle className="w-4 h-4 mr-2" />
                                拒绝申请
                              </DropdownMenuItem>
                            </>
                          )}
                          {pawn.status === "approved" && (
                            <DropdownMenuItem
                              className="text-purple-400 focus:bg-white/10"
                              onClick={() => updatePawnStatus(pawn.id!, "pawned")}
                            >
                              <Wallet className="w-4 h-4 mr-2" />
                              确认放款
                            </DropdownMenuItem>
                          )}
                          {pawn.status === "pawned" && (
                            <DropdownMenuItem
                              className="text-emerald-400 focus:bg-white/10"
                              onClick={() => updatePawnStatus(pawn.id!, "redeemed")}
                            >
                              <CheckCircle className="w-4 h-4 mr-2" />
                              确认赎回
                            </DropdownMenuItem>
                          )}
                        </DropdownMenuContent>
                      </DropdownMenu>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </div>
    </div>
  )
}
[V0_FILE]jpg:file="public/streamer-5.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/streamer-5-L8XygdBDPh9iDiqAOJIHHiXMnWlR0D.jpg" isMerged="true"
[V0_FILE]jpg:file="public/streamer-6.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/streamer-6-H0lO4RoMSjUTiOazHlnBndOe9d68Xp.jpg" isMerged="true"
[V0_FILE]jpg:file="public/party-lol.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/party-lol-gbOFkvAUDGIRBxoGsnzPljSdy2ozvB.jpg" isMerged="true"
[V0_FILE]jpg:file="public/party-hok.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/party-hok-G4wXjDfEztgPMQQKFomBXErmeeuMQJ.jpg" isMerged="true"
[V0_FILE]jpg:file="public/party-team.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/party-team-cGI1erKjlqBoBiqfZTim085j658Rgw.jpg" isMerged="true"
[V0_FILE]css:file="app/globals.css" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true"
@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --radius: 0.625rem;
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);

/* 扩展语义化颜色系统 */
  --color-background: #050508;
  --color-foreground: #ffffff;

/* 主色调 - 电竞青色 */
  --color-primary: #00f0ff;
  --color-primary-foreground: #000000;
  --color-primary-hover: #00d4e0;

/* 次色调 - 电竞粉色 */
  --color-secondary: #ff0099;
  --color-secondary-foreground: #ffffff;
  --color-secondary-hover: #e6008a;

/* 强调色 - 电竞紫色 */
  --color-accent: #bd00ff;
  --color-accent-foreground: #ffffff;
  --color-accent-hover: #a800e6;

/* 卡片和容器 */
  --color-card: #12121a;
  --color-card-foreground: #ffffff;
  --color-card-hover: #1a1a24;

/* 静音/次要内容 */
  --color-muted: #1f1f2e;
  --color-muted-foreground: #a1a1aa;

/* 边框 */
  --color-border: #2a2a35;
  --color-border-hover: #3a3a45;

/* 状态颜色 */
  --color-success: #22c55e;
  --color-success-foreground: #ffffff;
  --color-warning: #f59e0b;
  --color-warning-foreground: #000000;
  --color-destructive: #ef4444;
  --color-destructive-foreground: #ffffff;
  --color-info: #3b82f6;
  --color-info-foreground: #ffffff;

/* 典当/金融专用 - 金色系 */
  --color-gold: #f59e0b;
  --color-gold-foreground: #000000;
  --color-gold-light: #fbbf24;
  --color-gold-dark: #d97706;

/* 输入框 */
  --color-input: #1a1a24;
  --color-input-foreground: #ffffff;
  --color-input-placeholder: #71717a;

/* 弹出层/模态框 */
  --color-popover: #1a1a24;
  --color-popover-foreground: #ffffff;

/* 环形/进度 */
  --color-ring: #00f0ff;

/* 圆角 */
  --radius-lg: 0.75rem;
  --radius-md: 0.5rem;
  --radius-sm: 0.25rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;

/* 动画 */
  --animate-pulse-slow: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  --animate-bounce-slow: bounce 2s infinite;
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.145 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.145 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.985 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.396 0.141 25.723);
  --destructive-foreground: oklch(0.637 0.237 25.331);
  --border: oklch(0.269 0 0);
  --input: oklch(0.269 0 0);
  --ring: oklch(0.439 0 0);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(0.269 0 0);
  --sidebar-ring: oklch(0.439 0 0);
}

@theme inline {
  /* optional: --font-sans, --font-serif, --font-mono if they are applied in the layout.tsx */
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
    background-color: var(--color-background);
    color: var(--color-foreground);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
  }

/* 为常用元素设置默认样式 */
  input,
  textarea,
  select {
    background-color: var(--color-input);
    color: var(--color-input-foreground);
    border-color: var(--color-border);
  }

input::placeholder,
  textarea::placeholder {
    color: var(--color-input-placeholder);
  }
}

@layer utilities {
  .glass {
    background-color: rgb(255 255 255 / 0.05);
    backdrop-filter: blur(12px);
    border: 1px solid rgb(255 255 255 / 0.1);
  }

.glass-card {
    background-color: rgb(26 26 36 / 0.8);
    backdrop-filter: blur(4px);
    border: 1px solid rgb(255 255 255 / 0.05);
  }

.text-gradient {
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    background-image: linear-gradient(to right, var(--color-primary), var(--color-accent), var(--color-secondary));
  }

/* 添加更多渐变工具类 */
  .text-gradient-gold {
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    background-image: linear-gradient(to right, var(--color-gold-light), var(--color-gold), var(--color-gold-dark));
  }

.bg-gradient-primary {
    background-image: linear-gradient(to right, var(--color-primary), var(--color-accent));
  }

.bg-gradient-secondary {
    background-image: linear-gradient(to right, var(--color-secondary), var(--color-accent));
  }

.bg-gradient-gold {
    background-image: linear-gradient(to right, var(--color-gold-light), var(--color-gold-dark));
  }

.neon-shadow {
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.3), 0 0 20px rgba(0, 240, 255, 0.1);
  }

.neon-shadow-secondary {
    box-shadow: 0 0 10px rgba(255, 0, 153, 0.3), 0 0 20px rgba(255, 0, 153, 0.1);
  }

.neon-shadow-gold {
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.3), 0 0 20px rgba(245, 158, 11, 0.1);
  }

.neon-text {
    text-shadow: 0 0 5px rgba(0, 240, 255, 0.5);
  }

.neon-text-secondary {
    text-shadow: 0 0 5px rgba(255, 0, 153, 0.5);
  }

/* 添加常用按钮样式 */
  .btn-primary {
    background-color: var(--color-primary);
    color: var(--color-primary-foreground);
  }

.btn-primary:hover {
    background-color: var(--color-primary-hover);
  }

.btn-secondary {
    background-color: var(--color-secondary);
    color: var(--color-secondary-foreground);
  }

.btn-secondary:hover {
    background-color: var(--color-secondary-hover);
  }

.btn-accent {
    background-color: var(--color-accent);
    color: var(--color-accent-foreground);
  }

.btn-accent:hover {
    background-color: var(--color-accent-hover);
  }

.btn-gold {
    background-image: linear-gradient(to right, var(--color-gold-light), var(--color-gold-dark));
    color: var(--color-gold-foreground);
  }
}
[V0_FILE]typescriptreact:file="app/recharge/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { ArrowLeft, Coins, Gem, Check, CreditCard } from "lucide-react"
import { useAppContext } from "@/components/providers/app-provider"
import { Button } from "@/components/ui/button"

export default function RechargePage() {
  const router = useRouter()
  const { recharge, wallet } = useAppContext()
  const [selectedAmount, setSelectedAmount] = useState<number | null>(null)
  const [selectedPayment, setSelectedPayment] = useState<"wechat" | "alipay">("wechat")
  const [showSuccess, setShowSuccess] = useState(false)
  const [purchasedCoins, setPurchasedCoins] = useState(0)

const amounts = [
    { value: 6, coins: 60, bonus: 0 },
    { value: 30, coins: 300, bonus: 20 },
    { value: 68, coins: 680, bonus: 50 },
    { value: 128, coins: 1280, bonus: 120 },
    { value: 328, coins: 3280, bonus: 350 },
    { value: 648, coins: 6480, bonus: 800 },
  ]

const handleSelectAmount = (index: number) => {
    setSelectedAmount(index)
  }

const handleRecharge = () => {
    if (selectedAmount === null) return
    const item = amounts[selectedAmount]
    const totalCoins = item.coins + item.bonus
    recharge(totalCoins)
    setPurchasedCoins(totalCoins)
    setShowSuccess(true)
  }

const selectedItem = selectedAmount !== null ? amounts[selectedAmount] : null

return (
    <div className="min-h-screen bg-background pb-32 max-w-md mx-auto">
      <header className="sticky top-0 z-40 glass px-4 py-3 flex items-center gap-3">
        <button onClick={() => router.back()} className="text-white/70 hover:text-white">
          <ArrowLeft size={20} />
        </button>
        <h1 className="font-bold text-lg">充值中心</h1>
      </header>

<div className="p-4 space-y-6">
        {/* 当前余额 */}
        <div className="glass-card p-4 rounded-2xl flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div className="w-12 h-12 rounded-full bg-primary/20 flex items-center justify-center">
              <Coins size={24} className="text-primary" />
            </div>
            <div>
              <p className="text-xs text-white/60">当前余额</p>
              <p className="text-2xl font-bold">
                {wallet.balance} <span className="text-sm text-white/60">币</span>
              </p>
            </div>
          </div>
        </div>

{/* Banner */}
        <div className="w-full h-24 rounded-2xl bg-gradient-to-r from-purple-600 to-blue-600 relative overflow-hidden flex items-center px-6">
          <div className="relative z-10">
            <h2 className="text-lg font-bold text-white mb-1">首充双倍</h2>
            <p className="text-xs text-white/80">限时特惠 赠送绝版头像框</p>
          </div>
          <div className="absolute right-0 bottom-0 w-24 h-24 opacity-50">
            <Gem className="w-full h-full text-white/20 rotate-12 translate-x-6 translate-y-6" />
          </div>
        </div>

{/* 充值金额选择 */}
        <div className="space-y-3">
          <h3 className="font-bold text-sm text-white/70">选择充值金额</h3>
          <div className="grid grid-cols-3 gap-3">
            {amounts.map((item, index) => (
              <button
                key={item.value}
                className={`glass-card p-3 rounded-xl flex flex-col items-center justify-center gap-1.5 transition-all border ${
                  selectedAmount === index
                    ? "border-primary bg-primary/20 ring-2 ring-primary/50"
                    : "border-white/5 hover:bg-white/10 hover:border-primary/50"
                }`}
                onClick={() => handleSelectAmount(index)}
              >
                <div className="flex items-center gap-1">
                  <Coins size={14} className="text-primary" />
                  <span className="font-bold">{item.coins}</span>
                </div>
                <span className="text-xs text-white/70">¥{item.value}</span>
                {item.bonus > 0 && (
                  <span className="text-[10px] text-yellow-400 bg-yellow-500/10 px-1.5 rounded-full">
                    送{item.bonus}币
                  </span>
                )}
              </button>
            ))}
          </div>
        </div>

{/* 支付方式 */}
        <div className="space-y-3">
          <h3 className="font-bold text-sm text-white/70">支付方式</h3>
          <div className="glass-card rounded-xl p-0 overflow-hidden">
            <button
              onClick={() => setSelectedPayment("wechat")}
              className="w-full flex items-center gap-3 p-4 border-b border-white/5 hover:bg-white/5 transition-colors"
            >
              <div className="w-8 h-8 rounded-full bg-green-500/20 flex items-center justify-center">
                <span className="text-green-500 text-lg font-bold">微</span>
              </div>
              <div className="flex-1 text-left">
                <div className="font-bold text-sm">微信支付</div>
                <div className="text-[10px] text-white/40">推荐使用</div>
              </div>
              <div
                className={`w-5 h-5 rounded-full border-2 flex items-center justify-center ${
                  selectedPayment === "wechat" ? "border-primary bg-primary" : "border-white/20"
                }`}
              >
                {selectedPayment === "wechat" && <Check size={12} className="text-white" />}
              </div>
            </button>
            <button
              onClick={() => setSelectedPayment("alipay")}
              className="w-full flex items-center gap-3 p-4 hover:bg-white/5 transition-colors"
            >
              <div className="w-8 h-8 rounded-full bg-blue-500/20 flex items-center justify-center">
                <span className="text-blue-500 text-lg font-bold">支</span>
              </div>
              <div className="flex-1 text-left">
                <div className="font-bold text-sm">支付宝</div>
              </div>
              <div
                className={`w-5 h-5 rounded-full border-2 flex items-center justify-center ${
                  selectedPayment === "alipay" ? "border-primary bg-primary" : "border-white/20"
                }`}
              >
                {selectedPayment === "alipay" && <Check size={12} className="text-white" />}
              </div>
            </button>
          </div>
        </div>

<p className="text-center text-xs text-white/30">充值即代表同意《用户充值协议》</p>
      </div>

<div className="fixed bottom-16 left-0 right-0 max-w-md mx-auto p-4 bg-gradient-to-t from-background via-background to-transparent">
        <div className="flex items-center justify-between mb-3">
          <span className="text-sm text-white/60">应付金额</span>
          <span className="text-xl font-bold text-primary">
            {selectedItem ? `¥${selectedItem.value}` : "请选择金额"}
          </span>
        </div>
        <Button
          onClick={handleRecharge}
          disabled={selectedAmount === null}
          className="w-full h-12 bg-gradient-to-r from-primary to-cyan-500 hover:from-primary/90 hover:to-cyan-500/90 text-white font-bold text-base rounded-xl disabled:opacity-50 disabled:cursor-not-allowed"
        >
          <CreditCard size={18} className="mr-2" />
          立即充值
        </Button>
      </div>

{/* 充值成功弹窗 */}
      {showSuccess && (
        <div className="fixed inset-0 z-50 bg-black/80 flex items-center justify-center p-4">
          <div className="bg-card rounded-2xl p-6 w-full max-w-sm border border-border animate-in zoom-in-95 duration-200">
            <div className="flex flex-col items-center">
              <div className="w-16 h-16 rounded-full bg-green-500/20 flex items-center justify-center mb-4">
                <Check size={32} className="text-green-500" />
              </div>
              <h3 className="text-lg font-bold text-foreground mb-2">充值成功</h3>
              <p className="text-sm text-foreground/60 mb-4">
                已充值 <span className="text-primary font-bold">{purchasedCoins}</span> 币
              </p>
              <p className="text-xs text-foreground/40 mb-6">当前余额: {wallet.balance} 币</p>
              <Button onClick={() => setShowSuccess(false)} className="w-full bg-primary hover:bg-primary/90">
                确定
              </Button>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/layout.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"
import { useState } from "react"
import Link from "next/link"
import { usePathname } from "next/navigation"
import { useSearchParams } from "next/navigation"
import {
  LayoutDashboard,
  Users,
  Radio,
  ShoppingBag,
  ClipboardList,
  Landmark,
  Settings,
  ChevronLeft,
  ChevronRight,
  LogOut,
  Bell,
  Search,
} from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Suspense } from "react"

const menuItems = [
  { icon: LayoutDashboard, label: "数据概览", href: "/admin" },
  { icon: Users, label: "用户管理", href: "/admin/users" },
  { icon: Radio, label: "主播管理", href: "/admin/streamers" },
  { icon: ShoppingBag, label: "商城管理", href: "/admin/mall" },
  { icon: ClipboardList, label: "订单管理", href: "/admin/orders" },
  { icon: Landmark, label: "典当管理", href: "/admin/pawn" },
  { icon: Settings, label: "系统设置", href: "/admin/settings" },
]

export default function AdminLayout({
  children,
}: {
  children: React.ReactNode
}) {
  const pathname = usePathname()
  const searchParams = useSearchParams()
  const [collapsed, setCollapsed] = useState(false)

if (pathname === "/admin/login") {
    return <div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900">{children}</div>
  }

return (
    <Suspense fallback={<div>Loading...</div>}>
      <div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900">
        <div className="fixed inset-0 overflow-hidden pointer-events-none">
          <div className="absolute -top-40 -right-40 w-80 h-80 bg-purple-500/20 rounded-full blur-3xl" />
          <div className="absolute top-1/2 -left-40 w-80 h-80 bg-cyan-500/20 rounded-full blur-3xl" />
          <div className="absolute -bottom-40 right-1/3 w-80 h-80 bg-pink-500/20 rounded-full blur-3xl" />
        </div>

<aside className={`fixed left-0 top-0 h-full z-50 transition-all duration-300 ${collapsed ? "w-20" : "w-64"}`}>
          <div className="h-full backdrop-blur-xl bg-slate-900/70 border-r border-white/10 flex flex-col">
            {/* Logo */}
            <div className="h-16 flex items-center justify-between px-4 border-b border-white/10">
              {!collapsed && (
                <Link href="/admin" className="flex items-center gap-2">
                  <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-cyan-400 to-purple-500 flex items-center justify-center">
                    <span className="text-white font-bold text-sm">W</span>
                  </div>
                  <span className="text-white font-bold">玩值电竞</span>
                </Link>
              )}
              <Button
                variant="ghost"
                size="icon"
                onClick={() => setCollapsed(!collapsed)}
                className="text-slate-400 hover:text-white hover:bg-white/10"
              >
                {collapsed ? <ChevronRight className="w-4 h-4" /> : <ChevronLeft className="w-4 h-4" />}
              </Button>
            </div>

{/* 导航菜单 */}
            <nav className="flex-1 py-4 px-2 space-y-1 overflow-y-auto">
              {menuItems.map((item) => {
                const isActive = pathname === item.href
                return (
                  <Link
                    key={item.href}
                    href={item.href}
                    className={`flex items-center gap-3 px-3 py-2.5 rounded-lg transition-all ${
                      isActive
                        ? "bg-gradient-to-r from-cyan-500/20 to-purple-500/20 text-white border border-white/10"
                        : "text-slate-400 hover:text-white hover:bg-white/5"
                    }`}
                  >
                    <item.icon className={`w-5 h-5 ${isActive ? "text-cyan-400" : ""}`} />
                    {!collapsed && <span className="font-medium">{item.label}</span>}
                  </Link>
                )
              })}
            </nav>

{/* 底部用户信息 */}
            <div className="p-4 border-t border-white/10">
              <div className={`flex items-center ${collapsed ? "justify-center" : "gap-3"}`}>
                <Avatar className="w-9 h-9 border-2 border-cyan-500/50">
                  <AvatarImage src="/placeholder.svg?height=36&width=36" />
                  <AvatarFallback className="bg-gradient-to-br from-cyan-500 to-purple-500 text-white text-sm">
                    A
                  </AvatarFallback>
                </Avatar>
                {!collapsed && (
                  <div className="flex-1 min-w-0">
                    <p className="text-white text-sm font-medium truncate">管理员</p>
                    <p className="text-slate-500 text-xs truncate">admin@wanzhi.com</p>
                  </div>
                )}
              </div>
            </div>
          </div>
        </aside>

<div className={`transition-all duration-300 ${collapsed ? "ml-20" : "ml-64"}`}>
          {/* 顶部导航栏 - 毛玻璃效果 */}
          <header className="sticky top-0 z-40 h-16 backdrop-blur-xl bg-slate-900/50 border-b border-white/10">
            <div className="h-full px-6 flex items-center justify-between">
              {/* 搜索框 */}
              <div className="relative w-80">
                <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-500" />
                <Input
                  placeholder="搜索..."
                  className="pl-10 bg-white/5 border-white/10 text-white placeholder:text-slate-500 focus:border-cyan-500/50 focus:ring-cyan-500/20"
                />
              </div>

{/* 右侧操作 */}
              <div className="flex items-center gap-4">
                {/* 通知 */}
                <Button
                  variant="ghost"
                  size="icon"
                  className="relative text-slate-400 hover:text-white hover:bg-white/10"
                >
                  <Bell className="w-5 h-5" />
                  <span className="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full" />
                </Button>

{/* 用户菜单 */}
                <DropdownMenu>
                  <DropdownMenuTrigger asChild>
                    <Button variant="ghost" className="flex items-center gap-2 hover:bg-white/10">
                      <Avatar className="w-8 h-8">
                        <AvatarImage src="/placeholder.svg?height=32&width=32" />
                        <AvatarFallback className="bg-gradient-to-br from-cyan-500 to-purple-500 text-white text-xs">
                          A
                        </AvatarFallback>
                      </Avatar>
                      <span className="text-white text-sm">管理员</span>
                    </Button>
                  </DropdownMenuTrigger>
                  <DropdownMenuContent align="end" className="w-48 backdrop-blur-xl bg-slate-800/90 border-white/10">
                    <DropdownMenuItem className="text-slate-300 hover:text-white focus:bg-white/10">
                      <Settings className="w-4 h-4 mr-2" />
                      系统设置
                    </DropdownMenuItem>
                    <DropdownMenuSeparator className="bg-white/10" />
                    <DropdownMenuItem className="text-red-400 hover:text-red-300 focus:bg-white/10">
                      <LogOut className="w-4 h-4 mr-2" />
                      退出登录
                    </DropdownMenuItem>
                  </DropdownMenuContent>
                </DropdownMenu>
              </div>
            </div>
          </header>

{/* 页面内容 */}
          <main className="p-6">{children}</main>
        </div>
      </div>
    </Suspense>
  )
}
[V0_FILE]typescriptreact:file="app/admin/page.tsx" isEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import {
  Users,
  Radio,
  FileText,
  TrendingUp,
  UserCheck,
  Wallet,
  BarChart3,
  PieChart,
  ArrowUpRight,
  Gamepad2,
} from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { db } from "@/lib/db/schema"

interface DashboardStats {
  totalUsers: number
  totalStreamers: number
  totalOrders: number
  totalRevenue: number
  todayNewUsers: number
  todayOrders: number
  activeStreamers: number
  pendingPawns: number
}

export default function AdminDashboard() {
  const router = useRouter()
  const [isLoggedIn, setIsLoggedIn] = useState(false)
  const [username, setUsername] = useState("")
  const [password, setPassword] = useState("")
  const [stats, setStats] = useState<DashboardStats>({
    totalUsers: 0,
    totalStreamers: 0,
    totalOrders: 0,
    totalRevenue: 0,
    todayNewUsers: 0,
    todayOrders: 0,
    activeStreamers: 0,
    pendingPawns: 0,
  })
  const [recentUsers, setRecentUsers] = useState<any[]>([])

useEffect(() => {
    const loggedIn = localStorage.getItem("admin_logged_in")
    if (loggedIn === "true") {
      setIsLoggedIn(true)
    }
  }, [])

useEffect(() => {
    if (isLoggedIn) {
      loadDashboardData()
    }
  }, [isLoggedIn])

const loadDashboardData = async () => {
    try {
      const users = await db.users.toArray()
      const streamers = await db.streamers.toArray()
      const orders = await db.orders.toArray()
      const pawns = await db.accountPawns.toArray()
      const transactions = await db.transactions.toArray()

const totalRevenue = transactions.filter((t) => t.type === "recharge").reduce((sum, t) => sum + t.amount, 0)

const today = new Date()
      today.setHours(0, 0, 0, 0)
      const todayTimestamp = today.getTime()

const todayNewUsers = users.filter((u) => new Date(u.createdAt).getTime() >= todayTimestamp).length
      const todayOrders = orders.filter((o) => new Date(o.createdAt).getTime() >= todayTimestamp).length

setStats({
        totalUsers: users.length,
        totalStreamers: streamers.length,
        totalOrders: orders.length,
        totalRevenue,
        todayNewUsers,
        todayOrders,
        activeStreamers: streamers.filter((s) => s.isLive).length,
        pendingPawns: pawns.filter((p) => p.status === "pending").length,
      })

setRecentUsers(users.slice(-5).reverse())
    } catch (error) {
      console.error("Failed to load dashboard data:", error)
    }
  }

const handleLogin = () => {
    if (username === "admin" && password === "admin123") {
      setIsLoggedIn(true)
      localStorage.setItem("admin_logged_in", "true")
    } else {
      alert("用户名或密码错误")
    }
  }

// 登录页面
  if (!isLoggedIn) {
    return (
      <div className="min-h-screen flex items-center justify-center p-4">
        <div className="w-full max-w-md backdrop-blur-xl bg-white/5 rounded-3xl border border-white/10 p-8">
          <div className="text-center mb-8">
            <div className="w-16 h-16 bg-gradient-to-br from-cyan-500 to-purple-600 rounded-2xl mx-auto mb-4 flex items-center justify-center">
              <Gamepad2 className="w-8 h-8 text-white" />
            </div>
            <h1 className="text-2xl font-bold text-white">玩值电竞后台</h1>
            <p className="text-slate-400 text-sm mt-2">请登录管理员账号</p>
          </div>
          <div className="space-y-4">
            <div>
              <label className="text-sm text-slate-400 mb-1 block">用户名</label>
              <Input
                value={username}
                onChange={(e) => setUsername(e.target.value)}
                placeholder="请输入用户名"
                className="bg-white/5 border-white/10 text-white focus:border-cyan-500/50"
              />
            </div>
            <div>
              <label className="text-sm text-slate-400 mb-1 block">密码</label>
              <Input
                type="password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                placeholder="请输入密码"
                className="bg-white/5 border-white/10 text-white focus:border-cyan-500/50"
                onKeyDown={(e) => e.key === "Enter" && handleLogin()}
              />
            </div>
            <Button
              onClick={handleLogin}
              className="w-full bg-gradient-to-r from-cyan-500 to-purple-600 hover:from-cyan-600 hover:to-purple-700"
            >
              登录后台
            </Button>
            <p className="text-center text-slate-500 text-xs">默认账号: admin / admin123</p>
          </div>
        </div>
      </div>
    )
  }

// 仪表盘
  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-bold text-white">数据概览</h1>
        <p className="text-slate-400 mt-1">欢迎回来，管理员</p>
      </div>

{/* 统计卡片 */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        <div className="backdrop-blur-xl bg-gradient-to-br from-cyan-500/10 to-cyan-600/5 rounded-2xl border border-cyan-500/20 p-5">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-cyan-400 text-sm font-medium">总用户数</p>
              <p className="text-3xl font-bold text-white mt-1">{stats.totalUsers.toLocaleString()}</p>
              <div className="flex items-center gap-1 mt-2">
                <ArrowUpRight className="w-3 h-3 text-emerald-400" />
                <span className="text-xs text-emerald-400">+{stats.todayNewUsers} 今日</span>
              </div>
            </div>
            <div className="w-12 h-12 bg-cyan-500/20 rounded-xl flex items-center justify-center">
              <Users className="w-6 h-6 text-cyan-400" />
            </div>
          </div>
        </div>

<div className="backdrop-blur-xl bg-gradient-to-br from-purple-500/10 to-purple-600/5 rounded-2xl border border-purple-500/20 p-5">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-purple-400 text-sm font-medium">主播数量</p>
              <p className="text-3xl font-bold text-white mt-1">{stats.totalStreamers}</p>
              <div className="flex items-center gap-1 mt-2">
                <span className="text-xs text-emerald-400">{stats.activeStreamers} 正在直播</span>
              </div>
            </div>
            <div className="w-12 h-12 bg-purple-500/20 rounded-xl flex items-center justify-center">
              <Radio className="w-6 h-6 text-purple-400" />
            </div>
          </div>
        </div>

<div className="backdrop-blur-xl bg-gradient-to-br from-amber-500/10 to-amber-600/5 rounded-2xl border border-amber-500/20 p-5">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-amber-400 text-sm font-medium">总订单数</p>
              <p className="text-3xl font-bold text-white mt-1">{stats.totalOrders}</p>
              <div className="flex items-center gap-1 mt-2">
                <ArrowUpRight className="w-3 h-3 text-emerald-400" />
                <span className="text-xs text-emerald-400">+{stats.todayOrders} 今日</span>
              </div>
            </div>
            <div className="w-12 h-12 bg-amber-500/20 rounded-xl flex items-center justify-center">
              <FileText className="w-6 h-6 text-amber-400" />
            </div>
          </div>
        </div>

<div className="backdrop-blur-xl bg-gradient-to-br from-emerald-500/10 to-emerald-600/5 rounded-2xl border border-emerald-500/20 p-5">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-emerald-400 text-sm font-medium">总收入</p>
              <p className="text-3xl font-bold text-white mt-1">¥{stats.totalRevenue.toLocaleString()}</p>
              <div className="flex items-center gap-1 mt-2">
                <span className="text-xs text-amber-400">{stats.pendingPawns} 待处理</span>
              </div>
            </div>
            <div className="w-12 h-12 bg-emerald-500/20 rounded-xl flex items-center justify-center">
              <TrendingUp className="w-6 h-6 text-emerald-400" />
            </div>
          </div>
        </div>
      </div>

{/* 图表区域 */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <div className="backdrop-blur-xl bg-white/5 rounded-2xl border border-white/10 p-6">
          <div className="flex items-center gap-2 mb-6">
            <BarChart3 className="w-5 h-5 text-cyan-400" />
            <h2 className="text-lg font-semibold text-white">收入趋势</h2>
          </div>
          <div className="h-48 flex items-end justify-around gap-3">
            {[65, 45, 78, 52, 88, 70, 95].map((height, i) => (
              <div key={i} className="flex-1 flex flex-col items-center gap-2">
                <div
                  className="w-full bg-gradient-to-t from-cyan-500 to-purple-500 rounded-lg transition-all hover:opacity-80"
                  style={{ height: `${height}%` }}
                />
                <span className="text-xs text-slate-500">{["一", "二", "三", "四", "五", "六", "日"][i]}</span>
              </div>
            ))}
          </div>
        </div>

{/* 快捷操作和最近用户 */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div className="backdrop-blur-xl bg-white/5 rounded-2xl border border-white/10 p-6">
          <h2 className="text-lg font-semibold text-white mb-4">快捷操作</h2>
          <div className="space-y-3">
            <Button
              onClick={() => router.push("/admin/users")}
              variant="outline"
              className="w-full justify-between border-white/10 text-slate-300 bg-white/5 hover:bg-white/10"
            >
              <span className="flex items-center gap-2">
                <UserCheck className="w-4 h-4 text-cyan-400" />
                审核新用户
              </span>
              <Badge className="bg-cyan-500/20 text-cyan-400 border-0">{stats.todayNewUsers}</Badge>
            </Button>
            <Button
              onClick={() => router.push("/admin/pawn")}
              variant="outline"
              className="w-full justify-between border-white/10 text-slate-300 bg-white/5 hover:bg-white/10"
            >
              <span className="flex items-center gap-2">
                <Wallet className="w-4 h-4 text-amber-400" />
                处理典当申请
              </span>
              <Badge className="bg-amber-500/20 text-amber-400 border-0">{stats.pendingPawns}</Badge>
            </Button>
            <Button
              onClick={() => router.push("/admin/streamers")}
              variant="outline"
              className="w-full justify-between border-white/10 text-slate-300 bg-white/5 hover:bg-white/10"
            >
              <span className="flex items-center gap-2">
                <Radio className="w-4 h-4 text-purple-400" />
                主播入驻审核
              </span>
              <Badge className="bg-purple-500/20 text-purple-400 border-0">2</Badge>
            </Button>
          </div>
        </div>

<div className="lg:col-span-2 backdrop-blur-xl bg-white/5 rounded-2xl border border-white/10 p-6">
          <h2 className="text-lg font-semibold text-white mb-4">最近注册用户</h2>
          <div className="space-y-3">
            {recentUsers.length === 0 ? (
              <p className="text-slate-500 text-center py-4">暂无用户数据</p>
            ) : (
              recentUsers.map((user) => (
                <div
                  key={user.id}
                  className="flex items-center justify-between p-3 rounded-xl bg-white/5 hover:bg-white/10 transition-colors"
                >
                  <div className="flex items-center gap-3">
                    <Avatar className="w-10 h-10 border border-white/10">
                      <AvatarImage src={user.avatar || "/placeholder.svg"} />
                      <AvatarFallback className="bg-gradient-to-br from-cyan-500 to-purple-500 text-white">
                        {user.nickname?.[0]}
                      </AvatarFallback>
                    </Avatar>
                    <div>
                      <p className="text-white font-medium">{user.nickname}</p>
                      <p className="text-slate-500 text-xs">{user.phone || "未绑定手机"}</p>
                    </div>
                  </div>
                  <Badge
                    className={
                      user.status === "active"
                        ? "bg-emerald-500/20 text-emerald-400 border-0"
                        : "bg-amber-500/20 text-amber-400 border-0"
                    }
                  >
                    {user.status === "active" ? "正常" : "待审"}
                  </Badge>
                </div>
              ))
            )}
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/(app)/layout.tsx" isMerged="true"
import type React from "react"
import { MobileNav } from "@/components/layout/mobile-nav"

export default function AppLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <main className="mx-auto max-w-md min-h-screen bg-background relative shadow-2xl overflow-hidden pb-20">
      {children}
      <MobileNav />
    </main>
  )
}
[V0_FILE]typescriptreact:file="app/admin/settings/page.tsx" isEdit="true"
"use client"

import { useState } from "react"
import { Save, Settings, Shield, Globe, CreditCard, Zap } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Switch } from "@/components/ui/switch"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

export default function AdminSettingsPage() {
  const [settings, setSettings] = useState({
    siteName: "玩值电竞",
    siteDescription: "专业游戏电竞社交平台",
    contactEmail: "support@wanzhi.com",
    contactPhone: "400-888-8888",
    enableRegistration: true,
    enablePawn: true,
    enableLive: true,
    enableMall: true,
    maintenanceMode: false,
    minPawnAmount: 5000,
    maxPawnPeriod: 30,
    pawnFeeRate: 0.05,
    rechargeBonus: 0.1,
    vipDiscount: 0.9,
  })

const handleSave = () => {
    localStorage.setItem("admin_settings", JSON.stringify(settings))
    alert("设置已保存")
  }

return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-white">系统设置</h1>
          <p className="text-slate-400 mt-1">配置平台基础设置和功能开关</p>
        </div>
        <Button
          onClick={handleSave}
          className="bg-gradient-to-r from-cyan-500 to-blue-500 hover:from-cyan-600 hover:to-blue-600"
        >
          <Save className="w-4 h-4 mr-2" />
          保存设置
        </Button>
      </div>

<TabsContent value="general">
          <div className="backdrop-blur-xl bg-white/5 rounded-2xl border border-white/10 overflow-hidden">
            <div className="p-4 border-b border-white/10">
              <h2 className="text-lg font-semibold text-white">基础信息</h2>
              <p className="text-slate-400 text-sm mt-1">配置平台基本信息</p>
            </div>
            <div className="p-6 space-y-4">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <label className="text-sm text-slate-400 mb-2 block">平台名称</label>
                  <Input
                    value={settings.siteName}
                    onChange={(e) => setSettings({ ...settings, siteName: e.target.value })}
                    className="bg-white/5 border-white/10 text-white focus:border-cyan-500/50"
                  />
                </div>
                <div>
                  <label className="text-sm text-slate-400 mb-2 block">平台描述</label>
                  <Input
                    value={settings.siteDescription}
                    onChange={(e) => setSettings({ ...settings, siteDescription: e.target.value })}
                    className="bg-white/5 border-white/10 text-white focus:border-cyan-500/50"
                  />
                </div>
                <div>
                  <label className="text-sm text-slate-400 mb-2 block">联系邮箱</label>
                  <Input
                    value={settings.contactEmail}
                    onChange={(e) => setSettings({ ...settings, contactEmail: e.target.value })}
                    className="bg-white/5 border-white/10 text-white focus:border-cyan-500/50"
                  />
                </div>
                <div>
                  <label className="text-sm text-slate-400 mb-2 block">客服电话</label>
                  <Input
                    value={settings.contactPhone}
                    onChange={(e) => setSettings({ ...settings, contactPhone: e.target.value })}
                    className="bg-white/5 border-white/10 text-white focus:border-cyan-500/50"
                  />
                </div>
              </div>
            </div>
          </div>
        </TabsContent>

<TabsContent value="features">
          <div className="backdrop-blur-xl bg-white/5 rounded-2xl border border-white/10 overflow-hidden">
            <div className="p-4 border-b border-white/10">
              <h2 className="text-lg font-semibold text-white">功能开关</h2>
              <p className="text-slate-400 text-sm mt-1">控制平台功能模块</p>
            </div>
            <div className="p-6 space-y-6">
              <div className="flex items-center justify-between p-4 rounded-xl bg-white/5 hover:bg-white/10 transition-colors">
                <div>
                  <p className="text-white font-medium">用户注册</p>
                  <p className="text-slate-400 text-sm">允许新用户注册账号</p>
                </div>
                <Switch
                  checked={settings.enableRegistration}
                  onCheckedChange={(v) => setSettings({ ...settings, enableRegistration: v })}
                />
              </div>
              <div className="flex items-center justify-between p-4 rounded-xl bg-white/5 hover:bg-white/10 transition-colors">
                <div>
                  <p className="text-white font-medium">账号典当</p>
                  <p className="text-slate-400 text-sm">开启游戏账号典当功能</p>
                </div>
                <Switch
                  checked={settings.enablePawn}
                  onCheckedChange={(v) => setSettings({ ...settings, enablePawn: v })}
                />
              </div>
              <div className="flex items-center justify-between p-4 rounded-xl bg-white/5 hover:bg-white/10 transition-colors">
                <div>
                  <p className="text-white font-medium">直播功能</p>
                  <p className="text-slate-400 text-sm">开启直播观看和互动</p>
                </div>
                <Switch
                  checked={settings.enableLive}
                  onCheckedChange={(v) => setSettings({ ...settings, enableLive: v })}
                />
              </div>
              <div className="flex items-center justify-between p-4 rounded-xl bg-white/5 hover:bg-white/10 transition-colors">
                <div>
                  <p className="text-white font-medium">商城功能</p>
                  <p className="text-slate-400 text-sm">开启商城购物功能</p>
                </div>
                <Switch
                  checked={settings.enableMall}
                  onCheckedChange={(v) => setSettings({ ...settings, enableMall: v })}
                />
              </div>
              <div className="flex items-center justify-between p-4 rounded-xl bg-red-500/10 border border-red-500/20">
                <div>
                  <p className="text-red-400 font-medium">维护模式</p>
                  <p className="text-slate-400 text-sm">开启后用户将无法访问平台</p>
                </div>
                <Switch
                  checked={settings.maintenanceMode}
                  onCheckedChange={(v) => setSettings({ ...settings, maintenanceMode: v })}
                />
              </div>
            </div>
          </div>
        </TabsContent>

<TabsContent value="pawn">
          <div className="backdrop-blur-xl bg-white/5 rounded-2xl border border-white/10 overflow-hidden">
            <div className="p-4 border-b border-white/10">
              <h2 className="text-lg font-semibold text-white">典当配置</h2>
              <p className="text-slate-400 text-sm mt-1">配置账号典当业务参数</p>
            </div>
            <div className="p-6 space-y-4">
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div>
                  <label className="text-sm text-slate-400 mb-2 block">最低典当金额 (元)</label>
                  <Input
                    type="number"
                    value={settings.minPawnAmount}
                    onChange={(e) => setSettings({ ...settings, minPawnAmount: Number(e.target.value) })}
                    className="bg-white/5 border-white/10 text-white focus:border-amber-500/50"
                  />
                </div>
                <div>
                  <label className="text-sm text-slate-400 mb-2 block">最长典当期限 (天)</label>
                  <Input
                    type="number"
                    value={settings.maxPawnPeriod}
                    onChange={(e) => setSettings({ ...settings, maxPawnPeriod: Number(e.target.value) })}
                    className="bg-white/5 border-white/10 text-white focus:border-amber-500/50"
                  />
                </div>
                <div>
                  <label className="text-sm text-slate-400 mb-2 block">服务费率</label>
                  <Input
                    type="number"
                    step="0.01"
                    value={settings.pawnFeeRate}
                    onChange={(e) => setSettings({ ...settings, pawnFeeRate: Number(e.target.value) })}
                    className="bg-white/5 border-white/10 text-white focus:border-amber-500/50"
                  />
                  <p className="text-amber-400 text-xs mt-2">当前费率: {(settings.pawnFeeRate * 100).toFixed(1)}%</p>
                </div>
              </div>
            </div>
          </div>
        </TabsContent>

<TabsContent value="payment">
          <div className="backdrop-blur-xl bg-white/5 rounded-2xl border border-white/10 overflow-hidden">
            <div className="p-4 border-b border-white/10">
              <h2 className="text-lg font-semibold text-white">支付配置</h2>
              <p className="text-slate-400 text-sm mt-1">配置充值和支付参数</p>
            </div>
            <div className="p-6 space-y-6">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <label className="text-sm text-slate-400 mb-2 block">充值赠送比例</label>
                  <Input
                    type="number"
                    step="0.01"
                    value={settings.rechargeBonus}
                    onChange={(e) => setSettings({ ...settings, rechargeBonus: Number(e.target.value) })}
                    className="bg-white/5 border-white/10 text-white focus:border-cyan-500/50"
                  />
                  <p className="text-cyan-400 text-xs mt-2">充值送 {(settings.rechargeBonus * 100).toFixed(0)}%</p>
                </div>
                <div>
                  <label className="text-sm text-slate-400 mb-2 block">VIP折扣</label>
                  <Input
                    type="number"
                    step="0.01"
                    value={settings.vipDiscount}
                    onChange={(e) => setSettings({ ...settings, vipDiscount: Number(e.target.value) })}
                    className="bg-white/5 border-white/10 text-white focus:border-cyan-500/50"
                  />
                  <p className="text-cyan-400 text-xs mt-2">VIP享 {(settings.vipDiscount * 10).toFixed(1)} 折</p>
                </div>
              </div>

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}
[V0_FILE]jpg:file="public/esports-tournament-stadium-neon-lights-crowd.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/esports-tournament-stadium-neon-lights-crowd-gdQl9m0IlfTUKTbpKjJEAzqc9tX3RL.jpg" isMerged="true"
[V0_FILE]png:file="public/esports-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/esports-logo-VFpyengLA4BoqhA4tHAII5EzEtJcJg.png" isMerged="true"
[V0_FILE]json:file="package.json" isMerged="true"
{
  "name": "my-v0-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "eslint ."
  },
  "dependencies": {
    "@hookform/resolvers": "^3.10.0",
    "@radix-ui/react-accordion": "1.2.2",
    "@radix-ui/react-alert-dialog": "1.1.4",
    "@radix-ui/react-aspect-ratio": "1.1.1",
    "@radix-ui/react-avatar": "1.1.2",
    "@radix-ui/react-checkbox": "1.1.3",
    "@radix-ui/react-collapsible": "1.1.2",
    "@radix-ui/react-context-menu": "2.2.4",
    "@radix-ui/react-dialog": "1.1.4",
    "@radix-ui/react-dropdown-menu": "2.1.4",
    "@radix-ui/react-hover-card": "1.1.4",
    "@radix-ui/react-label": "2.1.1",
    "@radix-ui/react-menubar": "1.1.4",
    "@radix-ui/react-navigation-menu": "1.2.3",
    "@radix-ui/react-popover": "1.1.4",
    "@radix-ui/react-progress": "1.1.1",
    "@radix-ui/react-radio-group": "1.2.2",
    "@radix-ui/react-scroll-area": "1.2.2",
    "@radix-ui/react-select": "2.1.4",
    "@radix-ui/react-separator": "1.1.1",
    "@radix-ui/react-slider": "1.2.2",
    "@radix-ui/react-slot": "1.1.1",
    "@radix-ui/react-switch": "1.1.2",
    "@radix-ui/react-tabs": "1.1.2",
    "@radix-ui/react-toast": "1.2.4",
    "@radix-ui/react-toggle": "1.1.1",
    "@radix-ui/react-toggle-group": "1.1.1",
    "@radix-ui/react-tooltip": "1.1.6",
    "@vercel/analytics": "1.3.1",
    "autoprefixer": "^10.4.20",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cmdk": "1.0.4",
    "date-fns": "4.1.0",
    "embla-carousel-react": "8.5.1",
    "input-otp": "1.4.1",
    "lucide-react": "^0.454.0",
    "next": "16.0.3",
    "next-themes": "^0.4.6",
    "react": "19.2.0",
    "react-day-picker": "9.8.0",
    "react-dom": "19.2.0",
    "react-hook-form": "^7.60.0",
    "react-resizable-panels": "^2.1.7",
    "recharts": "2.15.4",
    "sonner": "^1.7.4",
    "tailwind-merge": "^3.3.1",
    "tailwindcss-animate": "^1.0.7",
    "vaul": "^0.9.9",
    "zod": "3.25.76",
    "framer-motion": "12.23.24",
    "crypto": "1.0.1",
    "dexie": "4.2.1"
  },
  "devDependencies": {
    "@tailwindcss/postcss": "^4.1.9",
    "@types/node": "^22",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "postcss": "^8.5",
    "tailwindcss": "^4.1.9",
    "tw-animate-css": "1.3.3",
    "typescript": "^5"
  }
}
[V0_FILE]jpg:file="public/esports-gamer-girl-streaming-vertical.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/esports-gamer-girl-streaming-vertical-Oj9Qpv4PjloA0oQlPd4hTs9MgzbbsG.jpg" isMerged="true"
[V0_FILE]png:file="public/diverse-avatars.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/diverse-avatars-K1qVYge2trPWCNm6kkjY04d7LcErVe.png" isMerged="true"
[V0_FILE]jpg:file="public/avatar-3d-style.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/avatar-3d-style-oI5N8eXwBYqcDZkQcvY9imPuCTSGMh.jpg" isMerged="true"
[V0_FILE]typescriptreact:file="app/pitch-deck/page.tsx" isMerged="true"
"use client";

import { useState } from "react";
import { ChevronLeft, ChevronRight, TrendingUp, Users, Target, Zap, Award, DollarSign } from 'lucide-react';
import { motion, AnimatePresence } from "framer-motion";
import { cn } from "@/lib/utils";

// Slide Data based on the Business Plan
const slides = [
  {
    id: 1,
    title: "玩值电竞",
    subtitle: "专注打造比体育明星价值高10倍的电竞俱乐部",
    content: (
      <div className="flex flex-col items-center justify-center h-full text-center space-y-6">
        <div className="w-32 h-32 rounded-2xl bg-gradient-to-br from-primary to-accent flex items-center justify-center shadow-[0_0_50px_rgba(0,240,255,0.3)]">
          <span className="text-4xl font-bold text-black">WZ</span>
        </div>
        <h1 className="text-4xl font-black tracking-tighter text-transparent bg-clip-text bg-gradient-to-r from-primary via-white to-secondary">
          玩值电竞
        </h1>
        <p className="text-xl text-white/80 font-light">让游戏玩家在电竞世界中<br/><span className="font-bold text-primary">玩得有价值</span></p>
        <div className="flex gap-4 mt-8">
          <Badge text="14个签约IP" />
          <Badge text="46万铁粉" />
          <Badge text="10倍价值" />
        </div>
      </div>
    ),
    bg: "bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-blue-900/20 via-background to-background"
  },
  {
    id: 2,
    title: "市场痛点与机会",
    subtitle: "电竞IP价值飞轮",
    content: (
      <div className="space-y-6">
        <div className="grid grid-cols-2 gap-4">
          <Card icon={Users} title="粘性更强" desc="比体育明星强10倍的用户粘性" />
          <Card icon={Zap} title="变现更多" desc="粉丝价值跃迁，多重变现渠道" />
          <Card icon={Target} title="流量更大" desc="线上线下全域流量分发" />
          <Card icon={TrendingUp} title="增长更快" desc="C2B2S 裂变增长模型" />
        </div>
        <div className="p-4 rounded-xl bg-white/5 border border-white/10 mt-4">
          <h3 className="font-bold text-primary mb-2">超级中台运营模式</h3>
          <p className="text-sm text-white/70">搭建数字化生态体系，总部直接赋能门店及员工，实现粉丝资产数字化评估。</p>
        </div>
      </div>
    ),
    bg: "bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-purple-900/20 via-background to-background"
  },
  {
    id: 3,
    title: "商业模式",
    subtitle: "全方位价值变现体系",
    content: (
      <div className="space-y-4">
        <ListItem number="01" title="游戏明星经纪" desc="选拔、签约、培养、包装，打造顶级电竞IP。" />
        <ListItem number="02" title="多元化变现" desc="陪玩服务、知识付费课程、拜师学艺、商业代言。" />
        <ListItem number="03" title="电竞赛事运营" desc="举办线上线下赛事，赞助、门票、周边全链条收入。" />
        <ListItem number="04" title="私域流量运营" desc="会员体系、粉丝社群、精准营销，沉淀私域资产。" />
      </div>
    ),
    bg: "bg-[radial-gradient(ellipse_at_bottom_left,_var(--tw-gradient-stops))] from-pink-900/20 via-background to-background"
  },
  {
    id: 4,
    title: "核心优势",
    subtitle: "为什么选择玩值电竞？",
    content: (
      <div className="flex flex-col gap-4">
        <div className="flex items-center gap-4 p-4 rounded-xl bg-gradient-to-r from-primary/10 to-transparent border-l-4 border-primary">
          <div className="text-3xl font-black text-primary">3个</div>
          <div>
            <h4 className="font-bold">稳定内容赋能</h4>
            <p className="text-xs text-white/60">让你拥有3个AI员工：客服、企划、财务</p>
          </div>
        </div>
        <div className="flex items-center gap-4 p-4 rounded-xl bg-gradient-to-r from-secondary/10 to-transparent border-l-4 border-secondary">
          <div className="text-3xl font-black text-secondary">18年</div>
          <div>
            <h4 className="font-bold">服务沉淀</h4>
            <p className="text-xs text-white/60">深耕电竞行业，标准化的管理系统</p>
          </div>
        </div>
        <div className="flex items-center gap-4 p-4 rounded-xl bg-gradient-to-r from-accent/10 to-transparent border-l-4 border-accent">
          <div className="text-3xl font-black text-accent">3位</div>
          <div>
            <h4 className="font-bold">一体赋能</h4>
            <p className="text-xs text-white/60">内容 + AI + 服务，全方位支持</p>
          </div>
        </div>
      </div>
    ),
    bg: "bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-blue-900/20 via-background to-background"
  },
  {
    id: 5,
    title: "未来愿景",
    subtitle: "构建全球领先的电竞生态平台",
    content: (
      <div className="text-center space-y-8 mt-8">
        <div className="relative">
          <div className="absolute inset-0 bg-gradient-to-r from-primary via-accent to-secondary blur-3xl opacity-20" />
          <Award size={80} className="mx-auto text-white relative z-10" />
        </div>
        
        <div className="space-y-4">
          <h3 className="text-2xl font-bold">玩值电竞</h3>
          <p className="text-white/70 px-8">
            链接粉丝与游戏明星，让游戏玩家在电竞世界中玩得有价值。
            <br/><br/>
            赋能超级个体，助力其发展壮大，共同推动电竞产业发展。
          </p>
        </div>

<button className="px-8 py-3 rounded-full bg-white text-black font-bold hover:scale-105 transition-transform">
          加入我们
        </button>
      </div>
    ),
    bg: "bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-green-900/20 via-background to-background"
  }
];

export default function PitchDeckPage() {
  const [currentSlide, setCurrentSlide] = useState(0);

const nextSlide = () => {
    setCurrentSlide((prev) => (prev + 1) % slides.length);
  };

const prevSlide = () => {
    setCurrentSlide((prev) => (prev - 1 + slides.length) % slides.length);
  };

return (
    <div className="h-screen bg-background flex flex-col relative overflow-hidden">
      {/* Background Effects */}
      <div className={cn("absolute inset-0 transition-colors duration-1000", slides[currentSlide].bg)} />
      
      {/* Header */}
      <div className="relative z-10 p-4 flex justify-between items-center glass border-b border-white/5">
        <h1 className="font-bold text-sm tracking-widest uppercase text-white/50">Business Plan 2025</h1>
        <div className="text-xs font-mono text-primary">
          {currentSlide + 1} / {slides.length}
        </div>
      </div>

{/* Slide Content */}
      <div className="flex-1 relative z-10 flex flex-col p-6 overflow-hidden">
        <AnimatePresence mode="wait">
          <motion.div
            key={currentSlide}
            initial={{ opacity: 0, x: 50 }}
            animate={{ opacity: 1, x: 0 }}
            exit={{ opacity: 0, x: -50 }}
            transition={{ duration: 0.4, ease: "easeOut" }}
            className="flex-1 flex flex-col"
          >
            <div className="mb-8">
              <motion.h2 
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: 0.2 }}
                className="text-3xl font-bold mb-2"
              >
                {slides[currentSlide].title}
              </motion.h2>
              <motion.p 
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                transition={{ delay: 0.3 }}
                className="text-primary font-medium"
              >
                {slides[currentSlide].subtitle}
              </motion.p>
            </div>
            
            <motion.div 
              initial={{ opacity: 0, scale: 0.95 }}
              animate={{ opacity: 1, scale: 1 }}
              transition={{ delay: 0.4 }}
              className="flex-1"
            >
              {slides[currentSlide].content}
            </motion.div>
          </motion.div>
        </AnimatePresence>
      </div>

{/* Controls */}
      <div className="relative z-10 p-6 pb-24 flex items-center justify-between gap-4">
        <button 
          onClick={prevSlide}
          className="w-12 h-12 rounded-full glass flex items-center justify-center hover:bg-white/10 active:scale-95 transition-all"
        >
          <ChevronLeft />
        </button>
        
        <div className="flex gap-2">
          {slides.map((_, i) => (
            <div 
              key={i} 
              className={cn(
                "w-2 h-2 rounded-full transition-all duration-300",
                i === currentSlide ? "w-6 bg-primary" : "bg-white/20"
              )} 
            />
          ))}
        </div>

<button 
          onClick={nextSlide}
          className="w-12 h-12 rounded-full bg-primary text-black flex items-center justify-center hover:bg-primary/90 active:scale-95 transition-all shadow-[0_0_20px_rgba(0,240,255,0.4)]"
        >
          <ChevronRight />
        </button>
      </div>
    </div>
  );
}

// Helper Components for Slides
function Badge({ text }: { text: string }) {
  return (
    <span className="px-3 py-1 rounded-full bg-white/10 border border-white/10 text-xs font-medium backdrop-blur-md">
      {text}
    </span>
  );
}

function Card({ icon: Icon, title, desc }: { icon: any, title: string, desc: string }) {
  return (
    <div className="p-4 rounded-xl bg-white/5 border border-white/5 hover:border-primary/30 transition-colors">
      <Icon className="text-primary mb-2" size={24} />
      <h4 className="font-bold text-sm mb-1">{title}</h4>
      <p className="text-[10px] text-white/60 leading-tight">{desc}</p>
    </div>
  );
}

function ListItem({ number, title, desc }: { number: string, title: string, desc: string }) {
  return (
    <div className="flex gap-4 items-start p-3 rounded-xl hover:bg-white/5 transition-colors">
      <span className="text-2xl font-black text-white/10 font-mono">{number}</span>
      <div>
        <h4 className="font-bold text-white mb-1">{title}</h4>
        <p className="text-xs text-white/60">{desc}</p>
      </div>
    </div>
  );
}
[V0_FILE]png:file="public/diverse-group-avatars.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/diverse-group-avatars-j6vmB0vnVQjZRhHPLJdZ09AGwygUih.png" isMerged="true"
[V0_FILE]png:file="public/abstract-geometric-shapes.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/abstract-geometric-shapes-kZodpXGM31YV1OwpENLkB4vSYvBL4Y.png" isMerged="true"
[V0_FILE]jpg:file="public/lol.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/lol-A9ZyNnqEmB5CMYqC6tXD1wTZvx8frd.jpg" isMerged="true"
[V0_FILE]typescriptreact:file="app/moments/[id]/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client" // Convert to client component

import { Heart, MessageCircle, Share2, Gift, ArrowLeft, Send, BookOpen } from 'lucide-react';
import Image from "next/image";
import Link from "next/link";
import { toast } from "@/hooks/use-toast"; // Import toast

// Mock data - in a real app this would come from an API based on params.id
const momentData = {
  id: 1,
  user: "GM-远洋",
  avatar: "/gamer-girl-headphones.jpg",
  desc: "可惜不是你喜欢的甜妹音 😷 #电竞少女 #英雄联盟 #日常",
  video: "/esports-gamer-girl-streaming-vertical.jpg",
  likes: "1.2w",
  comments: 458,
  isLive: true,
  hasCourse: true,
  courseId: "101",
  courseTitle: "打野进阶课：从入门到王者",
  commentsList: [
    { user: "User1", text: "声音好听！", time: "1m ago" },
    { user: "User2", text: "求BGM", time: "5m ago" },
    { user: "User3", text: "这波操作666", time: "10m ago" },
  ]
};

export default function MomentDetailPage({ params }: { params: { id: string } }) {
  const handleLike = () => toast({ title: "点赞成功", description: "已添加到我喜欢的视频" });
  const handleShare = () => toast({ title: "分享成功", description: "链接已复制到剪贴板" });
  const handleGift = () => toast({ title: "礼物发送成功", description: "主播已收到您的心意" });

return (
    <div className="h-screen bg-black text-white relative flex flex-col">
      {/* Header */}
      <div className="absolute top-0 left-0 right-0 z-30 pt-safe px-4 py-3 flex items-center gap-4 bg-gradient-to-b from-black/60 to-transparent">
        <Link href="/moments" className="p-2 -ml-2 rounded-full hover:bg-white/10 transition-colors">
          <ArrowLeft size={24} />
        </Link>
        <div className="flex items-center gap-2">
          <div className="w-8 h-8 rounded-full overflow-hidden border border-white/20">
            <Image src={momentData.avatar || "/placeholder.svg"} alt={momentData.user} width={32} height={32} className="object-cover" />
          </div>
          <span className="font-bold text-sm">{momentData.user}</span>
          <button className="px-3 py-1 rounded-full bg-primary text-black text-xs font-bold">关注</button>
        </div>
      </div>

{/* Video Area */}
      <div className="flex-1 relative bg-zinc-900">
        <Image
          src={momentData.video || "/placeholder.svg"}
          alt="Video"
          fill
          className="object-cover opacity-90"
        />
        
        {/* Right Sidebar Actions */}
        <div className="absolute right-2 bottom-32 flex flex-col items-center gap-6 z-20">
          <button 
            className="flex flex-col items-center gap-1 group"
            onClick={handleLike} // Add click handler
          >
            <Heart size={32} className="text-white drop-shadow-lg group-hover:text-red-500 transition-colors" />
            <span className="text-xs font-medium drop-shadow-md">{momentData.likes}</span>
          </button>
          
          <button className="flex flex-col items-center gap-1 group">
            <MessageCircle size={32} className="text-white drop-shadow-lg group-hover:text-primary transition-colors" />
            <span className="text-xs font-medium drop-shadow-md">{momentData.comments}</span>
          </button>
          
          <button 
            className="flex flex-col items-center gap-1 group"
            onClick={handleShare} // Add click handler
          >
            <Share2 size={32} className="text-white drop-shadow-lg group-hover:text-green-400 transition-colors" />
            <span className="text-xs font-medium drop-shadow-md">分享</span>
          </button>

{/* Bottom Info */}
        <div className="absolute left-0 bottom-0 w-full p-4 z-20 bg-gradient-to-t from-black via-black/60 to-transparent pt-20">
          {/* Course Link */}
          {momentData.hasCourse && (
            <Link href={`/course/${momentData.courseId}`} className="flex items-center justify-between w-full p-3 rounded-xl bg-white/10 backdrop-blur-md border border-white/10 mb-4 hover:bg-white/20 transition-colors group">
              <div className="flex items-center gap-3">
                <div className="w-10 h-10 rounded-lg bg-primary/20 flex items-center justify-center text-primary">
                  <BookOpen size={20} />
                </div>
                <div>
                  <div className="text-xs text-primary font-bold mb-0.5">同款课程</div>
                  <div className="text-sm font-bold text-white group-hover:text-primary transition-colors">{momentData.courseTitle}</div>
                </div>
              </div>
              <div className="px-3 py-1.5 rounded-lg bg-primary text-black text-xs font-bold">
                去学习
              </div>
            </Link>
          )}

<h3 className="font-bold text-lg mb-2">@{momentData.user}</h3>
          <p className="text-sm text-white/90 leading-relaxed mb-4">
            {momentData.desc}
          </p>
          
          {/* Comment Input Mock */}
          <div className="flex items-center gap-3">
            <div className="flex-1 h-10 bg-white/10 rounded-full px-4 flex items-center text-white/50 text-sm">
              说点什么...
            </div>
            <button className="p-2 rounded-full bg-white/10 hover:bg-primary hover:text-black transition-colors">
              <Send size={20} />
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}
[V0_FILE]typescriptreact:file="app/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/my-courses/page.tsx" isMerged="true"
"use client"

import { ArrowLeft, PlayCircle, Clock, BookOpen } from "lucide-react"
import { useRouter } from "next/navigation"
import Image from "next/image"
import { Button } from "@/components/ui/button"
import { useAppContext } from "@/components/providers/app-provider"

export default function MyCoursesPage() {
  const router = useRouter()
  const { orders } = useAppContext()

// Filter orders for courses (assuming type 'product' or specific title match for now as mock)
  // In a real app, we'd have a specific 'course' type
  const courses = orders.filter((o) => o.title.includes("课程") || o.title.includes("教学"))

return (
    <div className="min-h-screen bg-background pb-24">
      <header className="sticky top-0 z-40 glass px-4 py-3 flex items-center gap-4">
        <button onClick={() => router.back()} className="p-2 hover:bg-white/10 rounded-full transition-colors">
          <ArrowLeft size={20} />
        </button>
        <h1 className="font-bold text-lg">我的课程</h1>
      </header>

<div className="p-4 space-y-4">
        {courses.length > 0 ? (
          courses.map((course, i) => (
            <div key={i} className="glass-card p-3 rounded-xl flex gap-3">
              <div className="relative w-24 h-16 rounded-lg overflow-hidden flex-shrink-0 bg-muted">
                <Image src={course.image || "/placeholder.svg"} alt={course.title} fill className="object-cover" />
                <div className="absolute inset-0 flex items-center justify-center bg-black/30">
                  <PlayCircle size={24} className="text-white/80" />
                </div>
              </div>
              <div className="flex-1 flex flex-col justify-between">
                <h3 className="font-bold text-sm line-clamp-2">{course.title}</h3>
                <div className="flex items-center justify-between mt-2">
                  <div className="flex items-center gap-2 text-[10px] text-white/50">
                    <span className="flex items-center gap-1">
                      <Clock size={10} /> 45分钟
                    </span>
                    <span className="flex items-center gap-1">
                      <BookOpen size={10} /> 3/12节
                    </span>
                  </div>
                  <Button size="sm" className="h-6 text-xs px-3">
                    继续学习
                  </Button>
                </div>
              </div>
            </div>
          ))
        ) : (
          <div className="flex flex-col items-center justify-center py-20 text-white/50">
            <BookOpen size={48} className="mb-4 opacity-20" />
            <p>暂无课程</p>
            <Button
              variant="outline"
              className="mt-4 border-white/10 hover:bg-white/5 bg-transparent"
              onClick={() => router.push("/mall")}
            >
              去商城看看
            </Button>
          </div>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/orders/page.tsx" isEdit="true" isMerged="true"
"use client"

import { ArrowLeft, ShoppingBag, Clock, CheckCircle2, XCircle, RotateCcw } from "lucide-react"
import { useRouter } from "next/navigation"
import Image from "next/image"
import { useAppContext } from "@/components/providers/app-provider"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Button } from "@/components/ui/button"
import Link from "next/link"

export default function OrdersPage() {
  const router = useRouter()
  const { orders } = useAppContext()

const getStatusColor = (status: string) => {
    switch (status) {
      case "completed":
        return "text-green-500"
      case "pending":
        return "text-yellow-500"
      case "cancelled":
        return "text-red-500"
      case "refunded":
        return "text-blue-500"
      default:
        return "text-foreground/50"
    }
  }

const getStatusIcon = (status: string) => {
    switch (status) {
      case "completed":
        return <CheckCircle2 size={14} />
      case "pending":
        return <Clock size={14} />
      case "cancelled":
        return <XCircle size={14} />
      case "refunded":
        return <RotateCcw size={14} />
      default:
        return null
    }
  }

const getStatusText = (status: string) => {
    switch (status) {
      case "completed":
        return "已完成"
      case "pending":
        return "进行中"
      case "cancelled":
        return "已取消"
      case "refunded":
        return "已退款"
      default:
        return status
    }
  }

const getTypeText = (type: string) => {
    switch (type) {
      case "service":
        return "陪玩服务"
      case "product":
        return "商城商品"
      case "course":
        return "课程购买"
      case "hotel":
        return "酒店预订"
      case "cafe":
        return "网咖抢座"
      case "recharge":
        return "充值订单"
      case "pawn":
        return "账号典当"
      default:
        return "其他"
    }
  }

const displayOrders = orders.filter((o) => o.type !== "recharge")

return (
    <div className="min-h-screen bg-background pb-24">
      <header className="sticky top-0 z-40 bg-background/95 backdrop-blur-sm border-b border-border px-4 py-3 flex items-center gap-4">
        <button onClick={() => router.back()} className="p-2 hover:bg-foreground/10 rounded-full transition-colors">
          <ArrowLeft size={20} />
        </button>
        <h1 className="font-bold text-lg">订单中心</h1>
      </header>

{["all", "service", "product", "hotel"].map((tab) => (
          <TabsContent key={tab} value={tab} className="px-4 mt-4 space-y-3">
            {displayOrders.filter(
              (o) => tab === "all" || o.type === tab || (tab === "hotel" && (o.type === "hotel" || o.type === "cafe")),
            ).length > 0 ? (
              displayOrders
                .filter(
                  (o) =>
                    tab === "all" || o.type === tab || (tab === "hotel" && (o.type === "hotel" || o.type === "cafe")),
                )
                .map((order, i) => (
                  <div key={i} className="bg-card rounded-xl p-4 border border-border">
                    <div className="flex justify-between items-start mb-3">
                      <div className="flex items-center gap-2">
                        <span className="text-xs text-foreground/50">{order.date}</span>
                        <span className="text-[10px] px-1.5 py-0.5 rounded bg-foreground/5 text-foreground/70 border border-border">
                          {getTypeText(order.type)}
                        </span>
                      </div>
                      <div className={`flex items-center gap-1 text-xs font-medium ${getStatusColor(order.status)}`}>
                        {getStatusIcon(order.status)}
                        {getStatusText(order.status)}
                      </div>
                    </div>

<div className="flex gap-3">
                      <div className="relative w-16 h-16 rounded-lg overflow-hidden bg-muted flex-shrink-0">
                        <Image
                          src={order.image || "/placeholder.svg?height=64&width=64&query=order"}
                          alt={order.title}
                          fill
                          className="object-cover"
                        />
                      </div>
                      <div className="flex-1 min-w-0">
                        <h3 className="font-bold text-sm mb-1 truncate">{order.title}</h3>
                        <p className="text-xs text-foreground/50 mb-1">订单号: {order.orderNo || order.id}</p>
                        <div className="flex items-center justify-between mt-2">
                          <span className="text-xs text-foreground/50">数量: 1</span>
                          <div className="flex items-center gap-1">
                            <span className="text-sm font-bold text-primary">{order.price}</span>
                            <span className="text-[10px] text-foreground/50">币</span>
                          </div>
                        </div>
                      </div>
                    </div>

<div className="mt-3 pt-3 border-t border-border flex justify-end gap-2">
                      <Link href="/customer-service">
                        <Button
                          variant="outline"
                          size="sm"
                          className="h-7 text-xs border-border hover:bg-foreground/5 bg-transparent"
                        >
                          联系客服
                        </Button>
                      </Link>
                      <Link href={`/order/${order.id}`}>
                        <Button
                          size="sm"
                          className="h-7 text-xs bg-foreground/10 hover:bg-foreground/20 border border-border"
                        >
                          订单详情
                        </Button>
                      </Link>
                    </div>
                  </div>
                ))
            ) : (
              <div className="flex flex-col items-center justify-center py-20 text-foreground/50">
                <ShoppingBag size={48} className="mb-4 opacity-20" />
                <p>暂无订单</p>
              </div>
            )}
          </TabsContent>
        ))}
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/creator/apply/page.tsx" isMerged="true"
"use client"

import type React from "react"

import { ArrowLeft, Star, Upload, CheckCircle2 } from "lucide-react"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { toast } from "@/hooks/use-toast"
import { useState } from "react"

export default function ApplyCreatorPage() {
  const router = useRouter()
  const [formData, setFormData] = useState({
    realName: "",
    phone: "",
    game: "",
    rank: "",
    experience: "",
    price: "",
  })

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    toast({
      title: "申请已提交",
      description: "我们会在3个工作日内审核您的申请",
    })
    setTimeout(() => router.push("/profile"), 1500)
  }

<div className="p-4 space-y-6">
        {/* Info Banner */}
        <div className="glass-card p-4 rounded-xl border-l-4 border-primary">
          <div className="flex items-start gap-3">
            <div className="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center shrink-0">
              <Star className="text-primary" size={20} />
            </div>
            <div>
              <h3 className="font-bold text-sm mb-1">成为大神，开启副业</h3>
              <p className="text-xs text-white/60 leading-relaxed">
                通过审核后，您可以在平台接单陪玩、开设课程、直播带货，月入过万不是梦！
              </p>
            </div>
          </div>
        </div>

{/* Benefits */}
        <div className="grid grid-cols-3 gap-3">
          {[
            { icon: "💰", label: "高额收益", desc: "自由定价" },
            { icon: "🎯", label: "精准匹配", desc: "智能推荐" },
            { icon: "🛡️", label: "平台保障", desc: "安全可靠" },
          ].map((item, i) => (
            <div key={i} className="glass-card p-3 rounded-xl text-center">
              <div className="text-2xl mb-1">{item.icon}</div>
              <h4 className="text-xs font-bold mb-0.5">{item.label}</h4>
              <p className="text-[10px] text-white/50">{item.desc}</p>
            </div>
          ))}
        </div>

{/* Application Form */}
        <form onSubmit={handleSubmit} className="space-y-4">
          <div className="glass-card p-4 rounded-xl space-y-4">
            <h3 className="font-bold text-sm flex items-center gap-2">
              <CheckCircle2 size={16} className="text-green-400" />
              基本信息
            </h3>

<div className="space-y-3">
              <div>
                <label className="text-xs text-white/60 mb-1 block">真实姓名</label>
                <input
                  type="text"
                  required
                  value={formData.realName}
                  onChange={(e) => setFormData({ ...formData, realName: e.target.value })}
                  className="w-full px-3 py-2 rounded-lg bg-white/5 border border-white/10 text-sm focus:border-primary focus:outline-none"
                  placeholder="请输入真实姓名"
                />
              </div>

<div>
                <label className="text-xs text-white/60 mb-1 block">联系电话</label>
                <input
                  type="tel"
                  required
                  value={formData.phone}
                  onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
                  className="w-full px-3 py-2 rounded-lg bg-white/5 border border-white/10 text-sm focus:border-primary focus:outline-none"
                  placeholder="请输入手机号"
                />
              </div>

<div>
                <label className="text-xs text-white/60 mb-1 block">擅长游戏</label>
                <select
                  required
                  value={formData.game}
                  onChange={(e) => setFormData({ ...formData, game: e.target.value })}
                  className="w-full px-3 py-2 rounded-lg bg-white/5 border border-white/10 text-sm focus:border-primary focus:outline-none"
                >
                  <option value="">请选择游戏</option>
                  <option value="lol">英雄联盟</option>
                  <option value="valorant">无畏契约</option>
                  <option value="hok">王者荣耀</option>
                  <option value="csgo">CS:GO</option>
                  <option value="wow">魔兽世界</option>
                </select>
              </div>

<div>
                <label className="text-xs text-white/60 mb-1 block">游戏段位</label>
                <input
                  type="text"
                  required
                  value={formData.rank}
                  onChange={(e) => setFormData({ ...formData, rank: e.target.value })}
                  className="w-full px-3 py-2 rounded-lg bg-white/5 border border-white/10 text-sm focus:border-primary focus:outline-none"
                  placeholder="如：王者100星、传奇"
                />
              </div>

<div>
                <label className="text-xs text-white/60 mb-1 block">从业经验</label>
                <textarea
                  required
                  value={formData.experience}
                  onChange={(e) => setFormData({ ...formData, experience: e.target.value })}
                  className="w-full px-3 py-2 rounded-lg bg-white/5 border border-white/10 text-sm focus:border-primary focus:outline-none resize-none"
                  rows={3}
                  placeholder="简单介绍您的游戏经历和成就"
                />
              </div>