import { useEffect, useState } from 'react';
import { api } from '../api';
import type { FileRecord, Message, Task } from '../types';

export default function TaskDetail({ taskId, onBack }: { taskId: string; onBack: () => void }) {
  const [task, setTask] = useState<Task | null>(null);
  const [messages, setMessages] = useState<Message[]>([]);
  const [files, setFiles] = useState<FileRecord[]>([]);
  const [reply, setReply] = useState('');
  const [newFileName, setNewFileName] = useState('');
  const [newFileContent, setNewFileContent] = useState('');

  async function load() {
    const data = await api.getTask(taskId);
    setTask(data.task);
    setMessages(data.messages);
    setFiles(data.files);
  }

  useEffect(() => {
    load();
    const interval = setInterval(load, 4000);
    return () => clearInterval(interval);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [taskId]);

  async function sendReply() {
    if (!reply.trim()) return;
    await api.postMessage(taskId, reply.trim());
    setReply('');
    load();
  }

  async function uploadFile() {
    if (!newFileName.trim()) return;
    await api.uploadTextFile(taskId, newFileName.trim(), newFileContent);
    setNewFileName('');
    setNewFileContent('');
    load();
  }

  if (!task) return <p>...جاري التحميل / Loading</p>;

  return (
    <div>
      <a className="back" href="#" onClick={(e) => { e.preventDefault(); onBack(); }}>
        ← رجوع للوحة / Back to board
      </a>
      <h2>{task.title}</h2>
      <p>
        <span className="badge">{task.department}</span>{' '}
        <span className="badge">{task.status}</span>{' '}
        <span className="badge">{task.priority}</span>
      </p>
      <p style={{ whiteSpace: 'pre-wrap', color: '#cfd3da' }}>{task.description}</p>

      <h3>المحادثة / Conversation</h3>
      <div className="thread">
        {messages.map((m) => (
          <div className="msg" key={m.id}>
            <div className="sender">{m.sender} · {new Date(m.created_at).toLocaleString()}</div>
            <div style={{ whiteSpace: 'pre-wrap' }}>{m.body}</div>
          </div>
        ))}
        {messages.length === 0 && <p style={{ color: '#9aa1ad' }}>لا رسائل بعد / No messages yet</p>}
      </div>
      <div>
        <textarea rows={3} placeholder="اكتب رداً أو تعليمة... / Write a reply or instruction..." value={reply} onChange={(e) => setReply(e.target.value)} />
        <button className="primary" onClick={sendReply}>إرسال / Send</button>
      </div>

      <h3 style={{ marginTop: 24 }}>الملفات / Files</h3>
      <div className="files-list">
        {files.map((f) => (
          <div key={f.id}>
            <a href={api.fileUrl(taskId, f.filename)} target="_blank" rel="noreferrer">{f.filename}</a>
            {' '}<span className="meta" style={{ color: '#9aa1ad' }}>({f.uploaded_by})</span>
          </div>
        ))}
        {files.length === 0 && <p style={{ color: '#9aa1ad' }}>لا ملفات بعد / No files yet</p>}
      </div>
      <div style={{ marginTop: 12 }}>
        <label>إضافة ملف نصي / Add a text file</label>
        <input placeholder="filename.md" value={newFileName} onChange={(e) => setNewFileName(e.target.value)} />
        <textarea rows={4} placeholder="محتوى الملف / File content" value={newFileContent} onChange={(e) => setNewFileContent(e.target.value)} />
        <button className="secondary" onClick={uploadFile}>رفع / Upload</button>
      </div>
    </div>
  );
}