"use client";

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

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

export function DescriptionSection({
  data,
  onChange,
  errors = {},
}: DescriptionSectionProps) {
  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 handleHighlightsChange = (highlights: string[]) => {
    handleNestedChange("description", "highlights", highlights);
  };

  const addHighlight = () => {
    const newHighlights = [...(data.description.highlights || []), ""];
    handleHighlightsChange(newHighlights);
  };

  const removeHighlight = (index: number) => {
    const newHighlights = (data.description.highlights || []).filter((_, i) => i !== index);
    handleHighlightsChange(newHighlights);
  };

  const updateHighlight = (index: number, value: string) => {
    const newHighlights = [...(data.description.highlights || [])];
    newHighlights[index] = value;
    handleHighlightsChange(newHighlights);
  };

  return (
    <div className="space-y-6">
      {/* Product Overview */}
      <TextareaField
        label="Product Overview"
        description="Short summary shown in product cards and 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 overview of the product..."
        maxLength={500}
      />

      {/* Key Highlights */}
      <div className="space-y-4">
        <div className="flex items-center justify-between">
          <h4 className="text-sm font-medium text-foreground">Key Highlights</h4>
          <button
            type="button"
            onClick={addHighlight}
            className="text-sm text-primary hover:text-primary/80 font-medium"
          >
            + Add Highlight
          </button>
        </div>

        {(data.description.highlights || []).length === 0 ? (
          <div className="text-center py-6 text-muted-foreground border-2 border-dashed border-border rounded-xl">
            <p className="text-sm">No highlights added yet.</p>
            <p className="text-xs mt-1">Click &quot;Add Highlight&quot; to add key selling points.</p>
          </div>
        ) : (
          <div className="space-y-3">
            {(data.description.highlights || []).map((highlight, index) => (
              <div key={index} className="flex items-center gap-3">
                <span className="text-muted-foreground text-sm">{index + 1}.</span>
                <InputField
                  label=""
                  value={highlight}
                  onChange={(e) => updateHighlight(index, e.target.value)}
                  placeholder="e.g., 16 cores, 32 threads for extreme multitasking"
                  className="flex-1"
                />
                <button
                  type="button"
                  onClick={() => removeHighlight(index)}
                  className="p-1.5 text-muted-foreground hover:text-destructive transition-colors"
                  aria-label={`Remove highlight ${index + 1}`}
                >
                  <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                  </svg>
                </button>
              </div>
            ))}
          </div>
        )}
      </div>

      {/* Detailed Description */}
      <TextareaField
        label="Detailed Description"
        description="Full product description for the product page (supports HTML/markdown)"
        value={data.description.detailedDescription || ""}
        onChange={(e) => handleNestedChange("description", "detailedDescription", e.target.value)}
        error={errors.description as string}
        rows={8}
        placeholder="Detailed product description..."
      />

      {/* Editor hint */}
      <div className="rounded-lg bg-muted/50 p-4 border border-border">
        <p className="text-sm text-muted-foreground">
          <strong>Tip:</strong> You can use basic HTML tags like{" "}
          <code className="bg-background px-1 rounded">{'<p>'}</code>,
          <code className="bg-background px-1 rounded">{'<ul>'}</code>, <code className="bg-background px-1 rounded">{'<li>'}</code>,
          <code className="bg-background px-1 rounded">{'<strong>'}</code>, <code className="bg-background px-1 rounded">{'<em>'}</code>
          for formatting. Markdown is also supported.
        </p>
      </div>
    </div>
  );
}