goodgo-platform/apps/web/app/[locale]/(dashboard)/projects/new/page.tsx

'use client';

import { zodResolver } from '@hookform/resolvers/zod';
import { ArrowLeft } from 'lucide-react';
import Link from 'next/link';
import dynamic from 'next/dynamic';
import { useRouter } from 'next/navigation';
import * as React from 'react';
import { useForm } from 'react-hook-form';
import { z } from 'zod';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Select } from '@/components/ui/select';
import { Textarea } from '@/components/ui/textarea';
import { duAnApi, type CreateProjectPayload } from '@/lib/du-an-api';

const LocationPicker = dynamic(
  () => import('@/components/map/location-picker').then((m) => m.LocationPicker),
  {
    ssr: false,
    loading: () => (
      <div className="flex h-[320px] items-center justify-center rounded-lg border border-dashed bg-muted text-sm text-muted-foreground">
        Đang tải bản đồ…
      </div>
    ),
  },
);

const SLUG_REGEX = /^[a-z0-9-]+$/;

const projectSchema = z.object({
  name: z.string().min(1, 'Bắt buộc'),
  slug: z
    .string()
    .min(1, 'Bắt buộc')
    .regex(SLUG_REGEX, 'Chỉ cho phép chữ thường, số và dấu -'),
  developer: z.string().min(1, 'Bắt buộc'),
  developerLogo: z
    .string()
    .optional()
    .refine(
      (v) => !v || /^https?:\/\//.test(v),
      'URL không hợp lệ',
    ),
  status: z.enum(['PLANNING', 'UNDER_CONSTRUCTION', 'HANDOVER', 'COMPLETED']),
  totalUnits: z
    .string()
    .min(1, 'Bắt buộc')
    .refine((v) => /^\d+$/.test(v) && Number(v) > 0, 'Phải là số nguyên > 0'),

  address: z.string().min(1, 'Bắt buộc'),
  ward: z.string().min(1, 'Bắt buộc'),
  district: z.string().min(1, 'Bắt buộc'),
  city: z.string().min(1, 'Bắt buộc'),
  latitude: z
    .string()
    .min(1, 'Bắt buộc')
    .refine((v) => {
      const n = Number(v);
      return Number.isFinite(n) && n >= -90 && n <= 90;
    }, 'Từ -90 đến 90'),
  longitude: z
    .string()
    .min(1, 'Bắt buộc')
    .refine((v) => {
      const n = Number(v);
      return Number.isFinite(n) && n >= -180 && n <= 180;
    }, 'Từ -180 đến 180'),

  description: z.string().optional(),
  masterPlanUrl: z
    .string()
    .optional()
    .refine(
      (v) => !v || /^https?:\/\//.test(v),
      'URL không hợp lệ',
    ),

  minPrice: z
    .string()
    .optional()
    .refine((v) => !v || /^\d+$/.test(v), 'Chỉ nhập số nguyên'),
  maxPrice: z
    .string()
    .optional()
    .refine((v) => !v || /^\d+$/.test(v), 'Chỉ nhập số nguyên'),
  totalArea: z
    .string()
    .optional()
    .refine((v) => !v || (Number.isFinite(Number(v)) && Number(v) > 0), 'Phải lớn hơn 0'),
  buildingCount: z
    .string()
    .optional()
    .refine((v) => !v || (/^\d+$/.test(v) && Number(v) > 0), 'Phải là số nguyên > 0'),
  floorCount: z
    .string()
    .optional()
    .refine((v) => !v || (/^\d+$/.test(v) && Number(v) > 0), 'Phải là số nguyên > 0'),

  startDate: z.string().optional(),
  completionDate: z.string().optional(),

  tags: z.string().optional(),

  suitableFor: z.string().optional(),
  whyThisLocation: z
    .string()
    .max(2000, 'Tối đa 2000 ký tự')
    .optional(),
});

type ProjectFormData = z.infer<typeof projectSchema>;

function FormSection({
  title,
  children,
}: {
  title: string;
  children: React.ReactNode;
}) {
  return (
    <Card>
      <CardHeader>
        <CardTitle className="text-lg">{title}</CardTitle>
      </CardHeader>
      <CardContent className="grid gap-4 sm:grid-cols-2">{children}</CardContent>
    </Card>
  );
}

