import React, { useEffect, useState } from 'react';

type TaskRecord = {
    id: string;
    title: string;
    description: string | null;
    status: string;
    priority: string;
    dueAt: string | null;
    isOverdue: boolean;
    assignee: string;
};

type TasksBootstrap = {
    companyName: string;
    tasksEndpoint: string;
};

export function TasksWorkspace({ bootstrap }: { bootstrap: TasksBootstrap }) {
    const [tasks, setTasks] = useState<TaskRecord[]>([]);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        async function loadTasks() {
            const response = await fetch(bootstrap.tasksEndpoint, {
                credentials: 'same-origin',
                headers: { Accept: 'application/json' },
            });

            const json = await response.json();
            setTasks(json.data ?? []);
            setLoading(false);
        }

        void loadTasks();
    }, [bootstrap.tasksEndpoint]);

    return (
        <div className="space-y-6">
            <section className="rounded-[30px] border border-slate-200/80 bg-white p-8 shadow-[0_20px_80px_-40px_rgba(15,23,42,0.35)]">
                <p className="text-sm font-semibold uppercase tracking-[0.2em] text-emerald-600">Tasks</p>
                <h2 className="mt-2 text-3xl font-semibold tracking-tight text-slate-950">Follow-through workspace</h2>
                <p className="mt-3 max-w-3xl text-sm leading-7 text-slate-600">
                    Task records keep follow-up disciplined after conversation, lead, quote, and order actions. This is the operational bridge that reduces dropped opportunities.
                </p>
            </section>

            <section className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
                {tasks.map((task) => (
                    <div key={task.id} className="rounded-[28px] border border-slate-200/80 bg-white p-5 shadow-[0_20px_80px_-40px_rgba(15,23,42,0.35)]">
                        <div className="flex items-start justify-between gap-3">
                            <div>
                                <p className="text-lg font-semibold text-slate-950">{task.title}</p>
                                <p className="mt-2 text-sm leading-6 text-slate-500">{task.description ?? 'No description'}</p>
                            </div>
                            <span className={`rounded-full px-2.5 py-1 text-xs font-semibold ${task.isOverdue ? 'bg-rose-100 text-rose-700' : 'bg-amber-100 text-amber-700'}`}>
                                {task.priority}
                            </span>
                        </div>

                        <div className="mt-5 space-y-2 text-sm text-slate-600">
                            <p><span className="font-semibold text-slate-900">Assignee:</span> {task.assignee}</p>
                            <p><span className="font-semibold text-slate-900">Due:</span> {task.dueAt ?? 'No due date'}</p>
                            <p><span className="font-semibold text-slate-900">Status:</span> {task.status}</p>
                        </div>
                    </div>
                ))}
                {loading ? <div className="rounded-[28px] border border-slate-200/80 bg-white p-5 text-sm text-slate-500 shadow-[0_20px_80px_-40px_rgba(15,23,42,0.35)]">Loading tasks...</div> : null}
            </section>
        </div>
    );
}

export type { TasksBootstrap };
