import React, { useState, useEffect } from 'react';
import { useParams, Link } from 'react-router-dom';
import { api } from '../../api/client';

export const TaskDetail: React.FC = () => {
  const { id } = useParams<{ id: string }>();
  const [Task, setTask] = useState<any>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const loadTask = async () => {
      if (!id) return;
      try {
        const data = await api.Task.get(id);
        setTask(data);
      } catch (error) {
        console.error('Failed to load Task:', error);
      } finally {
        setLoading(false);
      }
    };
    loadTask();
  }, [id]);

  if (loading) return <div>Loading...</div>;
  if (!Task) return <div>Not found</div>;

  return (
    <div className="container mx-auto p-4">
      <div className="flex justify-between items-center mb-4">
        <h1 className="text-2xl font-bold">Task Details</h1>
        <Link to={`/Tasks/${id}/edit`} className="btn btn-primary">Edit</Link>
      </div>
      <div className="card p-6">
        <div className="mb-2">
          <strong>{fieldName}:</strong> {Task.title}
        </div>
        <div className="mb-2">
          <strong>{fieldName}:</strong> {Task.description}
        </div>
        <div className="mb-2">
          <strong>{fieldName}:</strong> {Task.status}
        </div>
        <div className="mb-2">
          <strong>{fieldName}:</strong> {Task.assigned_to_id}
        </div>
        <div className="mb-2">
          <strong>{fieldName}:</strong> {Task.due_date}
        </div>
      </div>
    </div>
  );
};
