'use client';

import { Input } from '@/components/ui/Input';
import { DateTimeInput } from '@/components/ui/DateTimeInput';
import { TaskPriority, TaskStatus } from '@/lib/types';
import { getAllStatuses, getAllPriorities } from '@/lib/status-config';
import { ensureDate } from '@/lib/date-utils';

interface TaskBasicFieldsProps {
  title: string;
  description: string;
  priority: TaskPriority;
  status: TaskStatus;
  dueDate?: Date;
  onTitleChange: (title: string) => void;
  onDescriptionChange: (description: string) => void;
  onPriorityChange: (priority: TaskPriority) => void;
  onStatusChange: (status: TaskStatus) => void;
  onDueDateChange: (date?: Date) => void;
  errors: Record<string, string>;
  loading: boolean;
  readonlyFields?: string[];
  source?: string; // Source de la tâche pour déterminer le message (jira, tfs, etc.)
}

export function TaskBasicFields({
  title,
  description,
  priority,
  status,
  dueDate,
  onTitleChange,
  onDescriptionChange,
  onPriorityChange,
  onStatusChange,
  onDueDateChange,
  errors,
  loading,
  readonlyFields = [],
  source,
}: TaskBasicFieldsProps) {
  const isTitleReadonly = readonlyFields.includes('title');
  const isDescriptionReadonly = readonlyFields.includes('description');
  const isStatusReadonly = readonlyFields.includes('status');
  const isPriorityReadonly = readonlyFields.includes('priority');
  const isDueDateReadonly = readonlyFields.includes('dueDate');

  // Déterminer le message selon la source
  const getSyncMessage = (field: string) => {
    if (source === 'jira') {
      return field === 'title' || field === 'description' || field === 'dueDate'
        ? '(synchronisé par Jira)'
        : '(sync)';
    } else if (source === 'tfs') {
      return field === 'title' || field === 'description' || field === 'dueDate'
        ? '(synchronisé par TFS)'
        : '(sync)';
    }
    return '(sync)';
  };

  return (
    <>
      {/* Titre */}
      <div className="space-y-2">
        <div className="flex items-center gap-2">
          <label className="block text-sm font-mono font-medium text-[var(--muted-foreground)] uppercase tracking-wider">
            Titre *
          </label>
          {isTitleReadonly && (
            <span className="text-xs text-[var(--muted-foreground)] italic">
              {getSyncMessage('title')}
            </span>
          )}
        </div>
        <Input
          value={title}
          onChange={(e) => onTitleChange(e.target.value)}
          placeholder="Titre de la tâche..."
          error={errors.title}
          disabled={loading || isTitleReadonly}
        />
      </div>

      {/* Description */}
      <div className="space-y-2">
        <div className="flex items-center gap-2">
          <label className="block text-sm font-mono font-medium text-[var(--muted-foreground)] uppercase tracking-wider">
            Description
          </label>
          {isDescriptionReadonly && (
            <span className="text-xs text-[var(--muted-foreground)] italic">
              {getSyncMessage('description')}
            </span>
          )}
        </div>
        <textarea
          value={description}
          onChange={(e) => onDescriptionChange(e.target.value)}
          placeholder="Description détaillée..."
          rows={4}
          disabled={loading || isDescriptionReadonly}
          className="w-full px-3 py-2 bg-[var(--input)] border border-[var(--border)]/50 rounded-lg text-[var(--foreground)] font-mono text-sm placeholder-[var(--muted-foreground)] focus:outline-none focus:ring-2 focus:ring-[var(--primary)]/50 focus:border-[var(--primary)]/50 hover:border-[var(--border)] transition-all duration-200 backdrop-blur-sm resize-none disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-[var(--card-column)] disabled:text-[var(--muted-foreground)] disabled:border-[var(--border)]/30"
        />
        {errors.description && (
          <p className="text-xs font-mono text-red-400 flex items-center gap-1">
            <span className="text-red-500">⚠</span>
            {errors.description}
          </p>
        )}
      </div>

      {/* Priorité et Statut */}
      <div className="grid grid-cols-2 gap-4">
        <div className="space-y-2">
          <div className="flex items-center gap-2">
            <label className="block text-sm font-mono font-medium text-[var(--muted-foreground)] uppercase tracking-wider">
              Priorité
            </label>
            {isPriorityReadonly && (
              <span className="text-xs text-[var(--muted-foreground)] italic">
                {getSyncMessage('priority')}
              </span>
            )}
          </div>
          <select
            value={priority}
            onChange={(e) => onPriorityChange(e.target.value as TaskPriority)}
            disabled={loading || isPriorityReadonly}
            className="w-full px-3 py-2 bg-[var(--input)] border border-[var(--border)]/50 rounded-lg text-[var(--foreground)] font-mono text-sm focus:outline-none focus:ring-2 focus:ring-[var(--primary)]/50 focus:border-[var(--primary)]/50 hover:border-[var(--border)] transition-all duration-200 backdrop-blur-sm disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-[var(--card-column)] disabled:text-[var(--muted-foreground)] disabled:border-[var(--border)]/30"
          >
            {getAllPriorities().map((priorityConfig) => (
              <option key={priorityConfig.key} value={priorityConfig.key}>
                {priorityConfig.icon} {priorityConfig.label}
              </option>
            ))}
          </select>
        </div>

        <div className="space-y-2">
          <div className="flex items-center gap-2">
            <label className="block text-sm font-mono font-medium text-[var(--muted-foreground)] uppercase tracking-wider">
              Statut
            </label>
            {isStatusReadonly && (
              <span className="text-xs text-[var(--muted-foreground)] italic">
                {getSyncMessage('status')}
              </span>
            )}
          </div>
          <select
            value={status}
            onChange={(e) => onStatusChange(e.target.value as TaskStatus)}
            disabled={loading || isStatusReadonly}
            className="w-full px-3 py-2 bg-[var(--input)] border border-[var(--border)]/50 rounded-lg text-[var(--foreground)] font-mono text-sm focus:outline-none focus:ring-2 focus:ring-[var(--primary)]/50 focus:border-[var(--primary)]/50 hover:border-[var(--border)] transition-all duration-200 backdrop-blur-sm disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-[var(--card-column)] disabled:text-[var(--muted-foreground)] disabled:border-[var(--border)]/30"
          >
            {getAllStatuses().map((statusConfig) => (
              <option key={statusConfig.key} value={statusConfig.key}>
                {statusConfig.label}
              </option>
            ))}
          </select>
        </div>
      </div>

      {/* Date d'échéance */}
      <div>
        <div className="flex items-center gap-2 mb-2">
          <label className="block text-sm font-medium text-[var(--foreground)]">
            Date d&apos;échéance
          </label>
          {isDueDateReadonly && (
            <span className="text-xs text-[var(--muted-foreground)] italic">
              {getSyncMessage('dueDate')}
            </span>
          )}
        </div>
        <DateTimeInput
          value={ensureDate(dueDate) ?? undefined}
          onChange={(newDate) => onDueDateChange(newDate)}
          disabled={loading || isDueDateReadonly}
          placeholder="Sélectionner une date d'échéance..."
        />
      </div>
    </>
  );
}
