"use client";

import * as React from "react";
import { cn } from "@/lib/utils";
import { FormField, InputField, TextareaField } from "./FormField";
import { ProductImageFields } from "./DynamicFields";
import { ImageUploadInput } from "./ImageUploadInput";
import type { ProductFormData } from "../../types/product-form";

interface MediaSectionProps {
  data: ProductFormData;
  onChange: (data: Partial<ProductFormData>) => void;
  errors?: Partial<Record<keyof ProductFormData, string>>;
}

export function MediaSection({
  data,
  onChange,
  errors = {},
}: MediaSectionProps) {
  const handleNestedChange = <T extends object>(
    parentField: keyof ProductFormData,
    nestedField: keyof T,
    value: unknown
  ) => {
    const current = data[parentField] as T;
    onChange({
      [parentField]: { ...current, [nestedField]: value },
    } as Partial<ProductFormData>);
  };

  const handleImagesChange = (images: ProductFormData["media"]["images"]) => {
    handleNestedChange("media", "images", images);
  };

  return (
    <div className="space-y-6">
      {/* Product Images */}
      <ProductImageFields
        images={data.media.images}
        onChange={handleImagesChange}
        maxImages={10}
      />

      {/* Featured Image (auto-synced with primary) */}
      <FormField
        label="Featured Image"
        description="Primary product image used in listings and thumbnails (automatically set to first image)"
      >
        <div className="relative aspect-square max-w-xs rounded-xl overflow-hidden border border-border bg-muted">
          {data.media.images.find((img) => img.isPrimary) ? (
            <img
              src={data.media.images.find((img) => img.isPrimary)!.url}
              alt="Featured product image"
              className="w-full h-full object-cover"
            />
          ) : data.media.images[0] ? (
            <img
              src={data.media.images[0].url}
              alt="Featured product image"
              className="w-full h-full object-cover"
            />
          ) : (
            <div className="w-full h-full flex items-center justify-center text-muted-foreground">
              <span className="text-sm">No image uploaded</span>
            </div>
          )}
        </div>
      </FormField>

      {/* Promotional Image */}
      <FormField
        label="Promotional Image"
        description="Optional banner/promotional image used in featured sections"
        error={errors.media as string}
      >
        <ImageUploadInput
          value={data.media.promotionalImage}
          onChange={(v) => handleNestedChange("media", "promotionalImage", v ?? undefined)}
        />
      </FormField>

      {/* Product Video */}
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <InputField
          label="Video URL"
          description="Optional product video (YouTube, Vimeo, or direct MP4 link)"
          value={data.media.videoUrl || ""}
          onChange={(e) => handleNestedChange("media", "videoUrl", e.target.value)}
          error={errors.media as string}
          placeholder="https://youtube.com/watch?v=..."
          type="url"
        />

        <FormField
          label="Video Thumbnail"
          description="Custom thumbnail for the video"
          error={errors.media as string}
        >
          <ImageUploadInput
            value={data.media.videoThumbnail}
            onChange={(v) => handleNestedChange("media", "videoThumbnail", v ?? undefined)}
          />
        </FormField>
      </div>

      {/* Image Alt Texts are handled inline in ProductImageFields */}
    </div>
  );
}