ok_r/app/projects/[id]/objectives/new/page.tsx

'use client';

import { useState } from 'react';
import { useRouter, useParams } from 'next/navigation';
import Link from 'next/link';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import * as z from 'zod';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
import { useUser } from '@/components/user-context';
import { toast } from 'sonner';
import { ArrowLeft, Loader2 } from 'lucide-react';
import { getErrorMessage } from '@/lib/error-utils';
import { fetchApi } from '@/lib/api-client';

const formSchema = z.object({
  title: z.string().min(1, '目标标题不能为空'),
  description: z.string().optional(),
  period_start: z.string().min(1, '开始日期不能为空'),
  period_end: z.string().min(1, '结束日期不能为空'),
});

type FormValues = z.infer<typeof formSchema>;

export default function NewObjectivePage() {
  const router = useRouter();
  const params = useParams();
  const projectId = params.id as string;
  const { currentUser } = useUser();
  const [isSubmitting, setIsSubmitting] = useState(false);

  const today = new Date();
  const nextMonth = new Date(today);
  nextMonth.setMonth(nextMonth.getMonth() + 1);

  const form = useForm<FormValues>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      title: '',
      description: '',
      period_start: today.toISOString().split('T')[0],
      period_end: nextMonth.toISOString().split('T')[0],
    },
  });

  const onSubmit = async (values: FormValues) => {
    if (new Date(values.period_end) < new Date(values.period_start)) {
      toast.error('结束日期不能早于开始日期');
      return;
    }

    setIsSubmitting(true);
    try {
      const res = await fetchApi('/api/objectives', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          ...values,
          project_id: projectId,
          created_by: currentUser?.id,
        }),
      });

      if (!res.ok) {
        const data = await res.json();
        throw new Error(data.error || '创建失败');
      }

      toast.success('目标创建成功');
      router.push(`/projects/${projectId}`);
    } catch (error) {
      toast.error(getErrorMessage(error));
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <div className="max-w-2xl mx-auto px-4 py-8">
      <Link
        href={`/projects/${projectId}`}
        className="inline-flex items-center text-sm text-muted-foreground hover:text-slate-800 mb-6"
      >
        <ArrowLeft className="h-4 w-4 mr-1" />
        返回项目
      </Link>

      <Card>
        <CardHeader>
          <CardTitle>新建阶段目标 (Objective)</CardTitle>
        </CardHeader>
        <CardContent>
          <Form {...form}>
            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
              <FormField
                control={form.control}
                name="title"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>目标标题 *</FormLabel>
                    <FormControl>
                      <Input placeholder="如：提升产品用户体验和性能" {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

              <FormField
                control={form.control}
                name="description"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>目标描述</FormLabel>
                    <FormControl>
                      <Textarea placeholder="详细描述这个目标" rows={3} {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

              <div className="grid grid-cols-2 gap-4">
                <FormField
                  control={form.control}
                  name="period_start"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>开始日期 *</FormLabel>
                      <FormControl>
                        <Input type="date" {...field} />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                <FormField
                  control={form.control}
                  name="period_end"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>结束日期 *</FormLabel>
                      <FormControl>
                        <Input type="date" {...field} />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
              </div>

              <div className="flex gap-4">
                <Button type="submit" disabled={isSubmitting} className="bg-teal-600 hover:bg-teal-700">
                  {isSubmitting && <Loader2 className="h-4 w-4 mr-2 animate-spin" />}
                  创建目标
                </Button>
                <Button type="button" variant="outline" onClick={() => router.back()}>
                  取消
                </Button>
              </div>
            </form>
          </Form>
        </CardContent>
      </Card>
    </div>
  );
}