'use client';

import { zodResolver } from '@hookform/resolvers/zod';
import { useRouter } from 'next/navigation';
import * as React from 'react';
import { useForm } from 'react-hook-form';
import { ImageUpload, type ImageFile } from '@/components/listings/image-upload';
import {
  StepBasicInfo,
  StepLocation,
  StepDetails,
  StepPricing,
} from '@/components/listings/listing-form-steps';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import {
  listingsApi,
  type CreateListingPayload,
  type Direction,
  type Furnishing,
  type PropertyCondition,
} from '@/lib/listings-api';
import { cn } from '@/lib/utils';
import {
  createListingSchema,
  listingBasicSchema,
  listingLocationSchema,
  listingDetailsSchema,
  listingPricingSchema,
  type CreateListingFormData,
} from '@/lib/validations/listings';

const STEPS = [
  { title: 'Thông tin', schemaKeys: Object.keys(listingBasicSchema.shape) },
  { title: 'Vị trí', schemaKeys: Object.keys(listingLocationSchema.shape) },
  { title: 'Chi tiết', schemaKeys: Object.keys(listingDetailsSchema.shape) },
  { title: 'Giá cả', schemaKeys: Object.keys(listingPricingSchema.shape) },
  { title: 'Hình ảnh', schemaKeys: null },
];

function toNum(val: string | undefined): number | undefined {
  if (!val) return undefined;
  const n = Number(val);
  return isNaN(n) ? undefined : n;
}

