'use client';

import { forwardRef, useState, useTransition, useRef, ReactNode } from 'react';
import type { YearReviewCategory } from '@prisma/client';
import { createYearReviewItem } from '@/actions/year-review';
import { YEAR_REVIEW_BY_CATEGORY } from '@/lib/types';

interface YearReviewSectionProps {
  category: YearReviewCategory;
  sessionId: string;
  isDraggingOver: boolean;
  children: ReactNode;
}

export const YearReviewSection = forwardRef<HTMLDivElement, YearReviewSectionProps>(
  ({ category, sessionId, isDraggingOver, children, ...props }, ref) => {
    const [isAdding, setIsAdding] = useState(false);
    const [newContent, setNewContent] = useState('');
    const [isPending, startTransition] = useTransition();
    const isSubmittingRef = useRef(false);

    const config = YEAR_REVIEW_BY_CATEGORY[category];

    async function handleAdd() {
      if (isSubmittingRef.current || !newContent.trim()) {
        setIsAdding(false);
        return;
      }

      isSubmittingRef.current = true;
      startTransition(async () => {
        await createYearReviewItem(sessionId, {
          content: newContent.trim(),
          category,
        });
        setNewContent('');
        setIsAdding(false);
        isSubmittingRef.current = false;
      });
    }

    function handleKeyDown(e: React.KeyboardEvent) {
      if (e.key === 'Enter' && !e.shiftKey) {
        e.preventDefault();
        handleAdd();
      } else if (e.key === 'Escape') {
        setIsAdding(false);
        setNewContent('');
      }
    }

    return (
      <div
        ref={ref}
        className={`
          rounded-xl border-2 p-4 min-h-[200px] transition-colors
          bg-card border-border
          ${isDraggingOver ? 'ring-2 ring-primary ring-offset-2' : ''}
        `}
        style={{
          borderLeftColor: config.color,
          borderLeftWidth: '4px',
        }}
        {...props}
      >
        {/* Header */}
        <div className="mb-3 flex items-center justify-between">
          <div className="flex items-center gap-2">
            <span className="text-xl">{config.icon}</span>
            <div>
              <h3 className="font-semibold text-foreground">{config.title}</h3>
              <p className="text-xs text-muted">{config.description}</p>
            </div>
          </div>
          <button
            onClick={() => setIsAdding(true)}
            className="rounded-lg p-1.5 transition-colors hover:bg-card-hover text-muted hover:text-foreground"
            aria-label={`Ajouter un item ${config.title}`}
          >
            <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M12 4v16m8-8H4"
              />
            </svg>
          </button>
        </div>

        {/* Items */}
        <div className="space-y-2">
          {children}

          {/* Add Form */}
          {isAdding && (
            <div className="rounded-lg border border-border bg-card p-2 shadow-sm">
              <textarea
                autoFocus
                value={newContent}
                onChange={(e) => setNewContent(e.target.value)}
                onKeyDown={handleKeyDown}
                onBlur={(e) => {
                  // Don't trigger on blur if clicking on a button
                  if (!e.currentTarget.contains(e.relatedTarget as Node)) {
                    handleAdd();
                  }
                }}
                placeholder={`Décrivez ${config.title.toLowerCase()}...`}
                className="w-full resize-none rounded border-0 bg-transparent p-1 text-sm text-foreground placeholder:text-muted focus:outline-none focus:ring-0"
                rows={2}
                disabled={isPending}
              />
              <div className="mt-1 flex justify-end gap-1">
                <button
                  onClick={() => {
                    setIsAdding(false);
                    setNewContent('');
                  }}
                  className="rounded px-2 py-1 text-xs text-muted hover:bg-card-hover"
                  disabled={isPending}
                >
                  Annuler
                </button>
                <button
                  onMouseDown={(e) => {
                    e.preventDefault(); // Prevent blur from textarea
                  }}
                  onClick={handleAdd}
                  disabled={isPending || !newContent.trim()}
                  className="rounded px-2 py-1 text-xs font-medium text-primary hover:bg-primary/10 disabled:opacity-50"
                >
                  {isPending ? '...' : 'Ajouter'}
                </button>
              </div>
            </div>
          )}
        </div>
      </div>
    );
  }
);

YearReviewSection.displayName = 'YearReviewSection';