'use client';

import { zodResolver } from '@hookform/resolvers/zod';
import { useQuery, useQueryClient } from '@tanstack/react-query';
import { ArrowLeft } from 'lucide-react';
import Link from 'next/link';
import { useParams, 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 ProjectStatus,
  type UpdateProjectPayload,
} from '@/lib/du-an-api';

const editSchema = z.object({
  name: z.string().optional(),
  developer: z.string().optional(),
  developerLogo: z
    .string()
    .optional()
    .refine(
      (v) => !v || /^https?:\/\//.test(v),
      'URL không hợp lệ',
    ),
  status: z
    .enum(['PLANNING', 'UNDER_CONSTRUCTION', 'HANDOVER', 'COMPLETED'])
    .optional()
    .or(z.literal('')),
  totalUnits: z
    .string()
    .optional()
    .refine((v) => !v || (/^\d+$/.test(v) && Number(v) > 0), 'Phải là số nguyên > 0'),

  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 EditFormData = z.infer<typeof editSchema>;

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>
  );
}

function toDateInput(value: string | null | undefined): string {
  if (!value) return '';
  // Accept both ISO and YYYY-MM-DD
  const d = new Date(value);
  if (isNaN(d.getTime())) return '';
  return d.toISOString().slice(0, 10);
}

export default function EditProjectPage() {
  const { id } = useParams<{ id: string }>();
  const router = useRouter();
  const queryClient = useQueryClient();
  const [isSubmitting, setIsSubmitting] = React.useState(false);
  const [isDeleting, setIsDeleting] = React.useState(false);
  const [error, setError] = React.useState<string | null>(null);

  const {
    data: project,
    isLoading,
    isError,
  } = useQuery({
    queryKey: ['admin-project', id],
    queryFn: () => duAnApi.getBySlug(id),
    enabled: Boolean(id),
    retry: false,
  });

  const {
    register,
    handleSubmit,
    reset,
    formState: { errors },
  } = useForm<EditFormData>({
    resolver: zodResolver(editSchema),
    mode: 'onTouched',
  });

  React.useEffect(() => {
    if (!project) return;
    reset({
      name: project.name,
      developer: project.developer.name,
      developerLogo: project.developer.logoUrl ?? '',
      status: project.status,
      totalUnits: project.totalUnits ? String(project.totalUnits) : '',
      description: project.description ?? '',
      minPrice: project.minPrice ?? '',
      maxPrice: project.maxPrice ?? '',
      totalArea: project.totalArea ? String(project.totalArea) : '',
      startDate: '',
      completionDate: toDateInput(project.completionDate),
      tags: '',
      suitableFor: (project.suitableFor ?? []).join(', '),
      whyThisLocation: project.whyThisLocation ?? '',
    });
  }, [project, reset]);

  const onSubmit = async (data: EditFormData) => {
    setIsSubmitting(true);
    setError(null);
    try {
      const payload: UpdateProjectPayload = {};

      if (data.name) payload.name = data.name;
      if (data.developer) payload.developer = data.developer;
      if (data.developerLogo !== undefined) {
        payload.developerLogo = data.developerLogo || null;
      }
      if (data.status) payload.status = data.status as ProjectStatus;
      if (data.totalUnits) payload.totalUnits = Number(data.totalUnits);
      if (data.description !== undefined) {
        payload.description = data.description || null;
      }
      if (data.masterPlanUrl !== undefined) {
        payload.masterPlanUrl = data.masterPlanUrl || null;
      }
      if (data.minPrice !== undefined) {
        payload.minPrice = data.minPrice || null;
      }
      if (data.maxPrice !== undefined) {
        payload.maxPrice = data.maxPrice || null;
      }
      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) {
        payload.tags = data.tags
          .split(',')
          .map((s) => s.trim())
          .filter(Boolean);
      }
      if (data.suitableFor !== undefined) {
        payload.suitableFor = data.suitableFor
          .split(',')
          .map((s) => s.trim())
          .filter(Boolean);
      }
      if (data.whyThisLocation !== undefined) {
        payload.whyThisLocation = data.whyThisLocation || null;
      }

      await duAnApi.update(id, payload);
      await queryClient.invalidateQueries({ queryKey: ['admin-projects'] });
      router.push('/projects');
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Có lỗi xảy ra');
    } finally {
      setIsSubmitting(false);
    }
  };

  const handleDelete = async () => {
    if (!project) return;
    if (!window.confirm(`Xoá dự án "${project.name}"? Thao tác này không thể hoàn tác.`)) {
      return;
    }
    setIsDeleting(true);
    setError(null);
    try {
      await duAnApi.delete(id);
      await queryClient.invalidateQueries({ queryKey: ['admin-projects'] });
      router.push('/projects');
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Không thể xoá dự án');
      setIsDeleting(false);
    }
  };

  if (isLoading) {
    return (
      <div className="flex min-h-[400px] items-center justify-center">
        <div className="h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent" />
      </div>
    );
  }

  if (isError || !project) {
    return (
      <div className="flex min-h-[400px] flex-col items-center justify-center space-y-4">
        <p className="text-destructive">Không tìm thấy dự án</p>
        <Link href="/projects">
          <Button variant="outline">Quay lại</Button>
        </Link>
      </div>
    );
  }

  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">Chỉnh sửa dự án</h1>
        <p className="text-sm text-muted-foreground">{project.name}</p>
      </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</Label>
            <Input id="name" {...register('name')} />
          </div>
          <div className="space-y-1.5">
            <Label htmlFor="developer">Chủ đầu tư</Label>
            <Input id="developer" {...register('developer')} />
          </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</Label>
            <Select id="status" {...register('status')}>
              <option value="">-- Giữ nguyên --</option>
              <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</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í (hiện tại chỉ hiển thị; backend chưa hỗ trợ sửa toạ độ sau khi tạo) */}
        <FormSection title="Vị trí">
          <div className="sm:col-span-2 space-y-2 text-sm">
            <div className="text-muted-foreground">
              <span className="font-medium text-foreground">{project.address}</span>
              <br />
              {project.district}, {project.city}
              {typeof project.latitude === 'number' && typeof project.longitude === 'number' && (
                <>
                  <br />
                  <span className="text-xs">
                    ({project.latitude.toFixed(6)}, {project.longitude.toFixed(6)})
                  </span>
                </>
              )}
            </div>
            <p className="text-xs text-muted-foreground">
              Vị trí địa lý hiện chưa thể chỉnh sửa sau khi tạo. Nếu cần cập nhật,
              vui lòng xoá dự án và tạo lại.
            </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 lưu...' : 'Lưu thay đổi'}
          </Button>
        </div>
      </form>

      {/* Danger zone */}
      <Card className="border-destructive/50">
        <CardHeader>
          <CardTitle className="text-lg text-destructive">Vùng nguy hiểm</CardTitle>
        </CardHeader>
        <CardContent className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
          <p className="text-sm text-muted-foreground">
            Xoá dự án sẽ không thể hoàn tác. Mọi dữ liệu liên quan sẽ bị mất.
          </p>
          <Button
            type="button"
            variant="destructive"
            onClick={handleDelete}
            disabled={isDeleting}
          >
            {isDeleting ? 'Đang xoá...' : 'Xoá dự án'}
          </Button>
        </CardContent>
      </Card>
    </div>
  );
}
