export default function SequenceList({ sequences, loading, error, onCreate, onEdit, onDelete, onRefresh }) {
  if (loading) {
    return (
      <div className="flex items-center justify-center py-24">
        <div className="text-center">
          <div className="w-10 h-10 border-4 border-indigo-200 border-t-indigo-600 rounded-full animate-spin mx-auto mb-4"></div>
          <p className="text-slate-500 text-sm">Loading sequences...</p>
        </div>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h2 className="text-2xl font-bold text-slate-900">Email Sequences</h2>
          <p className="text-slate-500 text-sm mt-1">Automated multi-step recovery campaigns</p>
        </div>
        <button
          onClick={onCreate}
          className="inline-flex items-center gap-2 bg-indigo-600 hover:bg-indigo-700 text-white font-semibold px-5 py-2.5 rounded-lg transition-colors shadow-sm"
        >
          <span>+</span> New Sequence
        </button>
      </div>

      {error && (
        <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg text-sm">
          {error}
          <button onClick={onRefresh} className="ml-3 underline font-medium">Retry</button>
        </div>
      )}

      {sequences.length === 0 ? (
        <div style={{ background: '#fff', border: '2px dashed #cbd5e1', borderRadius: '16px', padding: '4rem 2rem', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', textAlign: 'center' }}>
          <div style={{ fontSize: '3rem', marginBottom: '1rem', lineHeight: 1 }}>📧</div>
          <h3 style={{ fontSize: '1.125rem', fontWeight: 700, color: '#1e293b', margin: '0 0 0.5rem 0' }}>No sequences yet</h3>
          <p style={{ fontSize: '0.875rem', color: '#64748b', marginBottom: '1.5rem', maxWidth: '340px', lineHeight: 1.6 }}>
            Create your first recovery sequence. The default is 3 emails: 1h, 24h, and 3 days after abandonment.
          </p>
          <button
            onClick={onCreate}
            style={{ background: '#4f46e5', color: '#fff', fontWeight: 600, fontSize: '0.875rem', padding: '0.625rem 1.5rem', borderRadius: '8px', border: 'none', cursor: 'pointer' }}
            onMouseEnter={e => e.currentTarget.style.background = '#4338ca'}
            onMouseLeave={e => e.currentTarget.style.background = '#4f46e5'}
          >
            Create First Sequence
          </button>
        </div>
      ) : (
        <div className="space-y-3">
          {sequences.map((seq) => {
            const stepsCount = Array.isArray(seq.steps) ? seq.steps.length : 0;
            return (
              <div
                key={seq.id}
                className="bg-white border border-slate-200 rounded-xl p-5 flex items-center gap-4 hover:shadow-sm transition-shadow"
              >
                <div className="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center flex-shrink-0 text-indigo-600 font-bold text-sm">
                  {stepsCount}
                </div>
                <div className="flex-1 min-w-0">
                  <div className="flex items-center gap-2 flex-wrap">
                    <h3 className="font-semibold text-slate-900 text-sm">{seq.name}</h3>
                    <span className={`text-[11px] font-semibold px-2 py-0.5 rounded-full ${
                      seq.status === 'active'
                        ? 'bg-emerald-100 text-emerald-700'
                        : seq.status === 'paused'
                        ? 'bg-amber-100 text-amber-700'
                        : 'bg-slate-100 text-slate-600'
                    }`}>
                      {seq.status || 'active'}
                    </span>
                  </div>
                  {seq.description && (
                    <p className="text-xs text-slate-500 mt-0.5 truncate">{seq.description}</p>
                  )}
                  <p className="text-xs text-slate-400 mt-1">
                    Trigger: {seq.trigger_delay} min after abandonment · Created {new Date(seq.created_at).toLocaleDateString()}
                  </p>
                </div>
                <div className="flex items-center gap-2 flex-shrink-0">
                  <button
                    onClick={() => onEdit(seq)}
                    className="text-sm text-indigo-600 hover:text-indigo-800 font-medium px-3 py-1.5 rounded-lg hover:bg-indigo-50 transition-colors"
                  >
                    Edit
                  </button>
                  <button
                    onClick={() => onDelete(seq.id)}
                    className="text-sm text-red-500 hover:text-red-700 font-medium px-3 py-1.5 rounded-lg hover:bg-red-50 transition-colors"
                  >
                    Delete
                  </button>
                </div>
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}