export default function CreateListingPage() {
  const router = useRouter();
  const [currentStep, setCurrentStep] = React.useState(0);
  const [images, setImages] = React.useState<ImageFile[]>([]);
  const [isSubmitting, setIsSubmitting] = React.useState(false);
  const [error, setError] = React.useState<string | null>(null);

  const {
    register,
    handleSubmit,
    trigger,
    setValue,
    watch,
    formState: { errors },
  } = useForm<CreateListingFormData>({
    resolver: zodResolver(createListingSchema),
    mode: 'onTouched',
  });

  const goNext = async () => {
    const step = STEPS[currentStep];
    if (step?.schemaKeys) {
      const valid = await trigger(step.schemaKeys as Array<keyof CreateListingFormData>);
      if (!valid) return;
    }
    setCurrentStep((s) => Math.min(s + 1, STEPS.length - 1));
  };

  const goBack = () => setCurrentStep((s) => Math.max(s - 1, 0));

  const onSubmit = async (data: CreateListingFormData) => {
    setIsSubmitting(true);
    setError(null);

    try {
      const payload: CreateListingPayload = {
        transactionType: data.transactionType,
        propertyType: data.propertyType,
        title: data.title,
        description: data.description,
        address: data.address,
        ward: data.ward,
        district: data.district,
        city: data.city,
        latitude: toNum(data.latitude) ?? 0,
        longitude: toNum(data.longitude) ?? 0,
        areaM2: Number(data.areaM2),
        priceVND: data.priceVND,
      };

      const usableAreaM2 = toNum(data.usableAreaM2);
      if (usableAreaM2 != null) payload.usableAreaM2 = usableAreaM2;
      const bedrooms = toNum(data.bedrooms);
      if (bedrooms != null) payload.bedrooms = bedrooms;
      const bathrooms = toNum(data.bathrooms);
      if (bathrooms != null) payload.bathrooms = bathrooms;
      const floors = toNum(data.floors);
      if (floors != null) payload.floors = floors;
      const floor = toNum(data.floor);
      if (floor != null) payload.floor = floor;
      const totalFloors = toNum(data.totalFloors);
      if (totalFloors != null) payload.totalFloors = totalFloors;
      if (data.direction) payload.direction = data.direction as Direction;
      const yearBuilt = toNum(data.yearBuilt);
      if (yearBuilt != null) payload.yearBuilt = yearBuilt;
      if (data.legalStatus) payload.legalStatus = data.legalStatus;
      if (data.projectName) payload.projectName = data.projectName;
      if (data.amenities) {
        payload.amenities = data.amenities.split(',').map((s) => s.trim()).filter(Boolean);
      }
      if (data.rentPriceMonthly) payload.rentPriceMonthly = data.rentPriceMonthly;
      const commissionPct = toNum(data.commissionPct);
      if (commissionPct != null) payload.commissionPct = commissionPct;

      // Rich property fields ----------------------------------
      if (data.furnishing) payload.furnishing = data.furnishing as Furnishing;
      if (data.propertyCondition) payload.propertyCondition = data.propertyCondition as PropertyCondition;
      if (data.balconyDirection) payload.balconyDirection = data.balconyDirection as Direction;
      if (data.maintenanceFeeVND) payload.maintenanceFeeVND = data.maintenanceFeeVND;
      const parkingSlots = toNum(data.parkingSlots);
      if (parkingSlots != null) payload.parkingSlots = parkingSlots;
      if (data.viewType) {
        const arr = data.viewType.split(',').map((s) => s.trim()).filter(Boolean);
        if (arr.length > 0) payload.viewType = arr;
      }
      if (data.petFriendly === 'true') payload.petFriendly = true;
      else if (data.petFriendly === 'false') payload.petFriendly = false;
      if (data.suitableFor) {
        const arr = data.suitableFor.split(',').map((s) => s.trim()).filter(Boolean);
        if (arr.length > 0) payload.suitableFor = arr;
      }
      if (data.whyThisLocation) payload.whyThisLocation = data.whyThisLocation;

      const result = await listingsApi.create(payload);

      for (const img of images) {
        try {
          await listingsApi.uploadMedia(result.listingId, img.file);
        } catch {
          // Continue with remaining images
        }
      }

      router.push(`/listings/${result.listingId}`);
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Có lỗi xảy ra');
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <div className="mx-auto max-w-3xl">
      <h1 className="mb-4 text-xl font-bold sm:mb-6 sm:text-2xl">Đăng tin mới</h1>

      {/* Step indicators */}
      <div className="mb-6 flex items-center justify-between sm:mb-8">
        {STEPS.map((step, index) => (
          <div key={step.title} className="flex items-center">
            <button
              type="button"
              onClick={() => index < currentStep && setCurrentStep(index)}
              className={cn(
                'flex h-8 w-8 items-center justify-center rounded-full text-sm font-medium transition-colors',
                index === currentStep
                  ? 'bg-primary text-primary-foreground'
                  : index < currentStep
                    ? 'bg-primary/20 text-primary cursor-pointer'
                    : 'bg-muted text-muted-foreground',
              )}
            >
              {index < currentStep ? '\u2713' : index + 1}
            </button>
            <span
              className={cn(
                'ml-2 hidden text-sm sm:inline',
                index === currentStep ? 'font-medium' : 'text-muted-foreground',
              )}
            >
              {step.title}
            </span>
            {index < STEPS.length - 1 && (
              <div
                className={cn(
                  'mx-1 h-px w-4 sm:mx-3 sm:w-8 md:w-12',
                  index < currentStep ? 'bg-primary' : 'bg-muted',
                )}
              />
            )}
          </div>
        ))}
      </div>

      {error && (
        <div className="mb-4 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)}>
        <Card>
          <CardContent className="pt-6">
            {currentStep === 0 && <StepBasicInfo register={register} errors={errors} />}
            {currentStep === 1 && (
              <StepLocation register={register} errors={errors} setValue={setValue} watch={watch} />
            )}
            {currentStep === 2 && <StepDetails register={register} errors={errors} />}
            {currentStep === 3 && <StepPricing register={register} errors={errors} />}
            {currentStep === 4 && (
              <div className="space-y-4">
                <h3 className="text-lg font-semibold">Hình ảnh</h3>
                <ImageUpload images={images} onChange={setImages} />
              </div>
            )}
          </CardContent>
        </Card>

        <div className="mt-6 flex justify-between">
          <Button
            type="button"
            variant="outline"
            onClick={goBack}
            disabled={currentStep === 0}
          >
            Quay lại
          </Button>

          {currentStep < STEPS.length - 1 ? (
            <Button type="button" onClick={goNext}>
              Tiếp theo
            </Button>
          ) : (
            <Button type="submit" disabled={isSubmitting}>
              {isSubmitting ? 'Đang đăng...' : 'Đăng tin'}
            </Button>
          )}
        </div>
      </form>
    </div>
  );
}
