'use client';

import ProfileLayout from '@/layout/ProfileLayout';
import { Input } from '@/components/ui/input';
import { useState } from 'react';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { Button } from '@/components/ui/button';
import { useRouter } from 'next/navigation';
import z from 'zod';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { useAsyncFn } from '@/hooks/tools';
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from '@/components/ui/form';

export default function CreateGroupPage() {
  const router = useRouter();

  const schema = z.object({
    nickname: z
      .string()
      .trim()
      .min(1, 'Group nickname is required')
      .min(2, 'Group nickname must be at least 2 characters'),
    worldGuide: z.string().trim().min(1, 'World guide is required'),
  });

  const form = useForm<any>({
    resolver: zodResolver(schema),
    defaultValues: {},
    mode: 'onChange',
  });

  const {
    formState: { isValid, isDirty },
  } = form;

  const { run: onSubmitFn, loading } = useAsyncFn(async (data: any) => {
    console.log('data', data);
  });

  return (
    <ProfileLayout title="Create a Group Chat">
      <Form {...form}>
        <form className="h-full flex flex-col w-full" onSubmit={form.handleSubmit(onSubmitFn)}>
          <div className="flex-1 overflow-auto flex flex-col gap-4">
            {/* 昵称字段 */}
            <FormField
              control={form.control}
              name="nickname"
              render={({ field }) => (
                <FormItem>
                  <FormLabel className="txt-label-m text-txt-primary-normal">
                    Group Nickname
                  </FormLabel>
                  <FormControl>
                    <Input
                      placeholder="Enter group name"
                      maxLength={20}
                      showCount
                      error={!!form.formState.errors.nickname}
                      {...field}
                    />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
            <FormField
              control={form.control}
              name="worldGuide"
              render={({ field }) => (
                <FormItem>
                  <FormLabel className="txt-label-m text-txt-primary-normal">World Guide</FormLabel>
                  <FormControl>
                    <Select value={field.value} onValueChange={field.onChange}>
                      <SelectTrigger className="w-full">
                        <SelectValue placeholder="Select a world guide" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="1">World Guide 1</SelectItem>
                        <SelectItem value="2">World Guide 2</SelectItem>
                        <SelectItem value="3">World Guide 3</SelectItem>
                      </SelectContent>
                    </Select>
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
          </div>
          <div className="flex shrink-0 py-4 justify-end gap-2">
            <Button onClick={() => router.back()} variant="tertiary">
              Cancel
            </Button>
            <Button type="submit" disabled={!isValid || !isDirty} loading={loading}>
              Save
            </Button>
          </div>
        </form>
      </Form>
    </ProfileLayout>
  );
}