"use client";

import * as React from "react";
import { cn } from "@/lib/utils";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import {
  FormField,
  InputField,
  TextareaField,
  NumberInputField,
} from "./FormField";
import { TagFields } from "./DynamicFields";
import type {
  ProductFormData,
  ProductCategory,
  ProductBrand,
} from "../../types/product-form";

interface BasicInfoSectionProps {
  data: ProductFormData;
  onChange: (data: Partial<ProductFormData>) => void;
  categories?: ProductCategory[];
  brands?: ProductBrand[];
  availableTags?: { id: string; name: string; color?: string }[];
  errors?: Partial<Record<keyof ProductFormData, string>>;
}

export function BasicInfoSection({
  data,
  onChange,
  categories = [],
  brands = [],
  availableTags = [],
  errors = {},
}: BasicInfoSectionProps) {
  const handleChange = (field: keyof ProductFormData, value: unknown) => {
    onChange({ [field]: value } as Partial<ProductFormData>);
  };

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

  return (
    <div className="space-y-6">
      {/* Brand & Product Name */}
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <FormField
          label="Brand"
          description="Select the product brand"
          error={errors.brandId as string}
          required
        >
          <Select
            items={brands.map((brand) => ({
              value: brand.id,
              label: brand.name,
            }))}
            value={data.brandId || ""}
            onValueChange={(v) => {
              const brand = brands.find((b) => b.id === v);
              handleChange("brandId", v);
              handleChange("brandName", brand?.name || "");
            }}
          >
            <SelectTrigger className="w-full">
              <SelectValue placeholder="Select brand" />
            </SelectTrigger>
            <SelectContent>
              {brands.map((brand) => (
                <SelectItem key={brand.id} value={brand.id}>
                  {brand.name}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </FormField>

        <InputField
          label="Product Name"
          description="Enter the full product name"
          value={data.name}
          onChange={(e) => handleChange("name", e.target.value)}
          error={errors.name as string}
          required
          placeholder="e.g., AMD Ryzen 9 7950X3D 16-Core, 32-Thread Desktop Processor"
        />
      </div>

      {/* SKU */}
      <InputField
        label="SKU"
        description="Unique stock keeping unit (auto-generated if left empty)"
        value={data.sku}
        onChange={(e) => handleChange("sku", e.target.value.toUpperCase())}
        error={errors.sku as string}
        placeholder="e.g., AMD-R9-7950X3D"
      />

      {/* Category */}
      <FormField
        label="Category"
        description="Select the product category"
        error={errors.categoryId as string}
        required
      >
        <Select
          items={categories.map((category) => ({
            value: category.id,
            label: category.name,
          }))}
          value={data.categoryId || ""}
          onValueChange={(v) => {
            const category = categories.find((c) => c.id === v);
            handleChange("categoryId", v);
            handleChange("categoryName", category?.name || "");
          }}
        >
          <SelectTrigger className="w-full">
            <SelectValue placeholder="Select category" />
          </SelectTrigger>
          <SelectContent>
            {categories.map((category) => (
              <SelectItem key={category.id} value={category.id}>
                {category.name}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      </FormField>

      {/* Description */}
      <TextareaField
        label="Short Description"
        description="Brief overview shown in product listings (max 500 characters)"
        value={data.description.overview || ""}
        onChange={(e) =>
          handleNestedChange("description", "overview", e.target.value)
        }
        error={errors.description as string}
        rows={3}
        placeholder="Brief summary of the product..."
        maxLength={500}
      />

      {/* Tags */}
      <TagFields
        tags={data.tags}
        onChange={(tags) => handleChange("tags", tags)}
        availableTags={availableTags}
        allowCreate={true}
      />
    </div>
  );
}