export default function CreateProjectPage() {
  const router = useRouter();
  const [isSubmitting, setIsSubmitting] = React.useState(false);
  const [error, setError] = React.useState<string | null>(null);
  const [success, setSuccess] = React.useState(false);

  const {
    register,
    handleSubmit,
    setValue,
    watch,
    formState: { errors },
  } = useForm<ProjectFormData>({
    resolver: zodResolver(projectSchema),
    mode: 'onTouched',
    defaultValues: {
      status: 'PLANNING',
    },
  });

  const latStr = watch('latitude');
  const lngStr = watch('longitude');
  const latNum = Number.parseFloat(latStr ?? '');
  const lngNum = Number.parseFloat(lngStr ?? '');

  const handlePickLocation = React.useCallback(
    (
      coords: { lat: number; lng: number },
      resolved?: { address?: string; ward?: string; district?: string; city?: string },
    ) => {
      setValue('latitude', coords.lat.toFixed(6), { shouldValidate: true });
      setValue('longitude', coords.lng.toFixed(6), { shouldValidate: true });
      // Only autofill address fields when currently empty — don't clobber what
      // the admin typed intentionally.
      if (resolved?.address && !watch('address')) {
        setValue('address', resolved.address, { shouldValidate: true });
      }
      if (resolved?.ward && !watch('ward')) {
        setValue('ward', resolved.ward, { shouldValidate: true });
      }
      if (resolved?.district && !watch('district')) {
        setValue('district', resolved.district, { shouldValidate: true });
      }
      if (resolved?.city && !watch('city')) {
        setValue('city', resolved.city, { shouldValidate: true });
      }
    },
    [setValue, watch],
  );

  const onSubmit = async (data: ProjectFormData) => {
    setIsSubmitting(true);
    setError(null);
    try {
      const payload: CreateProjectPayload = {
        name: data.name,
        slug: data.slug,
        developer: data.developer,
        status: data.status,
        totalUnits: Number(data.totalUnits),
        address: data.address,
        ward: data.ward,
        district: data.district,
        city: data.city,
        latitude: Number(data.latitude),
        longitude: Number(data.longitude),
      };

      if (data.developerLogo) payload.developerLogo = data.developerLogo;
      if (data.description) payload.description = data.description;
      if (data.masterPlanUrl) payload.masterPlanUrl = data.masterPlanUrl;
      if (data.minPrice) payload.minPrice = data.minPrice;
      if (data.maxPrice) payload.maxPrice = data.maxPrice;
      if (data.totalArea) payload.totalArea = Number(data.totalArea);
      if (data.buildingCount) payload.buildingCount = Number(data.buildingCount);
      if (data.floorCount) payload.floorCount = Number(data.floorCount);
      if (data.startDate) payload.startDate = data.startDate;
      if (data.completionDate) payload.completionDate = data.completionDate;
      if (data.tags) {
        const tags = data.tags
          .split(',')
          .map((s) => s.trim())
          .filter(Boolean);
        if (tags.length > 0) payload.tags = tags;
      }
      if (data.suitableFor) {
        const suitableFor = data.suitableFor
          .split(',')
          .map((s) => s.trim())
          .filter(Boolean);
        if (suitableFor.length > 0) payload.suitableFor = suitableFor;
      }
      if (data.whyThisLocation) payload.whyThisLocation = data.whyThisLocation;

      await duAnApi.create(payload);
      setSuccess(true);
      setTimeout(() => router.push('/projects'), 600);
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Có lỗi xảy ra');
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <div className="mx-auto max-w-4xl space-y-6">
      <div>
        <Link
          href="/projects"
          className="inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground"
        >
          <ArrowLeft className="h-4 w-4" />
          Danh sách dự án
        </Link>
        <h1 className="mt-2 text-2xl font-bold">Thêm dự án mới</h1>
      </div>

      {success && (
        <div className="rounded-md border border-green-500/50 bg-green-50 p-3 text-sm text-green-700">
          Đã tạo dự án
        </div>
      )}

      {error && (
        <div className="rounded-md border border-destructive/50 bg-destructive/10 p-3 text-sm text-destructive">
          {error}
          <button className="ml-2 font-medium underline" onClick={() => setError(null)}>
            Đóng
          </button>
        </div>
      )}

      <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
        {/* Thông tin cơ bản */}
        <FormSection title="Thông tin cơ bản">
          <div className="space-y-1.5">
            <Label htmlFor="name">
              Tên dự án <span className="text-destructive">*</span>
            </Label>
            <Input id="name" {...register('name')} />
            {errors.name && (
              <p className="text-xs text-destructive">{errors.name.message}</p>
            )}
          </div>
          <div className="space-y-1.5">
            <Label htmlFor="slug">
              Slug <span className="text-destructive">*</span>
            </Label>
            <Input id="slug" {...register('slug')} placeholder="vd: vinhomes-central-park" />
            <p className="text-xs text-muted-foreground">
              URL thân thiện, chỉ chữ thường, số và dấu -
            </p>
            {errors.slug && (
              <p className="text-xs text-destructive">{errors.slug.message}</p>
            )}
          </div>
          <div className="space-y-1.5">
            <Label htmlFor="developer">
              Chủ đầu tư <span className="text-destructive">*</span>
            </Label>
            <Input id="developer" {...register('developer')} />
            {errors.developer && (
              <p className="text-xs text-destructive">{errors.developer.message}</p>
            )}
          </div>
          <div className="space-y-1.5">
            <Label htmlFor="developerLogo">Logo chủ đầu tư (URL)</Label>
            <Input
              id="developerLogo"
              {...register('developerLogo')}
              placeholder="https://..."
            />
            {errors.developerLogo && (
              <p className="text-xs text-destructive">{errors.developerLogo.message}</p>
            )}
          </div>
          <div className="space-y-1.5">
            <Label htmlFor="status">
              Trạng thái <span className="text-destructive">*</span>
            </Label>
            <Select id="status" {...register('status')}>
              <option value="PLANNING">Đang quy hoạch</option>
              <option value="UNDER_CONSTRUCTION">Đang xây dựng</option>
              <option value="HANDOVER">Đang bàn giao</option>
              <option value="COMPLETED">Đã hoàn thành</option>
            </Select>
          </div>
          <div className="space-y-1.5">
            <Label htmlFor="totalUnits">
              Tổng số căn <span className="text-destructive">*</span>
            </Label>
            <Input
              id="totalUnits"
              type="number"
              min={1}
              {...register('totalUnits')}
            />
            {errors.totalUnits && (
              <p className="text-xs text-destructive">{errors.totalUnits.message}</p>
            )}
          </div>
          <div className="space-y-1.5 sm:col-span-2">
            <Label htmlFor="description">Mô tả</Label>
            <Textarea id="description" rows={4} {...register('description')} />
          </div>
          <div className="space-y-1.5 sm:col-span-2">
            <Label htmlFor="masterPlanUrl">Mặt bằng tổng thể (URL)</Label>
            <Input
              id="masterPlanUrl"
              {...register('masterPlanUrl')}
              placeholder="https://..."
            />
            {errors.masterPlanUrl && (
              <p className="text-xs text-destructive">{errors.masterPlanUrl.message}</p>
            )}
          </div>
          <div className="space-y-1.5 sm:col-span-2">
            <Label htmlFor="tags">Tags (phân cách bởi dấu phẩy)</Label>
            <Input id="tags" {...register('tags')} placeholder="cao cấp, view sông, gần trung tâm" />
          </div>
        </FormSection>

        {/* Vị trí */}
        <FormSection title="Vị trí">
          <div className="sm:col-span-2">
            <Label>Chọn vị trí trên bản đồ</Label>
            <p className="mb-2 text-xs text-muted-foreground">
              Nhấp vào bản đồ hoặc kéo pin để xác định toạ độ. Ô địa chỉ / phường /
              quận / thành phố bên dưới sẽ tự điền nếu đang trống.
            </p>
            <LocationPicker
              lat={Number.isFinite(latNum) ? latNum : null}
              lng={Number.isFinite(lngNum) ? lngNum : null}
              onChange={handlePickLocation}
              height="360px"
            />
          </div>
          <div className="space-y-1.5 sm:col-span-2">
            <Label htmlFor="address">
              Địa chỉ <span className="text-destructive">*</span>
            </Label>
            <Input id="address" {...register('address')} />
            {errors.address && (
              <p className="text-xs text-destructive">{errors.address.message}</p>
            )}
          </div>
          <div className="space-y-1.5">
            <Label htmlFor="ward">
              Phường/Xã <span className="text-destructive">*</span>
            </Label>
            <Input id="ward" {...register('ward')} />
            {errors.ward && (
              <p className="text-xs text-destructive">{errors.ward.message}</p>
            )}
          </div>
          <div className="space-y-1.5">
            <Label htmlFor="district">
              Quận/Huyện <span className="text-destructive">*</span>
            </Label>
            <Input id="district" {...register('district')} />
            {errors.district && (
              <p className="text-xs text-destructive">{errors.district.message}</p>
            )}
          </div>
          <div className="space-y-1.5">
            <Label htmlFor="city">
              Thành phố <span className="text-destructive">*</span>
            </Label>
            <Input id="city" {...register('city')} />
            {errors.city && (
              <p className="text-xs text-destructive">{errors.city.message}</p>
            )}
          </div>
          <div className="space-y-1.5" />
          <div className="space-y-1.5">
            <Label htmlFor="latitude">
              Vĩ độ (latitude) <span className="text-destructive">*</span>
            </Label>
            <Input
              id="latitude"
              type="number"
              step="0.0001"
              {...register('latitude')}
            />
            {errors.latitude && (
              <p className="text-xs text-destructive">{errors.latitude.message}</p>
            )}
          </div>
          <div className="space-y-1.5">
            <Label htmlFor="longitude">
              Kinh độ (longitude) <span className="text-destructive">*</span>
            </Label>
            <Input
              id="longitude"
              type="number"
              step="0.0001"
              {...register('longitude')}
            />
            {errors.longitude && (
              <p className="text-xs text-destructive">{errors.longitude.message}</p>
            )}
          </div>
        </FormSection>

        {/* Quy mô & giá */}
        <FormSection title="Quy mô & giá">
          <div className="space-y-1.5">
            <Label htmlFor="minPrice">Giá thấp nhất</Label>
            <Input id="minPrice" {...register('minPrice')} placeholder="2500000000" />
            <p className="text-xs text-muted-foreground">VND, số nguyên</p>
            {errors.minPrice && (
              <p className="text-xs text-destructive">{errors.minPrice.message}</p>
            )}
          </div>
          <div className="space-y-1.5">
            <Label htmlFor="maxPrice">Giá cao nhất</Label>
            <Input id="maxPrice" {...register('maxPrice')} placeholder="8500000000" />
            <p className="text-xs text-muted-foreground">VND, số nguyên</p>
            {errors.maxPrice && (
              <p className="text-xs text-destructive">{errors.maxPrice.message}</p>
            )}
          </div>
          <div className="space-y-1.5">
            <Label htmlFor="totalArea">Tổng diện tích (m²)</Label>
            <Input
              id="totalArea"
              type="number"
              step="0.01"
              {...register('totalArea')}
            />
            {errors.totalArea && (
              <p className="text-xs text-destructive">{errors.totalArea.message}</p>
            )}
          </div>
          <div className="space-y-1.5">
            <Label htmlFor="buildingCount">Số toà nhà</Label>
            <Input id="buildingCount" type="number" {...register('buildingCount')} />
            {errors.buildingCount && (
              <p className="text-xs text-destructive">{errors.buildingCount.message}</p>
            )}
          </div>
          <div className="space-y-1.5">
            <Label htmlFor="floorCount">Số tầng</Label>
            <Input id="floorCount" type="number" {...register('floorCount')} />
            {errors.floorCount && (
              <p className="text-xs text-destructive">{errors.floorCount.message}</p>
            )}
          </div>
        </FormSection>

        {/* Phù hợp & lý do khu vực */}
        <FormSection title="Phù hợp & lý do khu vực">
          <div className="space-y-1.5 sm:col-span-2">
            <Label htmlFor="suitableFor">Phù hợp với ai (phân cách bởi dấu phẩy)</Label>
            <Input
              id="suitableFor"
              {...register('suitableFor')}
              placeholder="Gia đình trẻ, Chuyên gia nước ngoài, Nhà đầu tư"
            />
            <p className="text-xs text-muted-foreground">
              Mỗi nhóm đối tượng là một chip hiển thị trên trang dự án.
            </p>
          </div>
          <div className="space-y-1.5 sm:col-span-2">
            <Label htmlFor="whyThisLocation">Vì sao nên chọn khu vực này</Label>
            <Textarea
              id="whyThisLocation"
              rows={4}
              maxLength={2000}
              {...register('whyThisLocation')}
              placeholder="Mô tả ngắn vì sao khu vực này phù hợp..."
            />
            {errors.whyThisLocation && (
              <p className="text-xs text-destructive">{errors.whyThisLocation.message}</p>
            )}
          </div>
        </FormSection>

        {/* Thời gian */}
        <FormSection title="Thời gian">
          <div className="space-y-1.5">
            <Label htmlFor="startDate">Ngày khởi công</Label>
            <Input id="startDate" type="date" {...register('startDate')} />
          </div>
          <div className="space-y-1.5">
            <Label htmlFor="completionDate">Ngày hoàn thành</Label>
            <Input id="completionDate" type="date" {...register('completionDate')} />
          </div>
        </FormSection>

        <div className="flex justify-end gap-3">
          <Link href="/projects">
            <Button type="button" variant="outline">
              Huỷ
            </Button>
          </Link>
          <Button type="submit" disabled={isSubmitting}>
            {isSubmitting ? 'Đang tạo...' : 'Tạo dự án'}
          </Button>
        </div>
      </form>
    </div>
  );
}