import React, { useState, useEffect } from 'react';
import { BuildingTask, User, Employee, Building, TaskComment } from '../types';
import { X, User as UserIcon, Calendar, Flag, MessageSquare } from 'lucide-react';
import { backendApi } from '../services/apiClient';
import { storageService } from '../services/storageService';
import { MOCK_EMPLOYEES } from '../constants';

interface DashboardTaskModalProps {
  isOpen: boolean;
  onClose: () => void;
  onSave: (task: BuildingTask) => void;
  currentUser: User;
  task?: BuildingTask | null;
}

/** Модалка задачи на сводке — без фото отчёта, ответственные из списка сотрудников */
export const DashboardTaskModal: React.FC<DashboardTaskModalProps> = ({
  isOpen,
  onClose,
  onSave,
  currentUser,
  task,
}) => {
  const [title, setTitle] = useState('');
  const [description, setDescription] = useState('');
  const [deadline, setDeadline] = useState('');
  const [priority, setPriority] = useState<BuildingTask['priority']>('medium');
  const [status, setStatus] = useState<BuildingTask['status']>('new');
  const [assignedTo, setAssignedTo] = useState('');
  const [createdBy, setCreatedBy] = useState('');
  const [buildingId, setBuildingId] = useState('');
  const [employees, setEmployees] = useState<Employee[]>([]);
  const [employeesLoading, setEmployeesLoading] = useState(false);
  const [buildings, setBuildings] = useState<Building[]>([]);
  const [comments, setComments] = useState<TaskComment[]>([]);
  const [commentText, setCommentText] = useState('');
  const [draftTaskId, setDraftTaskId] = useState<string | null>(null);

  useEffect(() => {
    if (!isOpen) return;
    const load = async () => {
      setEmployeesLoading(true);
      try {
        const [empList, bldList] = await Promise.all([
          backendApi.getEmployees().then((l) => (Array.isArray(l) ? l : [])).catch(() => MOCK_EMPLOYEES),
          backendApi.getBuildings().catch(() => storageService.getAllBuildings()),
        ]);
        setEmployees(empList);
        setBuildings(Array.isArray(bldList) ? bldList : storageService.getAllBuildings());
      } catch {
        setEmployees(MOCK_EMPLOYEES);
        setBuildings(storageService.getAllBuildings());
      } finally {
        setEmployeesLoading(false);
      }
    };
    load();
  }, [isOpen]);

  useEffect(() => {
    if (!isOpen) return;
    if (task) {
      setTitle(task.title || '');
      setDescription(task.description || '');
      setDeadline(task.deadline ? new Date(task.deadline).toISOString().slice(0, 10) : '');
      setPriority(task.priority || 'medium');
      setStatus(task.status || 'new');
      setAssignedTo(task.assignedTo || '');
      setCreatedBy(task.createdBy ?? currentUser.id);
      setBuildingId(task.buildingId || '');
      setComments(task.comments ?? []);
      setDraftTaskId(null);
    } else {
      setTitle('');
      setDescription('');
      const d = new Date();
      d.setDate(d.getDate() + 7);
      setDeadline(d.toISOString().slice(0, 10));
      setPriority('medium');
      setStatus('new');
      setAssignedTo('');
      setCreatedBy(currentUser.id);
      setBuildingId('');
      setComments([]);
      setDraftTaskId(`dt-${Date.now()}`);
    }
    setCommentText('');
  }, [isOpen, task, currentUser.id]);

  const assigneeList: { id: string; name: string; position: string }[] = [
    { id: currentUser.id, name: currentUser.name, position: '' },
    ...employees.filter((e) => e.id !== currentUser.id).map((e) => ({ id: e.id, name: e.name, position: e.position })),
  ];
  if (task?.createdBy && !assigneeList.some((p) => p.id === task.createdBy)) {
    assigneeList.push({ id: task.createdBy, name: task.createdByName ?? task.createdBy, position: '' });
  }
  const executorList = employees.filter((e) => e.status === 'active');
  if (task?.assignedTo && !executorList.some((e) => e.id === task.assignedTo)) {
    executorList.push({ id: task.assignedTo, name: task.assignedToName ?? task.assignedTo, position: '' } as Employee);
  }
  const selectedBuilding = buildings.find((b) => b.id === buildingId);
  const buildingAddress = selectedBuilding?.passport?.address ?? '';

  const buildTaskData = (commentsOverride?: TaskComment[]) => {
    const now = new Date().toISOString();
    const exec = executorList.find((e) => e.id === assignedTo);
    const author = assigneeList.find((p) => p.id === createdBy);
    const taskId = task?.id ?? draftTaskId ?? `dt-${Date.now()}`;
    return {
      id: taskId,
      title: title.trim() || 'Задача',
      description: description.trim() || undefined,
      deadline: deadline ? new Date(deadline).toISOString() : now,
      status,
      priority,
      assignedTo: assignedTo || undefined,
      assignedToName: exec?.name ?? (assignedTo && task?.assignedTo === assignedTo ? task?.assignedToName : undefined),
      createdBy: createdBy || undefined,
      createdByName: author?.name ?? (createdBy && task?.createdBy === createdBy ? task?.createdByName : undefined),
      createdAt: task?.createdAt || now,
      updatedAt: now,
      buildingId: buildingId || '',
      buildingAddress: buildingId ? buildingAddress : undefined,
      requirePhotoReport: false,
      coAssignees: [],
      coAssigneesNames: [],
      observers: [],
      observersNames: [],
      comments: commentsOverride ?? comments,
    } as BuildingTask;
  };

  const handleAddComment = () => {
    if (!commentText.trim()) return;
    const author = assigneeList.find((p) => p.id === createdBy)?.name ?? currentUser.name;
    const newComment: TaskComment = {
      id: `comment-${Date.now()}`,
      authorId: createdBy || undefined,
      authorName: author,
      text: commentText.trim(),
      createdAt: new Date().toISOString(),
    };
    const nextComments = [...comments, newComment];
    setComments(nextComments);
    setCommentText('');
    onSave(buildTaskData(nextComments));
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!title.trim()) return;
    onSave(buildTaskData());
    onClose();
  };

  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-[100] p-4" onClick={onClose}>
      <div className="bg-white rounded-2xl shadow-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto" onClick={(e) => e.stopPropagation()}>
        <div className="sticky top-0 bg-white border-b border-slate-200 p-6 flex items-center justify-between rounded-t-2xl z-10">
          <h2 className="text-xl font-bold text-slate-800">{task ? 'Редактировать задачу' : 'Новая задача'}</h2>
          <button type="button" onClick={onClose} className="p-2 hover:bg-slate-100 rounded-lg transition-colors">
            <X className="w-5 h-5 text-slate-500" />
          </button>
        </div>

        <form onSubmit={handleSubmit} className="p-6 space-y-6">
          <div>
            <label className="block text-sm font-bold text-slate-700 mb-2">Название задачи *</label>
            <input
              type="text"
              value={title}
              onChange={(e) => setTitle(e.target.value)}
              className="w-full border border-slate-200 rounded-xl px-4 py-2 focus:ring-2 focus:ring-primary-500 outline-none"
              required
            />
          </div>

          <div>
            <label className="block text-sm font-bold text-slate-700 mb-2">Описание</label>
            <textarea
              value={description}
              onChange={(e) => setDescription(e.target.value)}
              rows={3}
              className="w-full border border-slate-200 rounded-xl px-4 py-2 focus:ring-2 focus:ring-primary-500 outline-none resize-none"
            />
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-bold text-slate-700 mb-2 flex items-center gap-2">
                <Calendar className="w-4 h-4" /> Срок *
              </label>
              <input
                type="date"
                value={deadline}
                onChange={(e) => setDeadline(e.target.value)}
                className="w-full border border-slate-200 rounded-xl px-4 py-2 focus:ring-2 focus:ring-primary-500 outline-none"
                required
              />
            </div>
            <div>
              <label className="block text-sm font-bold text-slate-700 mb-2 flex items-center gap-2">
                <Flag className="w-4 h-4" /> Приоритет
              </label>
              <select
                value={priority}
                onChange={(e) => setPriority(e.target.value as BuildingTask['priority'])}
                className="w-full border border-slate-200 rounded-xl px-4 py-2 focus:ring-2 focus:ring-primary-500 outline-none"
              >
                <option value="low">Низкий</option>
                <option value="medium">Средний</option>
                <option value="high">Высокий</option>
                <option value="urgent">Срочный</option>
              </select>
            </div>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-bold text-slate-700 mb-2 flex items-center gap-2">
                <UserIcon className="w-4 h-4" /> Исполнитель
              </label>
              <select
                value={assignedTo}
                onChange={(e) => setAssignedTo(e.target.value)}
                className="w-full border border-slate-200 rounded-xl px-4 py-2 focus:ring-2 focus:ring-primary-500 outline-none"
                disabled={employeesLoading}
              >
                <option value="">Не назначен</option>
                {executorList.map((emp) => (
                  <option key={emp.id} value={emp.id}>
                    {emp.name} {emp.position ? `— ${emp.position}` : ''}
                  </option>
                ))}
              </select>
            </div>
            <div>
              <label className="block text-sm font-bold text-slate-700 mb-2">Постановщик</label>
              <select
                value={createdBy}
                onChange={(e) => setCreatedBy(e.target.value)}
                className="w-full border border-slate-200 rounded-xl px-4 py-2 focus:ring-2 focus:ring-primary-500 outline-none"
                disabled={employeesLoading}
              >
                {assigneeList.map((p) => (
                  <option key={p.id} value={p.id}>
                    {p.id === currentUser.id ? `Я (${p.name})` : p.name + (p.position ? ` — ${p.position}` : '')}
                  </option>
                ))}
              </select>
            </div>
          </div>

          <div>
            <label className="block text-sm font-bold text-slate-700 mb-2">Дом / объект</label>
            <select
              value={buildingId}
              onChange={(e) => setBuildingId(e.target.value)}
              className="w-full border border-slate-200 rounded-xl px-4 py-2 focus:ring-2 focus:ring-primary-500 outline-none"
            >
              <option value="">Общая задача</option>
              {buildings.map((b) => (
                <option key={b.id} value={b.id}>
                  {b.passport?.address ?? b.id}
                </option>
              ))}
            </select>
          </div>

          <div>
            <label className="block text-sm font-bold text-slate-700 mb-2">Статус</label>
            <select
              value={status}
              onChange={(e) => setStatus(e.target.value as BuildingTask['status'])}
              className="w-full border border-slate-200 rounded-xl px-4 py-2 focus:ring-2 focus:ring-primary-500 outline-none"
            >
              <option value="new">Новая</option>
              <option value="in_progress">В работе</option>
              <option value="done">Выполнена</option>
              <option value="cancelled">Отменена</option>
            </select>
          </div>

          <div>
            <label className="block text-sm font-bold text-slate-700 mb-2 flex items-center gap-2">
              <MessageSquare className="w-4 h-4" /> Комментарии
            </label>
            {comments.length > 0 && (
              <ul className="space-y-2 mb-3 max-h-32 overflow-y-auto rounded-xl border border-slate-100 p-3 bg-slate-50">
                {comments.map((c) => (
                  <li key={c.id} className="text-sm text-slate-700">
                    <span className="font-bold text-slate-500">{c.authorName}:</span> {c.text}
                  </li>
                ))}
              </ul>
            )}
            <div className="flex gap-2">
              <input
                type="text"
                value={commentText}
                onChange={(e) => setCommentText(e.target.value)}
                onKeyDown={(e) => e.key === 'Enter' && (e.preventDefault(), handleAddComment())}
                placeholder="Добавить комментарий..."
                className="flex-1 border border-slate-200 rounded-xl px-4 py-2 focus:ring-2 focus:ring-primary-500 outline-none text-sm"
              />
              <button
                type="button"
                onClick={handleAddComment}
                className="px-4 py-2 bg-primary-600 text-white rounded-xl font-bold hover:bg-primary-700 transition-colors text-sm shrink-0"
              >
                Добавить
              </button>
            </div>
          </div>

          <p className="text-[10px] text-slate-400">
            Фото отчёт для задач на сводке не требуется. Для задач с фото отчётом создайте задачу в карточке дома.
          </p>

          <div className="flex gap-3 pt-2">
            <button
              type="button"
              onClick={onClose}
              className="flex-1 py-3 border border-slate-200 rounded-xl font-bold text-slate-600 hover:bg-slate-50"
            >
              Отмена
            </button>
            <button type="submit" className="flex-1 py-3 bg-primary-600 text-white rounded-xl font-bold hover:bg-primary-700">
              {task ? 'Сохранить' : 'Создать'}
            </button>
          </div>
        </form>
      </div>
    </div>
  );
};