import { FileSignature } from 'lucide-react';
import { AppLayout } from '@/components/layout';
import { StatusBadge } from '@/components/status-badge';

const agreements = [
  { id: 'A-001', name: 'W-9', type: 'Contractor tax form', status: 'In Progress', action: 'Continue Signature' },
  { id: 'A-002', name: 'Independent Contractor Agreement', type: 'Agreement', status: 'Not Started', action: 'Start Signature' },
  { id: 'A-003', name: 'Direct Deposit / ACH Authorization', type: 'Payroll', status: 'Not Started', action: 'Start Signature' },
  { id: 'A-004', name: 'Safety Acknowledgment', type: 'Safety', status: 'Not Started', action: 'Start Signature' }
];

export default function SignaturesPage() {
  return (
    <AppLayout>
      <div className="page-title">
        <div>
          <h2>Adobe Signatures</h2>
          <p>Start or continue required Adobe Acrobat Sign agreements. Completion should be updated only from Adobe status confirmation.</p>
        </div>
      </div>

      <div className="grid grid-2">
        {agreements.map(item => (
          <div className="card" key={item.id}>
            <FileSignature size={32} />
            <h3>{item.name}</h3>
            <p>{item.type}</p>
            <div style={{ display: 'flex', justifyContent: 'space-between', gap: 12, alignItems: 'center', flexWrap: 'wrap' }}>
              <StatusBadge status={item.status} />
              <button className="btn btn-blue">{item.action}</button>
            </div>
          </div>
        ))}
      </div>

      <div className="notice" style={{ marginTop: 22 }}>
        Production note: clicking Start Signature should call a Power Automate HTTP trigger or API route, create the Adobe agreement, store AdobeAgreementID in SharePoint, then redirect the candidate to Adobe.
      </div>
    </AppLayout>
  );
}