import { useEffect, useState } from 'react';
import { ListChecks } from 'lucide-react';
import PageHeader from '@/components/workshop/PageHeader';
import LoadingPanel from '@/components/workshop/LoadingPanel';
import StatusPill from '@/components/workshop/StatusPill';
import { useAccount } from '@/lib/AccountContext';
import { adapters } from '@/services/serviceConfig';

export default function BuilderTasks() {
  const { account } = useAccount();
  const [assignments, setAssignments] = useState(null);
  useEffect(() => {
    if (!account) return;
    adapters.database.filter('ProjectAssignment', { user_id: account.user_id }).then(setAssignments);
  }, [account]);
  if (!account) return <LoadingPanel label="Loading" />;
  if (!assignments) return <LoadingPanel label="Loading tasks" />;
  return (
    <>
      <PageHeader eyebrow="Builder" title="My Tasks" description="All tasks assigned to you across projects." />
      {assignments.length === 0 ? <p className="text-sm text-shire-text-muted">No tasks assigned.</p> : (
        <div className="space-y-2">
          {assignments.map(a => (
            <div key={a.uuid} className="panel flex items-center justify-between p-4">
              <div className="flex items-center gap-3"><ListChecks className="h-5 w-5 text-violet-300" />
                <div><div className="text-sm font-medium text-slate-200">{a.project_id}</div><div className="text-xs text-shire-text-muted">{a.assignment_type.replace('_', ' ')} · {a.assigned_by_name}</div></div>
              </div>
              <div className="flex items-center gap-3">
                {a.due_date && <span className="text-xs text-amber-300">due {new Date(a.due_date).toLocaleDateString()}</span>}
                <StatusPill tone={a.status === 'Complete' ? 'green' : a.status === 'Blocked' ? 'red' : 'amber'}>{a.status}</StatusPill>
              </div>
            </div>
          ))}
        </div>
      )}
    </>
  );
}